改变WPFListBoxItem的选中样式
想⽤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="0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemCo
lors.ControlTextBrushKey}}" StrokeThickness="0" 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="16"/>
<!--<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="1"/>
<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}" SnapsToDevice <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>active alignment
<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的设置菜单了，再上具体⽰例图。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论