WPF 控件专题 RadioButton样式一

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选中效果图：选中时控件的高度变大

**************************************************************************************************************