tidy radio button

6 years ago · dea12ed7bc
3 changed files with 66 additions and 8 deletions
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
@ -31,9 +31,11 @@
    <Color x:Key="SystemRevealListLowColor">#FF1D1D1D</Color>
    <Color x:Key="SystemRevealListMediumColor">#FF333333</Color>
    <!--<AcrylicBrush x:Key="SystemControlAcrylicWindowBrush" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{ThemeResource SystemChromeMediumColor}" />-->
+    
    <!-- Override system shape defaults -->
    <CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>
    <CornerRadius x:Key="OverlayCornerRadius">4,4,4,4</CornerRadius>
+    
    <!-- Override system borders -->
    <Thickness x:Key="MenuBarItemBorderThickness">1,1,1,1</Thickness>
    <Thickness x:Key="GridViewItemMultiselectBorderThickness">1,1,1,1</Thickness>
@ -59,6 +61,7 @@
    <Thickness x:Key="GridViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
    <Thickness x:Key="ComboBoxItemRevealBorderThemeThickness">1,1,1,1</Thickness>
    <x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">1</x:Double>
+    
    <!-- Override system generated accent colors -->
    <Color x:Key="SystemAccentColorDark1">#FF005A9E</Color>
    <Color x:Key="SystemAccentColorDark2">#FF004275</Color>
@ -68,6 +71,7 @@
    <Color x:Key="SystemAccentColorLight3">#FFA6D8FF</Color>
    <Color x:Key="RegionColor">#FF000000</Color>
    <SolidColorBrush x:Key="RegionBrush" Color="{StaticResource RegionColor}" />
+    
    <!-- BaseResources for Button.xaml -->
    <StaticResource x:Key="ButtonBackground" ResourceKey="SystemControlBackgroundBaseLowBrush" />
    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundBaseLowBrush" />
@ -81,6 +85,7 @@
    <StaticResource x:Key="ButtonBorderBrushPointerOver" ResourceKey="SystemControlHighlightBaseMediumLowBrush" />
    <StaticResource x:Key="ButtonBorderBrushPressed" ResourceKey="SystemControlHighlightTransparentBrush" />
    <StaticResource x:Key="ButtonBorderBrushDisabled" ResourceKey="SystemControlDisabledTransparentBrush" />
+    
    <!-- BaseResources for ListBox.xaml -->
    <Thickness x:Key="ListBoxBorderThemeThickness">0</Thickness>
    <SolidColorBrush x:Key="ListBoxBackgroundThemeBrush" Color="#CCFFFFFF" />
@ -98,6 +103,7 @@
    <SolidColorBrush x:Key="ListBoxItemSelectedDisabledForegroundThemeBrush" Color="#99000000" />
    <SolidColorBrush x:Key="ListBoxItemSelectedForegroundThemeBrush" Color="White" />
    <SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
+    
    <!-- BaseResources for TextBox.xaml -->
    <StaticResource x:Key="TextControlForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
    <StaticResource x:Key="TextControlForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
@ -129,6 +135,7 @@
    <StaticResource x:Key="TextControlButtonForegroundPressed" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
    <StaticResource x:Key="ContentLinkForegroundColor" ResourceKey="SystemControlHyperlinkTextBrush" />
    <StaticResource x:Key="ContentLinkBackgroundColor" ResourceKey="SystemControlPageBackgroundChromeLowBrush" />
+    
    <!-- BaseResources for CheckBox.xaml -->
    <StaticResource x:Key="CheckBoxForegroundUnchecked" ResourceKey="SystemControlForegroundBaseHighBrush" />
    <StaticResource x:Key="CheckBoxForegroundUncheckedPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
@ -202,6 +209,7 @@
    <StaticResource x:Key="CheckBoxCheckGlyphForegroundIndeterminatePointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
    <StaticResource x:Key="CheckBoxCheckGlyphForegroundIndeterminatePressed" ResourceKey="SystemControlForegroundBaseMediumBrush" />
    <StaticResource x:Key="CheckBoxCheckGlyphForegroundIndeterminateDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    
    <!-- BaseResources for RadioButton.xaml -->
    <StaticResource x:Key="RadioButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
    <StaticResource x:Key="RadioButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
@ -31,9 +31,11 @@
    <Color x:Key="SystemRevealListLowColor">#FFE6E6E6</Color>
    <Color x:Key="SystemRevealListMediumColor">#FFCCCCCC</Color>
    <!--<AcrylicBrush x:Key="SystemControlAcrylicWindowBrush" BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemChromeAltHighColor}" TintOpacity="0.8" FallbackColor="{ThemeResource SystemChromeMediumColor}" />-->
+    
    <!-- Override system shape defaults -->
    <CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>
    <CornerRadius x:Key="OverlayCornerRadius">4,4,4,4</CornerRadius>
+    
    <!-- Override system borders -->
    <Thickness x:Key="MenuBarItemBorderThickness">1,1,1,1</Thickness>
    <Thickness x:Key="GridViewItemMultiselectBorderThickness">1,1,1,1</Thickness>
@ -59,6 +61,7 @@
    <Thickness x:Key="GridViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
    <Thickness x:Key="ComboBoxItemRevealBorderThemeThickness">1,1,1,1</Thickness>
    <x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">1</x:Double>
+    
    <!-- Override system generated accent colors -->
    <Color x:Key="SystemAccentColorDark1">#FF005A9E</Color>
    <Color x:Key="SystemAccentColorDark2">#FF004275</Color>
@ -69,6 +72,7 @@
    <!--<RevealBackgroundBrush x:Key="SystemControlHighlightListLowRevealBackgroundBrush" TargetTheme="Light" Color="{ThemeResource SystemRevealListMediumColor}" FallbackColor="{ StaticResource SystemListMediumColor}" />-->
    <Color x:Key="RegionColor">#FFFFFFFF</Color>
    <SolidColorBrush x:Key="RegionBrush" Color="{StaticResource RegionColor}" />
+    
    <!-- BaseResources for Button.xaml -->
    <StaticResource x:Key="ButtonBackground" ResourceKey="SystemControlBackgroundBaseLowBrush" />
    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="SystemControlBackgroundBaseLowBrush" />
@ -99,6 +103,7 @@
    <SolidColorBrush x:Key="ListBoxItemSelectedDisabledForegroundThemeBrush" Color="#99FFFFFF" />
    <SolidColorBrush x:Key="ListBoxItemSelectedForegroundThemeBrush" Color="White" />
    <SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
+    
    <!-- BaseResources for TextBox.xaml -->
    <StaticResource x:Key="TextControlForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
    <StaticResource x:Key="TextControlForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
@ -130,6 +135,7 @@
    <StaticResource x:Key="TextControlButtonForegroundPressed" ResourceKey="SystemControlHighlightAltChromeWhiteBrush" />
    <StaticResource x:Key="ContentLinkForegroundColor" ResourceKey="SystemControlHyperlinkTextBrush" />
    <StaticResource x:Key="ContentLinkBackgroundColor" ResourceKey="SystemControlPageBackgroundChromeLowBrush" />
+    
    <!-- BaseResources for CheckBox.xaml -->
    <StaticResource x:Key="CheckBoxForegroundUnchecked" ResourceKey="SystemControlForegroundBaseHighBrush" />
    <StaticResource x:Key="CheckBoxForegroundUncheckedPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
@ -203,6 +209,7 @@
    <StaticResource x:Key="CheckBoxCheckGlyphForegroundIndeterminatePointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
    <StaticResource x:Key="CheckBoxCheckGlyphForegroundIndeterminatePressed" ResourceKey="SystemControlForegroundBaseMediumBrush" />
    <StaticResource x:Key="CheckBoxCheckGlyphForegroundIndeterminateDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+    
    <!-- BaseResources for RadioButton.xaml -->
    <StaticResource x:Key="RadioButtonForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
    <StaticResource x:Key="RadioButtonForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />
--- a/src/Avalonia.Themes.Fluent/RadioButton.xaml
+++ b/src/Avalonia.Themes.Fluent/RadioButton.xaml
@ -1,4 +1,11 @@
 <Styles xmlns="https://github.com/avaloniaui">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel Spacing="10">
+        <RadioButton />
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
  <Style Selector="RadioButton">
    <Setter Property="Background" Value="{DynamicResource RadioButtonBackground}" />
    <Setter Property="Foreground" Value="{DynamicResource RadioButtonForeground}" />
@ -15,20 +22,53 @@
      <ControlTemplate TargetType="RadioButton">
        <Border Name="RootBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
          <Grid ColumnDefinitions="20,*">
-            <Grid VerticalAlignment="Top" Height="32">
-              <Ellipse Name="OuterEllipse" Width="20" Height="20" UseLayoutRounding="False" Stroke="{DynamicResource RadioButtonOuterEllipseStroke}" Fill="{StaticResource RadioButtonOuterEllipseFill}"
-              StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />
-              <Ellipse Name="CheckOuterEllipse" Width="20" Height="20" UseLayoutRounding="False" Stroke="{DynamicResource RadioButtonOuterEllipseCheckedStroke}" Fill="{DynamicResource RadioButtonOuterEllipseCheckedFill}" Opacity="0"
-              StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />
-              <Ellipse Name="CheckGlyph" Width="8" Height="8" UseLayoutRounding="False" Opacity="0" Fill="{DynamicResource RadioButtonCheckGlyphFill}" Stroke="{DynamicResource RadioButtonCheckGlyphStroke}" />
+            <Grid VerticalAlignment="Top"
+              Height="32">
+
+              <Ellipse Name="OuterEllipse"
+                       Width="20" Height="20"
+                       UseLayoutRounding="False"
+                       Stroke="{DynamicResource RadioButtonOuterEllipseStroke}"
+                       Fill="{StaticResource RadioButtonOuterEllipseFill}"
+                       StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />
+
+              <Ellipse Name="CheckOuterEllipse"
+                       Width="20" Height="20"
+                       UseLayoutRounding="False"
+                       Stroke="{DynamicResource RadioButtonOuterEllipseCheckedStroke}"
+                       Fill="{DynamicResource RadioButtonOuterEllipseCheckedFill}"                       
+                       StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />
+
+              <Ellipse Name="CheckGlyph"
+                       Width="8" Height="8"
+                       UseLayoutRounding="False"                       
+                       Fill="{DynamicResource RadioButtonCheckGlyphFill}"
+                       Stroke="{DynamicResource RadioButtonCheckGlyphStroke}" />
            </Grid>
-            <ContentPresenter Name="PART_ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" TextBlock.Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Padding}"
-            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="1" />
+
+            <ContentPresenter Name="PART_ContentPresenter"
+                              Content="{TemplateBinding Content}"
+                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                              TextBlock.Foreground="{TemplateBinding Foreground}"
+                              Margin="{TemplateBinding Padding}"
+                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                              Grid.Column="1" />
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter>
  </Style>
+
+  <!-- Normal State -->
+  <Style Selector="RadioButton /template/ Ellipse#CheckGlyph">
+    <Setter Property="Opacity" Value="0" />  
+  </Style>
+
+  <Style Selector="RadioButton:pressed /template/ Ellipse#CheckOuterEllipse">
+    <Setter Property="Opacity" Value="0" />
+  </Style>
+  
  <!-- PointerOver State -->
  <Style Selector="RadioButton:pointerover /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="(TextBlock.Foreground)" Value="{DynamicResource RadioButtonForegroundPointerOver}" />
@ -49,6 +89,7 @@
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphFillPointerOver}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphStrokePointerOver}" />
  </Style>
+
  <!-- Pressed State -->
  <Style Selector="RadioButton:pressed /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="(TextBlock.Foreground)" Value="{DynamicResource RadioButtonForegroundPressed}" />
@ -69,6 +110,7 @@
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphFillPressed}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphStrokePressed}" />
  </Style>
+
  <!-- Disabled State -->
  <Style Selector="RadioButton:disabled /template/ ContentPresenter#PART_ContentPresenter">
    <Setter Property="(TextBlock.Foreground)" Value="{DynamicResource RadioButtonForegroundDisabled}" />
@ -89,6 +131,7 @@
    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckGlyphFillDisabled}" />
    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckGlyphStrokeDisabled}" />
  </Style>
+
  <!-- Checked State -->
  <Style Selector="RadioButton:checked /template/ Ellipse#CheckGlyph">
    <Setter Property="Opacity" Value="1" />