Question

It seems that there are spacing between each item container, also margin and padding in the container. My question is how to calculate the actual size of a ItemContainer in GridView so that I can calculate how many the rows the grid would accommodate. What I can get are each ItemTemplate’s height, and the grid’s height. Given those values, how to calulate?

Answer 1

If you create a template Grid App, add a NuGet reference to winrtxamltoolkit debugging components and add a breakpoint in the Standard250x250ItemTemplate by setting

Debugging:VisualTreeDebugger.BreakOnLoaded="True"

where

xmlns:Debugging="using:WinRTXamlToolkit.Debugging"

you will see the visual tree trace like this in the output window of 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=

Now since that item template uses a 250×250 Grid as its root and the GridView is using the default style with the default ItemContainerStyle – it seems like the default GridViewItem style has one Border called ContentBorder that defines a Margin of “4”. Depending on how your grid items are configured you can use that knowledge to calculate the size you are looking for in different ways.

If you define a constant size ItemTemplate – like the 250×250 one in the Grid App project template – you end up with items that occupy 258×258 squares of space. If you change the ItemContainerStyle to change the Margins around each ContentBorder – you would have to adjust your calculations. If you don’t specify constant size for your ItemTemplate – your item sizes will be based on the first item added to the GridView.

You can use Blend to analyze the control templates in more details or use the VisualTreeDebugger, XAML Spy or your own code that walks the visual tree using VisualTreeHelper to learn more about the layout.