方向更改时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：

<ListBox HorizontalAlignment="Stretch" ...>

确保ListBox本身水平拉伸。如果您将其设置为Center，则只会变得与其内容/子项请求的范围一样宽。

然后将其添加到ListBox：

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

此ItemContainerStyle将导致所有项目被拉伸到父项的宽度（ListBox的项目面板）