Shrlalgo.RvKits/AntdWpfDemo/Views/SpinView.xaml

<UserControl
    d:DesignHeight="600"
    d:DesignWidth="930"
    mc:Ignorable="d"
    x:Class="AntDesignWPFDemo.Views.SpinView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"
    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="Spin" Style="{StaticResource Ant.H1}" />
                <TextBlock Style="{StaticResource Ant.P}" Text="A spinner for displaying loading state of a page or a section." />

                <Label Content="When To Use" Style="{StaticResource Ant.H2}" />
                <TextBlock Style="{StaticResource Ant.P}" Text="When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude." />

                <Label Content="Examples" Style="{StaticResource Ant.H2}" />
            </StackPanel>
            <Grid Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <StackPanel Margin="8,0">
                    <antd:CodeBox Title="Basic">
                        <antd:CodeBox.Description>
                            A simple loading status.
                        </antd:CodeBox.Description>
                        <antd:CodeBox.Content>
                            <WrapPanel>
                                <antd:Spin />
                            </WrapPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
                            &lt;WrapPanel&gt;\n
                            \t&lt;antd:Spin /&gt;\n
                            &lt;/WrapPanel&gt;
                        </antd:CodeBox.Code>
                    </antd:CodeBox>
                    <antd:CodeBox Title="Customized description">
                        <antd:CodeBox.Description>
                            Customized description content.
                        </antd:CodeBox.Description>
                        <antd:CodeBox.Content>
                            <WrapPanel>
                                <antd:Spin Tip="Loading...">
                                    <antd:Alert Description="Further details about the context of this alert." Message="Alert message title" />
                                </antd:Spin>
                            </WrapPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
                            &lt;WrapPanel&gt;\n
                            \t&lt;antd:Spin Tip="Loading..."&gt;\n
                            \t\t&lt;antd:Alert Message="Alert message title" Description="Further details about the context of this alert." /&gt;\n
                            \t&lt;/antd:Spin&gt;\n
                            &lt;/WrapPanel&gt;
                        </antd:CodeBox.Code>
                    </antd:CodeBox>
                    <antd:CodeBox Title="Custom spinning indicator">
                        <antd:CodeBox.Description>
                            Use custom loading indicator.
                        </antd:CodeBox.Description>
                        <antd:CodeBox.Content>
                            <WrapPanel>
                                <antd:Spin>
                                    <antd:Spin.Indicator>
                                        <antd:Icon FontSize="24" Type="loading" />
                                    </antd:Spin.Indicator>
                                </antd:Spin>
                            </WrapPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
                            &lt;WrapPanel&gt;\n
                            \t&lt;antd:Spin&gt;\n
                            \t\t&lt;antd:Spin.Indicator&gt;\n
                            \t\t\t&lt;antd:Icon Type="loading" FontSize="24" /&gt;\n
                            \t\t&lt;/antd:Spin.Indicator&gt;\n
                            \t&lt;/antd:Spin&gt;\n
                            &lt;/WrapPanel&gt;
                        </antd:CodeBox.Code>
                    </antd:CodeBox>
                </StackPanel>
                <StackPanel Grid.Column="1" Margin="8,0">
                    <antd:CodeBox Title="Size">
                        <antd:CodeBox.Description>
                            A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading page.
                        </antd:CodeBox.Description>
                        <antd:CodeBox.Content>
                            <WrapPanel>
                                <antd:Spin Margin="0,0,16,16" Size="Small" />
                                <antd:Spin Margin="0,0,16,16" />
                                <antd:Spin Margin="0,0,16,16" Size="Large" />
                            </WrapPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.xaml" /&gt;\n\n
                            xmlns:antd="https://github.com/ShrlAlgo/AntDesignWPF"\n\n
                            &lt;WrapPanel&gt;\n
                            \t&lt;antd:Spin Size="Small" Margin="0 0 16 16" /&gt;\n
                            \t&lt;antd:Spin Margin="0 0 16 16" /&gt;\n
                            \t&lt;antd:Spin Size="Large" Margin="0 0 16 16" /&gt;\n
                            &lt;/WrapPanel&gt;
                        </antd:CodeBox.Code>
                    </antd:CodeBox>
                    <antd:CodeBox Title="Embedded mode">
                        <antd:CodeBox.Description>
                            Embedding content into `Spin` will alter it into loading state.
                        </antd:CodeBox.Description>
                        <antd:CodeBox.Content>
                            <StackPanel>
                                <WrapPanel>
                                    <antd:Spin Spinning="{Binding IsChecked, Mode=OneWay, ElementName=SwitchOne}">
                                        <antd:Alert Description="Further details about the context of this alert." Message="Alert message title" />
                                    </antd:Spin>
                                </WrapPanel>
                                <WrapPanel Margin="0,16,0,0">
                                    <Label Content="Loading state：" />
                                    <antd:Switch IsChecked="True" x:Name="SwitchOne" />
                                </WrapPanel>
                            </StackPanel>
                        </antd:CodeBox.Content>
                        <antd:CodeBox.Code>
                            &lt;ResourceDictionary Source="pack://application:,,,/AntDesignWPF;component/Themes/Theme.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:Spin Spinning="{Binding IsChecked, Mode=OneWay, ElementName=SwitchOne}"&gt;\n
                            \t\t\t&lt;antd:Alert Message="Alert message title" Description="Further details about the context of this alert." /&gt;\n
                            \t\t&lt;/antd:Spin&gt;\n
                            \t&lt;/WrapPanel&gt;\n
                            \t&lt;WrapPanel Margin="0 16 0 0"&gt;\n
                            \t\t&lt;Label Content="Loading state：" /&gt;\n
                            \t\t&lt;antd:Switch x:Name="SwitchOne" /&gt;\n
                            \t&lt;/WrapPanel&gt;\n
                            &lt;/StackPanel&gt;
                        </antd:CodeBox.Code>
                    </antd:CodeBox>
                </StackPanel>
            </Grid>
        </Grid>
    </ScrollViewer>
</UserControl>