chore: add avalonia CheckBox demo.

This commit is contained in:
NaBian committed 2024-12-02 23:21:51 +08:00
1 parent 00d64d55a0
commit 9122671a4b
10 files changed
+239 -82

No files matched your search

@@ -0,0 +1,26 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="HandyControlDemo.UserControl.CheckBoxDemoCtl">
<StackPanel Margin="32"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<CheckBox Content="CheckBox"
IsChecked="True" />
<CheckBox Margin="0,16,0,0"
Content="CheckBox"
IsChecked="True"
IsEnabled="False" />
<CheckBox Margin="0,16,0,0"
Content="CheckBox" />
<CheckBox Margin="0,16,0,0"
Content="CheckBox"
IsEnabled="False" />
<CheckBox Margin="0,16,0,0"
Content="CheckBox"
IsChecked="{x:Null}" />
<CheckBox Margin="0,16,0,0"
Content="CheckBox"
IsChecked="{x:Null}"
IsEnabled="False" />
</StackPanel>
</UserControl>
@@ -0,0 +1,9 @@
namespace HandyControlDemo.UserControl;
public partial class CheckBoxDemoCtl : Avalonia.Controls.UserControl
{
public CheckBoxDemoCtl()
{
InitializeComponent();
}
}
@@ -0,0 +1,121 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ControlTheme x:Key="CheckBoxBaseStyle"
TargetType="CheckBox">
<Setter Property="Foreground"
Value="{DynamicResource PrimaryTextBrush}" />
<Setter Property="Background"
Value="White" />
<Setter Property="BorderBrush"
Value="{DynamicResource BorderBrush}" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Padding"
Value="6,0,0,0" />
<Setter Property="Template">
<ControlTemplate>
<Grid Background="Transparent"
ColumnDefinitions="Auto, *">
<Border Height="16"
Width="16"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="2" />
<Panel Grid.Column="0"
Height="16"
Width="16">
<Path FlowDirection="LeftToRight"
StrokeDashOffset="8"
StrokeDashArray="8,8"
Width="10"
Height="8"
Data="{StaticResource CheckedGeometry}"
StrokeThickness="2"
Stretch="Uniform"
Stroke="{DynamicResource TextIconBrush}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
x:Name="path">
<Path.Transitions>
<Transitions>
<DoubleTransition Property="StrokeDashOffset"
Duration="0:0:0.2" />
</Transitions>
</Path.Transitions>
</Path>
<Rectangle RadiusX="2"
RadiusY="2"
Width="12"
Height="12"
Fill="{DynamicResource PrimaryBrush}"
IsVisible="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Converter={x:Static ObjectConverters.IsNull}}"
Margin="2"
Opacity="1"
x:Name="indeterminateMark" />
</Panel>
<ContentPresenter x:Name="contentPresenter"
IsVisible="{Binding $self.Content, Converter={x:Static ObjectConverters.IsNotNull}}"
Grid.Column="1"
Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</ControlTemplate>
</Setter>
<Style Selector="^:pointerover">
<Setter Property="BorderBrush"
Value="{DynamicResource SecondaryBorderBrush}" />
</Style>
<Style Selector="^:checked">
<Setter Property="Background"
Value="{DynamicResource PrimaryBrush}" />
<Setter Property="BorderBrush"
Value="{DynamicResource DarkPrimaryBrush}" />
<Style Selector="^ /template/ Path#path">
<Setter Property="StrokeDashOffset"
Value="0" />
</Style>
</Style>
<Style Selector="^:unchecked">
<Style Selector="^ /template/ Path#path">
<Setter Property="Stroke"
Value="{DynamicResource BorderBrush}" />
<Setter Property="StrokeDashOffset"
Value="8" />
</Style>
</Style>
<Style Selector="^:pressed">
<Style Selector="^:checked">
<Setter Property="Opacity"
Value=".8" />
</Style>
<Style Selector="^:unchecked">
<Setter Property="BorderBrush"
Value="{DynamicResource PrimaryBrush}" />
</Style>
</Style>
<Style Selector="^:disabled">
<Setter Property="Opacity"
Value="0.4" />
</Style>
</ControlTheme>
<ControlTheme x:Key="{x:Type CheckBox}"
BasedOn="{StaticResource CheckBoxBaseStyle}"
TargetType="CheckBox" />
</ResourceDictionary>
@@ -70,30 +70,32 @@
Value="{DynamicResource SecondaryBorderBrush}" />
</Style>
<Style Selector="^:pressed:checked">
<Setter Property="Opacity"
Value=".8" />
</Style>
<Style Selector="^:pressed:unchecked">
<Setter Property="BorderBrush"
Value="{DynamicResource PrimaryBrush}" />
<Style Selector="^:pressed">
<Style Selector="^:checked">
<Setter Property="Opacity"
Value=".8" />
</Style>
<Style Selector="^:unchecked">
<Setter Property="BorderBrush"
Value="{DynamicResource PrimaryBrush}" />
</Style>
</Style>
<Style Selector="^:disabled">
<Setter Property="Opacity"
Value="0.4" />
</Style>
<Style Selector="^:checked">
<Setter Property="Background"
Value="{DynamicResource PrimaryBrush}" />
<Setter Property="BorderBrush"
Value="{DynamicResource DarkPrimaryBrush}" />
</Style>
<Style Selector="^:checked /template/ Ellipse">
<Setter Property="RenderTransform"
Value="scale(1)" />
<Style Selector="^ /template/ Ellipse">
<Setter Property="RenderTransform"
Value="scale(1)" />
</Style>
</Style>
</ControlTheme>
@@ -17,6 +17,7 @@
<MergeResourceInclude Source="avares://HandyControl/Themes/Styles/RepeatButton.axaml" />
<MergeResourceInclude Source="avares://HandyControl/Themes/Styles/ToggleButton.axaml" />
<MergeResourceInclude Source="avares://HandyControl/Themes/Styles/RadioButton.axaml" />
<MergeResourceInclude Source="avares://HandyControl/Themes/Styles/CheckBox.axaml" />
<MergeResourceInclude Source="avares://HandyControl/Themes/Styles/Border.axaml" />
<MergeResourceInclude Source="avares://HandyControl/Themes/Styles/ItemsControl.axaml" />
<MergeResourceInclude Source="avares://HandyControl/Themes/Styles/TabItem.axaml" />
@@ -46,11 +46,11 @@
<Style Selector="^:selected">
<Setter Property="Foreground"
Value="{DynamicResource PrimaryBrush}" />
</Style>
<Style Selector="^:selected /template/ Border#mainBorder">
<Setter Property="BorderThickness"
Value="0,0,0,2" />
<Style Selector="^ /template/ Border#mainBorder">
<Setter Property="BorderThickness"
Value="0,0,0,2" />
</Style>
</Style>
</ControlTheme>
</ResourceDictionary>
@@ -585,34 +585,34 @@
</ControlTemplate>
</Setter>
<Style Selector="^:checked /template/ Border#thumb">
<Setter Property="RenderTransform"
Value="translateX(32px)" />
<Style Selector="^:checked">
<Style Selector="^ /template/ Border#thumb">
<Setter Property="RenderTransform"
Value="translateX(32px)" />
</Style>
<Style Selector="^ /template/ Border#lightBorder">
<Setter Property="Opacity"
Value="1" />
</Style>
<Style Selector="^ /template/ Border#innerBorder">
<Setter Property="Opacity"
Value="0" />
</Style>
</Style>
<Style Selector="^:unchecked /template/ Border#thumb">
<Setter Property="RenderTransform"
Value="translateX(0px)" />
</Style>
<Style Selector="^:checked /template/ Border#lightBorder">
<Setter Property="Opacity"
Value="1" />
</Style>
<Style Selector="^:unchecked /template/ Border#lightBorder">
<Setter Property="Opacity"
Value="0" />
</Style>
<Style Selector="^:checked /template/ Border#innerBorder">
<Setter Property="Opacity"
Value="0" />
</Style>
<Style Selector="^:unchecked /template/ Border#innerBorder">
<Setter Property="Opacity"
Value="1" />
<Style Selector="^:unchecked">
<Style Selector="^ /template/ Border#thumb">
<Setter Property="RenderTransform"
Value="translateX(0px)" />
</Style>
<Style Selector="^ /template/ Border#lightBorder">
<Setter Property="Opacity"
Value="0" />
</Style>
<Style Selector="^ /template/ Border#innerBorder">
<Setter Property="Opacity"
Value="1" />
</Style>
</Style>
<Style Selector="^:disabled">
@@ -703,44 +703,42 @@
</ControlTemplate>
</Setter>
<Style Selector="^:checked /template/ Border#unCheckedElement">
<Setter Property="RenderTransform"
Value="scaleX(0)" />
<Style Selector="^:checked">
<Style Selector="^ /template/ Border#unCheckedElement">
<Setter Property="RenderTransform"
Value="scaleX(0)" />
</Style>
<Style Selector="^ /template/ Border#checkedElement">
<Setter Property="RenderTransform"
Value="scaleX(1)" />
</Style>
<Style Selector="^ /template/ Border#unCheckedElement">
<Setter Property="Opacity"
Value="0" />
</Style>
<Style Selector="^ /template/ Border#checkedElement">
<Setter Property="Opacity"
Value="1" />
</Style>
</Style>
<Style Selector="^:checked /template/ Border#checkedElement">
<Setter Property="RenderTransform"
Value="scaleX(1)" />
</Style>
<Style Selector="^:unchecked /template/ Border#unCheckedElement">
<Setter Property="RenderTransform"
Value="scaleX(1)" />
</Style>
<Style Selector="^:unchecked /template/ Border#checkedElement">
<Setter Property="RenderTransform"
Value="scaleX(0)" />
</Style>
<Style Selector="^:checked /template/ Border#unCheckedElement">
<Setter Property="Opacity"
Value="0" />
</Style>
<Style Selector="^:checked /template/ Border#checkedElement">
<Setter Property="Opacity"
Value="1" />
</Style>
<Style Selector="^:unchecked /template/ Border#unCheckedElement">
<Setter Property="Opacity"
Value="1" />
</Style>
<Style Selector="^:unchecked /template/ Border#checkedElement">
<Setter Property="Opacity"
Value="0" />
<Style Selector="^:unchecked">
<Style Selector="^ /template/ Border#unCheckedElement">
<Setter Property="RenderTransform"
Value="scaleX(1)" />
</Style>
<Style Selector="^ /template/ Border#checkedElement">
<Setter Property="RenderTransform"
Value="scaleX(0)" />
</Style>
<Style Selector="^ /template/ Border#unCheckedElement">
<Setter Property="Opacity"
Value="1" />
</Style>
<Style Selector="^ /template/ Border#checkedElement">
<Setter Property="Opacity"
Value="0" />
</Style>
</Style>
<Style Selector="^:pointerover">
@@ -3470,7 +3470,7 @@
<Setter Property="Padding" Value="6,1" />
<Setter Property="hc:IconElement.Height" Value="12" />
</Style>
<Style x:Key="{x:Type ToggleButton}" BasedOn="{StaticResource ToggleButtonDefault}" TargetType="ToggleButton" />
<Style BasedOn="{StaticResource ToggleButtonDefault}" TargetType="ToggleButton" />
<Style x:Key="ToggleButtonPrimary" BasedOn="{StaticResource ToggleButtonBaseStyle}" TargetType="ToggleButton">
<Setter Property="Background" Value="{DynamicResource PrimaryBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}" />
@@ -22,7 +22,7 @@
<Setter Property="hc:IconElement.Height" Value="12"/>
</Style>
<Style x:Key="{x:Type ToggleButton}" BasedOn="{StaticResource ToggleButtonDefault}" TargetType="ToggleButton"/>
<Style BasedOn="{StaticResource ToggleButtonDefault}" TargetType="ToggleButton"/>
<Style x:Key="ToggleButtonPrimary" BasedOn="{StaticResource ToggleButtonBaseStyle}" TargetType="ToggleButton">
<Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
@@ -1887,7 +1887,7 @@
<Ellipse HorizontalAlignment="Right" Visibility="{Binding Path=(hc:ToggleButtonAttach.ShowLabel), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource Boolean2VisibilityConverter}}" Margin="0 0 12 0" Width="16" Height="16" StrokeThickness="2" Stroke="{Binding Path=(hc:VisualElement.HighlightForeground),RelativeSource={RelativeSource TemplatedParent}}" />
</Border>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" x:Name="lightBorder" Background="{Binding Path=(hc:VisualElement.HighlightBrush),RelativeSource={RelativeSource TemplatedParent}}" CornerRadius="24">
<Rectangle HorizontalAlignment="Left" Visibility="{Binding Path=(hc:ToggleButtonAttach.ShowLabel), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource Boolean2VisibilityConverter}}" Margin="18 0 0 0" Width="3" Height="16" RadiusX="1.5" RadiusY="1.5" Fill="{DynamicResource TextIconBrush}" />
<Rectangle HorizontalAlignment="Left" Visibility="{Binding Path=(hc:ToggleButtonAttach.ShowLabel), RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource Boolean2VisibilityConverter}}" Margin="18 0 0 0" Width="2" Height="16" RadiusX="1" RadiusY="1" Fill="{DynamicResource TextIconBrush}" />
</Border>
<Border Margin="2" HorizontalAlignment="Left" CornerRadius="22" Name="thumb" Effect="{StaticResource EffectShadow2}" Background="White" Width="44" Height="44" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
@@ -3470,7 +3470,7 @@
<Setter Property="Padding" Value="6,1" />
<Setter Property="hc:IconElement.Height" Value="12" />
</Style>
<Style x:Key="{x:Type ToggleButton}" BasedOn="{StaticResource ToggleButtonDefault}" TargetType="ToggleButton" />
<Style BasedOn="{StaticResource ToggleButtonDefault}" TargetType="ToggleButton" />
<Style x:Key="ToggleButtonPrimary" BasedOn="{StaticResource ToggleButtonBaseStyle}" TargetType="ToggleButton">
<Setter Property="Background" Value="{DynamicResource PrimaryBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}" />