WPF实现wp8样式的CheckBox

来源：互联网发布：js框架 angularjs 编辑：程序博客网时间：2024/05/01 12:11

效果很简单，直接上图

实现的方式很简单，直接上代码

<Window.Resources>

<Style x:Key="FocusStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="Red" StrokeThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="{x:Type CheckBox}">
<Setter Property="OverridesDefaultStyle" Value="False"></Setter>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator FlowDirection="LeftToRight" VerticalAlignment="Center">
<BulletDecorator.Bullet>
<Border x:Name="bd" BorderThickness="1" BorderBrush="Red" MinHeight="15" MinWidth="15" VerticalAlignment="Center">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="LightGray" Offset="0.2"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Path x:Name="cp" Width="12" Height="12" Stroke="Blue" StrokeThickness="3"></Path>
</Border>
</BulletDecorator.Bullet>
<ContentPresenter Margin="5,0,0,0"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="cp" Property="Data"
Value="M 0,6 L 6,12 12,0"/>
<Setter Property="Foreground" Value="LightGreen"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bd" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Orange" Offset="0.12"/>
<GradientStop Color="Yellow" Offset="0.92"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="{x:Type CheckBox}" x:Key="wpStyle">
<Setter Property="OverridesDefaultStyle" Value="False"></Setter>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusStyle}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<BulletDecorator FlowDirection="LeftToRight" VerticalAlignment="Center">
<BulletDecorator.Bullet>
<Grid MinWidth="45" MinHeight="20">
<Rectangle Width="45" Height="15" Stroke="White" Fill="Black" x:Name="rc1" StrokeThickness="2"/>
<Rectangle Height="20" Width="15" Stroke="White" Fill="White" HorizontalAlignment="Left" x:Name="rc2"/>
</Grid>
</BulletDecorator.Bullet>
<ContentPresenter Margin="5,0,0,0"/>
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="rc1" Property="Fill" Value="Green"/>
<Setter TargetName="rc2" Property="HorizontalAlignment" Value="Right"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Orientation="Vertical" Margin="20,20,20,20" Background="Black">
<CheckBox Content="苹果"/>
<CheckBox Content="鸡蛋"/>
<CheckBox Content="白菜"/>
<CheckBox Style="{StaticResource wpStyle}" Content="nihao" Margin="2,0,0,0"/>
</StackPanel>

这里要感谢某位姓周的大神吧，看到他的博文才想到的思路，感谢哈！

0 0