tags:

views:

18

answers:

1

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:

alt text

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

Thanks in advance.

+1  A: 

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.

karmicpuppet
Thanks, that did the trick.
Tamás Szelei