From b304d585bd599c537c38ab8a359dfec45e3e6a27 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Thu, 10 Jul 2025 19:07:59 +0800
Subject: [PATCH] feat: enhance Anchor styles.

---
 demo/Ursa.Demo/Pages/AnchorDemo.axaml         | 22 ++++++++++++
 .../ViewModels/AnchorDemoViewModel.cs         | 15 ++++++--
 src/Ursa.Themes.Semi/Controls/Anchor.axaml    | 35 +++++++++++--------
 src/Ursa.Themes.Semi/Themes/Dark/Anchor.axaml |  8 +++++
 src/Ursa.Themes.Semi/Themes/Dark/_index.axaml |  1 +
 .../Themes/HighContrast/Anchor.axaml          |  7 ++++
 .../Themes/HighContrast/_index.axaml          |  1 +
 .../Themes/Light/Anchor.axaml                 |  8 +++++
 .../Themes/Light/_index.axaml                 |  1 +
 .../Themes/Shared/Anchor.axaml                |  4 +--
 10 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 src/Ursa.Themes.Semi/Themes/Dark/Anchor.axaml
 create mode 100644 src/Ursa.Themes.Semi/Themes/HighContrast/Anchor.axaml
 create mode 100644 src/Ursa.Themes.Semi/Themes/Light/Anchor.axaml

diff --git a/demo/Ursa.Demo/Pages/AnchorDemo.axaml b/demo/Ursa.Demo/Pages/AnchorDemo.axaml
index d74ec28..4c6250d 100644
--- a/demo/Ursa.Demo/Pages/AnchorDemo.axaml
+++ b/demo/Ursa.Demo/Pages/AnchorDemo.axaml
@@ -141,6 +141,27 @@
                             Background="{DynamicResource SemiPurple1}">
                             <TextBlock Text="Border 3-2" />
                         </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
                             Height="300"
                             HorizontalAlignment="Stretch"
@@ -180,6 +201,7 @@
                 </ScrollViewer>
                 <u:Anchor
                     Grid.Column="1"
+                    Classes="Tertiary"
                     Width="200"
                     Margin="24"
                     ItemsSource="{Binding AnchorItems}"
diff --git a/demo/Ursa.Demo/ViewModels/AnchorDemoViewModel.cs b/demo/Ursa.Demo/ViewModels/AnchorDemoViewModel.cs
index ed74715..e5a4d05 100644
--- a/demo/Ursa.Demo/ViewModels/AnchorDemoViewModel.cs
+++ b/demo/Ursa.Demo/ViewModels/AnchorDemoViewModel.cs
@@ -4,7 +4,7 @@ using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Ursa.Demo.ViewModels;
 
-public partial class AnchorDemoViewModel: ObservableObject
+public partial class AnchorDemoViewModel : ObservableObject
 {
     public List<AnchorItemViewModel> AnchorItems { get; } = new()
     {
@@ -16,7 +16,16 @@ public partial class AnchorDemoViewModel: ObservableObject
             Children =
             [
                 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" }
             ]
         },
@@ -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? _header;
diff --git a/src/Ursa.Themes.Semi/Controls/Anchor.axaml b/src/Ursa.Themes.Semi/Controls/Anchor.axaml
index 108f37b..63a897e 100644
--- a/src/Ursa.Themes.Semi/Controls/Anchor.axaml
+++ b/src/Ursa.Themes.Semi/Controls/Anchor.axaml
@@ -16,7 +16,7 @@
                         Name="PART_Pipe"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Stretch"
-                        Fill="{DynamicResource SemiColorBorder}" />
+                        Fill="{DynamicResource AnchorPipeBackground}" />
                     <ItemsPresenter
                         Name="PART_ItemsPresenter"
                         Margin="{TemplateBinding Padding}"
@@ -36,7 +36,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="u:AnchorItem">
                 <StackPanel>
-                    <Panel Background="{TemplateBinding Background}" >
+                    <Panel Background="{TemplateBinding Background}">
                         <Border
                             Name="PART_Pipe"
                             Width="2"
@@ -47,7 +47,7 @@
                             <ContentPresenter
                                 Name="{x:Static iri:PartNames.PART_HeaderPresenter}"
                                 VerticalAlignment="Center"
-                                Foreground="{DynamicResource SemiColorText2}"
+                                Foreground="{DynamicResource AnchorForeground}"
                                 Content="{TemplateBinding Header}"
                                 ContentTemplate="{TemplateBinding HeaderTemplate}">
                                 <ContentPresenter.Margin>
@@ -68,19 +68,24 @@
         </Style>
         <Style Selector="^.Small /template/ ContentPresenter#PART_HeaderPresenter">
             <Setter Property="MinHeight" Value="{DynamicResource AnchorSmallHeight}" />
-            <Setter Property="FontSize" Value="{DynamicResource SemiFontSizeSmall}" />
+            <Setter Property="FontSize" Value="{DynamicResource AnchorSmallFontSize}" />
         </Style>
-        <Style Selector="^:selected /template/ Border#PART_Pipe">
-            <Setter Property="Background" Value="{DynamicResource SemiColorTertiary}" />
-        </Style>
-        <Style Selector="^.Primary:selected /template/ Border#PART_Pipe">
-            <Setter Property="Background" Value="{DynamicResource SemiColorPrimary}" />
-        </Style>
-        <Style Selector="^.Mute:selected /template/ Border#PART_Pipe">
-            <Setter Property="Background" Value="Transparent" />
-        </Style>
-        <Style Selector="^:selected /template/ ContentPresenter#PART_HeaderPresenter">
-            <Setter Property="Foreground" Value="{DynamicResource SemiColorText0}" />
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource AnchorSelectedForeground}" />
+            </Style>
+            <Style Selector="^ /template/ Border#PART_Pipe">
+                <Setter Property="Background" Value="{DynamicResource AnchorPipeSelectedBackground}" />
+            </Style>
+            <Style Selector="^.Primary /template/ Border#PART_Pipe">
+                <Setter Property="Background" Value="{DynamicResource AnchorPipeSelectedPrimaryBackground}" />
+            </Style>
+            <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>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/Anchor.axaml b/src/Ursa.Themes.Semi/Themes/Dark/Anchor.axaml
new file mode 100644
index 0000000..a3e1e55
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Themes/Dark/Anchor.axaml
@@ -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>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml b/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
index 0d5148a..8a8a444 100644
--- a/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Dark/_index.axaml
@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="Avatar.axaml" />
+        <ResourceInclude Source="Anchor.axaml" />
         <ResourceInclude Source="Badge.axaml" />
         <ResourceInclude Source="Banner.axaml" />
         <ResourceInclude Source="Breadcrumb.axaml" />
diff --git a/src/Ursa.Themes.Semi/Themes/HighContrast/Anchor.axaml b/src/Ursa.Themes.Semi/Themes/HighContrast/Anchor.axaml
new file mode 100644
index 0000000..f79130a
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Themes/HighContrast/Anchor.axaml
@@ -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>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/HighContrast/_index.axaml b/src/Ursa.Themes.Semi/Themes/HighContrast/_index.axaml
index 2014115..bdde3cf 100644
--- a/src/Ursa.Themes.Semi/Themes/HighContrast/_index.axaml
+++ b/src/Ursa.Themes.Semi/Themes/HighContrast/_index.axaml
@@ -1,5 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="Anchor.axaml" />
         <ResourceInclude Source="Badge.axaml" />
         <ResourceInclude Source="Banner.axaml" />
         <ResourceInclude Source="Breadcrumb.axaml" />
diff --git a/src/Ursa.Themes.Semi/Themes/Light/Anchor.axaml b/src/Ursa.Themes.Semi/Themes/Light/Anchor.axaml
new file mode 100644
index 0000000..a3e1e55
--- /dev/null
+++ b/src/Ursa.Themes.Semi/Themes/Light/Anchor.axaml
@@ -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>
\ No newline at end of file
diff --git a/src/Ursa.Themes.Semi/Themes/Light/_index.axaml b/src/Ursa.Themes.Semi/Themes/Light/_index.axaml
index 0d5148a..8a8a444 100644
--- a/src/Ursa.Themes.Semi/Themes/Light/_index.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Light/_index.axaml
@@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ResourceDictionary.MergedDictionaries>
         <ResourceInclude Source="Avatar.axaml" />
+        <ResourceInclude Source="Anchor.axaml" />
         <ResourceInclude Source="Badge.axaml" />
         <ResourceInclude Source="Banner.axaml" />
         <ResourceInclude Source="Breadcrumb.axaml" />
diff --git a/src/Ursa.Themes.Semi/Themes/Shared/Anchor.axaml b/src/Ursa.Themes.Semi/Themes/Shared/Anchor.axaml
index cffb17e..770573b 100644
--- a/src/Ursa.Themes.Semi/Themes/Shared/Anchor.axaml
+++ b/src/Ursa.Themes.Semi/Themes/Shared/Anchor.axaml
@@ -1,6 +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">
     <x:Double x:Key="AnchorIndent">12</x:Double>
     <x:Double x:Key="AnchorDefaultHeight">20</x:Double>
     <x:Double x:Key="AnchorSmallHeight">16</x:Double>
+    <StaticResource x:Key="AnchorSmallFontSize" ResourceKey="SemiFontSizeSmall"/>
 </ResourceDictionary>