WP7 list width issue when orientation changs - silverlight

Question

I want to make a dynamic filling list that fill the screen what ever the content is
so here what I did:
first: the design
<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Width="100" Name="RED" Height="100" Click="ButtonDec_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="AAAAAAAAAAAAA" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
<TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="CCCCC" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Grid.Column="0" Width="100" Name="GREEN" Height="100" Click="ButtonInc_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
and the result was an item that fill the screen and doesn't matter in portrait or landscape
and to make it dynamic, simply I made a list of data template
<ListBox Grid.Row="1" Name="countersList" HorizontalAlignment="Center" VerticalAlignment="Center" SelectionChanged="countersList_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" CornerRadius="25" Margin="0,10,0,0" BorderThickness="1" Background="Aqua">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Width="100" Name="{Binding index}" Height="100" Click="ButtonDec_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/RED.png" />
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="10,0,0,0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Name="name" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding name}" Foreground="{Binding color}" TextWrapping="Wrap" FontWeight="Bold" FontSize="22" />
<TextBlock Name="count" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding count}" FontWeight="Bold" TextWrapping="Wrap" FontSize="30" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button Grid.Column="0" Width="100" Name="{Binding index}" Height="100" Click="ButtonInc_Click">
<Button.Background>
<ImageBrush ImageSource="/LifeCounter;component/Images/Green.png" />
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
the result was a list that wrap it's size with it's content
so, how can I fix it, I want a list that fill the screen and it doesn't matter was it in landscape or portrait

Answer 1

The problem you are running into is that the item in the listbox isn't stretched.
A listbox item's size is NOT determined by the ItemTemplate but by the ItemContainerStyle and the size of the ListBox.
First add to the ListBox:
<ListBox HorizontalAlignment="Stretch" ...>
to make sure the ListBox itself is stretched horizontally. If you set it at Center it will only become as wide as its content/children request for.
Then add this to the ListBox:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
This ItemContainerStyle will cause all Items to be stretched to the width of the parent (ListBox's Item Panel)