ShrlAlgoToolkit/AntdWpfDemo/Views/TagView.xaml

<UserControl x:Class="AntdWpfDemo.Views.TagView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:cal="http://www.caliburnproject.org"
             xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"
             mc:Ignorable="d"
             d:DesignHeight="600"
             d:DesignWidth="930">

    <ScrollViewer>
        <Grid Margin="16 0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackPanel>
                <Label Style="{StaticResource Ant.H1}" Content="Tag" />
                <TextBlock Style="{StaticResource Ant.P}" Text="Tag for categorizing or markup." />

                <Label Style="{StaticResource Ant.H2}" Content="When To Use" />
                <TextBlock Style="{StaticResource Ant.P}" Text="It can be used to tag by dimension or property.&#x0a;When categorizing." />

                <Label Style="{StaticResource Ant.H2}" Content="Examples" />
            </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:,,,/AntdWpf;component/Themes/Theme.xaml" /&gt;\n
                            &lt;ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/AntIcons.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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.Attach="[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 Text="Categories:" FontSize="10" VerticalAlignment="Center" Margin="0 0 8 0" />
                                <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:,,,/AntdWpf;component/Themes/Theme.xaml" /&gt;\n
                            &lt;ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/AntIcons.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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 Style="{StaticResource Ant.H4}" Content="Colorful:" />
                                <WrapPanel>
                                    <antd:Tag Foreground="#EB2F96" Content="magenta" ColorMode="Colorful" Closable="True" />
                                    <antd:Tag Foreground="#F5222D" Content="red" ColorMode="Colorful" />
                                    <antd:Tag Foreground="#FA541C" Content="volcano" ColorMode="Colorful" />
                                    <antd:Tag Foreground="#FA8C16" Content="orange" ColorMode="Colorful" />
                                    <antd:Tag Foreground="#FAAD14" Content="Gold" ColorMode="Colorful" />
                                    <antd:Tag Foreground="#A0D911" Content="lime" ColorMode="Colorful" />
                                    <antd:Tag Foreground="#52C41A" Content="green" ColorMode="Colorful" />
                                    <antd:Tag Foreground="#13C2C2" Content="cyan" ColorMode="Colorful" />
                                    <antd:Tag Foreground="#1890FF" Content="blue" ColorMode="Colorful" />
                                    <antd:Tag Foreground="#2F54EB" Content="purple" ColorMode="Colorful" />
                                </WrapPanel>
                                <Label Style="{StaticResource Ant.H4}" Content="Inverse:" />
                                <WrapPanel>
                                    <antd:Tag Background="#FF5500" Content="#FF5500" ColorMode="Inverse" Closable="True" />
                                    <antd:Tag Background="#2DB7F5" Content="#2DB7F5" ColorMode="Inverse" />
                                    <antd:Tag Background="#87d068" Content="#87d068" ColorMode="Inverse" />
                                    <antd:Tag Background="#108EE9" Content="#108EE9" ColorMode="Inverse" />
                                </WrapPanel>
                            </StackPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &lt;ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" /&gt;\n
                            &lt;ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/AntIcons.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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:,,,/AntdWpf;component/Themes/Theme.xaml" /&gt;\n
                            &lt;ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/AntIcons.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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 Content="Movies" Closable="True" Visibility="{Binding Visibility, Mode=TwoWay}" />
                                </WrapPanel>
                                <WrapPanel>
                                    <antd:Button x:Name="Toggle" Size="Small" Content="Toggle" />
                                </WrapPanel>
                            </StackPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &lt;ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" /&gt;\n
                            &lt;ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/AntIcons.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\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>