Remove highlights from ListBox of ListBox

Question

I have the following code and I can't remove the highlights:

    <ListBox
      Name="OuterListBox"
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      AlternationCount="2"
      Background="White"
      BorderThickness="0"
      ItemsSource="{Binding Board}">
      <ListBox.ItemContainerStyle>
        <Style BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="{x:Type ListBoxItem}">
          <Style.Resources>
            <AlternationConverter x:Key="AlternationPaddingConverter">
              <Thickness Right="25" />
              <Thickness Left="25" />
            </AlternationConverter>
          </Style.Resources>
          <Setter Property="Padding" Value="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource Self}, Converter={StaticResource AlternationPaddingConverter}}" />
        </Style>
      </ListBox.ItemContainerStyle>
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid>
            <ListBox
              Name="InnerListBox"
              Background="Transparent"
              BorderThickness="0"
              ItemContainerStyle="{StaticResource ChangeListBoxItemHighlight}"
              ItemsSource="{Binding}">
              <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                  <VirtualizingStackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
              </ListBox.ItemsPanel>
              <ListBox.ItemTemplate>
                <DataTemplate>
                  <Ellipse
                    Margin="2"
                    Width="{Binding Size}"
                    Height="{Binding Size}"
                    Cursor="Hand"
                    Fill="{Binding Background}" />
                </DataTemplate>
              </ListBox.ItemTemplate>
            </ListBox>
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

I tried to use a setter with Property="Template" and value <ControlTemplate TargetType="{x:Type ListBoxItem}">, but the alternation of the rows disappeared.

How can I remove the highlights, but still keep the alternating rows?

Answer 1

A control template defines the visual appearance of a control, its states and required parts. In order to change the representation of states like Mouse Over or Focused, you have to modify the control template. However, it is not that easy, since control templates are complex and hard to built from scratch. You can always refer to the documentation for a distinct control.

• ListBox Styles and Templates > ListBoxItem (Parts and States)

As you can see, there is much to consider, so you are better off copying the default style and control template and adapt them to your needs. I have extracted and adapted them according to your question. In essence this means removing all focus and mouse triggers and adding the alternation padding.

<Style x:Key="ListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
   <Style.Resources>
      <AlternationConverter x:Key="AlternationPaddingConverter">
         <Thickness Right="25" />
         <Thickness Left="25" />
      </AlternationConverter>
   </Style.Resources>
   <Setter Property="Padding" Value="{Binding (ItemsControl.AlternationIndex), RelativeSource={RelativeSource Self}, Converter={StaticResource AlternationPaddingConverter}}" />
   <Setter Property="SnapsToDevicePixels" Value="True"/>
   <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="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>
               <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>

You can then just reference this style in your ListBox or inline it if you want.

<ListBox
   Name="OuterListBox"
   HorizontalAlignment="Center"
   VerticalAlignment="Center"
   AlternationCount="2"
   Background="White"
   BorderThickness="0"
   ItemsSource="{Binding Board}"
   ItemContainerStyle="{StaticResource ListBoxItemStyle}">
   <ListBox.ItemTemplate>
      <DataTemplate>
         <Grid>
            <ListBox
               Name="InnerListBox"
               Background="Transparent"
               BorderThickness="0"
               ItemContainerStyle="{StaticResource ChangeListBoxItemHighlight}"
               ItemsSource="{Binding}">
               <ListBox.ItemsPanel>
                  <ItemsPanelTemplate>
                     <VirtualizingStackPanel Orientation="Horizontal" />
                  </ItemsPanelTemplate>
               </ListBox.ItemsPanel>
               <ListBox.ItemTemplate>
                  <DataTemplate>
                     <Ellipse
                        Margin="2"
                        Width="{Binding Size}"
                        Height="{Binding Size}"
                        Cursor="Hand"
                        Fill="{Binding Background}" />
                  </DataTemplate>
               </ListBox.ItemTemplate>
            </ListBox>
         </Grid>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>