chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add item styles, add color converter.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

20
demo/Ursa.Demo/Pages/TimelineDemo.axaml
View File

@@ -16,9 +16,23 @@
</UserControl.Resources>
<StackPanel>
<u:Timeline>
<u:TimelineItem Content="Start" Time="2022-01-01" />
<u:TimelineItem Content="In between" Time="2022-01-02" />
<u:TimelineItem Content="Finished" Time="2022-01-03" />
<u:TimelineItem
Content="Start"
ItemType="Warning"
Time="2022-01-01" />
<u:TimelineItem
Content="In between"
ItemType="Ongoing"
Time="2022-01-02" />
<u:TimelineItem
Content="Finished"
ItemType="Error"
Time="2022-01-03" />
<u:TimelineItem
Content="Finished"
IconForeground="Yellow"
ItemType="Default"
Time="2022-01-03" />
</u:Timeline>
<u:Timeline HorizontalAlignment="Left" ItemsSource="{Binding Items}">
<u:Timeline.ItemTemplate>

42
src/Ursa.Themes.Semi/Controls/Timeline.axaml
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" />
<Panel Grid.Row="1">
<Ellipse
Grid.Row="1"
Width="8"
Height="8"
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Fill="LightGray" />
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}"

82
src/Ursa.Themes.Semi/Converters/TimelineItemTypeToIconForegroundConverter.cs Normal file
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;
}
}

8
src/Ursa.Themes.Semi/Themes/Light/Timeline.axaml Normal file
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>

1
src/Ursa.Themes.Semi/Themes/Light/_index.axaml
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>

43
src/Ursa/Controls/Timeline/TimelineItem.cs
View File

@@ -8,11 +8,25 @@ using Avalonia.Media;
namespace Ursa.Controls;
[PseudoClasses(PC_First, PC_Last)]
[PseudoClasses(PC_First, PC_Last, PC_Default, PC_Ongoing, PC_Success, PC_Warning, PC_Error)]
public class TimelineItem: ContentControl
{
public const string PC_First = ":first";
public const string PC_Last = ":last";
private const string PC_First = ":first";
private const string PC_Last = ":last";
private const string PC_Default = ":default";
private const string PC_Ongoing = ":ongoing";
private const string PC_Success = ":success";
private const string PC_Warning = ":warning";
private const string PC_Error = ":error";
private static readonly IReadOnlyDictionary<TimelineItemType, string> _itemTypeMapping = new Dictionary<TimelineItemType, string>
{
{TimelineItemType.Default, PC_Default},
{TimelineItemType.Ongoing, PC_Ongoing},
{TimelineItemType.Success, PC_Success},
{TimelineItemType.Warning, PC_Warning},
{TimelineItemType.Error, PC_Error},
};
public static readonly StyledProperty<IBrush> IconForegroundProperty =
AvaloniaProperty.Register<TimelineItem, IBrush>(nameof(IconForeground));
@@ -49,9 +63,32 @@ public class TimelineItem: ContentControl
set => SetValue(DescriptionTemplateProperty, value);
}
public static readonly StyledProperty<TimelineItemType> ItemTypeProperty = AvaloniaProperty.Register<TimelineItem, TimelineItemType>(
nameof(ItemType));
public TimelineItemType ItemType
{
get => GetValue(ItemTypeProperty);
set => SetValue(ItemTypeProperty, value);
}
internal void SetIndex(bool isFirst, bool isLast)
{
PseudoClasses.Set(PC_First, isFirst);
PseudoClasses.Set(PC_Last, isLast);
}
static TimelineItem()
{
ItemTypeProperty.Changed.AddClassHandler<TimelineItem>((o, e) => { o.OnItemTypeChanged(e); });
}
private void OnItemTypeChanged(AvaloniaPropertyChangedEventArgs args)
{
var oldValue = args.GetOldValue<TimelineItemType>();
var newValue = args.GetNewValue<TimelineItemType>();
PseudoClasses.Set(_itemTypeMapping[oldValue], false);
PseudoClasses.Set(_itemTypeMapping[newValue], true);
}
}

1
src/Ursa/Controls/Timeline/TimelineItemType.cs
View File

@@ -2,7 +2,6 @@ namespace Ursa.Controls;
public enum TimelineItemType
{
None,
Default,
Ongoing,
Success,