feat: enhance Anchor styles.

This commit is contained in:
Zhang Dian
2025-07-10 19:07:59 +08:00
parent d470488c76
commit b304d585bd
10 changed files with 82 additions and 20 deletions

View File

@@ -141,6 +141,27 @@
Background="{DynamicResource SemiPurple1}"> Background="{DynamicResource SemiPurple1}">
<TextBlock Text="Border 3-2" /> <TextBlock Text="Border 3-2" />
</Border> </Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.Id="anchor3-2-1"
Background="{DynamicResource SemiCyan1}">
<TextBlock Text="Border 3-2-1" />
</Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.Id="anchor3-2-2"
Background="{DynamicResource SemiCyan1}">
<TextBlock Text="Border 3-2-2" />
</Border>
<Border
Height="300"
HorizontalAlignment="Stretch"
u:Anchor.Id="anchor3-2-3"
Background="{DynamicResource SemiCyan1}">
<TextBlock Text="Border 3-2-3" />
</Border>
<Border <Border
Height="300" Height="300"
HorizontalAlignment="Stretch" HorizontalAlignment="Stretch"
@@ -180,6 +201,7 @@
</ScrollViewer> </ScrollViewer>
<u:Anchor <u:Anchor
Grid.Column="1" Grid.Column="1"
Classes="Tertiary"
Width="200" Width="200"
Margin="24" Margin="24"
ItemsSource="{Binding AnchorItems}" ItemsSource="{Binding AnchorItems}"

View File

@@ -4,7 +4,7 @@ using CommunityToolkit.Mvvm.ComponentModel;
namespace Ursa.Demo.ViewModels; namespace Ursa.Demo.ViewModels;
public partial class AnchorDemoViewModel: ObservableObject public partial class AnchorDemoViewModel : ObservableObject
{ {
public List<AnchorItemViewModel> AnchorItems { get; } = new() public List<AnchorItemViewModel> AnchorItems { get; } = new()
{ {
@@ -16,7 +16,16 @@ public partial class AnchorDemoViewModel: ObservableObject
Children = Children =
[ [
new AnchorItemViewModel() { AnchorId = "anchor3-1", Header = "Anchor 3.1" }, new AnchorItemViewModel() { AnchorId = "anchor3-1", Header = "Anchor 3.1" },
new AnchorItemViewModel() { AnchorId = "anchor3-2", Header = "Anchor 3.2" }, new AnchorItemViewModel()
{
AnchorId = "anchor3-2", Header = "Anchor 3.2",
Children =
[
new AnchorItemViewModel() { AnchorId = "anchor3-2-1", Header = "Anchor 3.2.1" },
new AnchorItemViewModel() { AnchorId = "anchor3-2-2", Header = "Anchor 3.2.2" },
new AnchorItemViewModel() { AnchorId = "anchor3-2-3", Header = "Anchor 3.2.3" }
]
},
new AnchorItemViewModel() { AnchorId = "anchor3-3", Header = "Anchor 3.3" } new AnchorItemViewModel() { AnchorId = "anchor3-3", Header = "Anchor 3.3" }
] ]
}, },
@@ -27,7 +36,7 @@ public partial class AnchorDemoViewModel: ObservableObject
}; };
} }
public partial class AnchorItemViewModel: ObservableObject public partial class AnchorItemViewModel : ObservableObject
{ {
[ObservableProperty] private string? _anchorId; [ObservableProperty] private string? _anchorId;
[ObservableProperty] private string? _header; [ObservableProperty] private string? _header;

View File

@@ -16,7 +16,7 @@
Name="PART_Pipe" Name="PART_Pipe"
HorizontalAlignment="Left" HorizontalAlignment="Left"
VerticalAlignment="Stretch" VerticalAlignment="Stretch"
Fill="{DynamicResource SemiColorBorder}" /> Fill="{DynamicResource AnchorPipeBackground}" />
<ItemsPresenter <ItemsPresenter
Name="PART_ItemsPresenter" Name="PART_ItemsPresenter"
Margin="{TemplateBinding Padding}" Margin="{TemplateBinding Padding}"
@@ -36,7 +36,7 @@
<Setter Property="Template"> <Setter Property="Template">
<ControlTemplate TargetType="u:AnchorItem"> <ControlTemplate TargetType="u:AnchorItem">
<StackPanel> <StackPanel>
<Panel Background="{TemplateBinding Background}" > <Panel Background="{TemplateBinding Background}">
<Border <Border
Name="PART_Pipe" Name="PART_Pipe"
Width="2" Width="2"
@@ -47,7 +47,7 @@
<ContentPresenter <ContentPresenter
Name="{x:Static iri:PartNames.PART_HeaderPresenter}" Name="{x:Static iri:PartNames.PART_HeaderPresenter}"
VerticalAlignment="Center" VerticalAlignment="Center"
Foreground="{DynamicResource SemiColorText2}" Foreground="{DynamicResource AnchorForeground}"
Content="{TemplateBinding Header}" Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"> ContentTemplate="{TemplateBinding HeaderTemplate}">
<ContentPresenter.Margin> <ContentPresenter.Margin>
@@ -68,19 +68,24 @@
</Style> </Style>
<Style Selector="^.Small /template/ ContentPresenter#PART_HeaderPresenter"> <Style Selector="^.Small /template/ ContentPresenter#PART_HeaderPresenter">
<Setter Property="MinHeight" Value="{DynamicResource AnchorSmallHeight}" /> <Setter Property="MinHeight" Value="{DynamicResource AnchorSmallHeight}" />
<Setter Property="FontSize" Value="{DynamicResource SemiFontSizeSmall}" /> <Setter Property="FontSize" Value="{DynamicResource AnchorSmallFontSize}" />
</Style> </Style>
<Style Selector="^:selected /template/ Border#PART_Pipe"> <Style Selector="^:selected">
<Setter Property="Background" Value="{DynamicResource SemiColorTertiary}" /> <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
</Style> <Setter Property="Foreground" Value="{DynamicResource AnchorSelectedForeground}" />
<Style Selector="^.Primary:selected /template/ Border#PART_Pipe"> </Style>
<Setter Property="Background" Value="{DynamicResource SemiColorPrimary}" /> <Style Selector="^ /template/ Border#PART_Pipe">
</Style> <Setter Property="Background" Value="{DynamicResource AnchorPipeSelectedBackground}" />
<Style Selector="^.Mute:selected /template/ Border#PART_Pipe"> </Style>
<Setter Property="Background" Value="Transparent" /> <Style Selector="^.Primary /template/ Border#PART_Pipe">
</Style> <Setter Property="Background" Value="{DynamicResource AnchorPipeSelectedPrimaryBackground}" />
<Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter"> </Style>
<Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" /> <Style Selector="^.Tertiary /template/ Border#PART_Pipe">
<Setter Property="Background" Value="{DynamicResource AnchorPipeSelectedTertiaryBackground}" />
</Style>
<Style Selector="^.Mute /template/ Border#PART_Pipe">
<Setter Property="Background" Value="Transparent" />
</Style>
</Style> </Style>
</ControlTheme> </ControlTheme>
</ResourceDictionary> </ResourceDictionary>

View File

@@ -0,0 +1,8 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="AnchorPipeBackground" ResourceKey="SemiColorBorder" />
<StaticResource x:Key="AnchorForeground" ResourceKey="SemiColorText2" />
<StaticResource x:Key="AnchorSelectedForeground" ResourceKey="SemiColorText0" />
<StaticResource x:Key="AnchorPipeSelectedBackground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="AnchorPipeSelectedPrimaryBackground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="AnchorPipeSelectedTertiaryBackground" ResourceKey="SemiColorTertiary" />
</ResourceDictionary>

View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Avatar.axaml" /> <ResourceInclude Source="Avatar.axaml" />
<ResourceInclude Source="Anchor.axaml" />
<ResourceInclude Source="Badge.axaml" /> <ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" /> <ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="Breadcrumb.axaml" /> <ResourceInclude Source="Breadcrumb.axaml" />

View File

@@ -0,0 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="AnchorPipeBackground" ResourceKey="GrayTextColor" />
<StaticResource x:Key="AnchorForeground" ResourceKey="WindowTextColor" />
<StaticResource x:Key="AnchorSelectedForeground" ResourceKey="HotlightColor" />
<StaticResource x:Key="AnchorPipeSelectedBackground" ResourceKey="HotlightColor" />
<StaticResource x:Key="AnchorPipeSelectedPrimaryBackground" ResourceKey="HotlightColor" />
</ResourceDictionary>

View File

@@ -1,5 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Anchor.axaml" />
<ResourceInclude Source="Badge.axaml" /> <ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" /> <ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="Breadcrumb.axaml" /> <ResourceInclude Source="Breadcrumb.axaml" />

View File

@@ -0,0 +1,8 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StaticResource x:Key="AnchorPipeBackground" ResourceKey="SemiColorBorder" />
<StaticResource x:Key="AnchorForeground" ResourceKey="SemiColorText2" />
<StaticResource x:Key="AnchorSelectedForeground" ResourceKey="SemiColorText0" />
<StaticResource x:Key="AnchorPipeSelectedBackground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="AnchorPipeSelectedPrimaryBackground" ResourceKey="SemiColorPrimary" />
<StaticResource x:Key="AnchorPipeSelectedTertiaryBackground" ResourceKey="SemiColorTertiary" />
</ResourceDictionary>

View File

@@ -1,6 +1,7 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries> <ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="Avatar.axaml" /> <ResourceInclude Source="Avatar.axaml" />
<ResourceInclude Source="Anchor.axaml" />
<ResourceInclude Source="Badge.axaml" /> <ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" /> <ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="Breadcrumb.axaml" /> <ResourceInclude Source="Breadcrumb.axaml" />

View File

@@ -1,6 +1,6 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui" <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<x:Double x:Key="AnchorIndent">12</x:Double> <x:Double x:Key="AnchorIndent">12</x:Double>
<x:Double x:Key="AnchorDefaultHeight">20</x:Double> <x:Double x:Key="AnchorDefaultHeight">20</x:Double>
<x:Double x:Key="AnchorSmallHeight">16</x:Double> <x:Double x:Key="AnchorSmallHeight">16</x:Double>
<StaticResource x:Key="AnchorSmallFontSize" ResourceKey="SemiFontSizeSmall"/>
</ResourceDictionary> </ResourceDictionary>