feat: add AI style - Colorful & Gradient to TagLabel.

This commit is contained in:
Zhang Dian
2025-11-11 18:17:47 +08:00
parent 5f8357ecbc
commit 7a831d35f7
6 changed files with 165 additions and 78 deletions

View File

@@ -113,18 +113,18 @@
Theme="{StaticResource GroupBox}">
<HeaderedContentControl.Header>
<StackPanel Spacing="8">
<TextBlock Text="AI style - Colorful buttons" />
<TextBlock Text="AI style - Colorful Button" />
<WrapPanel ItemSpacing="4">
<TextBlock Text="Theme:" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Solid" Content="Light" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Solid" Content="Solid" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Solid" Content="Outline" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Solid" Content="Borderless" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Light" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Solid" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Outline" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient Solid" Content="Borderless" />
</WrapPanel>
<WrapPanel ItemSpacing="4">
<TextBlock Text="Classes:" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful" Content="Colorful Primary" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful" Content="Colorful Tertiary" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient" Content="Colorful Primary" />
<Label Theme="{StaticResource TagLabel}" Classes="Colorful Gradient" Content="Colorful Tertiary" />
</WrapPanel>
</StackPanel>
</HeaderedContentControl.Header>

View File

@@ -8,14 +8,11 @@
d:DesignWidth="800"
mc:Ignorable="d">
<ScrollViewer>
<StackPanel HorizontalAlignment="Left" Spacing="20">
<StackPanel>
<StackPanel.Styles>
<Style Selector="Label">
<Setter Property="Margin" Value="4" />
</Style>
<Style Selector="Grid > TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="4" />
<Style Selector="Grid > TextBlock,Grid > Label">
<Setter Property="Layoutable.VerticalAlignment" Value="Center" />
<Setter Property="Layoutable.Margin" Value="4" />
</Style>
</StackPanel.Styles>
<ScrollViewer HorizontalScrollBarVisibility="Auto">
@@ -156,69 +153,89 @@
</HeaderedContentControl>
</StackPanel>
</ScrollViewer>
<WrapPanel>
<Label Theme="{StaticResource TagLabel}">Label</Label>
<Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
<Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
<Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
</WrapPanel>
<WrapPanel>
<Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
<Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
<Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
<Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
<Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
<Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
<Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
<Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
<Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
<Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
<Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
<Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
<Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
<Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
<Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
<Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
<Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
</WrapPanel>
<WrapPanel>
<Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
<Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
<Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
<Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
<Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
<Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
<Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
<Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
<Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
<Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
<Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
<Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
<Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
<Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
<Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
<Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
<Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
</WrapPanel>
<WrapPanel>
<Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
<Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
<Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
<Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
<Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
<Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
<Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
<Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
<Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
<Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
<Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
<Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
<Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
<Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
<Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
<Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
<Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
</WrapPanel>
<HeaderedContentControl
Margin="16"
Header="Theme: TagLabel"
Theme="{DynamicResource GroupBox}">
<ScrollViewer HorizontalScrollBarVisibility="Auto">
<StackPanel Orientation="Horizontal" Spacing="8">
<StackPanel Spacing="4">
<Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
<Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
<Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
<Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
<Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
<Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
<Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
<Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
<Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
<Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
<Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
<Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
<Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
<Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
<Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
<Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
<Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
</StackPanel>
<StackPanel Spacing="4">
<Label Classes="Ghost Red" Theme="{StaticResource TagLabel}">Red</Label>
<Label Classes="Ghost Pink" Theme="{StaticResource TagLabel}">Pink</Label>
<Label Classes="Ghost Purple" Theme="{StaticResource TagLabel}">Purple</Label>
<Label Classes="Ghost Violet" Theme="{StaticResource TagLabel}">Violet</Label>
<Label Classes="Ghost Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
<Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Blue</Label>
<Label Classes="Ghost LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
<Label Classes="Ghost Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
<Label Classes="Ghost Teal" Theme="{StaticResource TagLabel}">Teal</Label>
<Label Classes="Ghost Green" Theme="{StaticResource TagLabel}">Green</Label>
<Label Classes="Ghost LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
<Label Classes="Ghost Lime" Theme="{StaticResource TagLabel}">Lime</Label>
<Label Classes="Ghost Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
<Label Classes="Ghost Amber" Theme="{StaticResource TagLabel}">Amber</Label>
<Label Classes="Ghost Orange" Theme="{StaticResource TagLabel}">Orange</Label>
<Label Classes="Ghost Grey" Theme="{StaticResource TagLabel}">Grey</Label>
<Label Classes="Ghost White" Theme="{StaticResource TagLabel}">White</Label>
</StackPanel>
<StackPanel Spacing="4">
<Label Classes="Solid Red" Theme="{StaticResource TagLabel}">Red</Label>
<Label Classes="Solid Pink" Theme="{StaticResource TagLabel}">Pink</Label>
<Label Classes="Solid Purple" Theme="{StaticResource TagLabel}">Purple</Label>
<Label Classes="Solid Violet" Theme="{StaticResource TagLabel}">Violet</Label>
<Label Classes="Solid Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
<Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Blue</Label>
<Label Classes="Solid LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
<Label Classes="Solid Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
<Label Classes="Solid Teal" Theme="{StaticResource TagLabel}">Teal</Label>
<Label Classes="Solid Green" Theme="{StaticResource TagLabel}">Green</Label>
<Label Classes="Solid LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
<Label Classes="Solid Lime" Theme="{StaticResource TagLabel}">Lime</Label>
<Label Classes="Solid Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
<Label Classes="Solid Amber" Theme="{StaticResource TagLabel}">Amber</Label>
<Label Classes="Solid Orange" Theme="{StaticResource TagLabel}">Orange</Label>
<Label Classes="Solid Grey" Theme="{StaticResource TagLabel}">Grey</Label>
<Label Classes="Solid White" Theme="{StaticResource TagLabel}">White</Label>
</StackPanel>
<StackPanel Spacing="4">
<Label Classes="Colorful Gradient" Theme="{DynamicResource TagLabel}">Light</Label>
<Label Classes="Colorful Gradient Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
<Label Classes="Colorful Gradient Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
</StackPanel>
<StackPanel Spacing="4">
<Label Classes="Colorful" Theme="{DynamicResource TagLabel}">Light</Label>
<Label Classes="Colorful Ghost" Theme="{DynamicResource TagLabel}">Ghost</Label>
<Label Classes="Colorful Solid" Theme="{DynamicResource TagLabel}">Solid</Label>
</StackPanel>
<StackPanel Spacing="4">
<Label Theme="{StaticResource TagLabel}">Label</Label>
<Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
<Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
<Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
</StackPanel>
</StackPanel>
</ScrollViewer>
</HeaderedContentControl>
</StackPanel>
</ScrollViewer>
</UserControl>