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}">
<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}"

View File

@@ -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;

View File

@@ -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>

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.MergedDictionaries>
<ResourceInclude Source="Avatar.axaml" />
<ResourceInclude Source="Anchor.axaml" />
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.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.MergedDictionaries>
<ResourceInclude Source="Anchor.axaml" />
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.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.MergedDictionaries>
<ResourceInclude Source="Avatar.axaml" />
<ResourceInclude Source="Anchor.axaml" />
<ResourceInclude Source="Badge.axaml" />
<ResourceInclude Source="Banner.axaml" />
<ResourceInclude Source="Breadcrumb.axaml" />

View File

@@ -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>