ShrlAlgo/Shrlalgo.RvKits
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f209e7d3ad9c9f9805ce678d0d60dcb306d1c33f
Shrlalgo.RvKits/AntdWpfDemo/Views/TagView.xaml
GG Z f209e7d3ad 月更
2025-07-31 20:12:24 +08:00

263 lines
16 KiB
XML
Raw Blame History

<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">
<ScrollViewer>
<Grid Margin="16,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<Label Content="Tag" Style="{StaticResource Ant.H1}" />
<TextBlock Style="{StaticResource Ant.P}" Text="Tag for categorizing or markup." />
<Label Content="When To Use" Style="{StaticResource Ant.H2}" />
<TextBlock Style="{StaticResource Ant.P}" Text="It can be used to tag by dimension or property.&#x0a;When categorizing." />
<Label Content="Examples" Style="{StaticResource Ant.H2}" />
</StackPanel>
<Grid Grid.Row="1">
<Grid.Resources>
<Style TargetType="antd:Tag">
<Setter Property="Margin" Value="0,0,8,8" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<StackPanel Margin="8,0">
<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>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;antd:Tag&gt;Tag 1&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag&gt;Link&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True"&gt;Tag 2&lt;/antd:Tag&gt;\n
\t&lt;antd:Tag Closable="True" cal:Message.Attached="[Event Closing] = [Action Closing($source, $eventArgs)]"&gt;Prevent Default&lt;/antd:Tag&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="Hot Tags">
<antd:CodeBox.Description>
Select your favourite topics.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<WrapPanel>
<TextBlock
FontSize="10"
Margin="0,0,8,0"
Text="Categories:"
VerticalAlignment="Center" />
<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>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;\n
\t&lt;TextBlock Text="Categories:" FontSize="10" VerticalAlignment="Center" Margin="0 0 8 0" /&gt;\n
\t&lt;WrapPanel VerticalAlignment="Center"&gt;\n
\t\t&lt;antd:CheckableTag Content="Movies" /&gt;\n
\t\t&lt;antd:CheckableTag Content="Books" /&gt;\n
\t\t&lt;antd:CheckableTag Content="Music" /&gt;\n
\t\t&lt;antd:CheckableTag Content="Sports" /&gt;\n
\t&lt;/WrapPanel&gt;\n
&lt;/WrapPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
<StackPanel Grid.Column="1" Margin="8,0">
<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>
<Label Content="Colorful:" Style="{StaticResource Ant.H4}" />
<WrapPanel>
<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" />
</WrapPanel>
<Label Content="Inverse:" Style="{StaticResource Ant.H4}" />
<WrapPanel>
<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" />
</WrapPanel>
</StackPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;StackPanel&gt;\n
\t&lt;Label Style="{StaticResource Ant.H4}" Content="Colorful:" /&gt;\n
\t&lt;WrapPanel&gt;\n
\t\t&lt;antd:Tag Foreground="#EB2F96" Content="magenta" ColorMode="Colorful" Closable="True" /&gt;\n
\t\t&lt;antd:Tag Foreground="#F5222D" Content="red" ColorMode="Colorful" /&gt;\n
\t\t&lt;antd:Tag Foreground="#FA541C" Content="volcano" ColorMode="Colorful" /&gt;\n
\t\t&lt;antd:Tag Foreground="#FA8C16" Content="orange" ColorMode="Colorful" /&gt;\n
\t\t&lt;antd:Tag Foreground="#FAAD14" Content="Gold" ColorMode="Colorful" /&gt;\n
\t\t&lt;antd:Tag Foreground="#A0D911" Content="lime" ColorMode="Colorful" /&gt;\n
\t\t&lt;antd:Tag Foreground="#52C41A" Content="green" ColorMode="Colorful" /&gt;\n
\t\t&lt;antd:Tag Foreground="#13C2C2" Content="cyan" ColorMode="Colorful" /&gt;\n
\t\t&lt;antd:Tag Foreground="#1890FF" Content="blue" ColorMode="Colorful" /&gt;\n
\t\t&lt;antd:Tag Foreground="#2F54EB" Content="purple" ColorMode="Colorful" /&gt;\n
\t&lt;/WrapPanel&gt;\n
\t&lt;Label Style="{StaticResource Ant.H4}" Content="Inverse:" /&gt;\n
\t&lt;WrapPanel&gt;\n
\t\t&lt;antd:Tag Background="#FF5500" Content="#FF5500" ColorMode="Inverse" Closable="True" /&gt;\n
\t\t&lt;antd:Tag Background="#2DB7F5" Content="#2DB7F5" ColorMode="Inverse" /&gt;\n
\t\t&lt;antd:Tag Background="#87d068" Content="#87d068" ColorMode="Inverse" /&gt;\n
\t\t&lt;antd:Tag Background="#108EE9" Content="#108EE9" ColorMode="Inverse" /&gt;\n
\t&lt;/WrapPanel&gt;\n
&lt;/StackPanel&gt;
</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>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;WrapPanel&gt;
&lt;antd:CheckableTag Content="Tag1" /&gt;
&lt;antd:CheckableTag Content="Tag2" /&gt;
&lt;antd:CheckableTag Content="Tag3" /&gt;
&lt;/WrapPanel&gt;
</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>
<antd:Tag
Closable="True"
Content="Movies"
Visibility="{Binding Visibility, Mode=TwoWay}" />
</WrapPanel>
<WrapPanel>
<antd:AntButton
Content="Toggle"
Size="Small"
x:Name="Toggle" />
</WrapPanel>
</StackPanel>
</antd:CodeBox.Content>
<antd:CodeBox.Code>
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n
&lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/AntIcons.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
&lt;StackPanel&gt;\n
\t&lt;WrapPanel&gt;\n
\t\t&lt;antd:Tag Content="Movies" Closable="True" Visibility="{Binding Visibility, Mode=TwoWay}" /&gt;\n
\t&lt;/WrapPanel&gt;\n
\t&lt;WrapPanel&gt;\n
\t\t&lt;antd:Button x:Name="Toggle" Size="Small" Content="Toggle" /&gt;\n
\t&lt;/WrapPanel&gt;\n
&lt;/StackPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
</Grid>
</Grid>
</ScrollViewer>
</UserControl>
Reference in New Issue View Git Blame Copy Permalink