uwp adaptive gridview renders 1st element wrong

问题

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>

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

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

回答1:

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>

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.

---

Update

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.

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.

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" />

---

Update 2

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

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.

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.

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.

来源：https://stackoverflow.com/questions/44952640/uwp-adaptive-gridview-renders-1st-element-wrong