wpf⾃定义RadioButton控件样式
实现的效果为:
我感觉来⾃定义RadioButton样式和定义button空间的样式差不多,只是类型不同⽽已。
接下来分析⼀下样式代码:
<!--⾃定义单选按钮样式-->
<Style TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid Width="100"
Height="22">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="Images/radio01.png" //这⾥的图⽚为灰⾊是的图⽚
Width="12"
Height="4"
x:Name="radioImage"></Image>
<TextBlock x:Name="radioContent"
Grid.Column="1"
FontFamily="Microsoft YaHei"
FontWeight="Bold"
FontSize="12"
VerticalAlignment="Center"
Foreground="#FFFFFF"
Text="{TemplateBinding Content}"></TextBlock> //这⾥让它显⽰的⽂本内容直接绑定到RadioButton的Content属性上
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" //当控件获取焦点时要执⾏的内容
Value="true">
<Setter TargetName="radioImage"
Property="Width"
Value="22" />
<Setter TargetName="radioImage"
Property="Height"
Value="14" />
<Setter TargetName="radioImage"
Property="Source"
Value="Images/radio02.png" /> //这是当被选中时的黄⾊图⽚
<Setter TargetName="radioContent"
Property="Foreground"
Value="#F1DC21" />
</Trigger>
<Trigger Property="IsMouseOver" //当⿏标放上去时要设置的内容
Value="true">
<Setter TargetName="radioImage"
Property="Width"
Value="22" />
<Setter TargetName="radioImage"
Property="Height"
Value="14" />
<Setter TargetName="radioImage"htmlradio设置默认的按钮
Property="Source"
Value="Images/radio02.png" />
<Setter TargetName="radioContent"
Property="Foreground"
Value="#F1DC21" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML中代码为:
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="50,0,0,0">
<RadioButton Content="实景模式" //在这⾥当给RadioButton的Content属性赋值时直接对应的就是样式中的radioContent VerticalAlignment="Center"
Grid.Row="1"
Margin="3,0,0,7"
/>
<RadioButton Content="⾛线模式"
VerticalAlignment="Center"
Margin="3,0,0,7" />
<RadioButton Content="拓扑模式"
VerticalAlignment="Center"
Margin="3,0,0,7"/>
</StackPanel>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论