Menu

WPF ListBoxItem Selected Background Highlight in Windows 8

July 8, 2015 - .NET / C#, Geek Bits, WPF / XAML
WPF ListBoxItem Selected Background Highlight in Windows 8

When targeting the way a ListBoxItems are styled on pre Windows 8 platforms you could easily change with style syntax like:

<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>

This would essentially override the OS level WPF style brushes and remove the highlighting (at least in this case since the color property is set to transparent). This has all been changed in WPF post Windows 8 and requires a lot more code to achieve the same effect.

In the style below, I use the above code in the ControlTemplate to achieve this:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Border x:Name="Bd"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}"
                    SnapsToDevicePixels="True">
                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    Content="{TemplateBinding Content}"
                                    ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            </Border>
            <ControlTemplate.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter TargetName="Bd" Property="Background" Value="Transparent" />
                    <Setter TargetName="Bd" Property="BorderBrush" Value="Transparent" />
                </MultiTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Selector.IsSelectionActive" Value="False" />
                        <Condition Property="IsSelected" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter TargetName="Bd" Property="Background" Value="Transparent" />
                    <Setter TargetName="Bd" Property="BorderBrush" Value="Transparent" />
                </MultiTrigger>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="Selector.IsSelectionActive" Value="True" />
                        <Condition Property="IsSelected" Value="True" />
                    </MultiTrigger.Conditions>
                    <Setter TargetName="Bd" Property="Background" Value="Transparent" />
                    <Setter TargetName="Bd" Property="BorderBrush" Value="Transparent" />
                </MultiTrigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="Bd" Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Phew … thanks Microsoft!

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*