1

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

褪色问题

4

1 回答 1

3

我认为修复很简单。先看一下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

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

阴影大小是根据控件的大小计算的Content，DropShadowPanel但阴影只监视SizeChanged控件的事件以更新其大小。

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

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

于 2017-07-07T14:35:04.647 回答