ListBox selected item background color

Question

Trying to make a tab control out of a listbox. If the listboxitems are just text, then it's easy to see which tab is selected, but as soon as I add an image/path as the content of the listboxitem, it no longer shows it as being selected when clicked. The only item below that shows when it is selected is the "Hello World" item. I just want the background of the tab to change color when it is selected.

<ListBox>
 <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBoxItem>
            <Canvas Width="53.3333" Height="53.3333">
                <Path Width="4.22434" Height="4.224" Stretch="Fill" Fill="#FF000000" Data="..."/>               
            </Canvas>
        </ListBoxItem>
        <ListBoxItem>
            <ListBoxItem.Content>
                <Canvas Width="46.6667" Height="45.3333">
                    <Path Width="46.3232" Height="43.9357" 
                          Canvas.Left="0.51729" 
                          Canvas.Top="1.06295" 
                          Stretch="Fill" 
                          Fill="#FF000000" 
                          Data="..."
                </Canvas>
            </ListBoxItem.Content>
        </ListBoxItem>
        <ListBoxItem Content="Hello World">
        </ListBoxItem>
    </ListBox>

Answer 1

I just did this recently for one of my apps using a ListView. It should be similar for ListBox but you might want to use ListView as they are similar and I know it works. You need to modify the style to set the SelectedBackground and SelectedPointerOverBackground colors. I set them to blue in the style below.

        <Style x:Key="ListViewItemTabStyle" TargetType="ListViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="TabNavigation" Value="Local"/>
            <Setter Property="IsHoldingEnabled" Value="True"/>
            <Setter Property="Margin" Value="0,0,0,0"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    Padding="{TemplateBinding Padding}"
                    SelectionCheckMarkVisualEnabled="False"
                    CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}"
                    CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}"
                    CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}"
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                    FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}"
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                    PointerOverBackground="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
                    SelectedBorderThickness="{ThemeResource ListViewItemCompactSelectedBorderThemeThickness}"
                    SelectedBackground="Blue"
                    SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}"
                    SelectedPointerOverBackground="Blue"
                    SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}"
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    PointerOverBackgroundMargin="1"
                    ContentMargin="4" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

And then set the style for your ListView like this:

<ListView ItemContainerStyle="{StaticResource ResourceKey=ListViewItemTabStyle}"  Background="Gray" SelectedIndex="0">
     <ListViewItem Content="Item1"/>
     <ListViewItem Content="Item2"/>
     <ListViewItem Content="Item3"/>
</ListView>