uwp 自适应 gridview 呈现第一个元素错误
uwp adaptive gridview renders 1st element wrong
我正在使用 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 时才会发生这种情况
我认为修复很简单。先看看这个控件在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
有关。如果稍微调整 window 的大小,您会注意到阴影会正确渲染。
我查看了控件的默认样式,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
,这应该只是针对您的情况的临时解决方案。
我正在使用 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 时才会发生这种情况
我认为修复很简单。先看看这个控件在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
有关。如果稍微调整 window 的大小,您会注意到阴影会正确渲染。
我查看了控件的默认样式,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
,这应该只是针对您的情况的临时解决方案。