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

feat: WIP: add demo and background for layout testing.

Browse Source
This commit is contained in:
rabbitism
2023-03-23 14:53:43 +08:00
parent 0f139264cc
commit 36e3e88276
3 changed files with 105 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,18 +8,82 @@
xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
d:DesignHeight="450"
d:DesignWidth="800"
x:CompileBindings="True"
x:CompileBindings="False"
x:DataType="viewModels:TimelineDemoViewModel"
mc:Ignorable="d">
<u:Timeline ItemsSource="{Binding Items}">
<u:Timeline.ItemTemplate>
<DataTemplate x:DataType="viewModels:TimelineItemViewModel">
<u:TimelineItem
Content="{Binding Content}"
Time="{Binding Time}"
TimeFormat="{Binding TimeFormat}" />
</DataTemplate>
</u:Timeline.ItemTemplate>
</u:Timeline>
<UserControl.Resources>
<u:TimelineFormatConverter x:Key="FormatConverter" />
</UserControl.Resources>
<StackPanel>
<Grid Width="600">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Width="300"
Height="100"
Background="Red" />
<Ellipse
Grid.Column="1"
Width="8"
Height="8"
Fill="Red" />
<Border
Grid.Column="2"
Width="500"
Height="100"
Background="Green" />
</Grid>
<ItemsControl Grid.IsSharedSizeScope="True" ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" SharedSizeGroup="Left" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Line" />
<ColumnDefinition Width="1*" SharedSizeGroup="Left" />
</Grid.ColumnDefinitions>
<ContentPresenter
Grid.Column="0"
HorizontalAlignment="Stretch"
Background="Aqua"
Content="121231233" />
<Ellipse
Grid.Column="1"
Width="8"
Height="8"
Fill="Red" />
<ContentPresenter
Name="content"
Grid.Column="2"
HorizontalAlignment="Stretch"
Background="Yellow"
Content="{Binding}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<u:Timeline HorizontalAlignment="Left" ItemsSource="{Binding Items}">
<u:Timeline.ItemTemplate>
<DataTemplate x:DataType="viewModels:TimelineItemViewModel">
<u:TimelineItem
Content="{Binding Content}"
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>
</StackPanel>
</UserControl>

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

@@ -54,42 +54,42 @@ public class TimelineDemoViewModel: ObservableObject
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 7",
Content = "Content 7"
Content = "Content 71231"
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 8",
Content = "Content 8"
Content = "Content 8123123"
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 9",
Content = "Content 9"
Content = "Content 9123123"
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 10",
Content = "Content 10"
Content = "Content 1231231231231231231230"
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 11",
Content = "Content 11"
Content = "Content 11231231"
},
new()
{
Time = DateTime.Now,
TimeFormat = "HH:mm:ss",
Description = "Item 12",
Content = "Content 12"
Content = "Content 12123123123123"
},
new()
{

28
src/Ursa.Themes.Semi/Controls/Timeline.axaml
View File

@@ -27,8 +27,16 @@
<ControlTheme x:Key="{x:Type u:TimelineItem}" TargetType="u:TimelineItem">
<Setter Property="u:TimelineItem.Template">
<ControlTemplate TargetType="u:TimelineItem">
<StackPanel>
<ContentPresenter>
<Grid Background="Pink">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" SharedSizeGroup="Left" />
<ColumnDefinition Width="Auto" SharedSizeGroup="Line" />
<ColumnDefinition Width="1*" SharedSizeGroup="Left" />
</Grid.ColumnDefinitions>
<ContentPresenter
Grid.Column="0"
HorizontalAlignment="Stretch"
Background="Aqua">
<ContentPresenter.Content>
<MultiBinding Converter="{StaticResource FormatConverter}">
<Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" />
@@ -36,9 +44,19 @@
</MultiBinding>
</ContentPresenter.Content>
</ContentPresenter>
<ContentPresenter Name="content" Content="{TemplateBinding Content}" />
</StackPanel>
<Ellipse
Grid.Column="1"
Width="8"
Height="8"
Fill="Red" />
<ContentPresenter
Name="content"
Grid.Column="2"
HorizontalAlignment="Stretch"
Background="Yellow"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:first /template/ ContentPresenter#content">