202 lines
13 KiB
XML
202 lines
13 KiB
XML
<UserControl x:Class="AntdWpfDemo.Views.SwitchView"
|
|
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="Switch" />
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="Switching Selector." />
|
|
|
|
<Label Style="{StaticResource Ant.H2}" Content="When To Use" />
|
|
<TextBlock Style="{StaticResource Ant.P}" Text="If you need to represent the switching between two states or on-off state.
The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation." />
|
|
|
|
<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>
|
|
The most basic usage.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<WrapPanel>
|
|
<antd:Switch IsChecked="True" />
|
|
</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>
|
|
<antd:Switch IsChecked="True" />
|
|
</WrapPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Text & icon">
|
|
<antd:CodeBox.Description>
|
|
With text and icon.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<WrapPanel Margin="8 8 0 0">
|
|
<antd:Switch IsChecked="True" Content="开" UnCheckedContent="关" />
|
|
</WrapPanel>
|
|
<WrapPanel Margin="8 8 0 0">
|
|
<antd:Switch Content="1" UnCheckedContent="0" />
|
|
</WrapPanel>
|
|
<WrapPanel Margin="8 8 0 8">
|
|
<antd:Switch IsChecked="True">
|
|
<antd:Switch.Content>
|
|
<Path Width="12"
|
|
Height="12"
|
|
Stretch="Uniform"
|
|
Fill="White"
|
|
Data="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />
|
|
</antd:Switch.Content>
|
|
<antd:Switch.UnCheckedContent>
|
|
<Path Width="9"
|
|
Height="9"
|
|
Stretch="Uniform"
|
|
Fill="White"
|
|
Data="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />
|
|
</antd:Switch.UnCheckedContent>
|
|
</antd:Switch>
|
|
</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:Switch IsChecked="True" Content="开" UnCheckedContent="关" />\n
|
|
\t</WrapPanel>\n
|
|
\t<WrapPanel Margin="0 8 0 0">\n
|
|
\t\t<antd:Switch IsChecked="True" Content="1" UnCheckedContent="0" />\n
|
|
\t</WrapPanel>\n
|
|
\t<WrapPanel Margin="0 8 0 0">\n
|
|
\t\t<antd:Switch IsChecked="True">\n
|
|
\t\t\t<antd:Switch.Content>\n
|
|
\t\t\t\t<Path Width="12" \n
|
|
\t\t\t\t\tHeight="12" \n
|
|
\t\t\t\t\tStretch="Uniform" \n
|
|
\t\t\t\t\tFill="White" \n
|
|
\t\t\t\t\tData="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" />\n
|
|
\t\t\t</antd:Switch.Content>\n
|
|
\t\t\t<antd:Switch.UnCheckedContent>\n
|
|
\t\t\t\t<Path Width="9" \n
|
|
\t\t\t\t\tHeight="9"\n
|
|
\t\t\t\t\tStretch="Uniform" \n
|
|
\t\t\t\t\tFill="White" \n
|
|
\t\t\t\t\tData="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" />\n
|
|
\t\t\t</antd:Switch.UnCheckedContent>\n
|
|
\t\t</antd:Switch>\n
|
|
\t</WrapPanel>\n
|
|
</StackPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Loading">
|
|
<antd:CodeBox.Description>
|
|
Mark a pending state of switch.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<WrapPanel>
|
|
<antd:Switch IsChecked="True" Loading="True" />
|
|
</WrapPanel>
|
|
<WrapPanel Margin="0 8 0 0">
|
|
<antd:Switch Size="Small" Loading="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:Switch IsChecked="True" Loading="True" />\n
|
|
\t</WrapPanel>\n
|
|
\t<WrapPanel Margin="0 8 0 0">\n
|
|
\t\t<antd:Switch Size="Small" Loading="True" />\n
|
|
\t</WrapPanel>\n
|
|
</StackPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
</StackPanel>
|
|
<StackPanel Grid.Column="1" Margin="8 0">
|
|
<antd:CodeBox Title="Disabled">
|
|
<antd:CodeBox.Description>
|
|
Disabled state of `Switch`.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<WrapPanel>
|
|
<antd:Switch IsChecked="True" IsEnabled="{Binding IsEnabled}" />
|
|
</WrapPanel>
|
|
<WrapPanel Margin="0 8 0 0">
|
|
<antd:Button x:Name="Toggle" Type="Primary" Content="Toggle disabled" />
|
|
</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:Switch IsChecked="True" IsEnabled="{Binding IsEnabled}" />\n
|
|
\t</WrapPanel>\n
|
|
\t<WrapPanel Margin="0 8 0 0">\n
|
|
\t\t<antd:Button x:Name="Toggle" Type="Primary" Content="Toggle disabled" />\n
|
|
\t</WrapPanel>\n
|
|
</StackPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
<antd:CodeBox Title="Two sizes">
|
|
<antd:CodeBox.Description>
|
|
`Size="Small"` represents a small sized switch.
|
|
</antd:CodeBox.Description>
|
|
<antd:CodeBox.Content>
|
|
<StackPanel>
|
|
<WrapPanel>
|
|
<antd:Switch IsChecked="True" />
|
|
</WrapPanel>
|
|
<WrapPanel Margin="0 8 0 0">
|
|
<antd:Switch Size="Small" 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:Switch IsChecked="True" />\n
|
|
\t</WrapPanel>\n
|
|
\t<WrapPanel Margin="0 8 0 0">\n
|
|
\t\t<antd:Switch Size="Small" IsChecked="True" />\n
|
|
\t</WrapPanel>\n
|
|
</StackPanel>
|
|
</antd:CodeBox.Code>
|
|
</antd:CodeBox>
|
|
</StackPanel>
|
|
</Grid>
|
|
</Grid>
|
|
</ScrollViewer>
|
|
</UserControl>
|