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

Merge pull request #62 from irihitech/timeline

Browse Source 
Timeline refactoring
This commit is contained in:
Zhang Dian
2024-01-08 23:40:45 +08:00
committed by GitHub
parent 35b108138d 21a3eba728
commit 5cf6b8ad0f
11 changed files with 738 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo/Ursa.Demo.Desktop/Ursa.Demo.Desktop.csproj
View File

@@ -6,6 +6,7 @@
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<BuiltInComInteropSupport>true</BuiltInComInteropSupport>
<AvaloniaUseCompiledBindingsByDefault>false</AvaloniaUseCompiledBindingsByDefault>
</PropertyGroup>
<PropertyGroup>

32
demo/Ursa.Demo/Converters/TimelineIconConverter.cs Normal file
View File

@@ -0,0 +1,32 @@
using System;
using System.Globalization;
using Avalonia;
using Avalonia.Data;
using Avalonia.Data.Converters;
using Avalonia.Media;
using Ursa.Controls;
namespace Ursa.Demo.Converters;
public class TimelineIconConverter: IValueConverter
{
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
{
if (value is TimelineItemType t)
{
return t switch
{
TimelineItemType.Success => Brushes.Green,
TimelineItemType.Ongoing => Brushes.Blue,
TimelineItemType.Error => Brushes.Red,
_ => Brushes.Gray
};
}
return AvaloniaProperty.UnsetValue;
}
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}

36
demo/Ursa.Demo/Pages/IntroductionDemo.axaml
View File

@@ -144,27 +144,29 @@
IPAddress="{Binding Address}" />
<u:IPv4Box HorizontalAlignment="Stretch" IsEnabled="False" />
</StackPanel>
<u:Timeline Grid.Column="1">
<u:Timeline Grid.Column="1" HorizontalAlignment="Left" Mode="Alternate">
<u:TimelineItem
Content="ToDo"
ItemType="Default"
Time="2022-01-01" />
Content="Step 1"
Header="ToDo"
Type="Default"
Time="2023-01-14 09:24:05"/>
<u:TimelineItem
Content="Start"
ItemType="Ongoing"
Time="2022-01-02" />
Content="Step 2"
Header="Start"
Position="Right"
Type="Ongoing"
Time="2024-01-04 22:32:58"/>
<u:TimelineItem
Content="In between"
ItemType="Success"
Time="2022-01-03" />
Content="Step 3"
Header="In Between"
Type="Warning"
Time="2024-01-05 00:08:29"/>
<u:TimelineItem
Content="In between"
ItemType="Warning"
Time="2022-01-04" />
<u:TimelineItem
Content="Finished"
ItemType="Error"
Time="2022-01-05" />
Content="Step 4"
Header="Finished"
Position="Right"
Type="Success"
Time="2024-01-05 00:27:44"/>
</u:Timeline>
<StackPanel Grid.Column="2" Spacing="20">
<u:ButtonGroup Classes="Primary Solid" ItemsSource="{Binding ButtonGroupItems}" />

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

@@ -4,55 +4,84 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:selectors="clr-namespace:Ursa.Demo.TemplateSelectors"
xmlns:u="https://irihi.tech/ursa"
xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="False"
x:CompileBindings="True"
x:DataType="viewModels:TimelineDemoViewModel"
mc:Ignorable="d">
<UserControl.Resources>
<u:TimelineFormatConverter x:Key="FormatConverter" />
<ResourceDictionary>
<selectors:TimelineIconTemplateSelector x:Key="IconSelector" >
<SolidColorBrush x:Key="Default" Color="{DynamicResource SemiGray6Color}"></SolidColorBrush>
<SolidColorBrush x:Key="Ongoing" Color="{DynamicResource SemiBlue6Color}"></SolidColorBrush>
<SolidColorBrush x:Key="Success" Color="{DynamicResource SemiGreen6Color}"></SolidColorBrush>
<SolidColorBrush x:Key="Warning" Color="{DynamicResource SemiOrange6Color}"></SolidColorBrush>
<SolidColorBrush x:Key="Error" Color="{DynamicResource SemiRed6Color}"></SolidColorBrush>
</selectors:TimelineIconTemplateSelector>
</ResourceDictionary>
</UserControl.Resources>
<StackPanel>
<u:Timeline>
<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" />
<WrapPanel>
<u:Timeline
Mode="Alternate"
HorizontalAlignment="Left"
ContentMemberBinding="{ReflectionBinding Description}"
HeaderMemberBinding="{ReflectionBinding Header}"
IconMemberBinding="{ReflectionBinding ItemType}"
IconTemplate="{StaticResource IconSelector}"
ItemsSource="{Binding Items}"
TimeMemberBinding="{ReflectionBinding Time}" >
</u:Timeline>
<u:Timeline HorizontalAlignment="Left" ItemsSource="{Binding Items}">
<u:Timeline.ItemTemplate>
<DataTemplate x:DataType="viewModels:TimelineItemViewModel">
<u:TimelineItem
Content="{Binding Content}"
ItemType="{Binding ItemType}"
Time="{Binding Time}"
TimeFormat="{Binding TimeFormat}">
<u:TimelineItem.ContentTemplate>
<DataTemplate>
<TextBlock
MaxWidth="100"
Text="{Binding}"
TextWrapping="Wrap" />
</DataTemplate>
</u:TimelineItem.ContentTemplate>
</u:TimelineItem>
</DataTemplate>
</u:Timeline.ItemTemplate>
<u:Timeline
Mode="Left"
HorizontalAlignment="Left"
ContentMemberBinding="{ReflectionBinding Description}"
HeaderMemberBinding="{ReflectionBinding Header}"
IconMemberBinding="{ReflectionBinding ItemType}"
IconTemplate="{StaticResource IconSelector}"
ItemsSource="{Binding Items}"
TimeMemberBinding="{ReflectionBinding Time}" >
</u:Timeline>
</StackPanel>
<u:Timeline
Mode="Right"
HorizontalAlignment="Left"
ContentMemberBinding="{ReflectionBinding Description}"
HeaderMemberBinding="{ReflectionBinding Header}"
IconMemberBinding="{ReflectionBinding ItemType}"
IconTemplate="{StaticResource IconSelector}"
ItemsSource="{Binding Items}"
TimeMemberBinding="{ReflectionBinding Time}" >
</u:Timeline>
<u:Timeline HorizontalAlignment="Left" Mode="Alternate">
<u:TimelineItem
Content="Step 1"
Header="第一步"
Position="Left"
Type="Default" />
<u:TimelineItem
Content="Step 2"
Header="第二步"
Position="Right"
Type="Success" />
<u:TimelineItem
Content="Step 3"
Header="第三步"
Position="Separate"
Type="Warning" />
<u:TimelineItem
Content="Step 4"
Header="第四步"
Position="Separate"
Type="Ongoing" />
<u:TimelineItem
Content="Step 5"
Header="第五步"
Position="Separate"
TimeFormat="yyyy-MM-dd"
Type="Error" />
</u:Timeline>
</WrapPanel>
</UserControl>

34
demo/Ursa.Demo/TemplateSelectors/TimelineIconTemplateSelector.cs Normal file
View File

@@ -0,0 +1,34 @@
using Avalonia.Controls;
using Avalonia.Controls.Shapes;
using Avalonia.Controls.Templates;
using Avalonia.Media;
using Ursa.Controls;
namespace Ursa.Demo.TemplateSelectors;
public class TimelineIconTemplateSelector: ResourceDictionary, IDataTemplate
{
public Control? Build(object? param)
{
if (param is TimelineItemType t)
{
string s = t.ToString();
if (ContainsKey(s))
{
object? o = this[s];
if (o is SolidColorBrush c)
{
var ellipse = new Ellipse() { Width = 12, Height = 12, Fill = c };
return ellipse;
}
}
}
return null;
}
public bool Match(object? data)
{
return data is TimelineItemType;
}
}

31
demo/Ursa.Demo/ViewModels/TimelineDemoViewModel.cs
View File

@@ -11,41 +11,24 @@ public class TimelineDemoViewModel: ViewModelBase
new()
{
Time = DateTime.Now,
TimeFormat = "yyyy-MM-dd HH:mm:ss",
Description = "Item 1",
Content = "First",
Header = "审核中",
ItemType = TimelineItemType.Success,
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 2",
Content = "Content 2",
ItemType = TimelineItemType.Success,
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 3",
Content = "Content 3",
Header = "发布成功",
ItemType = TimelineItemType.Ongoing,
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 4",
Content = "Content 4"
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 5",
Content = "Content 5"
},
Description = "Item 3",
Header = "审核失败",
ItemType = TimelineItemType.Error,
}
};
}
@@ -54,6 +37,6 @@ public class TimelineItemViewModel: ObservableObject
public DateTime Time { get; set; }
public string? TimeFormat { get; set; }
public string? Description { get; set; }
public string? Content { get; set; }
public string? Header { get; set; }
public TimelineItemType ItemType { get; set; }
}