改变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选中样式
随机推荐
- 正确理解ContentPresenter
下图显示继承关系: ContentControl:Control (在Control類並沒有Content屬性, 所以在這之上再寫了一個ContentControl, 使控件有Content屬性可以顯 ...
- session与缓存
分布式系统开发常见问题-1. session的复制与共享 2. 分布式缓存的设计 1. session的复制与共享 在web应用中,为了应对大规模访问,必须实现应用的集群部署.要实现集群部署主要需要实 ...
- (剑指Offer)面试题33:把数组排成最小的数
题目: 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 思路: 1.全 ...
- document.body为null的问题
虽然body是JS中的DOM技术中所有浏览器支持的属性,但在我们的代码编写中,还是会碰到document.is null问题 例如:我们可以使用alert(document.body);的时候,就会提 ...
- 单步运行linux kernel ?
如果能给linux kernel打log,如果能单步运行,如果能像普通应用程序那样,step by step的查看程序跑哪里了.. 该多好?这是一个梦想,但从未实现过:因为那是kernel,不是应用程 ...
- IE调试方法(一)<转>
前面两篇关于IE11开发人员工具的文章,我们分别介绍了两个新的功能:UI响应工具和内存分析工具,今天为大家介绍一个老功能:网络工具,虽然是在IE9开始已经加入了这个工具,但是在IE11中还有有很多改进 ...
- iOS 蒙板,图片叠加显示漏空部分
懒惰了一个月了,今天写写项目里遇到的一个问题. 图片a 和图片b相互叠加,a图片四周是白色的不规则图形,里面填充黑色. b图片是一张正常图片. 需求是叠加在一起,要求将b图片根据a图片的黑色形状 扣出 ...
- 关于 TIdHttp
经验总结: 1.IdHttp 不支持多线程,只支持异步.所有网上的多线程写法下,如果同时并发多个长 GET 或 POST 请求时,会阻塞. 以下代码用于显示下载数据的进程. procedure TFo ...
- 试读《JavaScript语言精髓与编程实践》
有幸看到iteye的活动,有幸读到<JavaScript语言精髓与编程实践_第2版>的试读版本,希望更有幸能完整的读到此书. 说来读这本书的冲动,来得很诡异,写一篇读后感,赢一本书,其实奖 ...
- Codeforces Gym 100231G Voracious Steve 记忆化搜索
Voracious Steve 题目连接: http://codeforces.com/gym/100231/attachments Description 有两个人在玩一个游戏 有一个盆子里面有n个 ...