WPF Tips and Tricks Part 2 – Panels


Hello Everyone!

First of all, Happy Thanksgiving!  I hope everyone is having a good time and enjoying the holidays.

So it’s been awhile since I started my WPF Tips and Tricks segment and figured it was long overdue for the second installment.  In this part we will look a little bit at Panels and what we need to think about when choosing how we will lay out our forms.

So the primary tip when regarding Panels is that Panels are the “only” visuals in WPF that actually perform any sort of measurement and arrangement calculations.  What this means is that when we create a TextBox and set its Width to 100, the TextBox does not actually draw itself on the screen; the Panel it is contained in will see that it has a TextBox as a child and that its width is 100.  The Panel will then determine where the TextBox needs to be placed inside of itself and if it has enough space to include a width value of 100 and will perform the drawing.

The next tip is thinking of performance.  Lets look at some code to put this into more perspective.

I have created this example layout in 2 different panel formats:

formlayout

Here is the XAML for the first layout that uses a total of 4 StackPanels:

<StackPanel HorizontalAlignment="Left">
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Field 1: " VerticalAlignment="Center"/>
        <TextBox Width="100"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Field 2: " VerticalAlignment="Center"/>
        <TextBox Width="100"/>
    </StackPanel>
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
        <TextBlock Text="Longer Field 3: " VerticalAlignment="Center"/>
        <TextBox Width="100"/>
    </StackPanel>
</StackPanel>

Having 4 StackPanels means we have 4 different processes to run measurement and arrangement.  The first StackPanel performs measurement and arrangement; when it gets to its first child, that StackPanel will call measurement and arrangement on its children and return up to the first StackPanel. The first StackPanel will then iterate to its second child which performs another set of measurement and arrangement calculations and so on for each StackPanel  child  – causing 4 calculations.  In more complex scenarios this will not be be very performant.

Now lets look at the second, more performant way to lay out this form:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <TextBlock Text="Field 1: "
               Grid.Column="0"
               Grid.Row="0"
               HorizontalAlignment="Right"
               VerticalAlignment="Center"/>
    <TextBox Grid.Column="1"
             Grid.Row="0"/>

    <TextBlock Text="Field 2: "
               Grid.Column="0"
               Grid.Row="1"
               HorizontalAlignment="Right"
               VerticalAlignment="Center"/>
    <TextBox Grid.Column="1"
             Grid.Row="1"/>

    <TextBlock Text="Longer Field 3: "
               Grid.Column="0"
               Grid.Row="2"
               HorizontalAlignment="Right"
               VerticalAlignment="Center"/>
    <TextBox Grid.Column="1"
             Grid.Row="2"/>
</Grid>

With this format we have a lot more XAML to write, but we get a much more performant way to lay out the exact same visual content.  We have only one panel; this panel will perform one set of measurement and arrangement calculations.

So looking at it all: the tip here is to really think about performance when dealing with Panels.  The least amount of Panels we can use (as long as we can meet the form requirements), the more performant our WPF applications will be.

I hope you enjoy this and look forward to WPF Tips and Tricks Part 3!

  1. #1 by Eduardo on October 18, 2010 - 11:21 am

    The problem with the grid, besides that is lot more wordy, is that if you want to add a field at the top, you have to add +1 to the rest of the rows.

  2. #2 by Jason Rainwater on October 18, 2010 - 11:24 am

    Eduardo :

    The problem with the grid, besides that is lot more wordy, is that if you want to add a field at the top, you have to add +1 to the rest of the rows.

    This is true and we can only hope that microsoft makes it easier to update which controls are in which rows and such, but when it comes down to performance I would rather update the numbers by 1.

Comments are closed.