Skip to content

Commit 11a8223

Browse files
iwatakeshicpa-coder
iwatakeshi
authored and
cpa-coder
committed
feat(controls): add RadioButton control theme
Add styled RadioButton control matching ShadUI design system: - Uses PrimaryColor for checked indicator (matches CheckBox) - Hover state with border transition - Disabled state with opacity - Consistent sizing with CheckBox (18x18 outer, 10x10 inner)
1 parent d328c1c commit 11a8223

2 files changed

Lines changed: 94 additions & 0 deletions

File tree

‎src/ShadUI/Controls/RadioButton/RadioButton.axaml‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<ResourceDictionary
2+
xmlns="https://github.com/avaloniaui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
4+
<Design.PreviewWith>
5+
<Border Padding="24">
6+
<StackPanel Spacing="16">
7+
<RadioButton GroupName="preview">Option 1</RadioButton>
8+
<RadioButton GroupName="preview" IsChecked="True">Option 2 (Selected)</RadioButton>
9+
<RadioButton GroupName="preview" IsEnabled="False">Option 3 (Disabled)</RadioButton>
10+
</StackPanel>
11+
</Border>
12+
</Design.PreviewWith>
13+
<ControlTheme TargetType="RadioButton" x:Key="{x:Type RadioButton}">
14+
<Setter Property="Foreground" Value="{DynamicResource ForegroundColor}" />
15+
<Setter Property="Background" Value="{DynamicResource SelectionColor}" />
16+
<Setter Property="BorderBrush" Value="{DynamicResource BorderColor}" />
17+
<Setter Property="BorderThickness" Value="1" />
18+
<Setter Property="Padding" Value="4,0,0,0" />
19+
<Setter Property="VerticalContentAlignment" Value="Center" />
20+
<Setter Property="TextBlock.FontSize" Value="14" />
21+
<Setter Property="TextBlock.FontWeight" Value="Medium" />
22+
<Setter Property="HorizontalContentAlignment" Value="Left" />
23+
<Setter Property="Template">
24+
<ControlTemplate>
25+
<StackPanel
26+
Background="Transparent"
27+
Orientation="Horizontal"
28+
Spacing="4">
29+
<Border
30+
Background="{TemplateBinding Background}"
31+
BorderBrush="{TemplateBinding BorderBrush}"
32+
BorderThickness="{TemplateBinding BorderThickness}"
33+
CornerRadius="10"
34+
Height="18"
35+
Name="OuterBorder"
36+
VerticalAlignment="Center"
37+
Width="18">
38+
<Ellipse
39+
Fill="{DynamicResource PrimaryColor}"
40+
Height="10"
41+
HorizontalAlignment="Center"
42+
Name="CheckGlyph"
43+
VerticalAlignment="Center"
44+
Width="10" />
45+
</Border>
46+
<ContentPresenter
47+
Content="{TemplateBinding Content}"
48+
ContentTemplate="{TemplateBinding ContentTemplate}"
49+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
50+
IsVisible="{TemplateBinding Content,
51+
Converter={x:Static ObjectConverters.IsNotNull}}"
52+
Margin="{TemplateBinding Padding}"
53+
Name="PART_ContentPresenter"
54+
RecognizesAccessKey="True"
55+
TextElement.Foreground="{TemplateBinding Foreground}"
56+
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
57+
</StackPanel>
58+
</ControlTemplate>
59+
</Setter>
60+
<Style Selector="^:pointerover /template/ Border#OuterBorder">
61+
<Setter Property="Transitions">
62+
<Setter.Value>
63+
<Transitions>
64+
<BrushTransition Duration="0:0:0.20" Property="BorderBrush" />
65+
</Transitions>
66+
</Setter.Value>
67+
</Setter>
68+
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryColor}" />
69+
</Style>
70+
<!-- Hide check glyph by default -->
71+
<Style Selector="^ /template/ Ellipse#CheckGlyph">
72+
<Setter Property="IsVisible" Value="False" />
73+
</Style>
74+
<!-- Show check glyph when checked -->
75+
<Style Selector="^:checked">
76+
<Style Selector="^ /template/ Ellipse#CheckGlyph">
77+
<Setter Property="IsVisible" Value="True" />
78+
</Style>
79+
<Style Selector="^ /template/ Border#OuterBorder">
80+
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryColor}" />
81+
</Style>
82+
</Style>
83+
<!-- Disabled state -->
84+
<Style Selector="^:disabled">
85+
<Style Selector="^ /template/ Border#OuterBorder">
86+
<Setter Property="Opacity" Value="0.5" />
87+
</Style>
88+
<Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
89+
<Setter Property="Opacity" Value="0.5" />
90+
</Style>
91+
</Style>
92+
</ControlTheme>
93+
</ResourceDictionary>

‎src/ShadUI/Controls/Resources.axaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
<ResourceInclude Source="avares://ShadUI/Controls/Menu/MenuItem.axaml" />
3737
<ResourceInclude Source="avares://ShadUI/Controls/NumericUpDown/ButtonSpinner.axaml" />
3838
<ResourceInclude Source="avares://ShadUI/Controls/NumericUpDown/NumericUpDown.axaml" />
39+
<ResourceInclude Source="avares://ShadUI/Controls/RadioButton/RadioButton.axaml" />
3940
<ResourceInclude Source="avares://ShadUI/Controls/SelectableTextBlock/SelectableTextBlock.axaml" />
4041
<ResourceInclude Source="avares://ShadUI/Controls/Sidebar/Sidebar.axaml" />
4142
<ResourceInclude Source="avares://ShadUI/Controls/Sidebar/SidebarItem.axaml" />

0 commit comments

Comments
 (0)