WP7 ListBox Items to fill the width of the ListBox

Question

Hi All, 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.

Answer 1

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.

Answer 2

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.