方向更改时WP7列表宽度问题 [英] WP7 list width issue when orientation changs

问题描述

我想创建一个动态填充列表以填充屏幕上的所有内容 所以在这里我做了什么: 第一:设计

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

推荐答案

您遇到的问题是列表框中的项目未拉伸.

The problem you are running into is that the item in the listbox isn't stretched.

列表框项目的大小不是由ItemTemplate决定的，而是由ItemContainerStyle和ListBox的大小决定的.

A listbox item's size is NOT determined by the ItemTemplate but by the ItemContainerStyle and the size of the ListBox.

首先添加到列表框:

<ListBox HorizontalAlignment="Stretch" ...>

确保ListBox本身水平拉伸.如果将其设置为Center，它将仅根据其内容/孩子的要求变宽.

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>

此ItemContainerStyle将导致所有项目拉伸到父项的宽度(列表框的项目面板)

This ItemContainerStyle will cause all Items to be stretched to the width of the parent (ListBox's Item Panel)

这篇关于方向更改时WP7列表宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！