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

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

@@ -8,18 +8,82 @@
xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels" xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
d:DesignHeight="450" d:DesignHeight="450"
d:DesignWidth="800" d:DesignWidth="800"
x:CompileBindings="True" x:CompileBindings="False"
x:DataType="viewModels:TimelineDemoViewModel" x:DataType="viewModels:TimelineDemoViewModel"
mc:Ignorable="d"> mc:Ignorable="d">
<UserControl.Resources>
<u:Timeline ItemsSource="{Binding Items}"> <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> <u:Timeline.ItemTemplate>
<DataTemplate x:DataType="viewModels:TimelineItemViewModel"> <DataTemplate x:DataType="viewModels:TimelineItemViewModel">
<u:TimelineItem <u:TimelineItem
Content="{Binding Content}" Content="{Binding Content}"
Time="{Binding Time}" Time="{Binding Time}"
TimeFormat="{Binding TimeFormat}" /> TimeFormat="{Binding TimeFormat}">
<u:TimelineItem.ContentTemplate>
<DataTemplate>
<TextBlock
MaxWidth="100"
Text="{Binding}"
TextWrapping="Wrap" />
</DataTemplate>
</u:TimelineItem.ContentTemplate>
</u:TimelineItem>
</DataTemplate> </DataTemplate>
</u:Timeline.ItemTemplate> </u:Timeline.ItemTemplate>
</u:Timeline> </u:Timeline>
</StackPanel>
</UserControl> </UserControl>

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

@@ -54,42 +54,42 @@ public class TimelineDemoViewModel: ObservableObject
Time = DateTime.Now, Time = DateTime.Now,
TimeFormat = "HH:mm:ss", TimeFormat = "HH:mm:ss",
Description = "Item 7", Description = "Item 7",
Content = "Content 7" Content = "Content 71231"
}, },
new() new()
{ {
Time = DateTime.Now, Time = DateTime.Now,
TimeFormat = "HH:mm:ss", TimeFormat = "HH:mm:ss",
Description = "Item 8", Description = "Item 8",
Content = "Content 8" Content = "Content 8123123"
}, },
new() new()
{ {
Time = DateTime.Now, Time = DateTime.Now,
TimeFormat = "HH:mm:ss", TimeFormat = "HH:mm:ss",
Description = "Item 9", Description = "Item 9",
Content = "Content 9" Content = "Content 9123123"
}, },
new() new()
{ {
Time = DateTime.Now, Time = DateTime.Now,
TimeFormat = "HH:mm:ss", TimeFormat = "HH:mm:ss",
Description = "Item 10", Description = "Item 10",
Content = "Content 10" Content = "Content 1231231231231231231230"
}, },
new() new()
{ {
Time = DateTime.Now, Time = DateTime.Now,
TimeFormat = "HH:mm:ss", TimeFormat = "HH:mm:ss",
Description = "Item 11", Description = "Item 11",
Content = "Content 11" Content = "Content 11231231"
}, },
new() new()
{ {
Time = DateTime.Now, Time = DateTime.Now,
TimeFormat = "HH:mm:ss", TimeFormat = "HH:mm:ss",
Description = "Item 12", Description = "Item 12",
Content = "Content 12" Content = "Content 12123123123123"
}, },
new() 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"> <ControlTheme x:Key="{x:Type u:TimelineItem}" TargetType="u:TimelineItem">
<Setter Property="u:TimelineItem.Template"> <Setter Property="u:TimelineItem.Template">
<ControlTemplate TargetType="u:TimelineItem"> <ControlTemplate TargetType="u:TimelineItem">
<StackPanel> <Grid Background="Pink">
<ContentPresenter> <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> <ContentPresenter.Content>
<MultiBinding Converter="{StaticResource FormatConverter}"> <MultiBinding Converter="{StaticResource FormatConverter}">
<Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" /> <Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" />
@@ -36,9 +44,19 @@
</MultiBinding> </MultiBinding>
</ContentPresenter.Content> </ContentPresenter.Content>
</ContentPresenter> </ContentPresenter>
<ContentPresenter Name="content" Content="{TemplateBinding Content}" /> <Ellipse
Grid.Column="1"
</StackPanel> Width="8"
Height="8"
Fill="Red" />
<ContentPresenter
Name="content"
Grid.Column="2"
HorizontalAlignment="Stretch"
Background="Yellow"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" />
</Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:first /template/ ContentPresenter#content"> <Style Selector="^:first /template/ ContentPresenter#content">