想用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="0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.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}" 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的设置菜单了,再上具体示例图。