ListBoxItem HorizontalContentAlignment=Stretch not working

Question

I am having trouble getting my listbox items to stretch to the whole listbox width.

Below is my xaml for my listbox

<ListBox x:Name="MyListBox"
                 VerticalAlignment="Stretch"
                 HorizontalAlignment="Stretch"
                 HorizontalContentAlignment = "Stretch"
                 Margin="0,10,0,0"
                 ItemsSource="{Binding Path=Users}"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 Grid.Column="0"
                 Grid.ColumnSpan="1"
                 Grid.Row="1"
                 Grid.RowSpan="3">                      
        <ListBox.ItemTemplate>
            <DataTemplate>
                <local:MyListBoxTemplate/>
            </DataTemplate>
        </ListBox.ItemTemplate>
</ListBox>

I have tried the following suggestions found on other posts but they haven't worked for me:

Set the ListBox's HorizontalContentAlignment to Stretch
Overwriting the style for listboxitem i.e. a new style within ItemContainerStyle tags within the listbox xaml (note: I am using the cosmopolitan navigation theme)
Editting the DefaultListBoxItemStyle style in CoreStyles.xaml to include HorizontalContentAlignmemt

Is it because I am using a separate xaml file for my data template? Or a problem with my data template? Does anyone have any suggestions on what else I could try?

I saw somewhere perhaps I could bind the ListBoxItem Width to the ListBox's actual width?

I am pretty new to this so I apologise in advance if I have missed something really simple/obvious!

Below is my data template:

<Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" ShowGridLines="True" Height="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10*" />
        <ColumnDefinition Width="30*" />
        <ColumnDefinition Width="300*" />
        <ColumnDefinition Width="50*" />
        <ColumnDefinition Width="10*" />
    </Grid.ColumnDefinitions>
    <Image x:Name="TwitterImageIcon"
           Grid.Column="1" 
           Grid.ColumnSpan="1" 
           Source="{Binding Path=imageUrl}"
          />
    <StackPanel Orientation="Horizontal" Grid.Column="2" Grid.ColumnSpan="1" HorizontalAlignment="Stretch" >

        <TextBlock x:Name="TwitterUsernameTextBlock"
                   Text="{Binding Path=username,StringFormat='@\{0\}  '}"/>
        <TextBlock x:Name="TwitterFullNameTextBlock"
               Text="{Binding Path=fullname}"/>
    </StackPanel>


        <Button x:Name="InfoButton"
            Content="Info" 
            Grid.Column="3" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch"/>
        <Border x:Name="StyleBorder" />
    </Grid>

Any suggestions greatly appreciated.

Thanks in advance.

Update: Forgot to mention that when adding:

    <ListBox...>
        <ListBox.Resources>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListBox.Resources>
    </ListBox>

It works however affects the cosmopolitan theme so that the higlighting of the listbox item when hovered over and when selected are a different style to the the rest of the cosmopolitan theme.

Leo Leo · Accepted Answer · 2012-03-18T17:03:29

Try this, inside your listbox:

<ListBox...>
    <ListBox.Resources>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.Resources>
</ListBox>

EDIT1 (sorry for my bad english)

Find the ListBoxItem style on CoreStyles.xaml (look for x:Key="DefaultListBoxItemStyle"). Inside that style, find the ContentControl named x:Name="contentControl" and add the HorizontalContentAlignment property, the code will look like this after the change:

<ContentControl x:Name="contentControl" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" >
    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" VerticalAlignment="Center"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="7"/>
</ContentControl>

Now you can remove the Listbox.Resources that I show on the first answer... If you do not want this behaviour to all your listBoxes, you could copy this style and give it a different key.

ListBoxItem HorizontalContentAlignment=Stretch not working

1 Answers