zoukankan      html  css  js  c++  java
  • 改变WPF ListBoxItem的选中样式

    想用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 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的设置菜单了,再上具体示例图。

  • 相关阅读:
    BZOJ 4245: [ONTAK2015]OR-XOR
    BZOJ 2535: [Noi2010]Plane 航空管制2
    COGS 2551. 新型武器
    cogs2550. 冰桥,升起来了!
    大数模板
    uva 1513(线段树)
    uva 11525(线段树)
    poj 3368(RMQ模板)
    hdu 4686 Arc of Dream(矩阵快速幂)
    poj 3321 Apple Tree(树状数组)
  • 原文地址:https://www.cnblogs.com/jjseen/p/5491698.html
Copyright © 2011-2022 走看看