Merge pull request #205 from irihitech/CheckBox

CheckBox Border & SimpleCheckBox theme

demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml

@@ -26,6 +26,27 @@
                 </CheckBox>
             </StackPanel>
             <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
+            <TextBlock Text="SimpleCheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox IsChecked="True" Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{StaticResource SimpleCheckBox}" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox IsEnabled="False" Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{StaticResource SimpleCheckBox}" />
+            </StackPanel>
             <TextBlock Margin="0,16" Text="CardCheckBox" />
             <StackPanel Orientation="Horizontal">
                 <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">

demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml

@@ -23,25 +23,28 @@
                         <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
                         <RadioButton
                             Classes="Small"
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True"
-                            IsChecked="True">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             小2
                         </RadioButton>
                     </StackPanel>
                 </Border>
-                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
                     <StackPanel Orientation="Horizontal">
                         <RadioButton
                             Classes="Small"
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsEnabled="False"
-                            IsEnabled="False">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             小1
                         </RadioButton>
                         <RadioButton
                             Classes="Small"
-                            Theme="{DynamicResource ButtonRadioButton}"
                             IsChecked="True"
-                            IsEnabled="False">
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
                             小2
                         </RadioButton>
                     </StackPanel>
@@ -51,16 +54,19 @@
                 <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
                     <StackPanel Orientation="Horizontal">
                         <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
-                        <RadioButton Theme="{DynamicResource ButtonRadioButton}" IsChecked="True">默认2</RadioButton>
+                        <RadioButton IsChecked="True" Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
                     </StackPanel>
                 </Border>
-                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
                     <StackPanel Orientation="Horizontal">
-                        <RadioButton Theme="{DynamicResource ButtonRadioButton}" IsEnabled="False">默认1</RadioButton>
+                        <RadioButton IsEnabled="False" Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
                         <RadioButton
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True"
                             IsEnabled="False"
-                            IsChecked="True">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             默认2
                         </RadioButton>
                     </StackPanel>
@@ -72,25 +78,28 @@
                         <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
                         <RadioButton
                             Classes="Large"
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True"
-                            IsChecked="True">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             大2
                         </RadioButton>
                     </StackPanel>
                 </Border>
-                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
                     <StackPanel Orientation="Horizontal">
                         <RadioButton
                             Classes="Large"
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsEnabled="False"
-                            IsEnabled="False">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             大1
                         </RadioButton>
                         <RadioButton
                             Classes="Large"
-                            Theme="{DynamicResource ButtonRadioButton}"
                             IsChecked="True"
-                            IsEnabled="False">
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
                             大2
                         </RadioButton>
                     </StackPanel>
@@ -104,7 +113,10 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </RadioButton>
-                <RadioButton IsChecked="True" Width="300" Theme="{DynamicResource CardRadioButton}">
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
@@ -112,16 +124,19 @@
                 </RadioButton>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
-                <RadioButton IsEnabled="False" Width="300" Theme="{DynamicResource CardRadioButton}">
+                <RadioButton
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </RadioButton>
                 <RadioButton
+                    Width="300"
                     IsChecked="True"
                     IsEnabled="False"
-                    Width="300"
                     Theme="{DynamicResource CardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>
@@ -137,7 +152,10 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </RadioButton>
-                <RadioButton IsChecked="True" Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
@@ -145,16 +163,19 @@
                 </RadioButton>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
-                <RadioButton IsEnabled="False" Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                <RadioButton
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </RadioButton>
                 <RadioButton
+                    Width="300"
                     IsChecked="True"
                     IsEnabled="False"
-                    Width="300"
                     Theme="{DynamicResource PureCardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -4,11 +4,11 @@
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
         <Setter Property="Padding" Value="8,0,0,0" />
-        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
         <Setter Property="MinHeight" Value="32" />
@@ -17,17 +17,13 @@
         <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
-                <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
                 <Border
-                        x:Name="PART_Border"
+                    x:Name="RootBorder"
-                        Grid.Column="0"
-                        Grid.ColumnSpan="2"
-                        HorizontalAlignment="Center"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    CornerRadius="{TemplateBinding CornerRadius}">
-
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
                         <Grid
                             Grid.Column="0"
                             Margin="0,0,0,0"
@@ -46,7 +42,6 @@
                                 Width="{DynamicResource CheckBoxBoxGlyphWidth}"
                                 Height="{DynamicResource CheckBoxBoxGlyphHeight}"
                                 Foreground="{DynamicResource CheckBoxGlyphFill}" />
-
                         </Grid>
                         <ContentPresenter
                             x:Name="ContentPresenter"
@@ -56,11 +51,11 @@
                             VerticalAlignment="Center"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
-                        IsVisible="{TemplateBinding Content,
+                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
-                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
                             RecognizesAccessKey="True"
                             TextWrapping="Wrap" />
                     </Grid>
+                </Border>
             </ControlTemplate>
         </Setter>
 
@@ -178,6 +173,155 @@
         </Style>
     </ControlTheme>
 
+    <ControlTheme x:Key="SimpleCheckBox" TargetType="CheckBox">
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
+        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="CheckBox">
+                <Border
+                    x:Name="RootBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
+                        <Grid
+                            Grid.Column="0"
+                            Margin="0,0,0,0"
+                            VerticalAlignment="Center">
+                            <Border
+                                x:Name="NormalRectangle"
+                                Width="{DynamicResource CheckBoxBoxWidth}"
+                                Height="{DynamicResource CheckBoxBoxHeight}"
+                                Background="{DynamicResource CheckBoxDefaultBackground}"
+                                BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                                BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
+                                CornerRadius="{TemplateBinding CornerRadius}"
+                                UseLayoutRounding="False" />
+                            <PathIcon
+                                Name="CheckGlyph"
+                                Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                                Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                                Foreground="{DynamicResource CheckBoxGlyphFill}" />
+                        </Grid>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
     <ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="VerticalContentAlignment" Value="Center" />

src/Semi.Avalonia/Controls/RadioButton.axaml

@@ -24,6 +24,10 @@
         <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
+        <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonBoxCornerRadius}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonForeground}" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonDefaultBackground}" />
+        <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <Border

src/Semi.Avalonia/Themes/Dark/RadioButton.axaml

@@ -32,6 +32,9 @@
     <SolidColorBrush x:Key="RadioButtonCheckGlyphFill" Color="White" />
 
     <SolidColorBrush x:Key="RadioButtonForeground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="RadioButtonDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="RadioButtonDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
+    <CornerRadius x:Key="RadioButtonBoxCornerRadius">3</CornerRadius>
 
     <SolidColorBrush x:Key="RadioButtonGroupBackground" Opacity="0.12" Color="White" />
 

src/Semi.Avalonia/Themes/Light/RadioButton.axaml

@@ -32,6 +32,9 @@
     <SolidColorBrush x:Key="RadioButtonCheckGlyphFill" Color="White" />
 
     <SolidColorBrush x:Key="RadioButtonForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="RadioButtonDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="RadioButtonDefaultBorderBrush" Opacity="0.35" Color="#1C1F23" />
+    <CornerRadius x:Key="RadioButtonBoxCornerRadius">3</CornerRadius>
 
     <SolidColorBrush x:Key="RadioButtonGroupBackground" Opacity="0.05" Color="#2E3238" />