tidy radio button

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" />

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" />

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">
+            <Grid VerticalAlignment="Top"
-              <Ellipse Name="OuterEllipse" Width="20" Height="20" UseLayoutRounding="False" Stroke="{DynamicResource RadioButtonOuterEllipseStroke}" Fill="{StaticResource RadioButtonOuterEllipseFill}"
+              Height="32">
-              StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />
+
-              <Ellipse Name="CheckOuterEllipse" Width="20" Height="20" UseLayoutRounding="False" Stroke="{DynamicResource RadioButtonOuterEllipseCheckedStroke}" Fill="{DynamicResource RadioButtonOuterEllipseCheckedFill}" Opacity="0"
+              <Ellipse Name="OuterEllipse"
-              StrokeThickness="{DynamicResource RadioButtonBorderThemeThickness}" />
+                       Width="20" Height="20"
-              <Ellipse Name="CheckGlyph" Width="8" Height="8" UseLayoutRounding="False" Opacity="0" Fill="{DynamicResource RadioButtonCheckGlyphFill}" Stroke="{DynamicResource RadioButtonCheckGlyphStroke}" />
+                       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" />