uwp 自适应 gridview 呈现第一个元素错误

Question

我正在使用 UWP 社区工具包 中的 AdaptiveGridView。第一个项目显示非常错误，所有其他项目都显示正常。

在下图中看到第一个项目的文件夹图像比其他项目大。

XAML

<Style TargetType="controls:AdaptiveGridView" x:Key="MainAdaptiveStyle">
    <Setter Property="SelectionMode" Value="None"/>
    <Setter Property="StretchContentForSingleRow" Value="False"/>
    <Setter Property="DesiredWidth" Value="220"/>
    <Setter Property="IsItemClickEnabled" Value="True"/>
    <Setter Property="animations:ReorderGridAnimation.Duration" Value="400"/>
</Style>


<PivotItem Header="Folders">
    <controls:AdaptiveGridView Name="FoldersLibraryGridView"
                               Style="{StaticResource MainAdaptiveStyle}"
                               ItemsSource="{x:Bind ViewModel.Folders}">
        <controls:AdaptiveGridView.ItemTemplate>
            <DataTemplate  x:DataType="data:FolderItem">
                <userTemplates:FolderTemplate />
            </DataTemplate>
        </controls:AdaptiveGridView.ItemTemplate>
    </controls:AdaptiveGridView>
</PivotItem>

<....下面是使用 DataTemplate 的用户控件，称为 FolderTemplate...>

<Grid >
    <Grid.Resources>
        <Style TargetType="Image" x:Key="ThumbImageStyle" >
            <Setter Property="Stretch" Value="UniformToFill"/>
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="8"/>
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="8*"/>
        <RowDefinition Height="3*"/>
    </Grid.RowDefinitions>
    <Border x:Name="ThumbImage" Grid.Row="0">
        <Border.Background>
            <SolidColorBrush Color="{ThemeResource SystemAccentColor}" Opacity="0.5"/>
        </Border.Background>
        <Image  Source="ms-appx:///Assets/FolderIcon.png"    

                Style="{StaticResource ThumbImageStyle}"
                />
    </Border>
    <Border Background="{ThemeResource SystemAltHighColor}" Grid.Row="1" Padding="8,0,4,0">
        <TextBlock  Text="{x:Bind FolderItem.MyFolder.DisplayName}"
                    Style="{StaticResource GridViewVideoName}"/>
    </Border>
</Grid>

更新正如您在下图中看到的那样，带有红线的市场，每个项目的右侧在文件夹名称文本块结束的地方变淡，并且仅当在 ApativeGridView 上显式设置 ItemHeight 时才会发生这种情况

Answer 1

我认为修复很简单。先看看这个控件在GitHub-

上的描述

/// <remarks>
/// The number and the width of items are calculated based on the
/// screen resolution in order to fully leverage the available screen space. The property ItemsHeight define
/// the items fixed height and the property DesiredWidth sets the minimum width for the elements to add a
/// new column.</remarks>

我认为 ItemsHeight 是一个错字。确实应该是ItemHeight。您只需指定它（例如 <controls:AdaptiveGridView ItemHeight="280" ... /> ，问题就会消失。

更新

您的第二个问题与工具包中的 DropShadowPanel 有关。如果稍微调整 window 的大小，您会注意到阴影会正确渲染。

我查看了控件的默认样式，HorizontalContentAlignment 属性最初设置为 Left。所以看起来控件在更改大小时没有正确调整其内部阴影组件的大小。

但由于您已经有了本地样式，您只需将其设置为 Stretch，问题就会消失。

<Style TargetType="controls:DropShadowPanel"
       x:Key="MainDropShadow">
    <Setter Property="HorizontalContentAlignment"
            Value="Stretch" />

更新 2

好的，这就是最初阴影没有拉伸的原因 -

阴影大小是根据DropShadowPanel控件的Content计算出来的，但是阴影只监听控件的SizeChanged事件来更新它的大小。

你的情况是你的 Grid（DropShadowPanel 控件的直接子项）最初以较小的尺寸排列，然后设置阴影尺寸，然后当尺寸您的 Grid 更新，因为 DropShadowPanel 的大小仍然相同，不会调用 SizeChanged，因此不会重新计算阴影大小。如果您有工具包源代码，您应该能够简单地切换到监视 Content 的 SizeChanged，问题就会消失。

当您将 HorizontalContentAlignment 设置为 Stretch 时，您实际上是在说“子项应该与父项具有相同的大小”。因此，当阴影最初调整大小时，您的 Grid 已经与其父级大小相同。但我觉得他们一定是出于某种原因一直在使用 Left，这应该只是针对您的情况的临时解决方案。

uwp 自适应 gridview 呈现第一个元素错误

uwp adaptive gridview renders 1st element wrong

xaml

gridview

uwp

uwp-xaml

windows-community-toolkit

更新

更新 2