继续聊WPF——自定义CheckBox控件外观

 

上一篇文章中谈到了BulletDecorator控件，就是为自定义CheckBox控件的模板做准备，因为CheckBox需要比较严格的布局，正好，BulletDecorator控件就合适了，该控件的布局是有项目列表，排列起来好办很多了。

 

第一步，先建立一项资源，就是控件的聚焦样式，即当你在窗体中不断按Tab键使控件获取焦点时的样式，后面要用到。

<!--当控件获得键盘焦点时的样式--> <Style x:Key="FocusStyle"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Stroke="Red" StrokeThickness="1"/> </ControlTemplate> </Setter.Value> </Setter> </Style>

第二步，写好CheckBox的样式。

<!-- CheckBox的样式 --> <Style TargetType="{x:Type CheckBox}"> <Setter Property="OverridesDefaultStyle" Value="True"/> <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"/> </Border> </BulletDecorator.Bullet> <ContentPresenter Margin="2,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>

第三步，把窗体默认的Grid控件去掉，为了更好地布局，应使用StatcPanel控件。

<StackPanel Orientation="Vertical" Margin="20,20,20,20"> <CheckBox Content="苹果"/> <CheckBox Content="鸡蛋"/> <CheckBox Content="白菜"/> <CheckBox Content="萝卜"/> <CheckBox Content="豆浆"/> <CheckBox Content="咸菜"/> <CheckBox Content="炒饭"/> <CheckBox Content="烧鸭饭"/> <CheckBox Content="叉烧饭"/> </StackPanel>

 

好，完事，现在来看看效果吧。

 当项目被选中后，字体自动变为绿色，请参照上面的XAML代码。

怎么样，漂亮不？