想用ListBox作一个类似IOS 设置的菜单,却发现很难改变ListBoxItem鼠标移过、选中的默认蓝色背景与边框。

尝试使用Style来设置strigger,依然不成功。在百度搜索一些资料,提到了重新定义系统Bursh的方式,依然工作不成功。但这给我了我一些提示,虽然这些搜索结果都没有提到为什么。

  1. ListBoxItem的选中颜色使用的是系统预定义的颜色。其默认的样式与预定义颜色Brush绑定在一起,无法通过直接修改Background来改变。或者可以称其为主题(theme),它通过固定的Key来调用主题颜色。
  2. 无法通过直接指定颜色值来改变其颜色,必须通过重写固定的Key的Value来改变颜色。即重新建立资源,让绑定的key对应新的Value,覆盖系统默认的Key-Value。
  3. 对于不精通者,修改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的选中样式的更多相关文章

  1. 自定义WPF ListBox的选中项样式

    首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBrushKey和HighlightText ...

  2. WPF ListBoxItem模板中添加CheckBox选中问题

    原文:WPF ListBoxItem模板中添加CheckBox选中问题 是这样的,需要一个ListBox来展示照片,并添加一个选中的CheckBox.这就需要对ListBox的ItemTemplate ...

  3. 自定义WPF ListBox的选择样式

    (下图:进行多项选择的ListBox) 首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的,SystemColors的HighlightBr ...

  4. WPF下Itemscontrol分组 样式

    原文 WPF下Itemscontrol分组 样式 <ItemsControl Grid.Row="1" DataContext="{Binding Layouts} ...

  5. ant design pro 当中改变ant design 组件的样式和 数据管理

    ant design pro 简介 官网简介 链接 https://pro.ant.design/docs/getting-started-cn 项目结构 https://github.com/ant ...

  6. WPF ScrollViewer(滚动条) 自定义样式表制作 再发一套样式 细节优化

    艾尼路 出的效果图 本人嵌套 WPF ScrollViewer(滚动条) 自定义样式表制作 图文并茂 WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化) 源代码

  7. 怎么用js代码改变单选框的选中状态

    今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...

  8. WPF笔记(1.9 样式和控件模板)——Hello,WPF!

    原文:WPF笔记(1.9 样式和控件模板)--Hello,WPF! 资源的另一个用途是样式设置: <Window >  <Window.Resources>    <St ...

  9. 微信小程序 - 更改radio和checkbox选中样式

    点击下载源码:示例-更改radio或checkbox选中样式

随机推荐

  1. 基于jQuery的视频和音频播放器jPlayer

    jPlayer见网络上资料很少,官方英文资料太坑爹TAT,于是就写一个手记给大家参考下.据我观察,jPlayer的原理主要是用到HTML5,在不支持HTML5的浏览器上使用SWF.做到全兼容,这一点很 ...

  2. [XAF]如何在非按钮事件中打开视图

    private static void OpenDetailView(XafApplication app) { IObjectSpace os = app.CreateObjectSpace(); ...

  3. PHP抓取豆瓣读书爬虫代码

    <?php//演示地址 http://asizu.sinaapp.com/reptile_douban.php//数据量不是特别大,没有写抓完数据便停止. 喜欢的朋友拿去自己改改就好了 head ...

  4. css3 过度效果之物体向上冒出

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta nam ...

  5. listView divider marginLeft marginRight

    要实现这样的效果: 新建drawable  用inset 进行实现.代码如下: <?xml version="1.0" encoding="utf-8"? ...

  6. CSS布局经验谈

    1.盒子模型 CSS最具特色也是最本质的可以浓缩成盒子模型. 整个页面可以通过大盒子套小盒子,盒子挨着盒子放,摆成一个页面即可. 盒子即所谓的块元素,只有块元素才有宽和高,有了宽和高才能使盒子挨着盒子 ...

  7. JDBC概述以及几种驱动程序

    JDBC(Java DataBase Connectivity,数据库连接)是用来执行SQL的Java API.开发人员可以使用这些标准API来连接和操作数据库 JDBC是Java的规范,考虑到规范的 ...

  8. C++学习笔记之函数指针

    与数据项类似,函数也有地址.函数的地址是存储其机器语言代码的内存开始的地方. 一.函数指针的基础知识 假设要设计一个名为estimate()的函数,估算编写指定行数代码所需时间,并且希望不同的程序员都 ...

  9. 模拟log4j获取日志对象调用所在的类名、方法名及行号

    当我们在记录日志时,每个类中会定义一个日志对象,然后利用这个对象去写日志,那么我们在处理日志时,如何能才能记录日志对象所在的类.方法和行号呢?log4j中已经实现了该功能,那么它是怎么实现的呢? 其实 ...

  10. Linq lamda表达式Single和First方法

      让我们来看看如何对一个整数数组使用 Single 操作符.这个整数数组的每个元素代表 2 的 1 到 10 次方.先创建此数组,然后使用 Single 操作符来检索满足 Linq Lambda表达 ...