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.

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.