Question

我正在使用 UWP社区工具包 nuget包创建一个媒体应用程序，以使用 AdaptiveGridView 控件，以显示视频库内容。

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

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

蓝色问号显示由于每个项目的扩展而产生的无用空间

红线框显示一个项目的实际边界，并扩展了额外的空间。

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

要点： 如果我有很多项目，自适应网格样本的默认设置（如在UWP社区工具包样本中）是完美的，但是：超过5.但是如果项目是1或2，它会在整个屏幕上展开，因为宽度变得接近700在完全展开和高度保持在156，因为我设置为156，如果我删除图像的高度一个项目将采取整个屏幕，如果只有1项目，这不是我想要的因为这也将看起来很糟糕用户（显然）。

这是我的代码。

gridview的

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

UWP社区工具包AdaptiveGridView控件仅包含一个项目

0 个答案: