Walkthrough: Setting Margins in the WPF Designer By Using Margin Lines

  • Article

Margins represent the amount of fixed space between the edge of a control and its host container. Correct use of margins is important to creating user interface layouts that resize correctly. For an overview of margins, see Alignment in the WPF Designer. In this walkthrough, you will create a simple control layout and use margin lines to change how the controls resize when the application is run.

In this walkthrough, you perform the following tasks:

  • Create the project.

  • Use margin lines with modifier keys.

  • Create a control layout by using default margin lines.

  • Customize the layout of controls by modifying margin lines.

When you are finished, you will have an understanding of the role played by margin lines in the layout of controls.

Note

The dialog boxes and menu commands you see might differ from those describes in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Working with Settings.

Prerequisites

You need the following components to complete this walkthrough:

  • Visual Studio 2010

Creating the Project

The first step is to create the project for the application.

To create the project

  1. Create a new WPF Application project in Visual Basic or Visual C# named MarginLineExample. For more information, see How to: Create a New WPF Application Project.

    Note

    You will not write any code in this walkthrough. The language that you choose for your project is the language that is used for the code-behind pages in your application.

    MainWindow.xaml opens in the WPF Designer.

  2. In Design view, select the window. For more information, see How to: Select and Move Elements on the Design Surface.

Using Margin Lines with Modifier Keys

Modifier keys can be used to change the default behavior of margin lines.

To change the behavior of margin lines using modifier keys

  1. Drag a Button control from the Toolbox onto the design surface. For more information, see How to: Add Controls to a WPF Window. Margin lines stretch from the edges of the Button control to the edges of the host container.

  2. Move the Button control in the window. Notice that the margin lines disappear while the control is being moved. By default, margin lines do not appear while the control is being moved.

  3. While moving the Button, press the CTRL+SHIFT keys. Notice that the margin lines are visible while the control is being moved.

Creating a Control Layout Using Default Margin Lines

To create a control layout by using the default margin lines

  1. Drag a TextBox control from the Toolbox onto the design surface.

  2. While moving the TextBox control to the corners of the window, press the CTRL+SHIFT keys to display the margin lines. Margin lines appear to the nearest edges of the host container.

  3. Move the TextBox control to the center of the window. Default margin lines appear to all four edges of the host container.

  4. Move the TextBox control to the upper-left corner of the window. Margin lines are fixed to the top and left edges of the host container. If necessary, set the margins on the TextBox so that margin lines appear only on the top and left edges. For more information, see How to: Set Margins for a Control in the WPF Designer.

  5. Move the Button control until it is positioned to the right edge of the TextBox control. Margins are fixed to the top, left, and right edges of the host container. If necessary, set the margins on the Button so that margin lines appear on the top, left, and right edges.

  6. On the Debug menu, click Start Debugging. The application starts and the window appears.

  7. Resize the window horizontally and vertically. The Button control stretches to keep the distance to both the left and right edges of the host container fixed.

  8. Close the window.

Customizing a Control Layout by Setting Margin Lines

To customize the layout of controls by modifying margin lines

  1. Select the Button control.

  2. Release the margin on the left side of the Button control. The Button control margins are fixed to the top and right edges of the host container.

  3. Select the TextBox control.

  4. Set the margin on the right side of the TextBox control. The TextBox control margins are fixed to the top, left, and right edges of the host container.

  5. On the Debug menu, click Start Debugging. The application starts and the window appears.

  6. Resize the window horizontally and vertically. Note that the TextBox control stretches and the Button control moves as the window is resized.

  7. Close the window.

Note

Resizing a window at run time to be smaller than it is on the design surface can cause controls to overlap or be hidden. To prevent this behavior, set the MinHeight and MinWidth properties of the window to equal the values of the Height and Width properties, or set the ResizeMode property to NoResize.

Next Steps

The application that you created demonstrated a simple layout. You can experiment with more complex layouts by adding gridlines to the root grid and observing how margin lines interact with gridlines. You can then add child Grid controls to the root grid and experiment with how margin lines interact with nested container controls.

See Also

Tasks

How to: Set Margins for a Control in the WPF Designer

Concepts

Alignment in the WPF Designer

Other Resources

WPF Container Controls