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

feat: update timelineitem layout.

Browse Source
This commit is contained in:
rabbitism
2023-03-23 23:14:29 +08:00
parent 36e3e88276
commit 2b183027b1
5 changed files with 120 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,57 +15,20 @@
<u:TimelineFormatConverter x:Key="FormatConverter" /> <u:TimelineFormatConverter x:Key="FormatConverter" />
</UserControl.Resources> </UserControl.Resources>
<StackPanel> <StackPanel>
<Grid Width="600"> <u:Timeline>
<Grid.ColumnDefinitions> <u:TimelineItem
<ColumnDefinition Width="1*" /> Content="Start"
<ColumnDefinition Width="Auto" /> Description="Get Started!"
<ColumnDefinition Width="1*" /> Time="2022-01-01" />
</Grid.ColumnDefinitions> <u:TimelineItem
<Border Content="In between"
Grid.Column="0" Description="In Process!"
Width="300" Time="2022-01-02" />
Height="100" <u:TimelineItem
Background="Red" /> Content="Finished"
<Ellipse Description="Done!"
Grid.Column="1" Time="2022-01-03" />
Width="8" </u:Timeline>
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 HorizontalAlignment="Left" ItemsSource="{Binding Items}">
<u:Timeline.ItemTemplate> <u:Timeline.ItemTemplate>
<DataTemplate x:DataType="viewModels:TimelineItemViewModel"> <DataTemplate x:DataType="viewModels:TimelineItemViewModel">

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

@@ -5,6 +5,7 @@
<Nullable>enable</Nullable> <Nullable>enable</Nullable>
<BuiltInComInteropSupport>true</BuiltInComInteropSupport> <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
<ApplicationManifest>app.manifest</ApplicationManifest> <ApplicationManifest>app.manifest</ApplicationManifest>
<AvaloniaUseCompiledBindingsByDefault>false</AvaloniaUseCompiledBindingsByDefault>
</PropertyGroup> </PropertyGroup>
<ItemGroup> <ItemGroup>

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

@@ -17,9 +17,7 @@
<ControlTheme x:Key="{x:Type u:Timeline}" TargetType="u:Timeline"> <ControlTheme x:Key="{x:Type u:Timeline}" TargetType="u:Timeline">
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="u:Timeline"> <ControlTemplate TargetType="u:Timeline">
<Grid Grid.IsSharedSizeScope="True"> <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
<ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
</Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
</ControlTheme> </ControlTheme>
@@ -27,16 +25,51 @@
<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">
<Grid Background="Pink"> <Grid ColumnDefinitions="Auto, *" RowDefinitions="*, Auto, *">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" SharedSizeGroup="Left" /> <Rectangle
<ColumnDefinition Width="Auto" SharedSizeGroup="Line" /> Grid.Row="2"
<ColumnDefinition Width="1*" SharedSizeGroup="Left" />
</Grid.ColumnDefinitions>
<ContentPresenter
Grid.Column="0" Grid.Column="0"
Width="1"
VerticalAlignment="Stretch"
Classes="end"
Fill="Gray" />
<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"
VerticalAlignment="Top"
Classes="start"
Fill="Red" />
<Ellipse
Grid.Row="1"
Width="8"
Height="8"
Margin="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Fill="Gray" />
<Rectangle
Grid.Row="2"
Grid.Column="0"
Width="1"
VerticalAlignment="Stretch"
Classes="end"
Fill="Gray" />
</Grid>
<ContentPresenter
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
Background="Aqua"> VerticalAlignment="Bottom"
Foreground="DarkGray">
<ContentPresenter.Content> <ContentPresenter.Content>
<MultiBinding Converter="{StaticResource FormatConverter}"> <MultiBinding Converter="{StaticResource FormatConverter}">
<Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" /> <Binding Path="Time" RelativeSource="{RelativeSource TemplatedParent}" />
@@ -44,26 +77,22 @@
</MultiBinding> </MultiBinding>
</ContentPresenter.Content> </ContentPresenter.Content>
</ContentPresenter> </ContentPresenter>
<Ellipse
Grid.Column="1"
Width="8"
Height="8"
Fill="Red" />
<ContentPresenter <ContentPresenter
Name="content" Name="content"
Grid.Column="2" Grid.Row="1"
HorizontalAlignment="Stretch" Grid.Column="1"
Background="Yellow" HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}" /> ContentTemplate="{TemplateBinding ContentTemplate}" />
</Grid> </Grid>
</ControlTemplate> </ControlTemplate>
</Setter> </Setter>
<Style Selector="^:first /template/ ContentPresenter#content"> <Style Selector="^:first /template/ Rectangle.start">
<Setter Property="ContentPresenter.Foreground" Value="Red" /> <Setter Property="Rectangle.Fill" Value="Transparent" />
</Style> </Style>
<Style Selector="^:last /template/ ContentPresenter#content"> <Style Selector="^:last /template/ Rectangle.end">
<Setter Property="ContentPresenter.Foreground" Value="Green" /> <Setter Property="Rectangle.Fill" Value="Transparent" />
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

5
src/Ursa/Controls/Timeline/Timeline.cs
View File

@@ -44,12 +44,13 @@ public class Timeline: ItemsControl
{ {
if (this.LogicalChildren[i] is TimelineItem t) if (this.LogicalChildren[i] is TimelineItem t)
{ {
t.SetPosition(i == 0, i == this.LogicalChildren.Count - 1); t.SetIndex(i == 0, i == this.LogicalChildren.Count - 1);
} }
else if (this.LogicalChildren[i] is ContentPresenter { Child: TimelineItem t2 }) else if (this.LogicalChildren[i] is ContentPresenter { Child: TimelineItem t2 })
{ {
t2.SetPosition(i == 0, i == this.LogicalChildren.Count - 1); t2.SetIndex(i == 0, i == this.LogicalChildren.Count - 1);
} }
} }
} }
} }

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

@@ -58,9 +58,58 @@ public class TimelineItem: ContentControl
set => SetValue(DescriptionTemplateProperty, value); set => SetValue(DescriptionTemplateProperty, value);
} }
internal void SetPosition(bool isFirst, bool isLast) internal void SetIndex(bool isFirst, bool isLast)
{ {
PseudoClasses.Set(PC_First, isFirst); PseudoClasses.Set(PC_First, isFirst);
PseudoClasses.Set(PC_Last, isLast); PseudoClasses.Set(PC_Last, isLast);
} }
}
public class TimelineItemLayoutProperties: AvaloniaObject
{
private double _dimensionDelta = 0.01;
public static readonly StyledProperty<double> TimeSlotWidthProperty = AvaloniaProperty.Register<TimelineItemLayoutProperties, double>(
nameof(TimeSlotWidth));
public double TimeSlotWidth
{
get => GetValue(TimeSlotWidthProperty);
set
{
if (Math.Abs(GetValue(TimeSlotWidthProperty) - value) < _dimensionDelta) return;
SetValue(TimeSlotWidthProperty, value);
}
}
public static readonly StyledProperty<double> TimeSlotHeightProperty = AvaloniaProperty.Register<TimelineItemLayoutProperties, double>(
nameof(TimeSlotHeight));
public double TimeSlotHeight
{
get => GetValue(TimeSlotHeightProperty);
set
{
if (Math.Abs(GetValue(TimeSlotHeightProperty) - value) < _dimensionDelta) return;
SetValue(TimeSlotHeightProperty, value);
}
}
public static readonly StyledProperty<double> ContentSlotWidthProperty = AvaloniaProperty.Register<TimelineItemLayoutProperties, double>(
nameof(ContentSlotWidth));
public double ContentSlotWidth
{
get => GetValue(ContentSlotWidthProperty);
set => SetValue(ContentSlotWidthProperty, value);
}
public static readonly StyledProperty<double> ContentSlotHeightProperty = AvaloniaProperty.Register<TimelineItemLayoutProperties, double>(
nameof(ContentSlotHeight));
public double ContentSlotHeight
{
get => GetValue(ContentSlotHeightProperty);
set => SetValue(ContentSlotHeightProperty, value);
}
} }