继续聊WPF——自定义CheckBox控件外观
2011-11-13 21:04
513 查看
上一篇文章中谈到了BulletDecorator控件,就是为自定义CheckBox控件的模板做准备,因为CheckBox需要比较严格的布局,正好,BulletDecorator控件就合适了,该控件的布局是有项目列表,排列起来好办很多了。
第一步,先建立一项资源,就是控件的聚焦样式,即当你在窗体中不断按Tab键使控件获取焦点时的样式,后面要用到。
第二步,写好CheckBox的样式。
第三步,把窗体默认的Grid控件去掉,为了更好地布局,应使用StatcPanel控件。
好,完事,现在来看看效果吧。
当项目被选中后,字体自动变为绿色,请参照上面的XAML代码。
怎么样,漂亮不?
第一步,先建立一项资源,就是控件的聚焦样式,即当你在窗体中不断按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代码。
怎么样,漂亮不?
相关文章推荐
- 继续聊WPF——自定义CheckBox控件外观
- 继续聊WPF——自定义CheckBox控件外观
- WPF自定义分页控件
- 继续聊WPF——Expander控件(1)
- checkbox radio 通过CSS自定义外观
- WPF 自定义CheckBox
- 自定义Android 5.0中checkbox、RadioButton等控件
- 继续聊WPF——自定义滚动条
- WPF 下的自定义控件以及 Grid 中控件的自适应
- WPF 更改控件的外观的三种办法
- 【转】带checkbox的ListView实现(二)——自定义Checkable控件的实现方法
- 自定义WPF常用控件(2)--输入过滤
- WPF CheckBox 自定义样式
- WPF DataGrid 控件(自定义样式篇)
- Android的CheckBox控件设置自定义图片
- android - 自定义(组合)控件 + 自定义控件外观
- 【WPF】自定义金额输入控件CurrencyEditor和限制输入控件FieldTextBox
- [自定义服务器控件] 第三步:CheckBoxList。
- 继续聊WPF——Thumb控件
- WPF自定义选择年月控件详解