ListBoxItem HorizontalContentAlignment To Stretch Across Full Width of ListBox

Question

I have a problem with my ListBoxItem's on a Windows Phone 8 app, while trying to get them to stretch across all the width of the ListBox.

My ListBox:

<ListBox 
      ItemsSource="{Binding Events}" 
      behaviors:ItemClickCommandBehavior.Command="{Binding EventSelectedCommand}"
      ItemTemplate="{StaticResource EventListTemplateSelector}"/>

And its DataTemplates are in a seperate xaml resource file:

<DataTemplate x:Key="EventListHeaderTemplate">
    <Border HorizontalAlignment="Stretch">
        <Grid Height="50">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="6*"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="{Binding ImageUri}" VerticalAlignment="Center" HorizontalAlignment="Center" Height="30"/>
            <TextBlock Grid.Column="1" Text="{Binding SomeText}" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="Black"/>
        </Grid>
    </Border>
</DataTemplate>

I cant get the items to really Stretch, and I dont know where the problem is. I have tried to set the ItemContainerStyle HorizontalCOntentAlignment="Stretch" and it didn't work. I have tried many other combinations and it seems that only setting the Border or Grid width to a constant works and one other solution that works is to set the Border width to bind to the ActualWidth of the containing ListBox, but I want to use the Stretch variant if could make it work.

Jemina

Check this Q: How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox? – Cremator

Answer 1

I ran into the same in XAML and it drove me nuts wondering why my TextBlock was not fully colored across the width.

The way to work with the competing styles (this works for any of the xaml variants actually) is to define style of the ListBoxItem explicitly to handle the space usage.

That gives the xaml a hint that it is to fill in (stretch) to the screen area in this way:

    <ListBox Name="lbTest" HorizontalContentAlignment="Stretch"  >

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

        <ListBox.ItemTemplate>...</ListBox.ItemTemplate>

Otherwise the xaml parser, by default, tries to conserve space by auto sizing it to the contents of the ListBoxItem; giving it that dreaded scotch tape look.

Chichi

Is this a bug made by Microsoft? I have wasted three hours until I have found your post. Thank you. – Limited

It is simply a chain of default styles which in stand alone controls make sense, but when brought together give us this.... Welcome to the club who found this style Easter Egg. ;-) – Bizarre