#802 – Transforms Do Not Affect an Element’s Margins

April 19, 2013 1 Comment

When you apply a 2D transform to a user interface element, the transform impacts only the element and everything inside of the element.  It therefore does not change the element’s margins.

In the example below, we have a Label element that has a margin of 5 separating it from its parent Border.  Notice that when we scale the second instance of the Label, it still retains the same margin.

    <StackPanel>
        <Border BorderBrush="Black" BorderThickness="3" HorizontalAlignment="Center">
            <Label Background="LightCoral" Content="Scale Me" Margin="5"/>
        </Border>
        <Border BorderBrush="Black" BorderThickness="3" HorizontalAlignment="Center">
            <Label Background="LightCoral" Content="Scale Me" Margin="5">
                <Label.LayoutTransform>
                    <ScaleTransform ScaleX="1.5"/>
                </Label.LayoutTransform>
            </Label>
        </Border>
    </StackPanel>

802-001

Filed under Layout Tagged with , , ,

#426 – Layout Panels Can Also Have Margins

November 9, 2011 Leave a comment

You typically set margins on elements contained within a layout panel to create space between different elements and to create space between an element and the edge of the containing panel.

Here’s a Window containing a Grid (beige background), which contains some controls.  No margins have been set.

We can then specify a Margin value for the child elements within the Grid.  (Here, we set all margins to 5).  This creates space between each control and the cell in the Grid that it’s contained in.

We can also specify a Margin value for the Grid itself.  Doing so will create space between the Grid and the edges of its container, the Window.  In the example below, we specify a Margin of 10 for the Grid.  The background of the Window is set to blue, so that we can see the edges of the Grid.

 

 

Filed under Layout Tagged with , , , ,

#421 – HorizontalAlignment, Margins and Column Widths in a Grid

November 2, 2011 1 Comment

When working with elements in a Grid, you use the row and column height/width, alignment properties and margins to determine the size and location of each element.  In certain cases, some of the properties might be ignored, depending on the value of other properties.

In the example below, the first two columns have their Width property set to Auto, so that they auto-size to their content.  The third and fourth columns use * sizing.  The 2nd and 4th columns specify a margin of 10 on both the left and right, while the 1st and 3rd use no margins.  Elements in the 1st row set HorizontalAlignment to Center, and Left, Right and Stretch for the following rows.

Notice the following:

  • HorizontalAlignment of Stretch is the same as Center for auto-sized columns
  • Margins don’t apply for *-sized columns when HorizontalAlignment is Center
  • Element are aligned within their margins

Filed under Layout Tagged with , , , ,

#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>

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 , , ,

#326 – Specifying a Symmetrical Margin Using Two Arguments

June 22, 2011 Leave a comment

You can set the Margin property on a control so that it has some extra room around its edges, within its container.

You can specify a value for the Margin property in XAML using either one, two or four integer values.  Using one value indicates the margin for each of the four sides of the control.  Using four values indicates the left/top/right/bottom margin values individually.

When you use two values in specifying the Margin, you are specifying the combined left-right and top-bottom margins.  I.e. Margin=”left+right, top+bottom“.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink" />
        <Button Content="I Like Gene" Margin="10,20"/>
        <Label Content="Roy Rogers" Background="Aqua" />
    </StackPanel>

The value of 10 indicates that the left and right margins should be identical and add up to 10 WPF units.  Using the two-argument version results in symmetrical margins.

Filed under Layout Tagged with , ,

#325 – Specifying a Margin Value in Code

June 21, 2011 Leave a comment

You can set the Margin property on a control so that it has some extra room around its edges, within its container.

You’ll typically set the values for Margin in XAML, but you can also set a Margin value in code.  The type of the Margin property is Thickness, which is a struct having fields for margins along the left, top, right and bottom of a control.

You can specify a value for Margin by creating a new instance of the Thickness structure.

            double left = 5.0;
            double top = 10.0;
            double right = 2.0;
            double bottom = 20.0;
            lblName.Margin = new Thickness(left, top, right, bottom);

Filed under Layout Tagged with , , ,

#324 – Setting a Margin with Different Sizes on Each Edge

June 20, 2011 Leave a comment

You can set the Margin property on a control so that it has some extra room around its edges, within its container.

In XAML, if you specify a single value for Margin, that value will be used as the margin (in WPF Units) along each edge of the control.

    <StackPanel>
        <Label Content="Hello there.." Margin="3"/>
        <Button Content="Click Me" Margin="5"/>
    </StackPanel>

You can also specify four different values for the Margin property, listing the margin along each edge of the control in the order: Left, Top, Right, Bottom.

    <StackPanel>
        <Label Content="Hello there.." Background="Goldenrod" Margin="5,10,2,20"/>
        <Button Content="Click Me"/>
    </StackPanel>

Filed under Layout Tagged with , ,

#323 – Provide Space Around StackPanel Children Using Margin

June 17, 2011 3 Comments

By default, StackPanel provides no extra space around the child controls that it contains, but packs them tightly.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>
        <Button Content="I Like Gene" />
        <Label Content="Roy Rogers" Background="Aqua"/>
        <Button Content="I Like Roy Rogers Yes I Do"/>
        <Label Content="Spade Cooley had a sad story" Background="DodgerBlue"/>
    </StackPanel>


You can specify a margin that should be used around the outside of each control using the Margin property.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink" Margin="5"/>
        <Button Content="I Like Gene" Margin="5"/>
        <Label Content="Roy Rogers" Background="Aqua" Margin="5"/>
        <Button Content="I Like Roy Rogers Yes I Do" Margin="5"/>
        <Label Content="Spade Cooley had a sad story" Background="DodgerBlue" Margin="5"/>
    </StackPanel>

In this example, we used a single value whenever we set the Margin property.  This causes the container to add the specified margin (in WPF units) along all four sides of the child control.

Filed under Layout Tagged with , , ,

← Older posts

Follow

Get every new post delivered to your Inbox.

Join 234 other followers