Question

I made a custom styled list in WPF:

        <DataTemplate x:Key="SelectedTemplate">
            <StackPanel Background="#FF4E4E4E" HorizontalAlignment="Stretch">
                <TextBlock Text="{Binding Path=Title}" Foreground="#FFD80000" />
            </StackPanel>
        </DataTemplate>

        <Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
            <Setter Property="ContentTemplate" 
                    Value="{StaticResource ItemTemplate}" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="ContentTemplate"
                            Value="{StaticResource SelectedTemplate}" />
                </Trigger>
            </Style.Triggers>
        </Style>

…

    <ListBox 
        Name="lbSongs"
        DockPanel.Dock="Left" 
        ItemsSource="{Binding Path=SongDirectory}"
        SelectedItem="{Binding Path=Song, Mode=TwoWay}"
        Visibility="{Binding Path=ListVisibility}"
        ItemContainerStyle="{StaticResource ContainerStyle}"
        HorizontalContentAlignment="Stretch"
        Width="180px" Background="#FF333333" />

I tried to make a custom style for the selected item. To make the selection bar stretch to the width of the ListBox, I set the ItemContainerStyle’s HorizontalContentAlignment property to “Stretch”. The problem is that it does not stretch fully, a tiny bar on the left still remains and the original (blue) selection bar is still visible there. See the screenshot:

How can I make it to stretch to full size? Or how can I style the original selection bar?

Thanks in advance.

Answer 1

Just set the Padding for the ListBoxItem to zero. That blue bar should disappear.

 <Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
      <Setter Property="Padding" Value="0"/>
      ...
 </Style>

Another option is just to re-write the ControlTemplate for the ListBoxItem so that you’ll have better control on how it looks like. But yeah, this may not be necessary in your case.