如何在 WinRT GridView 中获取 ItemContainer 的实际大小

Question

似乎每个项目容器之间都有间距，容器中还有边距和填充。我的问题是如何计算 GridView 中 ItemContainer 的实际大小，以便我可以计算网格可以容纳多少行。我能得到的是每个 ItemTemplate 的高度和网格的高度。给定这些值，如何计算？

Answer 1

如果创建模板 Grid App，添加 NuGet 对 winrtxamltoolkit 调试组件的引用，并通过设置在 Standard250x250ItemTemplate 中添加断点

Debugging:VisualTreeDebugger.BreakOnLoaded="True"

在哪里

xmlns:Debugging="using:WinRTXamlToolkit.Debugging"

你会在 VS 的输出窗口中看到像这样的可视化树跟踪：

path[8] is Control: Windows.UI.Xaml.Controls.GridViewItem():
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    HorizontalContentAlignment=Center
    VerticalContentAlignment=Center
    Content=Item Title: 3
    Margins=0,0,2,2
    Padding=0,0,0,0
    Background=SolidColorBrush: #00FFFFFF
    Foreground=SolidColorBrush: #FFFFFFFF
    FontFamily: Segoe UI
path[7] is Control: Windows.UI.Xaml.Controls.Border(OuterContainer):
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
path[6] is Control: Windows.UI.Xaml.Controls.Grid(ReorderHintContent):
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
    Background=SolidColorBrush: #00FFFFFF
path[5] is Control: Windows.UI.Xaml.Controls.Border(ContentContainer):
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
path[4] is Control: Windows.UI.Xaml.Controls.Grid(InnerDragContent):
    ActualWidth=258
    ActualHeight=258
    Position – X=376, Y=176, Right=634, Bottom=434
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
    Background=
path[3] is Control: Windows.UI.Xaml.Controls.Border(ContentBorder):
    ActualWidth=250
    ActualHeight=250
    Position – X=380, Y=180, Right=630, Bottom=430
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=4,4,4,4
path[2] is Control: Windows.UI.Xaml.Controls.Grid():
    ActualWidth=250
    ActualHeight=250
    Position – X=380, Y=180, Right=630, Bottom=430
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Stretch
    VerticalAlignment=Stretch
    Margins=0,0,0,0
    Background=
path[1] is Control: Windows.UI.Xaml.Controls.ContentPresenter(contentPresenter):
    ActualWidth=250
    ActualHeight=250
    Position – X=380, Y=180, Right=630, Bottom=430
    DataContext: Item Title: 3 HashCode: 9648315
    HorizontalAlignment=Center
    VerticalAlignment=Center
    Margins=0,0,0,0
path[0] is Control: Windows.UI.Xaml.Controls.Grid():
    ActualWidth=250
    ActualHeight=250
    Position – X=380, Y=180, Right=630, Bottom=430
    DataContext: Item Title: 3 HashCode: 9648315
    Width=250
    Height=250
    HorizontalAlignment=Left
    VerticalAlignment=Stretch
    Margins=0,0,0,0
    Background=

现在，由于该项目模板使用 250x250 Grid 作为其根，并且 GridView 使用具有默认 ItemContainerStyle 的默认样式 - 似乎默认 GridViewItem 样式有一个名为 ContentBorder 的边框，它定义了“4”的边距。根据您的网格项目的配置方式，您可以使用这些知识以不同的方式计算您要查找的大小。

如果您定义一个恒定大小的 ItemTemplate - 就像 Grid App 项目模板中的 250x250 一样 - 您最终会得到占据 258x258 方格空间的项目。如果您更改 ItemContainerStyle 以更改每个 ContentBorder 周围的边距 - 您将不得不调整您的计算。如果您没有为 ItemTemplate 指定恒定大小 - 您的项目大小将基于添加到 GridView 的第一个项目。

您可以使用 Blend 来更详细地分析控件模板，或者使用 VisualTreeDebugger、XAML Spy 或您自己的代码，使用 VisualTreeHelper 遍历可视化树来了解有关布局的更多信息。