WP7 ListBox Items to fill the width of the ListBox

5
votes

I am trying to get the Items in a ListBox to span the entire width of the ListBox. I have found several posts dealing with HorizontalContentAlignment="Stretch" but I have not been able to get it to work in my WP7 app. Here is my ListBox:

<ListBox Margin="8" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Collection}" >
    <ListBox.ItemTemplate>
        <DataTemplate> 
            <Border BorderBrush="Black" CornerRadius="3" Background="#FFE88D34" 
                BorderThickness="1" HorizontalAlignment="Stretch" > 
                <Grid Background="Transparent" HorizontalAlignment="Stretch" > 
                    <Grid.ColumnDefinitions> 
                        <ColumnDefinition Width="*" /> 
                    </Grid.ColumnDefinitions> 
                    <TextBlock  
                        Grid.Column="0" HorizontalAlignment="Stretch" 
                        Margin="2"                                    
                        FontSize="10" 
                        Text="{Binding Property1}"/> 
                </Grid> 
             </Border> 
        </DataTemplate> 
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

I am trying to get the orange Border to span the entire width of the listbox so that all the list items are the same size and not just the size of the text in the TextBlock.

4
listboxdatatemplatewindows-phone-7

4 Answers

8
votes

Use the following static resource as ItemContainerStyle of Listbox: 

ItemContainerStyle="{StaticResource ListboxStretchStyle}" 

<Application.Resources>
    <Style TargetType="ListBoxItem" x:Key="ListboxStretchStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>
7
votes

This is what I do use for that:

                <ListBox Height="430" Margin="50,70,50,110" Name="myListBox" >

                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <ContentPresenter
                                            HorizontalAlignment="Stretch" 
                                            VerticalAlignment="Stretch" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ListBox.ItemContainerStyle>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Border Background="{StaticResource PhoneAccentBrush}" >
                                <TextBlock
                                    Text="{Binding Text}"
                                    FontSize="30"
                                    Foreground="{StaticResource PhoneForegroundBrush}" />
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>

                </ListBox>

more ore less found here: http://timdams.wordpress.com/2011/11/30/creating-a-wp7-app-listbox-items-of-the-same-width/

2
votes

I believe this is a bug in the beta release, because HorizontalContentAlignment should be it.

as a workaround you might have to use a fixed width value.

2
votes

Looks like John Gardner is on point with this being a bit of a defect in the Beta. It works fine in "plain old" Silverlight, but yields oddly-centered areas in the Phone. It is easy enough to work past, however.

  • Get rid of / comment out the ListBox.ItemContainerStyle entry in your listbox, above.

  • In Blend, select your ListBox in the Objects and Timeline panel, right click, and select Edit Additional Templates / Edit Generated Item Container (ItemContainerStyle) / Edit a Copy... Choose a name/key and location for the new style resource.

  • Locate the ContentContainer control, and set its Horizontal Content Alignment to Bind to the Horizontal Content Alignment set in the item consuming this template, (HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" ) as follows:

    <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

Once you've told the ContentControl how it should align its (ahem) content, the results should be what you expected.