一、RadioButton基本样式
RadioButton基本样式包含两种状态,这里也是使用两张图片来代替两种状态,当然你也可以通过IconFont或Path来替换这两种状态。
效果如下:
样式代码如下:
<Style x:Key="radBase" TargetType="RadioButton">
<Setter Property="IsChecked" Value="False"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="#555"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<DockPanel Background="{TemplateBinding Background}" ToolTip="{TemplateBinding Content}" LastChildFill="False" Width="{TemplateBinding Width}">
<Image Margin="2 0 0 0" DockPanel.Dock="Left" x:Name="_img" Stretch="None" Source="/Images/rdo_no.png"/>
<TextBlock DockPanel.Dock="Left" Margin="3 0 0 0" VerticalAlignment="Center" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" />
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="_img" Property="Source" Value="/Images/rdo_yes.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
图片素材:
二、RadioButton其它样式
先看效果图:
这种样式一般用于突出用户选择。这里的每个选项都是填充的颜色,你也可以选择填充文字内容。
样式代码如下:
<Style x:Key="RadioThemeColor" TargetType="RadioButton">
<Setter Property="Margin" Value="1"/>
<Setter Property="Background" Value="#e892ca"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid Background="{TemplateBinding Background}" Width="62" Height="35" Margin="{TemplateBinding Margin}">
<Border x:Name="_borderOver" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Margin="1">
</Border>
<Border x:Name="_borderChecked" Visibility="Collapsed" Background="#88000000" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="15" Height="15">
<Path Data="M0,5 5,10 13,1" Margin="2 2 0 0" Stroke="White" StrokeThickness="1"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="True">
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="_borderOver" Value="White"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Visibility" TargetName="_borderChecked" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
引用示例:
<RadioButton Background="#e892ca" Style="{StaticResource RadioThemeColor}"/>
所有代码已经上传到github:
https://github.com/cmfGit/WpfDemo.git
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。