ListView 在 UWP 中未调整大小答案

【问题标题】：ListView Not Resizing in UWPListView 在 UWP 中未调整大小
【发布时间】：2016-02-25 12:14:28
【问题描述】：

我有一个这样的列表视图。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{x:Bind announcements}" IsItemClickEnabled="True" ItemClick="Announcement_ItemClick">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:Announcement">
                <StackPanel Orientation="Horizontal" Margin="0,20,0,0">
                    <StackPanel Height="Auto" Orientation="Vertical" Width="Auto">
                        <TextBlock Text="{x:Bind dates}" FontWeight="Bold"/>
                        <TextBlock Height="Auto" Text="{x:Bind titles}" Margin="0,6,0,0" TextWrapping="WrapWholeWords"/>
                    </StackPanel>
                    <StackPanel VerticalAlignment="Center">
                        <SymbolIcon Symbol="Download" Margin="20,0,0,0" Visibility="{x:Bind visibility}"/>
                    </StackPanel>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

问题是，如果我在主堆栈面板中有两个堆栈面板，则列表视图不会在宽度发生变化时调整大小。所以我无法看到这些文本框中的文本。

但是，如果我删除了放置符号图标的堆栈面板，则会发生调整大小。没有第二个堆栈面板的列表视图代码。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{x:Bind announcements}" IsItemClickEnabled="True" ItemClick="Announcement_ItemClick">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="data:Announcement">
                    <StackPanel Height="Auto" Margin="0,20,0,0" Orientation="Vertical" Width="Auto">
                        <TextBlock Text="{x:Bind dates}" FontWeight="Bold"/>
                        <TextBlock Height="Auto" Text="{x:Bind titles}" Margin="0,6,0,0" TextWrapping="WrapWholeWords"/>
                    </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

是否可以使文本框中的文本也被包装，同时显示我的第二个堆栈面板中的下载图标。我只想要项目右侧的下载图标。有没有办法实现这一点？抱歉问题太长了。

【问题讨论】：

下载图标仅适用于列表视图中的某些项目。

标签： c# xaml win-universal-app windows-10-universal

【解决方案1】：

问题来自您的第一个水平堆栈面板。它基本上说布局子控件在右侧没有任何限制，因此它会自行调整大小以适合您的“长”文本。您可以通过使用更“严格”的布局来限制这一点，该布局将您的项目宽度限制为列表视图宽度。

您可以使用 Grid 来强制子控件保持在父边界内，而不是使用灵活的 StackPanel。

<ListView.ItemTemplate>
 <DataTemplate x:DataType="local:Announcement">

 <Grid Margin="0,20,0,0" >**
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="*" />
     <ColumnDefinition Width="Auto" />
   </Grid.ColumnDefinitions>

   <StackPanel Height="Auto" Orientation="Vertical" Width="Auto">
     <TextBlock Text="{x:Bind dates}" FontWeight="Bold"/>
     <TextBlock Height="Auto" Text="{x:Bind titles}" Margin="0,6,0,0" TextWrapping="WrapWholeWords"/>
   </StackPanel>

   <StackPanel VerticalAlignment="Center" Grid.Column="1">
     <SymbolIcon Symbol="Download" Margin="20,0,0,0" Visibility="{x:Bind visibility}"/>
   </StackPanel>
 </Grid>
</DataTemplate>
</ListView.ItemTemplate>

这将为您提供以下信息：

您还可以通过更改 ItemContainerStyle 来强制下载按钮向右对齐。我们要求列表视图项目在列表视图中伸展。默认为左对齐。

<ListView.ItemContainerStyle>
  <Style TargetType="ListViewItem">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
  </Style>
</ListView.ItemContainerStyle>

【讨论】：

【解决方案2】：

尝试将StackPanel 替换为Grid

<Grid Margin="0,20,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Text="{x:Bind dates}"
                    FontWeight="Bold"/>
        <TextBlock Grid.Row="1"
                    Height="Auto"
                    Text="{x:Bind titles}"
                    Margin="0,6,0,0"
                    TextWrapping="WrapWholeWords"/>
    </Grid>

    <SymbolIcon Symbol="Download" 
                Margin="20,0,0,0" 
                Grid.Column="1"
                Visibility="{x:Bind visibility}"/>
</Grid>

【讨论】：