Проблема ширины списка WP7 при изменении ориентации

Question

Я хочу создать динамический список заполнения, который заполняет весь экран, какой бы ни был контент, поэтому вот что я сделал: во-первых: дизайн

<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>

, и в результате был элемент, который заполняет экран ине имеет значения в портретной или альбомной ориентации

и чтобы сделать его динамичным, я просто составил список шаблонов данных

 <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>

результат былсписок, который оборачивает его размер своим содержимым

так, как я могу это исправить, я хочу список, который заполняет экран, и не важно, был ли он в альбомной или портретной ориентации

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что элемент в списке не растягивается.

Размер элемента списка не определяется ItemTemplate, а ItemContainerStyle и размером ListBox.

Сначала добавьте в список:

<ListBox HorizontalAlignment="Stretch" ...>

, чтобы убедиться, что сам ListBox растянут горизонтально. Если вы установите значение Center, оно станет таким же широким, как его запрос содержимого / дочерних элементов.

Затем добавьте это в ListBox:

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

Этот ItemContainerStyle приведет к растяжению всех элементов до ширины родительского элемента (панели элементов ListBox)