UWP 中的 ListView 不调整大小

Question

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

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

是否可以让文本框中的文本也与我的第二个堆栈面板中显示的下载图标一起换行。我只希望下载图标位于项目的右侧。有什么办法可以做到这一点？很抱歉这个问题很长。

Answer 1

尝试将 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>

Answer 2

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

除了使用灵活的 StackPanel，您还可以使用 Grid 强制子控件保持在父边界内。

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

UWP 中的 ListView 不调整大小

ListView Not Resizing in UWP

c#

xaml

win-universal-app

windows-10-universal