feat: add item styles, add color converter.

This commit is contained in:
rabbitism
2023-04-24 22:41:01 +08:00
parent 2a38bb09a2
commit 6e5b3012dc
7 changed files with 183 additions and 24 deletions

View File

@@ -1,6 +1,7 @@
<ResourceDictionary
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:Ursa.Themes.Semi.Converters"
xmlns:u="https://irihi.tech/ursa">
<Design.PreviewWith>
<StackPanel Width="100" Spacing="20">
@@ -22,48 +23,64 @@
</Setter>
</ControlTheme>
<converters:TimelineItemTypeToIconForegroundConverter
x:Key="ForegroundConverter"
DefaultBrush="{DynamicResource DefaultTimelineIconForeground}"
ErrorBrush="{DynamicResource ErrorTimelineIconForeground}"
OngoingBrush="{DynamicResource OngoingTimelineIconForeground}"
SuccessBrush="{DynamicResource SuccessTimelineIconForeground}"
WarningBrush="{DynamicResource WarningTimelineIconForeground}" />
<ControlTheme x:Key="{x:Type u:TimelineItem}" TargetType="u:TimelineItem">
<Setter Property="u:TimelineItem.Template">
<ControlTemplate TargetType="u:TimelineItem">
<Grid ColumnDefinitions="Auto, *" RowDefinitions="*, Auto, *">
<Rectangle
Grid.Row="2"
Grid.Column="0"
Width="1"
VerticalAlignment="Stretch"
Classes="end"
Fill="LightGray" />
<Grid
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Width="16"
RowDefinitions="Auto, Auto, *">
<Rectangle
Grid.Row="0"
Grid.Column="0"
Width="1"
Height="8"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Classes="start"
Fill="LightGray" />
<Ellipse
Grid.Row="1"
Width="8"
Height="8"
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Fill="LightGray" />
<Panel Grid.Row="1">
<Ellipse
Width="8"
Height="8"
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<Ellipse.Fill>
<MultiBinding Converter="{StaticResource ForegroundConverter}">
<Binding Path="ItemType" RelativeSource="{RelativeSource TemplatedParent}" />
<Binding Path="IconForeground" RelativeSource="{RelativeSource TemplatedParent}" />
</MultiBinding>
</Ellipse.Fill>
</Ellipse>
</Panel>
<Rectangle
Grid.Row="2"
Grid.Column="0"
Width="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Classes="end"
Fill="LightGray" />
</Grid>
<Rectangle
Grid.Row="2"
Grid.Column="0"
Width="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Classes="end"
Fill="LightGray" />
<ContentPresenter
Grid.Row="0"
Grid.Column="1"
@@ -81,6 +98,7 @@
Name="content"
Grid.Row="1"
Grid.Column="1"
Margin="0,0,0,16"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"

View File

@@ -0,0 +1,82 @@
using System.Globalization;
using Avalonia;
using Avalonia.Controls;
using Avalonia.Data.Converters;
using Avalonia.Media;
using Ursa.Controls;
namespace Ursa.Themes.Semi.Converters;
public class TimelineItemTypeToIconForegroundConverter: AvaloniaObject, IMultiValueConverter
{
public static readonly StyledProperty<IBrush> DefaultBrushProperty = AvaloniaProperty.Register<TimelineItemTypeToIconForegroundConverter, IBrush>(
nameof(DefaultBrush));
public IBrush DefaultBrush
{
get => GetValue(DefaultBrushProperty);
set => SetValue(DefaultBrushProperty, value);
}
public static readonly StyledProperty<IBrush> OngoingBrushProperty = AvaloniaProperty.Register<TimelineItemTypeToIconForegroundConverter, IBrush>(
nameof(OngoingBrush));
public IBrush OngoingBrush
{
get => GetValue(OngoingBrushProperty);
set => SetValue(OngoingBrushProperty, value);
}
public static readonly StyledProperty<IBrush> SuccessBrushProperty = AvaloniaProperty.Register<TimelineItemTypeToIconForegroundConverter, IBrush>(
nameof(SuccessBrush));
public IBrush SuccessBrush
{
get => GetValue(SuccessBrushProperty);
set => SetValue(SuccessBrushProperty, value);
}
public static readonly StyledProperty<IBrush> WarningBrushProperty = AvaloniaProperty.Register<TimelineItemTypeToIconForegroundConverter, IBrush>(
nameof(WarningBrush));
public IBrush WarningBrush
{
get => GetValue(WarningBrushProperty);
set => SetValue(WarningBrushProperty, value);
}
public static readonly StyledProperty<IBrush> ErrorBrushProperty = AvaloniaProperty.Register<TimelineItemTypeToIconForegroundConverter, IBrush>(
nameof(ErrorBrush));
public IBrush ErrorBrush
{
get => GetValue(ErrorBrushProperty);
set => SetValue(ErrorBrushProperty, value);
}
public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
{
if (values[0] is TimelineItemType type)
{
switch (type)
{
case TimelineItemType.Error:
return ErrorBrush;
case TimelineItemType.Warning:
return WarningBrush;
case TimelineItemType.Success:
return SuccessBrush;
case TimelineItemType.Ongoing:
return OngoingBrush;
case TimelineItemType.Default:
if (values[1] is IBrush brush)
{
return brush;
}
return DefaultBrush;
}
}
return AvaloniaProperty.UnsetValue;
}
}

View File

@@ -0,0 +1,8 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Add Resources Here -->
<SolidColorBrush x:Key="DefaultTimelineIconForeground" Opacity="0.13" Color="#FF2E3238" />
<SolidColorBrush x:Key="OngoingTimelineIconForeground" Color="#FF0077FA" />
<SolidColorBrush x:Key="SuccessTimelineIconForeground" Color="#FF3BB346" />
<SolidColorBrush x:Key="WarningTimelineIconForeground" Color="#FFFC8800" />
<SolidColorBrush x:Key="ErrorTimelineIconForeground" Color="#FFF93920" />
</ResourceDictionary>

View File

@@ -5,5 +5,6 @@
<MergeResourceInclude Source="Banner.axaml" />
<MergeResourceInclude Source="Divider.axaml" />
<MergeResourceInclude Source="IPv4Box.axaml" />
<MergeResourceInclude Source="Timeline.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>