Stretch ListBox Items hit area to full width of the ListBox? ListBox style is set implicity through a theme

Question

I've looked around for an answer on this, but the potential duplicates are more concerned with presentation than interaction.

I have a basic list box, and each item's content is a simple string.

The ListBox itself is stretched to fill it's grid container, but each ListBoxItem's hitarea does not mirror the ListBox width. It looks as if the hitarea (pointer contact area) for each item is only the width of the text content. How do I make this stretch all the way across, regardless of the text size.

I've set HorizontalContentAlignment to Stretch, but this doesn't solve my problem. My only other guess is that the content is actually stretching, but the background is invisible and so not capturing the mouse pointer.

<ListBox 
    Grid.Row="1"
    x:Name="ProjectsListBox" 
    DisplayMemberPath="Name"
    ItemsSource="{Binding Path=Projects}" 
    SelectedItem="{Binding Path=SelectedProject}"
    HorizontalContentAlignment="Stretch"/>

The XAML is pretty straight forward on this. If I mouse over the text in one of the items, then the entire width of the item becomes active. I guess I just need to know how to create an interactive background that is invisible.

Obola

Answer 1

HorizontalContentAlignment="Stretch" should be set in ItemContainerStyle for this to work.

Xaml Example

<ListBox xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <ListBox.ItemsSource>
        <x:Array Type="{x:Type sys:String}">
            <sys:String>String 1</sys:String>
            <sys:String>String 2</sys:String>
            <sys:String>String 3</sys:String>
            <sys:String>String 4</sys:String>
        </x:Array>
    </ListBox.ItemsSource>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Background="Green"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Update
Try this

<ListBox ...>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>

Salomie

Is there are way to do this without overwriting my currently selected style? I am using an external theme, and I don't want to edit that. – Obola

It seems to overwrite my style completely if I do it on the ListBox itself. – Obola

@Meleak Thanks a lot for giving me some ideas on this, but your example (and the Update) still overwrites my theme. – Obola

@Nicholas: Does your ListBoxItem Style have an x:Key value or is it set implicitly? I didn't see and ItemsContainerStyle in your posted Xaml so I assume implicit set, in that case I think my update should work – Salomie

@Nicholas: Great :) No problem – Salomie

Unfortunately, does not work in Silverlight because it does not support the {x:Type} extension. Interesting workaround here: forums.silverlight.net/t/169541.aspx/1. Also, in SL5+, could probably just implement the {x:Type} extension. – Mucous

Answer 2

Also, adding to Fredrik's answer, if you set the ListBox's ScrollViewer.HorizontalScrollBarVisibility property to Disabled, the items will always have exactly the client width of the ListBox.

Covetous