UWP Community Toolkit AdaptiveGridView 控件只有一个项目

Question

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

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

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

蓝色问号表示无用space由于每个项目的扩展
红线框显示一个项目的实际边界，扩展额外space。

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

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

这是我的代码。

网格视图

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

UWP Community Toolkit AdaptiveGridView 控件只有一个项目

UWP Community Toolkit AdaptiveGridView control with one item only

xaml

gridview

uwp

uwp-xaml

windows-community-toolkit