WPF 自定义RadioButton样式
2024-10-16 13:50:12
一、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
最新文章
- wampserver安装配置
- Bootstrap <基础十二>下拉菜单（Dropdowns）
- .vimrc vim 配置大全
- 在AngularJS应用中实现认证授权
- c++学习-运算符重载
- HDU 2059 龟兔赛跑
- ExtJs自学教程(2)：从DOM看EXTJS
- ASP.NET MVC- Area 使用
- IOS GCD 使用 (二)
- UIView的常见属性
- bootstrap中的动态加载出来的图片轮播中的li标签中的class="active"的动态添加移除
- socket+网路编程
- 利用dedecms给近三天（或当天）发布的文章显示红色日期或加上new字或new小图片
- 【Java Web】使用URLRewrite实现网站伪静态
- MySQL保留关键字
- 初步使用nodejs（一）
- debian9使用国内源安装docker以及一些使用方法
- python之集合set
- DOM_xss预备知识
- [转载]mapreduce合并小文件成sequencefile