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

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

如果创建模板网格应用程序，请添加对winrtxamltoolkit调试组件的NuGet引用，并通过设置在Standard250x250ItemTemplate中添加断点

Debugging:VisualTreeDebugger.BreakOnLoaded="True"

在哪里

您将在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网格作为其根，并且GridView使用默认样式和默认ItemContainerStyle，因此默认GridViewItem样式似乎有一个称为ContentBorder的边框，该边框定义了“4”的边距。根据网格项的配置方式，您可以使用这些知识以不同的方式计算所需的大小

如果您定义一个恒定大小的ItemTemplate（如Grid App项目模板中的250x250），则最终会得到占用258x258平方空间的项。如果更改ItemContainerStyle以更改每个ContentBorder周围的边距，则必须调整计算。如果没有为ItemTemplate指定常量大小，则项目大小将基于添加到GridView的第一个项目

---

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

您的答案一应俱全。它是如此详细和可操作。不过，我还有一个简单的问题要问你——如何在xaml中更改ItemContainerStyle？我知道这对你来说似乎微不足道，但我在谷歌上搜索了一下，却找不到一个好的例子。你能告诉我吗？Thx.如果您进入“设计视图”或“混合”，并右键单击网格视图，您将获得编辑其他模板的选项，这将是选项之一。它将提取当前样式和模板，以便您可以仅更改所需的零件。

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=