ShrlAlgoToolkit/AntdWpfDemo/Views/IconView.xaml

<UserControl x:Class="AntdWpfDemo.Views.IconView"
            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: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="Icon" />
                <TextBlock Style="{StaticResource Ant.P}" Text="Semantic vector graphics." />

                <Label Style="{StaticResource Ant.H2}" Content="Examples" />
            </StackPanel>
            <Grid Grid.Row="1">
                <Grid.Resources>
                    <Style TargetType="antd:Icon">
                        <Setter Property="FontSize" Value="24" />
                        <Setter Property="Margin" Value="0 0 8 0" />
                    </Style>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel Margin="8 0">
                    <antd:CodeBox Title="Basic">
                        <antd:CodeBox.Description>
                            Use tag `&lt;antd:Icon /&gt;` to create an icon and set its type in the `Type` property. Specific the `Spin` property to show spinning animation and the `Theme` property to switch different themes.
                        </antd:CodeBox.Description>
                        <antd:CodeBox.Content>
                            <WrapPanel>
                                <antd:Icon Type="check-circle" />
                                <antd:Icon Type="check-circle" Theme="Filled" />
                                <antd:Icon Type="loading" />
                            </WrapPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &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
                                &lt;antd:Icon Type="check-circle" /&gt;\n
                                &lt;antd:Icon Type="check-circle" Theme="Filled" /&gt;\n
                                &lt;antd:Icon Type="loading" /&gt;\n
                            &lt;/WrapPanel&gt;
                        </antd:CodeBox.Code>
                    </antd:CodeBox>
                    <antd:CodeBox Title="Custom Icon">
                        <antd:CodeBox.Description>
                            Use resources to define a reusable custom icon。Naming the resource `x:Key` must follow the ant icon naming convention.\n\n
                            We provide semantic name for every icon, and naming rules are as follows:\n
                            Scanning line icon has the similar name with its solid one，but it's distinguished by `.fill`, for example, `anticon.question-circle` (an empty circle) and `anticon.question-circle.fill` (a full circle);\n
                            Naming sequence：`[anticon].[[name]-[shape?]].[fill|colorful?]`\n
                            Icon Type: `[[name]-[shape?]]`\n
                            `?` means is optional.
                        </antd:CodeBox.Description>
                        <antd:CodeBox.Content>
                            <WrapPanel>
                                <WrapPanel.Resources>
                                    <StreamGeometry x:Key="anticon.heart">M 923 283.6 c -13.4 -31.1 -32.6 -58.9 -56.9 -82.8 c -24.3 -23.8 -52.5 -42.4 -84 -55.5 c -32.5 -13.5 -66.9 -20.3 -102.4 -20.3 c -49.3 0 -97.4 13.5 -139.2 39 c -10 6.1 -19.5 12.8 -28.5 20.1 c -9 -7.3 -18.5 -14 -28.5 -20.1 c -41.8 -25.5 -89.9 -39 -139.2 -39 c -35.5 0 -69.9 6.8 -102.4 20.3 c -31.4 13 -59.7 31.7 -84 55.5 c -24.4 23.9 -43.5 51.7 -56.9 82.8 c -13.9 32.3 -21 66.6 -21 101.9 c 0 33.3 6.8 68 20.3 103.3 c 11.3 29.5 27.5 60.1 48.2 91 c 32.8 48.9 77.9 99.9 133.9 151.6 c 92.8 85.7 184.7 144.9 188.6 147.3 l 23.7 15.2 c 10.5 6.7 24 6.7 34.5 0 l 23.7 -15.2 c 3.9 -2.5 95.7 -61.6 188.6 -147.3 c 56 -51.7 101.1 -102.7 133.9 -151.6 c 20.7 -30.9 37 -61.5 48.2 -91 c 13.5 -35.3 20.3 -70 20.3 -103.3 c 0.1 -35.3 -7 -69.6 -20.9 -101.9 Z</StreamGeometry>
                                    <!-- Colorful -->
                                    <GeometryGroup x:Key="anticon.panda">
                                        <PathGeometry antd:Icon.Fill="#6b676e" Figures="M 99.096 315.634 s -82.58 -64.032 -82.58 -132.13 c 0 -66.064 33.032 -165.162 148.646 -148.646 c 83.37 11.91 99.096 165.162 99.096 165.162 l -165.162 115.614 Z M 924.906 315.634 s 82.58 -64.032 82.58 -132.13 c 0 -66.064 -33.032 -165.162 -148.646 -148.646 c -83.37 11.91 -99.096 165.162 -99.096 165.162 l 165.162 115.614 Z" />
                                        <PathGeometry antd:Icon.Fill="#ffebd2" Figures="M 1024 561.548 c 0 264.526 -229.23 429.42 -512.002 429.42 S 0 826.076 0 561.548 S 283.96 66.064 512.002 66.064 S 1024 297.022 1024 561.548 Z" />
                                        <PathGeometry antd:Icon.Fill="#e9d7c3" Figures="M 330.324 842.126 c 0 82.096 81.34 148.646 181.678 148.646 s 181.678 -66.55 181.678 -148.646 H 330.324 Z" />
                                        <PathGeometry antd:Icon.Fill="#ffffff" Figures="M 644.13 611.098 C 594.582 528.516 561.55 512 512.002 512 c -49.548 0 -82.58 16.516 -132.13 99.096 c -42.488 70.814 -78.73 211.264 -49.548 247.742 c 66.064 82.58 165.162 33.032 181.678 33.032 c 16.516 0 115.614 49.548 181.678 -33.032 c 29.18 -36.476 -7.064 -176.93 -49.55 -247.74 Z" />
                                        <PathGeometry antd:Icon.Fill="#6b676e" Figures="M 611.098 495.484 c 0 -45.608 36.974 -82.58 82.58 -82.58 c 49.548 0 198.194 99.098 198.194 165.162 s -79.934 144.904 -148.646 99.096 c -49.548 -33.032 -132.128 -148.646 -132.128 -181.678 Z M 412.904 495.484 c 0 -45.608 -36.974 -82.58 -82.58 -82.58 c -49.548 0 -198.194 99.098 -198.194 165.162 s 79.934 144.904 148.646 99.096 c 49.548 -33.032 132.128 -148.646 132.128 -181.678 Z" />
                                        <PathGeometry antd:Icon.Fill="#464655" Figures="M 512.002 726.622 c -30.06 0 -115.614 5.668 -115.614 33.032 c 0 49.638 105.484 85.24 115.614 82.58 c 10.128 2.66 115.614 -32.944 115.614 -82.58 c -0.002 -27.366 -85.556 -33.032 -115.614 -33.032 Z" />
                                        <PathGeometry antd:Icon.Fill="#464655" Figures="M 330.324 495.484 m -33.032 0 a 33.032 33.032 0 1 0 66.064 0 a 33.032 33.032 0 1 0 -66.064 0 Z" />
                                        <PathGeometry antd:Icon.Fill="#464655" Figures="M 693.678 495.484 m -33.032 0 a 33.032 33.032 0 1 0 66.064 0 a 33.032 33.032 0 1 0 -66.064 0 Z" />
                                    </GeometryGroup>
                                </WrapPanel.Resources>
                                <antd:Icon Type="heart" FontSize="14" VerticalAlignment="Center" Foreground="HotPink" />
                                <antd:Icon Type="panda" FontSize="32" />
                            </WrapPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
                            &lt;WrapPanel&gt;\n
                                \t&lt;WrapPanel.Resources&gt;\n
                                        \t\t&lt;StreamGeometry x:Key="anticon.heart"&gt;M 923 283.6 c -13.4 -31.1 -32.6 -58.9 -56.9 -82.8 c -24.3 -23.8 -52.5 -42.4 -84 -55.5 c -32.5 -13.5 -66.9 -20.3 -102.4 -20.3 c -49.3 0 -97.4 13.5 -139.2 39 c -10 6.1 -19.5 12.8 -28.5 20.1 c -9 -7.3 -18.5 -14 -28.5 -20.1 c -41.8 -25.5 -89.9 -39 -139.2 -39 c -35.5 0 -69.9 6.8 -102.4 20.3 c -31.4 13 -59.7 31.7 -84 55.5 c -24.4 23.9 -43.5 51.7 -56.9 82.8 c -13.9 32.3 -21 66.6 -21 101.9 c 0 33.3 6.8 68 20.3 103.3 c 11.3 29.5 27.5 60.1 48.2 91 c 32.8 48.9 77.9 99.9 133.9 151.6 c 92.8 85.7 184.7 144.9 188.6 147.3 l 23.7 15.2 c 10.5 6.7 24 6.7 34.5 0 l 23.7 -15.2 c 3.9 -2.5 95.7 -61.6 188.6 -147.3 c 56 -51.7 101.1 -102.7 133.9 -151.6 c 20.7 -30.9 37 -61.5 48.2 -91 c 13.5 -35.3 20.3 -70 20.3 -103.3 c 0.1 -35.3 -7 -69.6 -20.9 -101.9 Z&lt;/StreamGeometry&gt;\n
                                        \t\t&lt;!-- Colorful --&gt;\n
                                        \t\t&lt;GeometryGroup x:Key="anticon.panda"&gt;\n
                                            \t\t\t&lt;PathGeometry antd:Icon.Fill="#6b676e" Figures="M 99.096 315.634 s -82.58 -64.032 -82.58 -132.13 c 0 -66.064 33.032 -165.162 148.646 -148.646 c 83.37 11.91 99.096 165.162 99.096 165.162 l -165.162 115.614 Z M 924.906 315.634 s 82.58 -64.032 82.58 -132.13 c 0 -66.064 -33.032 -165.162 -148.646 -148.646 c -83.37 11.91 -99.096 165.162 -99.096 165.162 l 165.162 115.614 Z" /&gt;\n
                                            \t\t\t&lt;PathGeometry antd:Icon.Fill="#ffebd2" Figures="M 1024 561.548 c 0 264.526 -229.23 429.42 -512.002 429.42 S 0 826.076 0 561.548 S 283.96 66.064 512.002 66.064 S 1024 297.022 1024 561.548 Z" /&gt;\n
                                            \t\t\t&lt;PathGeometry antd:Icon.Fill="#e9d7c3" Figures="M 330.324 842.126 c 0 82.096 81.34 148.646 181.678 148.646 s 181.678 -66.55 181.678 -148.646 H 330.324 Z" /&gt;\n
                                            \t\t\t&lt;PathGeometry antd:Icon.Fill="#ffffff" Figures="M 644.13 611.098 C 594.582 528.516 561.55 512 512.002 512 c -49.548 0 -82.58 16.516 -132.13 99.096 c -42.488 70.814 -78.73 211.264 -49.548 247.742 c 66.064 82.58 165.162 33.032 181.678 33.032 c 16.516 0 115.614 49.548 181.678 -33.032 c 29.18 -36.476 -7.064 -176.93 -49.55 -247.74 Z" /&gt;\n
                                            \t\t\t&lt;PathGeometry antd:Icon.Fill="#6b676e" Figures="M 611.098 495.484 c 0 -45.608 36.974 -82.58 82.58 -82.58 c 49.548 0 198.194 99.098 198.194 165.162 s -79.934 144.904 -148.646 99.096 c -49.548 -33.032 -132.128 -148.646 -132.128 -181.678 Z M 412.904 495.484 c 0 -45.608 -36.974 -82.58 -82.58 -82.58 c -49.548 0 -198.194 99.098 -198.194 165.162 s 79.934 144.904 148.646 99.096 c 49.548 -33.032 132.128 -148.646 132.128 -181.678 Z" /&gt;\n
                                            \t\t\t&lt;PathGeometry antd:Icon.Fill="#464655" Figures="M 512.002 726.622 c -30.06 0 -115.614 5.668 -115.614 33.032 c 0 49.638 105.484 85.24 115.614 82.58 c 10.128 2.66 115.614 -32.944 115.614 -82.58 c -0.002 -27.366 -85.556 -33.032 -115.614 -33.032 Z" /&gt;\n
                                            \t\t\t&lt;PathGeometry antd:Icon.Fill="#464655" Figures="M 330.324 495.484 m -33.032 0 a 33.032 33.032 0 1 0 66.064 0 a 33.032 33.032 0 1 0 -66.064 0 Z" /&gt;\n
                                            \t\t\t&lt;PathGeometry antd:Icon.Fill="#464655" Figures="M 693.678 495.484 m -33.032 0 a 33.032 33.032 0 1 0 66.064 0 a 33.032 33.032 0 1 0 -66.064 0 Z" /&gt;\n
                                        \t\t&lt;/GeometryGroup&gt;\n
                                    \t&lt;/WrapPanel.Resources&gt;\n
                                \t&lt;antd:Icon Type="heart" FontSize="14" VerticalAlignment="Center" Foreground="HotPink" /&gt;\n
                                \t&lt;antd:Icon Type="panda" FontSize="32" Theme="Colorful" /&gt;\n
                            &lt;/WrapPanel&gt;
                        </antd:CodeBox.Code>
                    </antd:CodeBox>
                </StackPanel>
                <StackPanel Grid.Column="1" Margin="8 0">
                    <antd:CodeBox Title="Colourful icon">
                        <antd:CodeBox.Description>
                            Specific them property `Theme` to `Colorful` to render colourful icons.
                        </antd:CodeBox.Description>
                        <antd:CodeBox.Content>
                            <WrapPanel>
                                <WrapPanel.Resources>
                                    <GeometryGroup x:Key="anticon.smile.colorful">
                                        <PathGeometry Figures="M 512 64 C 264.6 64 64 264.6 64 512 s 200.6 448 448 448 s 448 -200.6 448 -448 S 759.4 64 512 64 Z m 0 820 c -205.4 0 -372 -166.6 -372 -372 s 166.6 -372 372 -372 s 372 166.6 372 372 s -166.6 372 -372 372 ZM 288 421 a 48 48 0 1 0 96 0 a 48 48 0 1 0 -96 0 Z M 664 533 h -48.1 c -4.2 0 -7.8 3.2 -8.1 7.4 c -3.7 49.5 -45.3 88.6 -95.8 88.6 s -92 -39.1 -95.8 -88.6 c -0.3 -4.2 -3.9 -7.4 -8.1 -7.4 H 360 a 8 8 0 0 0 -8 8.4 c 4.4 84.3 74.5 151.6 160 151.6 s 155.6 -67.3 160 -151.6 a 8 8 0 0 0 -8 -8.4 Z M 640 421 a 48 48 0 1 0 96 0 a 48 48 0 1 0 -96 0 Z" />
                                        <PathGeometry Figures="M 512 140 c -205.4 0 -372 166.6 -372 372 s 166.6 372 372 372 s 372 -166.6 372 -372 s -166.6 -372 -372 -372 Z M 288 421 a 48.01 48.01 0 0 1 96 0 a 48.01 48.01 0 0 1 -96 0 Z m 224 272 c -85.5 0 -155.6 -67.3 -160 -151.6 a 8 8 0 0 1 8 -8.4 h 48.1 c 4.2 0 7.8 3.2 8.1 7.4 C 420 589.9 461.5 629 512 629 s 92.1 -39.1 95.8 -88.6 c 0.3 -4.2 3.9 -7.4 8.1 -7.4 H 664 a 8 8 0 0 1 8 8.4 C 667.6 625.7 597.5 693 512 693 Z m 176 -224 a 48.01 48.01 0 0 1 0 -96 a 48.01 48.01 0 0 1 0 96 Z" />
                                    </GeometryGroup>
                                    <GeometryGroup x:Key="anticon.heart.colorful">
                                        <PathGeometry Figures="M 923 283.6 a 260.04 260.04 0 0 0 -56.9 -82.8 a 264.4 264.4 0 0 0 -84 -55.5 A 265.34 265.34 0 0 0 679.7 125 c -49.3 0 -97.4 13.5 -139.2 39 c -10 6.1 -19.5 12.8 -28.5 20.1 c -9 -7.3 -18.5 -14 -28.5 -20.1 c -41.8 -25.5 -89.9 -39 -139.2 -39 c -35.5 0 -69.9 6.8 -102.4 20.3 c -31.4 13 -59.7 31.7 -84 55.5 a 258.44 258.44 0 0 0 -56.9 82.8 c -13.9 32.3 -21 66.6 -21 101.9 c 0 33.3 6.8 68 20.3 103.3 c 11.3 29.5 27.5 60.1 48.2 91 c 32.8 48.9 77.9 99.9 133.9 151.6 c 92.8 85.7 184.7 144.9 188.6 147.3 l 23.7 15.2 c 10.5 6.7 24 6.7 34.5 0 l 23.7 -15.2 c 3.9 -2.5 95.7 -61.6 188.6 -147.3 c 56 -51.7 101.1 -102.7 133.9 -151.6 c 20.7 -30.9 37 -61.5 48.2 -91 c 13.5 -35.3 20.3 -70 20.3 -103.3 c 0.1 -35.3 -7 -69.6 -20.9 -101.9 Z M 512 814.8 S 156 586.7 156 385.5 C 156 283.6 240.3 201 344.3 201 c 73.1 0 136.5 40.8 167.7 100.4 C 543.2 241.8 606.6 201 679.7 201 c 104 0 188.3 82.6 188.3 184.5 c 0 201.2 -356 429.3 -356 429.3 Z" />
                                        <PathGeometry Figures="M 679.7 201 c -73.1 0 -136.5 40.8 -167.7 100.4 C 480.8 241.8 417.4 201 344.3 201 c -104 0 -188.3 82.6 -188.3 184.5 c 0 201.2 356 429.3 356 429.3 s 356 -228.1 356 -429.3 C 868 283.6 783.7 201 679.7 201 Z" />
                                    </GeometryGroup>
                                </WrapPanel.Resources>
                                <antd:Icon Type="smile" Theme="Colorful" Foreground="#1890ff" />
                                <antd:Icon Type="heart" Theme="Colorful" Foreground="#eb2f96" />
                            </WrapPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &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;WrapPanel.Resources&gt;\n
                                    \t\t&lt;GeometryGroup x:Key="anticon.smile.colorful"&gt;\n
                                        \t\t\t&lt;PathGeometry Figures="M 512 64 C 264.6 64 64 264.6 64 512 s 200.6 448 448 448 s 448 -200.6 448 -448 S 759.4 64 512 64 Z m 0 820 c -205.4 0 -372 -166.6 -372 -372 s 166.6 -372 372 -372 s 372 166.6 372 372 s -166.6 372 -372 372 ZM 288 421 a 48 48 0 1 0 96 0 a 48 48 0 1 0 -96 0 Z M 664 533 h -48.1 c -4.2 0 -7.8 3.2 -8.1 7.4 c -3.7 49.5 -45.3 88.6 -95.8 88.6 s -92 -39.1 -95.8 -88.6 c -0.3 -4.2 -3.9 -7.4 -8.1 -7.4 H 360 a 8 8 0 0 0 -8 8.4 c 4.4 84.3 74.5 151.6 160 151.6 s 155.6 -67.3 160 -151.6 a 8 8 0 0 0 -8 -8.4 Z M 640 421 a 48 48 0 1 0 96 0 a 48 48 0 1 0 -96 0 Z" /&gt;\n
                                        \t\t\t&lt;PathGeometry Figures="M 512 140 c -205.4 0 -372 166.6 -372 372 s 166.6 372 372 372 s 372 -166.6 372 -372 s -166.6 -372 -372 -372 Z M 288 421 a 48.01 48.01 0 0 1 96 0 a 48.01 48.01 0 0 1 -96 0 Z m 224 272 c -85.5 0 -155.6 -67.3 -160 -151.6 a 8 8 0 0 1 8 -8.4 h 48.1 c 4.2 0 7.8 3.2 8.1 7.4 C 420 589.9 461.5 629 512 629 s 92.1 -39.1 95.8 -88.6 c 0.3 -4.2 3.9 -7.4 8.1 -7.4 H 664 a 8 8 0 0 1 8 8.4 C 667.6 625.7 597.5 693 512 693 Z m 176 -224 a 48.01 48.01 0 0 1 0 -96 a 48.01 48.01 0 0 1 0 96 Z" /&gt;\n
                                    \t&lt;/GeometryGroup&gt;\n
                                    \t&lt;GeometryGroup x:Key="anticon.heart.colorful"&gt;\n
                                        \t\t\t&lt;PathGeometry Figures="M 923 283.6 a 260.04 260.04 0 0 0 -56.9 -82.8 a 264.4 264.4 0 0 0 -84 -55.5 A 265.34 265.34 0 0 0 679.7 125 c -49.3 0 -97.4 13.5 -139.2 39 c -10 6.1 -19.5 12.8 -28.5 20.1 c -9 -7.3 -18.5 -14 -28.5 -20.1 c -41.8 -25.5 -89.9 -39 -139.2 -39 c -35.5 0 -69.9 6.8 -102.4 20.3 c -31.4 13 -59.7 31.7 -84 55.5 a 258.44 258.44 0 0 0 -56.9 82.8 c -13.9 32.3 -21 66.6 -21 101.9 c 0 33.3 6.8 68 20.3 103.3 c 11.3 29.5 27.5 60.1 48.2 91 c 32.8 48.9 77.9 99.9 133.9 151.6 c 92.8 85.7 184.7 144.9 188.6 147.3 l 23.7 15.2 c 10.5 6.7 24 6.7 34.5 0 l 23.7 -15.2 c 3.9 -2.5 95.7 -61.6 188.6 -147.3 c 56 -51.7 101.1 -102.7 133.9 -151.6 c 20.7 -30.9 37 -61.5 48.2 -91 c 13.5 -35.3 20.3 -70 20.3 -103.3 c 0.1 -35.3 -7 -69.6 -20.9 -101.9 Z M 512 814.8 S 156 586.7 156 385.5 C 156 283.6 240.3 201 344.3 201 c 73.1 0 136.5 40.8 167.7 100.4 C 543.2 241.8 606.6 201 679.7 201 c 104 0 188.3 82.6 188.3 184.5 c 0 201.2 -356 429.3 -356 429.3 Z" /&gt;\n
                                        \t\t\t&lt;PathGeometry Figures="M 679.7 201 c -73.1 0 -136.5 40.8 -167.7 100.4 C 480.8 241.8 417.4 201 344.3 201 c -104 0 -188.3 82.6 -188.3 184.5 c 0 201.2 356 429.3 356 429.3 s 356 -228.1 356 -429.3 C 868 283.6 783.7 201 679.7 201 Z" /&gt;\n
                                    \t\t&lt;/GeometryGroup&gt;\n
                                \t&lt;/WrapPanel.Resources&gt;\n
                                \t&lt;antd:Icon Type="smile" Theme="Colorful" Foreground="#1890ff" /&gt;\n
                                \t&lt;antd:Icon Type="heart" Theme="Colorful" Foreground="#eb2f96" /&gt;\n
                            &lt;/WrapPanel&gt;
                        </antd:CodeBox.Code>
                    </antd:CodeBox>
                </StackPanel>
            </Grid>
        </Grid>
    </ScrollViewer>

</UserControl>