2025-07-31 20:12:24 +08:00
|
|
|
<UserControl
|
|
|
|
|
d:DesignHeight="600"
|
|
|
|
|
d:DesignWidth="930"
|
|
|
|
|
mc:Ignorable="d"
|
|
|
|
|
x:Class="AntDesignWPFDemo.Views.TagView"
|
|
|
|
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
|
|
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"
|
|
|
|
|
xmlns:cal="http://www.caliburnproject.org"
|
|
|
|
|
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
|
|
|
|
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
|
|
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
|
2025-07-11 09:20:23 +08:00
|
|
|
|
|
|
|
|
<ScrollViewer>
|
2025-07-31 20:12:24 +08:00
|
|
|
<Grid Margin="16,0">
|
2025-07-11 09:20:23 +08:00
|
|
|
<Grid.RowDefinitions>
|
|
|
|
|
<RowDefinition Height="Auto" />
|
|
|
|
|
<RowDefinition Height="*" />
|
|
|
|
|
<RowDefinition Height="*" />
|
|
|
|
|
</Grid.RowDefinitions>
|
|
|
|
|
<StackPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<Label Content="Tag" Style="{StaticResource Ant.H1}" />
|
2025-07-11 09:20:23 +08:00
|
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="Tag for categorizing or markup." />
|
|
|
|
|
|
2025-07-31 20:12:24 +08:00
|
|
|
<Label Content="When To Use" Style="{StaticResource Ant.H2}" />
|
2025-07-11 09:20:23 +08:00
|
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="It can be used to tag by dimension or property.
When categorizing." />
|
|
|
|
|
|
2025-07-31 20:12:24 +08:00
|
|
|
<Label Content="Examples" Style="{StaticResource Ant.H2}" />
|
2025-07-11 09:20:23 +08:00
|
|
|
</StackPanel>
|
|
|
|
|
<Grid Grid.Row="1">
|
|
|
|
|
<Grid.Resources>
|
|
|
|
|
<Style TargetType="antd:Tag">
|
2025-07-31 20:12:24 +08:00
|
|
|
<Setter Property="Margin" Value="0,0,8,8" />
|
2025-07-11 09:20:23 +08:00
|
|
|
</Style>
|
|
|
|
|
</Grid.Resources>
|
|
|
|
|
<Grid.ColumnDefinitions>
|
|
|
|
|
<ColumnDefinition />
|
|
|
|
|
<ColumnDefinition />
|
|
|
|
|
</Grid.ColumnDefinitions>
|
2025-07-31 20:12:24 +08:00
|
|
|
<StackPanel Margin="8,0">
|
2025-07-11 09:20:23 +08:00
|
|
|
<antd:CodeBox Title="Basic">
|
|
|
|
|
<antd:CodeBox.Description>
|
|
|
|
|
Usage of basic Tag, and it could be closable by set `Closable` property. Closable Tag support `Closed` event.
|
|
|
|
|
</antd:CodeBox.Description>
|
|
|
|
|
<antd:CodeBox.Content>
|
|
|
|
|
<WrapPanel>
|
|
|
|
|
<antd:Tag>Tag 1</antd:Tag>
|
|
|
|
|
<antd:Tag>Link</antd:Tag>
|
|
|
|
|
<antd:Tag Closable="True">Tag 2</antd:Tag>
|
|
|
|
|
<antd:Tag Closable="True" cal:Message.Attach="[Event Closing] = [Action Closing($source, $eventArgs)]">Prevent Default</antd:Tag>
|
|
|
|
|
</WrapPanel>
|
|
|
|
|
</antd:CodeBox.Content>
|
|
|
|
|
<antd:CodeBox.Code>
|
2025-07-31 20:12:24 +08:00
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
|
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
2025-07-11 09:20:23 +08:00
|
|
|
<WrapPanel>\n
|
2025-07-31 20:12:24 +08:00
|
|
|
\t<antd:Tag>Tag 1</antd:Tag>\n
|
|
|
|
|
\t<antd:Tag>Link</antd:Tag>\n
|
|
|
|
|
\t<antd:Tag Closable="True">Tag 2</antd:Tag>\n
|
|
|
|
|
\t<antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]">Prevent Default</antd:Tag>\n
|
2025-07-11 09:20:23 +08:00
|
|
|
</WrapPanel>
|
|
|
|
|
</antd:CodeBox.Code>
|
|
|
|
|
</antd:CodeBox>
|
|
|
|
|
<antd:CodeBox Title="Hot Tags">
|
|
|
|
|
<antd:CodeBox.Description>
|
|
|
|
|
Select your favourite topics.
|
|
|
|
|
</antd:CodeBox.Description>
|
|
|
|
|
<antd:CodeBox.Content>
|
|
|
|
|
<WrapPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<TextBlock
|
|
|
|
|
FontSize="10"
|
|
|
|
|
Margin="0,0,8,0"
|
|
|
|
|
Text="Categories:"
|
|
|
|
|
VerticalAlignment="Center" />
|
2025-07-11 09:20:23 +08:00
|
|
|
<WrapPanel VerticalAlignment="Center">
|
|
|
|
|
<antd:CheckableTag Content="Movies" />
|
|
|
|
|
<antd:CheckableTag Content="Books" />
|
|
|
|
|
<antd:CheckableTag Content="Music" />
|
|
|
|
|
<antd:CheckableTag Content="Sports" />
|
|
|
|
|
</WrapPanel>
|
|
|
|
|
</WrapPanel>
|
|
|
|
|
</antd:CodeBox.Content>
|
|
|
|
|
<antd:CodeBox.Code>
|
2025-07-31 20:12:24 +08:00
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
|
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
2025-07-11 09:20:23 +08:00
|
|
|
<WrapPanel>\n
|
2025-07-31 20:12:24 +08:00
|
|
|
\t<TextBlock Text="Categories:" FontSize="10" VerticalAlignment="Center" Margin="0 0 8 0" />\n
|
|
|
|
|
\t<WrapPanel VerticalAlignment="Center">\n
|
|
|
|
|
\t\t<antd:CheckableTag Content="Movies" />\n
|
|
|
|
|
\t\t<antd:CheckableTag Content="Books" />\n
|
|
|
|
|
\t\t<antd:CheckableTag Content="Music" />\n
|
|
|
|
|
\t\t<antd:CheckableTag Content="Sports" />\n
|
|
|
|
|
\t</WrapPanel>\n
|
2025-07-11 09:20:23 +08:00
|
|
|
</WrapPanel>
|
|
|
|
|
</antd:CodeBox.Code>
|
|
|
|
|
</antd:CodeBox>
|
|
|
|
|
</StackPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<StackPanel Grid.Column="1" Margin="8,0">
|
2025-07-11 09:20:23 +08:00
|
|
|
<antd:CodeBox Title="Colorful Tag">
|
|
|
|
|
<antd:CodeBox.Description>
|
|
|
|
|
Colorful Tag can be easily implemented by setting the `ColorMode` property.
|
|
|
|
|
</antd:CodeBox.Description>
|
|
|
|
|
<antd:CodeBox.Content>
|
|
|
|
|
<StackPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<Label Content="Colorful:" Style="{StaticResource Ant.H4}" />
|
2025-07-11 09:20:23 +08:00
|
|
|
<WrapPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<antd:Tag
|
|
|
|
|
Closable="True"
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="magenta"
|
|
|
|
|
Foreground="#EB2F96" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="red"
|
|
|
|
|
Foreground="#F5222D" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="volcano"
|
|
|
|
|
Foreground="#FA541C" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="orange"
|
|
|
|
|
Foreground="#FA8C16" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="Gold"
|
|
|
|
|
Foreground="#FAAD14" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="lime"
|
|
|
|
|
Foreground="#A0D911" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="green"
|
|
|
|
|
Foreground="#52C41A" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="cyan"
|
|
|
|
|
Foreground="#13C2C2" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="blue"
|
|
|
|
|
Foreground="#1890FF" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
ColorMode="Colorful"
|
|
|
|
|
Content="purple"
|
|
|
|
|
Foreground="#2F54EB" />
|
2025-07-11 09:20:23 +08:00
|
|
|
</WrapPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<Label Content="Inverse:" Style="{StaticResource Ant.H4}" />
|
2025-07-11 09:20:23 +08:00
|
|
|
<WrapPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<antd:Tag
|
|
|
|
|
Background="#FF5500"
|
|
|
|
|
Closable="True"
|
|
|
|
|
ColorMode="Inverse"
|
|
|
|
|
Content="#FF5500" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
Background="#2DB7F5"
|
|
|
|
|
ColorMode="Inverse"
|
|
|
|
|
Content="#2DB7F5" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
Background="#87d068"
|
|
|
|
|
ColorMode="Inverse"
|
|
|
|
|
Content="#87d068" />
|
|
|
|
|
<antd:Tag
|
|
|
|
|
Background="#108EE9"
|
|
|
|
|
ColorMode="Inverse"
|
|
|
|
|
Content="#108EE9" />
|
2025-07-11 09:20:23 +08:00
|
|
|
</WrapPanel>
|
|
|
|
|
</StackPanel>
|
|
|
|
|
</antd:CodeBox.Content>
|
|
|
|
|
<antd:CodeBox.Code>
|
2025-07-31 20:12:24 +08:00
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
|
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
2025-07-11 09:20:23 +08:00
|
|
|
<StackPanel>\n
|
2025-07-31 20:12:24 +08:00
|
|
|
\t<Label Style="{StaticResource Ant.H4}" Content="Colorful:" />\n
|
|
|
|
|
\t<WrapPanel>\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#EB2F96" Content="magenta" ColorMode="Colorful" Closable="True" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#F5222D" Content="red" ColorMode="Colorful" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#FA541C" Content="volcano" ColorMode="Colorful" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#FA8C16" Content="orange" ColorMode="Colorful" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#FAAD14" Content="Gold" ColorMode="Colorful" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#A0D911" Content="lime" ColorMode="Colorful" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#52C41A" Content="green" ColorMode="Colorful" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#13C2C2" Content="cyan" ColorMode="Colorful" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#1890FF" Content="blue" ColorMode="Colorful" />\n
|
|
|
|
|
\t\t<antd:Tag Foreground="#2F54EB" Content="purple" ColorMode="Colorful" />\n
|
|
|
|
|
\t</WrapPanel>\n
|
|
|
|
|
\t<Label Style="{StaticResource Ant.H4}" Content="Inverse:" />\n
|
|
|
|
|
\t<WrapPanel>\n
|
|
|
|
|
\t\t<antd:Tag Background="#FF5500" Content="#FF5500" ColorMode="Inverse" Closable="True" />\n
|
|
|
|
|
\t\t<antd:Tag Background="#2DB7F5" Content="#2DB7F5" ColorMode="Inverse" />\n
|
|
|
|
|
\t\t<antd:Tag Background="#87d068" Content="#87d068" ColorMode="Inverse" />\n
|
|
|
|
|
\t\t<antd:Tag Background="#108EE9" Content="#108EE9" ColorMode="Inverse" />\n
|
|
|
|
|
\t</WrapPanel>\n
|
2025-07-11 09:20:23 +08:00
|
|
|
</StackPanel>
|
|
|
|
|
</antd:CodeBox.Code>
|
|
|
|
|
</antd:CodeBox>
|
|
|
|
|
<antd:CodeBox Title="Checkable">
|
|
|
|
|
<antd:CodeBox.Description>
|
|
|
|
|
`CheckableTag` works like Checkbox, click it to toggle checked.\n
|
|
|
|
|
it is an absolute controlled component and has no uncontrolled mode.
|
|
|
|
|
</antd:CodeBox.Description>
|
|
|
|
|
<antd:CodeBox.Content>
|
|
|
|
|
<WrapPanel>
|
|
|
|
|
<antd:CheckableTag Content="Tag1" />
|
|
|
|
|
<antd:CheckableTag Content="Tag2" />
|
|
|
|
|
<antd:CheckableTag Content="Tag3" />
|
|
|
|
|
</WrapPanel>
|
|
|
|
|
</antd:CodeBox.Content>
|
|
|
|
|
<antd:CodeBox.Code>
|
2025-07-31 20:12:24 +08:00
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
|
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
2025-07-11 09:20:23 +08:00
|
|
|
<WrapPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<antd:CheckableTag Content="Tag1" />
|
|
|
|
|
<antd:CheckableTag Content="Tag2" />
|
|
|
|
|
<antd:CheckableTag Content="Tag3" />
|
2025-07-11 09:20:23 +08:00
|
|
|
</WrapPanel>
|
|
|
|
|
</antd:CodeBox.Code>
|
|
|
|
|
</antd:CodeBox>
|
|
|
|
|
<antd:CodeBox Title="Controlled">
|
|
|
|
|
<antd:CodeBox.Description>
|
|
|
|
|
By using the `Visibility` property, you can control the close state of Tag.
|
|
|
|
|
</antd:CodeBox.Description>
|
|
|
|
|
<antd:CodeBox.Content>
|
|
|
|
|
<StackPanel>
|
|
|
|
|
<WrapPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<antd:Tag
|
|
|
|
|
Closable="True"
|
|
|
|
|
Content="Movies"
|
|
|
|
|
Visibility="{Binding Visibility, Mode=TwoWay}" />
|
2025-07-11 09:20:23 +08:00
|
|
|
</WrapPanel>
|
|
|
|
|
<WrapPanel>
|
2025-07-31 20:12:24 +08:00
|
|
|
<antd:AntButton
|
|
|
|
|
Content="Toggle"
|
|
|
|
|
Size="Small"
|
|
|
|
|
x:Name="Toggle" />
|
2025-07-11 09:20:23 +08:00
|
|
|
</WrapPanel>
|
|
|
|
|
</StackPanel>
|
|
|
|
|
</antd:CodeBox.Content>
|
|
|
|
|
<antd:CodeBox.Code>
|
2025-07-31 20:12:24 +08:00
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" />\n
|
|
|
|
|
<ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" />\n\n
|
|
|
|
|
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
|
2025-07-11 09:20:23 +08:00
|
|
|
<StackPanel>\n
|
2025-07-31 20:12:24 +08:00
|
|
|
\t<WrapPanel>\n
|
|
|
|
|
\t\t<antd:Tag Content="Movies" Closable="True" Visibility="{Binding Visibility, Mode=TwoWay}" />\n
|
|
|
|
|
\t</WrapPanel>\n
|
|
|
|
|
\t<WrapPanel>\n
|
|
|
|
|
\t\t<antd:Button x:Name="Toggle" Size="Small" Content="Toggle" />\n
|
|
|
|
|
\t</WrapPanel>\n
|
2025-07-11 09:20:23 +08:00
|
|
|
</StackPanel>
|
|
|
|
|
</antd:CodeBox.Code>
|
|
|
|
|
</antd:CodeBox>
|
|
|
|
|
</StackPanel>
|
|
|
|
|
</Grid>
|
|
|
|
|
</Grid>
|
|
|
|
|
</ScrollViewer>
|
|
|
|
|
|
|
|
|
|
</UserControl>
|
