Tag: ControlTemplate

A Silverlight/Wpf ListBoxItem is highlighted when selected or when the mouse hovers over it.

I need to display a list of items that are not highlighted when selected. This is a common scenario when displaying an inactive list for simply listing out some information.

ListBoxItem’s default template can be easily inspected and modified using Expression Blend – Select a ListBoxItem in Objects and Timeline pane, Right click and select Edit template > Edit a Copy. Name you template and save it at the scope of your choice.

This will create a copy of the template and allow you to modify it. Switch to the xaml view. Locate the VisualStates of MouseOver, Selected and Focused, and blank them out –

The style is applied to the ListBoxItems using ItemContainerStyle –

Here is the xaml style for the ListBoxItem –
<Style x:Key="ListBoxtemStyleNoHighlighting" TargetType="ListBoxItem"><br /> <Setter Property="Padding" Value="3"/><br /> <Setter Property="HorizontalContentAlignment" Value="Left"/><br /> <Setter Property="VerticalContentAlignment" Value="Top"/><br /> <Setter Property="Background" Value="Transparent"/><br /> <Setter Property="BorderThickness" Value="1"/><br /> <Setter Property="TabNavigation" Value="Local"/><br /> <Setter Property="Template"><br /> <Setter.Value><br /> <ControlTemplate TargetType="ListBoxItem"><br /> <Grid Background="{TemplateBinding Background}"><br /> <VisualStateManager.VisualStateGroups><br /> <VisualStateGroup x:Name="CommonStates"><br /> <VisualState x:Name="Normal"/><br /> <VisualState x:Name="MouseOver"/><br /> </VisualStateGroup><br /> <VisualStateGroup x:Name="SelectionStates"><br /> <VisualState x:Name="Unselected"/><br /> <VisualState x:Name="Selected"/><br /> </VisualStateGroup><br /> <VisualStateGroup x:Name="FocusStates"><br /> <VisualState x:Name="Focused"/><br /> <VisualState x:Name="Unfocused"/><br /> </VisualStateGroup><br /> </VisualStateManager.VisualStateGroups><br /> <Rectangle x:Name="fillColor" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/><br /> <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/><br /> <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/><br /> <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed"/><br /> </Grid><br /> </ControlTemplate><br /> </Setter.Value><br /> </Setter><br /> </Style>

After the style is applied, the ListBoxItems are not highlighted when selected or focused. Here is a live demo of a ListBox that does not highlight when items are selected : remove-listboxitem-hlighting-demo