RadioButton样式示例
Style样式修改如下:通过改下RadioButton的ControlTemplate,修改控件所呈现的外观形状和颜色;通过IsChecked属性触发器样式变化。
<UserControl.Resources>
<Style x:Key="defaultRadioStyle" TargetType="RadioButton">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border
x:Name="border"
Background="{TemplateBinding Background}"
CornerRadius="4">
<ContentPresenter
x:Name="contentPresenter"
Grid.Column="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Focusable="False"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="contentPresenter" Property="Margin" Value="0,6,0,6" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="contentPresenter" Property="Margin" Value="0,0,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
**************************************************************************************************************
引用示例代码:RadioButton底层放置了一个Border控件,控制阴影效果。RadioButton中使用StackPanel布局,可以写入不同数据的文本或者图片等。
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<UniformGrid Grid.Row="0" Columns="2">
<Border>
<Border.Effect>
<DropShadowEffect
BlurRadius="20"
Direction="270"
Opacity="0.5"
ShadowDepth="6"
Color="#0BBA6B" />
</Border.Effect>
<RadioButton
Margin="6,0,6,0"
VerticalAlignment="Center"
Background="#0BBA6B"
GroupName="mytask"
Checked="RadioButton_Checked"
Style="{StaticResource defaultRadioStyle}">
<StackPanel
Width="220"
Height="60"
Orientation="Horizontal">
<TextBlock
Padding="20,0,0,0"
VerticalAlignment="Center"
FontSize="16"
Text="全部问题" />
<TextBlock
Padding="70,0,0,0"
VerticalAlignment="Center"
FontSize="22"
Text="90" />
</StackPanel>
</RadioButton>
</Border>
<Border>
<Border.Effect>
<DropShadowEffect
BlurRadius="20"
Direction="270"
Opacity="0.6"
ShadowDepth="6"
Color=" #FF9900" />
</Border.Effect>
<RadioButton
Margin="6,0,6,0"
VerticalAlignment="Center"
Background="#FF9900"
GroupName="mytask"
Checked="RadioButton_Checked1"
Style="{StaticResource defaultRadioStyle}">
<StackPanel
Width="220"
Height="60"
Orientation="Horizontal">
<TextBlock
Padding="20,0,0,0"
VerticalAlignment="Center"
FontSize="16"
Text="待处理问题" />
<TextBlock
Padding="70,0,0,0"
VerticalAlignment="Center"
FontSize="22"
Text="10" />
</StackPanel>
</RadioButton>
</Border>
</UniformGrid>
</Grid>
**************************************************************************************************************
RadioButton未选中效果图:
RadioButton选中效果图:选中时控件的高度变大
**************************************************************************************************************