Skip to content

Commit

Permalink
refactor(RadioButton): lightweight styling radiobutton (#1069)
Browse files Browse the repository at this point in the history 
fix: moved some keys back

refactor(RadioButton): lightweight styling radiobutton

refactor: checkellipse padding value

refactor(RadioButton): lightweight styling radiobutton

fix: renaming glyph resource

refactor(RadioButton): lightweight styling radiobutton

(cherry picked from commit da85fc6)
  • Loading branch information
@rajamatt @mergify
rajamatt authored and mergify[bot] committed Jul 31, 2023
1 parent 4a2dbea commit 15ed015
Showing 1 changed file with 35 additions and 27 deletions.
62 changes: 35 additions & 27 deletions src/library/Uno.Material/Styles/Controls/v2/RadioButton.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,16 @@
<StaticResource x:Key="RadioButtonCharacterSpacing" ResourceKey="BodySmallCharacterSpacing" />
<!--#endregion-->

</ResourceDictionary>
<GridLength x:Key="RadioButtonGridLength">40</GridLength>
<x:Double x:Key="RadioButtonWidth">40</x:Double>
<x:Double x:Key="RadioButtonHeight">40</x:Double>
<x:Double x:Key="RadioButtonCheckGlyphSize">20</x:Double>
<x:Double x:Key="RadioButtonMinHeight">40</x:Double>
<x:Double x:Key="RadioButtonMinWidth">40</x:Double>
<x:Double x:Key="RadioButtonStrokeThickness">2</x:Double>
<Thickness x:Key="RadioButtonPadding">4,0,0,0</Thickness>
<Thickness x:Key="RadioButtonCheckEllipsePadding">5</Thickness>
</ResourceDictionary>

<ResourceDictionary x:Key="Light">
<!--#region Foreground-->
Expand Down Expand Up @@ -97,19 +106,18 @@
<StaticResource x:Key="RadioButtonCharacterSpacing" ResourceKey="BodySmallCharacterSpacing" />
<!--#endregion-->

</ResourceDictionary>
<GridLength x:Key="RadioButtonGridLength">40</GridLength>
<x:Double x:Key="RadioButtonWidth">40</x:Double>
<x:Double x:Key="RadioButtonHeight">40</x:Double>
<x:Double x:Key="RadioButtonCheckGlyphSize">20</x:Double>
<x:Double x:Key="RadioButtonMinHeight">40</x:Double>
<x:Double x:Key="RadioButtonMinWidth">40</x:Double>
<x:Double x:Key="RadioButtonStrokeThickness">2</x:Double>
<Thickness x:Key="RadioButtonPadding">4,0,0,0</Thickness>
<Thickness x:Key="RadioButtonCheckEllipsePadding">5</Thickness>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

<!-- RadioButton Area -->
<GridLength x:Key="RadioButtonAreaLength">40</GridLength>
<x:Double x:Key="RadioButtonAreaSize">40</x:Double>

<!-- Check Area -->
<x:Double x:Key="RadioButtonCheckAreaSize">20</x:Double>

<!-- Border -->
<x:Double x:Key="RadioButtonBorderThemeThickness">2</x:Double>

<Style x:Key="MaterialRadioButtonStyle"
TargetType="RadioButton">
<Setter Property="Background" Value="{ThemeResource RadioButtonOuterEllipseCheckedStroke}" />
Expand All @@ -122,14 +130,14 @@
<Setter Property="CharacterSpacing" Value="{ThemeResource RadioButtonCharacterSpacing}" />
<!-- End: Body Small Typo -->

<Setter Property="Padding" Value="4,0,0,0" />
<Setter Property="Padding" Value="{ThemeResource RadioButtonPadding}" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="MinWidth" Value="{StaticResource RadioButtonAreaSize}" />
<Setter Property="MinHeight" Value="{StaticResource RadioButtonAreaSize}" />
<Setter Property="UseSystemFocusVisuals" Value="False" />
<Setter Property="MinWidth" Value="{ThemeResource RadioButtonMinWidth}" />
<Setter Property="MinHeight" Value="{ThemeResource RadioButtonMinHeight}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />

<Setter Property="Template">
<Setter.Value>
Expand Down Expand Up @@ -236,46 +244,46 @@
</VisualStateManager.VisualStateGroups>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="{StaticResource RadioButtonAreaLength}" />
<ColumnDefinition Width="{ThemeResource RadioButtonGridLength}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Ellipse x:Name="FocusAndPressRing"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="{StaticResource RadioButtonAreaSize}"
Height="{StaticResource RadioButtonAreaSize}"
Width="{ThemeResource RadioButtonWidth}"
Height="{ThemeResource RadioButtonHeight}"
Fill="{ThemeResource MaterialRadioButtonHoverRingFillPressed}"
IsHitTestVisible="False"
Opacity="0" />

<Ellipse x:Name="HoverRing"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="{StaticResource RadioButtonAreaSize}"
Height="{StaticResource RadioButtonAreaSize}"
Width="{ThemeResource RadioButtonWidth}"
Height="{ThemeResource RadioButtonHeight}"
Fill="{ThemeResource MaterialRadioButtonHoverRingFillPointerOver}"
IsHitTestVisible="False"
Opacity="0" />

<Grid Height="{StaticResource RadioButtonCheckAreaSize}"
Width="{StaticResource RadioButtonCheckAreaSize}">
<Grid Height="{ThemeResource RadioButtonCheckGlyphSize}"
Width="{ThemeResource RadioButtonCheckGlyphSize}">

<Ellipse x:Name="OuterEllipse"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="Fill"
UseLayoutRounding="False"
Stroke="{TemplateBinding Background}"
StrokeThickness="{StaticResource RadioButtonBorderThemeThickness}" />
StrokeThickness="{ThemeResource RadioButtonStrokeThickness}" />

<Ellipse x:Name="OuterEllipse_Checked"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Stretch="Fill"
UseLayoutRounding="False"
Stroke="{TemplateBinding Background}"
StrokeThickness="{StaticResource RadioButtonBorderThemeThickness}"
StrokeThickness="{ThemeResource RadioButtonStrokeThickness}"
Opacity="0" />

<Ellipse x:Name="CheckEllipse_Unchecked"
Expand All @@ -284,7 +292,7 @@
Stretch="Fill"
UseLayoutRounding="False"
Fill="{TemplateBinding Background}"
Margin="5" />
Margin="{ThemeResource RadioButtonCheckEllipsePadding}" />

<Ellipse x:Name="CheckEllipse"
HorizontalAlignment="Stretch"
Expand All @@ -293,7 +301,7 @@
UseLayoutRounding="False"
Fill="{TemplateBinding Background}"
Opacity="0"
Margin="5" />
Margin="{ThemeResource RadioButtonCheckEllipsePadding}" />
</Grid>

<ContentPresenter x:Name="ContentPresenter"
Expand Down

0 comments on commit 15ed015

Please sign in to comment.