改变WPF ListBoxItem的选中样式
想用ListBox作一个类似IOS 设置的菜单,却发现很难改变ListBoxItem鼠标移过、选中的默认蓝色背景与边框。
尝试使用Style来设置strigger,依然不成功。在百度搜索一些资料,提到了重新定义系统Bursh的方式,依然工作不成功。但这给我了我一些提示,虽然这些搜索结果都没有提到为什么。
- ListBoxItem的选中颜色使用的是系统预定义的颜色。其默认的样式与预定义颜色Brush绑定在一起,无法通过直接修改Background来改变。或者可以称其为主题(theme),它通过固定的Key来调用主题颜色。
- 无法通过直接指定颜色值来改变其颜色,必须通过重写固定的Key的Value来改变颜色。即重新建立资源,让绑定的key对应新的Value,覆盖系统默认的Key-Value。
- 对于不精通者,修改ListBoxItem显得有点困难,晦涩的名词很多。
不过,使用Blend(Vs 2012 Community自带)来设计样式是非常不错的方式,可以直接读取预定义的ListBoxItem样式模板,修改Key对应的颜色值即可。默认样式模板用Xaml将1,2很好的展示出来了。
- 用vs打开*.Xaml,单击vs菜单栏视图选择在Blend中设计....;用鼠标在Blend中选中ListBoxItem第一项右键弹出菜单,选择编辑样式、编辑副本,则Blend会在Xaml中自动生成默认样式的Xaml代码。 (Vs 2015 community)
//部分内容已经被我测试修改过
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="Red"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="Red"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="Red"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="Beige"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="Beige"/> <Style TargetType="{x:Type ListBoxItem}">
<Setter Property="FontFamily" Value="Microsoft YaHei UI Light"/>
<Setter Property="FontSize" Value=""/>
<!--<Setter Property="HorizontalContentAlignment" Value="Center"/>--> <Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value=""/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这样很清楚了,只需要修改<SolidColorBrush>的颜色值,就可以更改ListBoxItem的鼠标移过、选中的Style了。
/**Red就是修改后的颜色值,表示鼠标划过时的背景色;**/
<SolidColorBrush x:Key="Item.MouseOver.Background" Color="Red"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="Red"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="Red"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="Beige"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="Beige"/>
Blend是十分强大的工具。等我做成类似IOS的设置菜单了,再上具体示例图。
改变WPF ListBoxItem的选中样式的更多相关文章
- 自定义WPF ListBox的选中项样式
首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBrushKey和HighlightText ...
- WPF ListBoxItem模板中添加CheckBox选中问题
原文:WPF ListBoxItem模板中添加CheckBox选中问题 是这样的,需要一个ListBox来展示照片,并添加一个选中的CheckBox.这就需要对ListBox的ItemTemplate ...
- 自定义WPF ListBox的选择样式
(下图:进行多项选择的ListBox) 首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBr ...
- WPF下Itemscontrol分组 样式
原文 WPF下Itemscontrol分组 样式 <ItemsControl Grid.Row="1" DataContext="{Binding Layouts} ...
- ant design pro 当中改变ant design 组件的样式和 数据管理
ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...
- WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化
艾尼路 出的效果图 本人嵌套 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 源代码
- 怎么用js代码改变单选框的选中状态
今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...
- WPF笔记(1.9 样式和控件模板)——Hello,WPF!
原文:WPF笔记(1.9 样式和控件模板)--Hello,WPF! 资源的另一个用途是样式设置: <Window > <Window.Resources> <St ...
- 微信小程序 - 更改radio和checkbox选中样式
点击下载源码:示例-更改radio或checkbox选中样式
随机推荐
- Castle IOC容器构建配置详解(一)
主要内容 1.配置什么 2.几种配置方式 3.Include 介绍 4.Properties介绍 5.条件状态 一.配置什么 Castle IOC中并不像Spring.net那样贯穿着一个思想就是一切 ...
- UserControl和CustomControl基础【PluraSight】
UserControl UserControl实际上就是ContentControl,xaml里<UserControl></UserControl>tag之间包含的实际就是后 ...
- 3DTouch-ShortcutItem - iOS9 - xcode7
据说苹果某个神秘的团队闭门潜心研发多年的3DTouch终于,应用在iOS9上,且公开了API. 在系统主界面用力按压 APP 图标,如上会出现自定义菜单 有两种方法可以实现一.代码(这种方法也是可以动 ...
- 让AllocateHwnd接受一般函数地址作参数
http://www.xuebuyuan.com/1889769.html Classes单元的AllocateHWnd函数是需要传入一个处理消息的类的方法的作为参数的,原型: function Al ...
- WPF仿360卫士9.0界面设计
Chrome插件——一键保存网页为PDF1.0 http://blog.csdn.net/bdstjk/article/details/9208313 仿照网上的一个代码写的,地址找不到了. 将窗体, ...
- Codeforces Round #245 (Div. 1) 429D - Tricky Function 最近点对
D. Tricky Function Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 codeforces.com/problemset/problem/42 ...
- Nazo解密游戏攻略
啊,终于腾出时间来玩这个游戏了,顺手写一下攻略吧…… 第0关:http://cafebabe.cc/nazo/ 第一关:第一关很简单 点一下就好了 http://cafebabe.cc/nazo/le ...
- Android程序开发0基础教程(一)
程序猿学英语就上视觉英语网 Android程序开发0基础教程(一) 平台简单介绍 令人激动的Google手机操作系统平台-Android在2007年11月13日正式公布了,这是一个开放源码的操 ...
- 视频流服务器配置[windows平台][转]
视频流服务器配置[windows平台] 搭建一个Flv视频播放服务器 作者:笨小孩 发布于:2013-9-1 20:18 分类:环境架设 IIS,Apache,Nginx环境都可以很好的支持视频的播放 ...
- 【JavaScript】前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js
摘要:透过对Github,StackOverflow,YouTube等社区进行数据收集后可知,AngularJS在各大主流社区中都是最受欢迎的,Backbone.js与Ember.js则不相伯仲.本文 ...