Grid and StackPanel, which has the better performance?

Question

Let's read these codes, I've defined two similar UserControls in a Windows Phone 8 project and I really want to which of them is better. I've check the profiling, it seems they are almost the same.

UserControl 1, using grid's property to design my layout.

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Height="108">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Rectangle Grid.RowSpan="2" Grid.Row="0" Height="108" Width="54" Fill="Blue"></Rectangle>
    <TextBlock Grid.Row="0" Grid.Column="1" Text="Caption" Style="{StaticResource PhoneTextExtraLargeStyle}"></TextBlock>
    <TextBlock Grid.Row="1" Grid.Column="1" Text="URLURLURLURLURLURL" Style="{StaticResource PhoneTextSmallStyle}"></TextBlock>
</Grid>

UserControl 2, using StackPanel to design my layout.

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" Height="108">
    <StackPanel Orientation="Horizontal">
        <Rectangle Height="108" Width="54" Fill="Red"></Rectangle>
        <StackPanel Orientation="Vertical">
            <TextBlock Text="Caption" Style="{StaticResource PhoneTextExtraLargeStyle}"></TextBlock>
            <TextBlock Text="URLURLURLURLURLURL" Style="{StaticResource PhoneTextSmallStyle}"></TextBlock>
        </StackPanel>
    </StackPanel>
</Grid>

It looks like the basic layout is the same. But when I use XAML Spy to analyse the Visualizing tree, UserControl 1 has less nodes, but it costs a little more memory. Why?

Answer 1

You may be interested in the answers to this question: In what order are Panels the most efficient in terms of render time and performance?

The short answer is it depends on how many children the panels have, and how those elements are sized and positioned. But in most cases, a StackPanel will be more efficient than a Grid as it has both a faster measure and arrangement pass.

To quote from the accepted answer:

Grid

Defines a flexible grid area that consists of columns and rows.

This can be the most performance intensive panel if proportional sizing or auto sizing is used. Calculating child item size can be a complex combination of the native size of the item and the layout specified by the grid. Layout is also the most complicated of all the panels. Slow to medium performance for the measure pass and slow to medium performance for the arrangement pass.

StackPanel

Arranges child elements into a single line that can be oriented horizontally or vertically.

The StackPanel measures its children using either native or relative sizing in the opposite direction from its orientation and native sizing in the direction of its orientation (alignment does nothing in this direction). This makes it a mid-level performer in this area. The Arrangement pass is simply, just laying out the items in order. Probably the second-best performance for this pass. Medium performance for the measure pass and fast performance for the layout pass.

Also in regards to memory consumption, both objects are different and take up different amounts of memory, and a Grid has RowDefinitions and ColumnDefinitions, so it actually contains more objects than your StackPanel