12

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.

Nicholas
  • 3,286
  • 5
  • 27
  • 35

2 Answers2

24

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>
Fredrik Hedblad
  • 83,499
  • 23
  • 264
  • 266
  • 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. – Nicholas Jan 08 '11 at 14:48
  • It seems to overwrite my style completely if I do it on the ListBox itself. – Nicholas Jan 08 '11 at 14:54
  • @Meleak Thanks a lot for giving me some ideas on this, but your example (and the Update) still overwrites my theme. – Nicholas Jan 08 '11 at 15:03
  • @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 – Fredrik Hedblad Jan 08 '11 at 15:03
  • @Nicholas: Great :) No problem – Fredrik Hedblad Jan 08 '11 at 15:05
  • Unfortunately, does not work in Silverlight because it does not support the {x:Type} extension. Interesting workaround here: http://forums.silverlight.net/t/169541.aspx/1. Also, in SL5+, could probably just implement the {x:Type} extension. – Brett Widmeier Apr 02 '12 at 14:59
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.

TheDark
  • 31
  • 3