Files
ShrlAlgoToolkit/AntdWpfDemo/Views/CheckBoxView.xaml
2025-07-12 23:31:32 +08:00

146 lines
9.2 KiB
XML

<UserControl x:Class="AntdWpfDemo.Views.CheckBoxView"
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="*" />
</Grid.RowDefinitions>
<StackPanel>
<Label Style="{StaticResource Ant.H1}" Content="Checkbox" />
<TextBlock Style="{StaticResource Ant.P}" Text="Checkbox component." />
<Label Style="{StaticResource Ant.H2}" Content="When To Use" />
<TextBlock Style="{StaticResource Ant.P}"
TextWrapping="Wrap"
Text="Used for selecting multiple values from several options.&#x0a;If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted." />
<Label Style="{StaticResource Ant.H2}" Content="Examples" />
</StackPanel>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Margin="8 0">
<antd:CodeBox Title="Basic">
<antd:CodeBox.Description>
Basic usage of checkbox.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<CheckBox Content="Checkbox" />
</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/Styles/antd.xaml" /&gt;\n\n
&lt;CheckBox Content="Checkbox" /&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="Controlled Checkbox">
<antd:CodeBox.Description>
Communicated with other components.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<CheckBox Content="{Binding CheckBox, Mode=OneWay}" IsChecked="{Binding IsChecked}" IsEnabled="{Binding IsEnabled}" />
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0 20 0 0">
<antd:AntButton x:Name="ToggleCheck" Type="Primary" Content="{Binding Check, Mode=OneWay}" Margin="0 0 10 0"/>
<antd:AntButton x:Name="ToggleEnabled" Type="Primary" Content="{Binding Enabled, Mode=OneWay}" />
</StackPanel>
</Grid>
</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/Styles/antd.xaml" /&gt;\n\n
xmlns:antd="https://github.com/ShrlAlgo/AntdWpf"\n\n
&lt;Grid&gt;\n
\t&lt;Grid.RowDefinitions&gt;\n
\t\t&lt;RowDefinition /&gt;\n
\t\t&lt;RowDefinition /&gt;\n
\t&lt;/Grid.RowDefinitions&gt;\n
\t&lt;CheckBox Content="{Binding CheckBox, Mode=OneWay}" IsChecked="{Binding IsChecked}" IsEnabled="{Binding IsEnabled}" /&gt;\n
\t&lt;StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0 20 0 0"&gt;\n
\t\t&lt;antd:Button x:Name="ToggleCheck" Type="Primary" Content="{Binding Check, Mode=OneWay}" Margin="0 0 10 0"/&gt;\n
\t\t&lt;antd:Button x:Name="ToggleEnabled" Type="Primary" Content="{Binding Enabled, Mode=OneWay}" /&gt;\n
\t&lt;/StackPanel&gt;\n
&lt;/Grid&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
<StackPanel Grid.Column="1" Margin="8 0">
<antd:CodeBox Title="Disabled">
<antd:CodeBox.Description>
Disabled checkbox.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<StackPanel Orientation="Horizontal">
<CheckBox Content="Checkbox" IsEnabled="False" />
<CheckBox Content="Checkbox" IsEnabled="False" IsChecked="True" />
</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/Styles/antd.xaml" /&gt;\n\n
&lt;StackPanel Orientation="Horizontal"&gt;\n
\t&lt;CheckBox Content="Checkbox" IsEnabled="False" /&gt;\n
\t&lt;CheckBox Content="Checkbox" IsEnabled="False" IsChecked="True" /&gt;\n
&lt;/StackPanel&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
<antd:CodeBox Title="Check all">
<antd:CodeBox.Description>
The `indeterminate` state can help you to achieve a 'check all' effect.
</antd:CodeBox.Description>
<antd:CodeBox.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderBrush="#E9E9E9" BorderThickness="0 0 0 1" Padding="0 0 0 2">
<CheckBox x:Name="CheckAll" Content="Check all" />
</Border>
<WrapPanel Grid.Row="1" Orientation="Horizontal" Margin="0 16 0 0">
<CheckBox x:Name="Apple" Content="Apple" />
<CheckBox x:Name="Pear" Content="Pear" />
<CheckBox x:Name="Orange" Content="Orange" />
</WrapPanel>
</Grid>
</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/Styles/antd.xaml" /&gt;\n\n
&lt;Grid&gt;\n
\t&lt;Grid.RowDefinitions&gt;\n
\t\t&lt;RowDefinition /&gt;\n
\t\t&lt;RowDefinition /&gt;\n
\t&lt;/Grid.RowDefinitions&gt;\n
\t&lt;Border BorderBrush="#E9E9E9" BorderThickness="0 0 0 1" Padding="0 0 0 2"&gt;\n
\t\t&lt;CheckBox x:Name="CheckAll" Content="Check all" /&gt;\n
\t&lt;/Border&gt;\n
\t&lt;WrapPanel Grid.Row="1" Orientation="Horizontal" Margin="0 16 0 0"&gt;\n
\t\t&lt;CheckBox x:Name="Apple" Content="Apple" /&gt;\n
\t\t&lt;CheckBox x:Name="Pear" Content="Pear" /&gt;\n
\t\t&lt;CheckBox x:Name="Orange" Content="Orange" /&gt;\n
\t&lt;/WrapPanel&gt;\n
&lt;/Grid&gt;
</antd:CodeBox.Code>
</antd:CodeBox>
</StackPanel>
</Grid>
</Grid>
</ScrollViewer>
</UserControl>