本来想写个方便的控件 ,但是真正写起来内容太多了,所以还是分三个样式来解决
等到后面有什么组合的方法 再看
使用自定义控件包裹的话 遇到问题是 Trigger 里面不能动态绑定值
效果如下
<Grid Height="27" Margin="20,42,20,0" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<RadioButton x:Name="costServer_A" Content="免费服务" IsChecked="True" Click="ChangeCost_Click" Style="{StaticResource GroupSelectRadioButton_Left}" Margin="0" />
<RadioButton x:Name="costServer_B" Content="有偿服务" Click="ChangeCost_Click" Style="{StaticResource GroupSelectRadioButton_Right}" Margin="0" Grid.Column="1" />
</Grid>
<!--选择框-->
<Style x:Key="GroupSelectRadioButton_Left" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Foreground" Value="Gray"></Setter>
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="Height" Value="auto"></Setter>
<Setter Property="SnapsToDevicePixels" Value="true"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="grid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ClipToBounds="True" >
<Rectangle x:Name="ButtonStock" Fill="{TemplateBinding Background}" Stroke="Gray" RadiusX="5" RadiusY="5" Margin="0,0,-5,0" StrokeThickness="1"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<!--触发器:设置选中状态符号-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<!--<Setter Property="BorderThickness" Value="0"/>-->
<!--<Setter Property="BorderBrush" Value="#FF37A22D"/>-->
<Setter Property="Background" Value="Gray"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" Value="0.6"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" TargetName="grid" ></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="GroupSelectRadioButton_Middle" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Foreground" Value="Gray"></Setter>
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="Height" Value="auto"></Setter>
<Setter Property="SnapsToDevicePixels" Value="true"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="grid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ClipToBounds="True" >
<Rectangle x:Name="ButtonStock" Fill="{TemplateBinding Background}" Stroke="Gray" RadiusX="0" RadiusY="0" Margin="0,0,0,0" StrokeThickness="1"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<!--触发器:设置选中状态符号-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<!--<Setter Property="BorderThickness" Value="0"/>-->
<!--<Setter Property="BorderBrush" Value="#FF37A22D"/>-->
<Setter Property="Background" Value="Gray"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" Value="0.6"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" TargetName="grid" ></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="GroupSelectRadioButton_Right" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Foreground" Value="Gray"></Setter>
<Setter Property="Padding" Value="0"></Setter>
<Setter Property="FontSize" Value="12"></Setter>
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="Height" Value="auto"></Setter>
<Setter Property="SnapsToDevicePixels" Value="true"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="grid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" ClipToBounds="True" >
<Rectangle x:Name="ButtonStock" Fill="{TemplateBinding Background}" Stroke="Gray" RadiusX="5" RadiusY="5" Margin="-5,0,0,0" StrokeThickness="1"/>
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
<!--触发器:设置选中状态符号-->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<!--<Setter Property="BorderThickness" Value="0"/>-->
<!--<Setter Property="BorderBrush" Value="#FF37A22D"/>-->
<Setter Property="Background" Value="Gray"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" Value="0.6"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" TargetName="grid" ></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>