chore: add avalonia CheckBox demo.
This commit is contained in:
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}" />
|
||||
|
||||
Reference in new issue
Block a user