先上效果图:
这个控件其实是俩个RadioButton,通过样式就可以实现。
样式资源:
1 <Style x:Key="Tong_Yong_RadioButtonStyle" TargetType="{x:Type RadioButton}"> 2 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /> 3 <Setter Property="Background" Value="White" /> 4 <Setter Property="BorderThickness" Value="0" /> 5 <Setter Property="HorizontalContentAlignment" Value="Center" /> 6 <Setter Property="VerticalContentAlignment" Value="Center" /> 7 <Setter Property="Padding" Value="0" /> 8 <Setter Property="Margin" Value="10,10,0,0" /> 9 <Setter Property="Cursor" Value="Hand" /> 10 <Setter Property="Height" Value="{Binding Height}" /> 11 <Setter Property="Width" Value="{Binding Width}" /> 12 <Setter Property="Cursor" Value="Hand" /> 13 <Setter Property="Template"> 14 <Setter.Value> 15 <ControlTemplate TargetType="{x:Type RadioButton}"> 16 <Grid> 17 <!-- 选中或者鼠标移入颜色 --> 18 <Grid 19 x:Name="B" 20 Background="#0099ff" 21 Visibility="Collapsed" /> 22 <!-- 默认颜色 --> 23 <Grid x:Name="A" Background="{TemplateBinding Background}" /> 24 25 <ContentPresenter 26 x:Name="b" 27 HorizontalAlignment="Center" 28 VerticalAlignment="Center" 29 TextBlock.Foreground="White" /> 30 <ContentPresenter 31 x:Name="a" 32 HorizontalAlignment="Center" 33 VerticalAlignment="Center" 34 TextBlock.Foreground="Black" /> 35 </Grid> 36 <ControlTemplate.Triggers> 37 <Trigger Property="IsChecked" Value="True"> 38 <Setter TargetName="A" Property="Visibility" Value="Collapsed" /> 39 <Setter TargetName="B" Property="Visibility" Value="Visible" /> 40 <Setter TargetName="a" Property="Visibility" Value="Collapsed" /> 41 <Setter TargetName="b" Property="Visibility" Value="Visible" /> 42 </Trigger> 43 </ControlTemplate.Triggers> 44 </ControlTemplate> 45 </Setter.Value> 46 </Setter> 47 </Style>
2.引用样式
<RadioButton Width="80" Margin="0" Content="开" Foreground="Black" Style="{DynamicResource Tong_Yong_RadioButtonStyle}" /> <RadioButton Width="80" Margin="0" Content="关" Foreground="Black" IsChecked="True" Style="{DynamicResource Tong_Yong_RadioButtonStyle}" />