#387 – Set Background Color to See How Layout Works

September 15, 2011 Leave a comment

It’s sometimes hard to understand how a container is laying out its children.  You can use the Background property of each control, or of the panels, to get a better idea of where things are.

Suppose that we have a GUI that includes a handful of controls and two nested panels.

    <StackPanel Orientation="Vertical">
        <Label Content="Bob's Your Uncle" HorizontalAlignment="Right"/>
        <StackPanel Orientation="Horizontal">
            <Label Content="Paul"/>
            <Button Content="Ringo" Margin="10"/>
            <TextBox Text="George" VerticalContentAlignment="Bottom"/>
        </StackPanel>
        <TextBox Text="Herman was here.."/>
    </StackPanel>

The GUI would look like this:

To better see how things are being layed out, we can set the Background to a different color for each element.

    <StackPanel Orientation="Vertical" Background="Pink">

        <Label Content="Bob's Your Uncle" HorizontalAlignment="Right" Background="Lavender"/>

        <StackPanel Orientation="Horizontal" Background="LightBlue">
            <Label Content="Paul" Background="Red"/>
            <Button Content="Ringo" Margin="10" Background="Green"/>
            <TextBox Text="George" VerticalContentAlignment="Bottom" Background="Blue"/>
        </StackPanel>

        <TextBox Text="Herman was here.." Background="Orange"/>
    </StackPanel>

Advertisement

Filed under Layout Tagged with , , , , ,

#386 – Layout = Panels + FrameworkElements + Alignment/Margins/Padding

September 14, 2011 1 Comment

Layout in WPF is the process by which the location and size of all user interface elements is determined.

A user interface is composed of an outer Window or Page which contains a hierarchy of user interface elements.  The hierarchy can contain individual user interface elements or Panels, which in turn contain a collection of child FrameworkElements.

Panel is an abstract class that serves as a parent for specific layout panels, including Canvas, DockPanel, Grid, StackPanel and WrapPanel.

A panel will contain a collection of child FrameworkElement instances.  These can be individual controls that derive from FrameworkElement, directly or indirectly.  Because Panel is itself a child of the FrameworkElement class, a panel can contain other panels.

FrameworkElement child elements are position within a parent using properties related to alignment, margins and padding.  These properties include:

  • HorizontalAlignment, VerticalAlignment  and Margin  (from FrameworkElement)
  • HorizontalContentAlignment, VerticalContentAlignment and Padding  (from Control)

Filed under Layout Tagged with , , , , , , , ,

#333 – Margin and Padding Overview

July 1, 2011 1 Comment

A control’s Margin property specifies the spacing between the edges of the control and its container.  A control’s Padding property specifies the spacing between the edges of the control and its interior content.

In the example below, we specify the Margin.  Because the HorzontalAlignment is Stretch (the default), the left/right Padding values are ignored and the Button is stretched to reach the desired Margin values.

    <StackPanel VerticalAlignment="Top" Background="Goldenrod">
        <Button Content="I'm a Button" Margin="5,10,50,10" Padding="15,5,15,5"/>
    </StackPanel>


If we now set HorizontalAlignment to Center, the control will size to fit its content. The Padding values will be honored exactly and the control will be centered horizontally within the available space after the specified left and right Margin values have been accounted for.

This becomes more clear when we draw lines for the specified Margin values.

Filed under Layout Tagged with , , ,

#328 – Controls that Make Use of the Padding Property

June 24, 2011 Leave a comment

The Padding property will add space within a control only if the control’s control template makes use of Padding.  Most, but not all, controls that derive from Control honor the Padding property.

Controls that make use of Padding:

  • Button
  • CheckBox
  • ComboBox
  • ContextMenu
  • DataGrid
  • DatePicker
  • Expander
  • GroupBox
  • Label
  • ListBox
  • Menu
  • PasswordBox
  • RadioButton
  • RepeatButton
  • RichTextBox
  • StatusBar
  • TabControl
  • TextBox
  • TreeView

Controls that do not make use of Padding:

  • Calendar
  • ProgressBar
  • Slider

Filed under Controls Tagged with , ,

#327 – Provide Extra Space Within a Control Using Padding

June 23, 2011 Leave a comment

While the Margin property allows adding extra space around the outside of a control, within its container, the Padding property allows adding space within a control.  The space is added inside the control, around its content.

In the example below, we have three Button controls who are set to size to their content (which includes the padding).  The first button uses a default padding of 0.  The second button uses a padding of 5 WPF units around each side and the third uses a padding of 20.

        <Button Content="Click Me" HorizontalAlignment="Center"/>
        <Button Content="Click Me" HorizontalAlignment="Center"
                Padding="5"/>
        <Button Content="Click Me" HorizontalAlignment="Center"
                Padding="20"/>

Filed under Layout Tagged with , ,