WPF-滑块开关式的CheckBox

来源:转载

滑块方式的CheckBox

如图的样式,这是一个CheckBox,利用WPF的Style样式,可以将普通的CheckBox变成这样的形式,但是也有弊端,就是只能是两个状态的CheckBox,如果有第三种状态,需要增加第三种状态的样式。

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
<Style x:Key="CheckStyle" TargetType="{x:Type CheckBox}"> <Setter Property="Height" Value="18"/> <Setter Property="Foreground" Value="White"/> <Setter Property="FontWeight" Value="Bold"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type CheckBox}"> <Border x:Name="ForegroundPanel" CornerRadius="2" BorderBrush="Black" BorderThickness="1" Padding="0"> <DockPanel> <TextBlock x:Name="Content" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2,0" /> <Border x:Name="CheckFlag" HorizontalAlignment="Right" VerticalAlignment="Center" CornerRadius="2" BorderThickness="0" Width="18" Height="16"/> </DockPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="Content" Property="Text" Value="开"/> <Setter TargetName="ForegroundPanel" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Gray" Offset="0.0"/> <GradientStop Color="Green" Offset="0.5"/> <GradientStop Color="Gray" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="CheckFlag" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="WhiteSmoke" Offset="0.0"/> <GradientStop Color="Green" Offset="0.5"/> <GradientStop Color="WhiteSmoke" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="Content" Property="DockPanel.Dock" Value="Left"/> <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Right"/> </Trigger> <Trigger Property="IsChecked" Value="False"> <Setter TargetName="Content" Property="Text" Value="关"/> <Setter TargetName="ForegroundPanel" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Gray" Offset="0.0"/> <GradientStop Color="Silver" Offset="0.5"/> <GradientStop Color="Gray" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="CheckFlag" Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="WhiteSmoke" Offset="0.0"/> <GradientStop Color="Silver" Offset="0.5"/> <GradientStop Color="WhiteSmoke" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="Content" Property="DockPanel.Dock" Value="Right"/> <Setter TargetName="CheckFlag" Property="DockPanel.Dock" Value="Left"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter></Style>

调用方法1 <CheckBox Style="{StaticResource CheckStyle}"/> 

我还是挺满意这个滑块的。有兴趣的可以自己增加一点动画效果。

原文地址:http://www.luacloud.com/2011/06/13/wpf-%e6%bb%91%e5%9d%97%e5%bc%80%e5%85%b3%e5%bc%8f%e7%9a%84checkbox/

分享给朋友:
您可能感兴趣的文章:
随机阅读: