ListboxItems change color on mouse over with datatemplate

Question

I have a ListBox that looks like:

<ListBox Grid.Row="1" Margin="25" ItemsSource="{x:Static constants:AppsToInstall.AllApps}" SelectionMode="Multiple" HorizontalAlignment="Center">
   <ListBox.Resources>
      <DataTemplate DataType="{x:Type models:InstallItem}">
         <Grid x:Name="Grid">
            <Border x:Name="PART_BORDER" HorizontalAlignment="Stretch">
               <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                  <CheckBox IsChecked="{Binding CanInstall}"></CheckBox>
                  <TextBlock Margin="10 0 0 0" Text="{Binding DisplayName}"></TextBlock>
               </StackPanel>
            </Border>
         </Grid>
         <DataTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
               <Setter TargetName="Grid" Property="Background" Value="{StaticResource AccentColorBrush}"></Setter>
            </Trigger>
         </DataTemplate.Triggers>
      </DataTemplate>
   </ListBox.Resources>
</ListBox>

I have added a data template that allows me to bind to the item source being passed in.

With all of that said I cannot seem to get this to change the color of the entire ListBoxItem when hovering over this.

Please see picture below:

thatguy · Accepted Answer · 2020-07-20T15:09:52.757

This is really a case for editing the control template of a ListBoxItem. This type is the container that hosts your data template and it also defines the mouse over hover effect.

Just extract the default control template using Visual Studio or Blend. Both will extract the needed styles and resources, which you can put in your resource dictionary or control Resources.

<SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
<SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
   <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" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" 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>

What you have to do now is to replace the SolidColorBrush for Item.MouseOver.Background with your color. Then, apply this style ListBoxItemStyle as the ItemContainerStyle in your ListBox.

<ListBox Grid.Row="1"
         Margin="25"
         ItemsSource="{x:Static constants:AppsToInstall.AllApps}" SelectionMode="Multiple"
         HorizontalAlignment="Center"
         ItemContainerStyle="{StaticResource ListBoxItemStyle}">
   <!-- ...your XAML code. -->
</ListBox>

The result looks like this.

ListboxItems change color on mouse over with datatemplate

1 Answers1