uwp自适应gridview渲染第一个元素错误 [英] uwp adaptive gridview renders 1st element wrong

问题描述

我正在使用 UWP社区工具包中的 AdaptiveGridView .第一个项目"显示严重错误，而其他所有项目也显示正常.

I am using AdaptiveGridView from UWP Community toolkit. The Very first Item displays horribly wrong and all other Items are displayed just fine.

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

See in the picture below the 1st item has bigger Folder Image than others.

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

<....below is user control which is used the DataTemplate, known as 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

UPDATE as You can see in the picture below, market with red line, right side of each item is faded where the folder name textblock ends, and this occurs only when ItemHeight is Explicitly set on the ApativeGridView

推荐答案

我认为解决方法很简单.首先在 GitHub -

I think the fix is simple. First have a look at the description of this control on 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" .../> ，问题就可以解决了.

I believe ItemsHeight is a typo there. It really should be ItemHeight. You just need to specify it (e.g. <controls:AdaptiveGridView ItemHeight="280" ... /> and the problem should go away.

第二个问题与工具箱中的 DropShadowPanel 有关.如果稍微调整窗口的大小，您会注意到阴影然后可以正确渲染.

Your second issue is related to the DropShadowPanel in the toolkit. If you resize the window a bit you will notice that the shadows then render properly.

我查看了控件的默认样式，并且 Horizo​​ntalContentAlignment 属性最初设置为 Left .因此，更改大小后，控件似乎无法正确调整其内部阴影组件的大小.

I had a look at the default style of the control and the HorizontalContentAlignment property is set to Left initially. So it looks like the control doesn't properly resize its inner shadow component when the size is changed.

但是，由于您已经有了本地风格，您可以将其设置为 Stretch ，这样问题就可以解决了.

But since you have already got a local style, you can just set it to Stretch and the issue should go away.

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

---

更新2

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

---

Update 2

OK, so here is the reason why initially the shadow is not stretching -

阴影大小是基于 DropShadowPanel 控件的 Content 计算的，但是阴影仅监视控件的 SizeChanged 事件以更新其大小.

The shadow size is calculated based on the Content of the DropShadowPanel control, but the shadow only monitors the SizeChanged event of the control to update its size.

您的情况是，您的 Grid ( DropShadowPanel 控件的直接子级)最初是用较小的大小排列的，然后设置了阴影大小，并且然后，当 Grid 的大小更新时，由于 DropShadowPanel 的大小仍具有相同的大小，因此不会调用 SizeChanged ，因此阴影大小不会重新计算.如果您拥有工具包的源代码，则应该能够仅切换到监视 Content 的 SizeChanged ，这样问题就可以解决了.

What's happening in your case is that your Grid (direct child of the DropShadowPanel control) was initially arranged with a smaller size, then the shadow size was set, and then when the size of your Grid updates, because the size of DropShadowPanel is still with the same size, no SizeChanged will be invoked, hence the shadow size is not re-calculated. If you have the toolkit source code, you should be able to simply switch to monitor the SizeChanged of the Content instead and the problem should go away.

在将 Horizo​​ntalContentAlignment 设置为 Stretch 时，实际上是在说孩子应该与父母的大小相同".因此，当阴影大小初步确定时，您的 Grid 已经与父对象具有相同的大小.但是我觉得他们一定出于某种原因一直在使用 Left ，这应该只是针对您情况的临时解决方案.

When you are setting HorizontalContentAlignment to Stretch, you are effectively saying "the child should have the same size of the parent". So when the shadow is initially sized, your Grid is already at the same size of its parent. But I feel like they must have been using Left for a reason and this should just be a temporary fix for your case.

这篇关于uwp自适应gridview渲染第一个元素错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！