#1,166 – Layout in Action, part III

Layout in WPF dictates how layout panels (containers) arrange their child elements.  In the example below, we build on an earlier example to show how the measure and arrange phases work when host a Label in control in a StackPanel and then stretch the label.

Suppose the we have the XAML shown below. Note that the HorizontalAlignment of the Label is set to Stretch.

    <StackPanel Margin="5" Background="Honeydew">
        <loc:MyLabel Content="Billy" Background="Thistle"
                     HorizontalAlignment="Stretch" />
    </StackPanel>

At run-time this looks like:
1166-001
At run-time, the measure/arrange process is:

  • StackPanel calls Measure on MyLabel
  • Base Label class calculates how much space it needs (31.4 x 26) and MyLabel returns this value from MeasureOverride
  • StackPanel decides to give the label the requested height, but stretches out its width
  • StackPanel calls Arrange on MyLabel, passing in size of 164 x 26
  • MyLabel.ArrangeOverride receives this value, passing on to base Label class
  • Base Label class uses this size to know how to render label

Here’s some run-time output showing these values:

1166-002

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

3 Responses to #1,166 – Layout in Action, part III

  1. Pingback: Dew Drop – September 25, 2014 (#1863) | Morning Dew

  2. Joerg says:

    Hi Sean,

    can you explain why the StackPanel decides to stretch the width in the Arrange pass, since the property is being set on the Label I would have guessed, that the Labels MeasureOverride function returns a stretched width?

    Thanks!

    • Sean says:

      During the Measure phase, the Label indicates only what it needs for its content. It’s the StackPanel that does the stretching, setting the wider width during the Arrange phase.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: