更新
This commit is contained in:
156
AntdWpfDemo/Views/SpinView.xaml
Normal file
156
AntdWpfDemo/Views/SpinView.xaml
Normal file
@@ -0,0 +1,156 @@
|
||||
<UserControl x:Class="AntdWpfDemo.Views.SpinView"
|
||||
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="Spin" />
|
||||
<TextBlock Style="{StaticResource Ant.P}" Text="A spinner for displaying loading state of a page or a section." />
|
||||
|
||||
<Label Style="{StaticResource Ant.H2}" Content="When To Use" />
|
||||
<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 Style="{StaticResource Ant.H2}" Content="Examples" />
|
||||
</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>
|
||||
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||||
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
||||
<WrapPanel>\n
|
||||
\t<antd:Spin />\n
|
||||
</WrapPanel>
|
||||
</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 Message="Alert message title" Description="Further details about the context of this alert." />
|
||||
</antd:Spin>
|
||||
</WrapPanel>
|
||||
</antd:CodeBox.Content>
|
||||
<antd:CodeBox.Code>
|
||||
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||||
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
||||
<WrapPanel>\n
|
||||
\t<antd:Spin Tip="Loading...">\n
|
||||
\t\t<antd:Alert Message="Alert message title" Description="Further details about the context of this alert." />\n
|
||||
\t</antd:Spin>\n
|
||||
</WrapPanel>
|
||||
</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 Type="loading" FontSize="24" />
|
||||
</antd:Spin.Indicator>
|
||||
</antd:Spin>
|
||||
</WrapPanel>
|
||||
</antd:CodeBox.Content>
|
||||
<antd:CodeBox.Code>
|
||||
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||||
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
||||
<WrapPanel>\n
|
||||
\t<antd:Spin>\n
|
||||
\t\t<antd:Spin.Indicator>\n
|
||||
\t\t\t<antd:Icon Type="loading" FontSize="24" />\n
|
||||
\t\t</antd:Spin.Indicator>\n
|
||||
\t</antd:Spin>\n
|
||||
</WrapPanel>
|
||||
</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 Size="Small" Margin="0 0 16 16" />
|
||||
<antd:Spin Margin="0 0 16 16" />
|
||||
<antd:Spin Size="Large" Margin="0 0 16 16" />
|
||||
</WrapPanel>
|
||||
</antd:CodeBox.Content>
|
||||
<antd:CodeBox.Code>
|
||||
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||||
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
||||
<WrapPanel>\n
|
||||
\t<antd:Spin Size="Small" Margin="0 0 16 16" />\n
|
||||
\t<antd:Spin Margin="0 0 16 16" />\n
|
||||
\t<antd:Spin Size="Large" Margin="0 0 16 16" />\n
|
||||
</WrapPanel>
|
||||
</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 Message="Alert message title" Description="Further details about the context of this alert." />
|
||||
</antd:Spin>
|
||||
</WrapPanel>
|
||||
<WrapPanel Margin="0 16 0 0">
|
||||
<Label Content="Loading state:" />
|
||||
<antd:Switch x:Name="SwitchOne" IsChecked="True" />
|
||||
</WrapPanel>
|
||||
</StackPanel>
|
||||
</antd:CodeBox.Content>
|
||||
<antd:CodeBox.Code>
|
||||
<ResourceDictionary Source="pack://application:,,,/AntdWpf;component/Themes/Theme.xaml" />\n\n
|
||||
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
|
||||
<StackPanel>\n
|
||||
\t<WrapPanel>\n
|
||||
\t\t<antd:Spin Spinning="{Binding IsChecked, Mode=OneWay, ElementName=SwitchOne}">\n
|
||||
\t\t\t<antd:Alert Message="Alert message title" Description="Further details about the context of this alert." />\n
|
||||
\t\t</antd:Spin>\n
|
||||
\t</WrapPanel>\n
|
||||
\t<WrapPanel Margin="0 16 0 0">\n
|
||||
\t\t<Label Content="Loading state:" />\n
|
||||
\t\t<antd:Switch x:Name="SwitchOne" />\n
|
||||
\t</WrapPanel>\n
|
||||
</StackPanel>
|
||||
</antd:CodeBox.Code>
|
||||
</antd:CodeBox>
|
||||
</StackPanel>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</ScrollViewer>
|
||||
</UserControl>
|
||||
Reference in New Issue
Block a user