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>

<....>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 有关。如果您稍微调整窗口大小，您会注意到阴影会正确渲染。

我查看了控件的默认样式，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，这应该只是临时解决您的问题。