WPF自定义模板--RadioButton

默认格式

<Style x:Key="RadioButtonStyle" TargetType="{x:Type RadioButton}"><Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/><Setter Property="Background" Value="{StaticResource RadioButton.Static.Background}"/><Setter Property="BorderBrush" Value="{StaticResource RadioButton.Static.Border}"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RadioButton}"><Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><!--CornerRadius="100"  最大大小就是200 超过200 不是正圆--><Border x:Name="radioButtonBorder"Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="100" Grid.Column="0"HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"><Grid x:Name="markGrid" Margin="2"><Ellipse x:Name="optionMark" Fill="{StaticResource RadioButton.Static.Glyph}" MinWidth="6" MinHeight="6" Opacity="0"/></Grid></Border><ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid><ControlTemplate.Triggers><Trigger Property="HasContent" Value="true"><Setter Property="FocusVisualStyle" Value="{StaticResource OptionMarkFocusVisual}"/><Setter Property="Padding" Value="4,-1,0,0"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" TargetName="radioButtonBorder" Value="{StaticResource RadioButton.MouseOver.Background}"/><Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="{StaticResource RadioButton.MouseOver.Border}"/><Setter Property="Fill" TargetName="optionMark" Value="{StaticResource RadioButton.MouseOver.Glyph}"/></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Background" TargetName="radioButtonBorder" Value="{StaticResource RadioButton.Disabled.Background}"/><Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="{StaticResource RadioButton.Disabled.Border}"/><Setter Property="Fill" TargetName="optionMark" Value="{StaticResource RadioButton.Disabled.Glyph}"/></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Background" TargetName="radioButtonBorder" Value="{StaticResource RadioButton.Pressed.Background}"/><Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="{StaticResource RadioButton.Pressed.Border}"/><Setter Property="Fill" TargetName="optionMark" Value="{StaticResource RadioButton.Pressed.Glyph}"/></Trigger><Trigger Property="IsChecked" Value="true"><Setter Property="Opacity" TargetName="optionMark" Value="1"/></Trigger><Trigger Property="IsChecked" Value="{x:Null}"><Setter Property="Opacity" TargetName="optionMark" Value="0.56"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style>

解释

1. Border: 定义了单选按钮的外观，设置了宽度、高度、边框颜色和厚度，并使用圆角（CornerRadius）创建圆形按钮。
2. ContentPresenter: 用于显示按钮的内容，可以是文本或其他控件。
3. Triggers: 定义了两种触发器，当IsChecked属性为True时，背景颜色变为蓝色；当IsEnabled属性为False时，背景颜色变为灰色。

自定义模板

 <Style x:Key="RadioButtonStyleDemo" TargetType="{x:Type RadioButton}"><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Background" Value="Transparent"/><Setter Property="BorderBrush" Value="#333"/><Setter Property="Foreground" Value="#333"/><Setter Property="BorderThickness" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type RadioButton}"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="auto" /><ColumnDefinition /></Grid.ColumnDefinitions><Border Grid.Column="0"  Width="16" Height="16"><Grid><Ellipse x:Name="OuterCircle" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/><Ellipse x:Name="InnerCircle" Width="8" Height="8" Fill="Blue" Visibility="Hidden"/></Grid></Border><ContentPresenter Margin="4,0,0,0" Grid.Column="1"VerticalAlignment="Center" HorizontalAlignment="Left" RecognizesAccessKey="True"/></Grid><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter TargetName="InnerCircle" Property="Visibility" Value="Visible"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter TargetName="OuterCircle" Property="Fill" Value="Gray"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>

解释

1. Grid: 使用Grid容器来包含两个Ellipse元素，一个是外圈（OuterCircle），一个是内圈（InnerCircle）。
2. OuterCircle: 定义了单选按钮的外圈，使用Background和BorderBrush属性。
3. InnerCircle: 定义了单选按钮的内圈，默认情况下隐藏（Visibility设置为Hidden）。
4. Triggers: 当IsChecked属性为True时，显示内圈；当IsEnabled属性为False时，外圈的填充颜色变为灰色。

样式：