Archive for November, 2009

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!

2 Comments

Augusta CodeCamp

Hello everyone!

So last Saturday I took trip over to Augusta to speak at their first annual CodeCamp.  We had alot of fun and learned alot while there.  This was also my first CodeCamp presentation outside of my local area!

There was a cancellation of a spot right before my slotted spot so I stepped up and did an inpromptu adhoc session on Intro to WPF.  This was interesting since I had nothing prepared.  I tried to show as much code samples and different concepts in WPF and in the end it went very well.  A few people came up to thank me for the presentation because they knew it would be difficult being last minute but they learned alot.

After that session I did a revised version of my WPF Custom Controls presentation.  In this one we built the basics of a NumericUpDownTextBox from scratch to go over the concepts, then looked at a pre-built one I did that was alot more robust.  You can download the presentation materials here.

If you made it to the CodeCamp then I hope you enjoyed it!

Cheers

No Comments