uwp 自适应 gridview 渲染第一个元素错误

Posted 2023-04-12

【中文标题】uwp 自适应 gridview 渲染第一个元素错误

【英文标题】：uwp adaptive gridview renders 1st element wrong

【发布时间】：2017-12-10 16:21:12

【问题描述】：

我正在使用 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 时才会发生这种情况>

【问题讨论】：

将ThumbImageStyle中的VerticalAlignment改成Top?

@AVK 我试过了，没用

你能创建一个仓库吗？

给你@JustinXL。您将需要视频库中的一些文件夹，这些文件夹将在此示例中呈现。 github.com/touseefbsb/gridviewfirstItemSample

【参考方案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，这应该只是临时解决您的问题。

【讨论】：

当我设置 ItemHeight 时，它会被固定，所以当我调整窗口大小时，只有宽度会改变（响应式）并且高度保持不变。这会带来良好的用户体验。我在另一个位置使用具有相同属性且没有设置 ItemHeight 的它，但我使用的是视频的缩略图，在这种情况下，第一个项目看起来也与其他项目相同

不，不管你设置与否，高度都会改变。只需设置它并比较而不设置它。结果是一样的，只是第一个项目在设置后渲染得很好。

我已经更新了存储库，请看一下，现在每个项目的右侧都有另一个问题（关于文本块的自动长度），根据请求的主题颜色为深色或白色页面的您可以在 MainPage.xaml 上切换主题以查看更改，我在更新的问题中附上了一张表明问题的照片，并且我正在将示例的更改版本提交到 repo，请看 :)请注意，只有在设置 itemHeight 时才会出现这种褪色问题。