uwp 自适应 gridview 呈现第一个元素错误

debugcn 发表于 Dev

touseefbsb

我使用AdaptiveGridView从UWP社区工具。第一个项目显示非常错误，所有其他项目都显示得很好。

在下图中，第 1 个项目的文件夹图像比其他项目大。

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>

UPDATE，你可以在下面的图片中，市场红线看到，每个项目的右侧褪色的文件夹名称文本块结束，其中，只有当ItemHeight明确的设置发生这种情况ApativeGridView

贾斯汀 XL

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.

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-13

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章