UWP 社区工具包 AdaptiveGridView 控件只有一项

Question

我正在制作一个媒体应用，使用 UWP Community toolkit nuget 包来使用 AdaptiveGridView 控件，以显示视频库内容。

问题：当项目很少或例如我只有 1 个项目时，它会扩展到整个可用宽度，这看起来很糟糕，考虑到它的高度是有限的并且没有变化并且只有宽度在整个屏幕上扩展，所以我的项目的缩略图看起来很糟糕。因此，当我连续有 4 个或更少的项目时（在此特定的笔记本电脑分辨率下），由于宽度扩展，它们看起来很糟糕，但连续 5 个以上的项目看起来不错，因为它们的比例非常好。

尝试： 我试图在我的项目的数据模板中设置 stackpanel 的最大宽度属性，以便项目不会扩展超过特定宽度并且效果很好，但现在问题是项目之间的距离，我的项目内容（stackpanel ) 仍然有限，但整个 gridviewitem 扩展，因此覆盖了很多无用的空间，如下图所示。

1. 蓝色问号表示由于每个项目的扩展而导致的无用空间
2. 红线框显示一个项目的实际边界，扩展了额外的空间。

如果我将窗口调整为更小的屏幕，空间显然会减少，但这并不是所有屏幕尺寸的最佳选择。

总结： 如果我有很多项目，即：超过 5 个，adaptiveGridView 的默认设置（如 UWP 社区工具包示例中的）非常适合。但如果项目是 1 或 2，它会在整个屏幕上展开，这看起来很糟糕，因为宽度几乎变成 700在完全展开时，高度保持在 156，因为我将其设置为 156，如果我删除图像的高度，一项将占据整个屏幕，如果只有一项，那不是我想要的，因为那看起来也很糟糕用户（显然）。

这是我的代码。

网格视图

<controls:AdaptiveGridView Name="SuggestionGridView" 
                           Style="{StaticResource MainGridView}"                            
                           SelectionChanged="SelectionChanged"
                           ItemsSource="{x:Bind Suggestions, Mode=OneWay}">
    <controls:AdaptiveGridView.ItemTemplate>
        <DataTemplate  x:DataType="data:Video">
            <StackPanel Margin="4" MaxWidth="276">
                <Grid>
                    <Image      Source="{x:Bind Thumbnail}" Style="{StaticResource GridViewImage}"/>
                    <Border Style="{StaticResource TimeBorder}">
                            <TextBlock Text="{x:Bind Duration}" Foreground="White"/>
                    </Border>
                </Grid>
                <TextBlock Text="{x:Bind Name}"  Style="{StaticResource GridViewVideoName}"/>
                <TextBlock Text="{x:Bind ParentName}"  Style="{StaticResource GridViewParentName}"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
                    <TextBlock Text="{x:Bind Views}" Style="{StaticResource GridViewViews}"/>
                    <TextBlock Text="Views" HorizontalAlignment="Right"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </controls:AdaptiveGridView.ItemTemplate>
</controls:AdaptiveGridView>

样式

<Style TargetType="controls:AdaptiveGridView" x:Key="MainGridView">
    <Setter Property="Grid.Row" Value="1"/>
    <Setter Property="OneRowModeEnabled" Value="False"/>
    <Setter Property="DesiredWidth" Value="264"/>
    <Setter Property="SelectionMode" Value="Single"/>
</Style>

<Style TargetType="Image" x:Key="GridViewImage">
    <Setter Property="Height" Value="156"/> <!--if I remove this property then one item expands to full availble height and width and looks really bad specially with the thumbnail.-->
    <Setter Property="Stretch" Value="UniformToFill"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
</Style>

Answer 1

在这种情况下，已经有一个属性可以帮助您。尝试在控件上将StretchContentForSingleRow 设置为False。