2

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

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

尝试： 我尝试在我的项目的数据模板中设置堆栈面板的最大宽度属性，以便项目不会扩展超过特定宽度并且效果很好，但现在问题是项目之间的距离，我的项目内容（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>
4

1 回答 1

2

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

于 2017-05-07T06:39:35.717 回答