Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

Walkthrough: Constructing a Layout Based on Absolute Positioning

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

In absolute positioning, you arrange child elements by specifying their exact locations relative to their parent element. For example, you arrange controls on a panel by specifying the left and top coordinates of the controls relative to the panel. For more information, see Layout with Absolute and Dynamic Positioning.

The WPF Designer for Visual Studio provides a Canvas panel control that supports absolute positioning. You can use the Canvas panel control to position elements absolutely in your applications.

Important note Important

Whenever possible, it is preferable to use a dynamic layout. Dynamic layouts are the most flexible, adapt to content changes such as localization, and allow the end user the most control over their environment. To see examples of dynamic layouts, see Walkthrough: Creating a Resizable Application by Using the WPF Designer and Walkthrough: Constructing a Dynamic Layout.

In this walkthrough, you perform the following tasks:

  • Create a WPF application.

  • Add a Canvas panel control to the application.

  • Add controls to the panel.

  • Test the layout.

The following illustration shows how your application will appear.

A layout based on absolute positioning
Note Note

The dialog boxes and menu commands you see might differ from those described 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 Visual Studio Settings.

You need the following components to complete this walkthrough:

  • Visual Studio 2012 RC

The first procedure 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 AbsoluteLayout. For more information, see How to: Create a New WPF Application Project.

    Note 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.

  3. In the Properties window, set the following properties for the Window:

    Property

    Value

    Width

    400

    Height

    200

    Tip Tip

    You can also use the resize handles to resize the window in Design view.

  4. (Optional) To lock the size of the window, use one of the following methods:

    1. In the Properties window, set the following property for the Window:

      Property

      Value

      ResizeMode

      NoResize

    2. In the Properties window, set the following properties for the Window:

      Property

      Value

      MinWidth

      400

      MinHeight

      200

      MaxWidth

      400

      MaxHeight

      200

  5. On the File menu, click Save All.

By default, the new WPF application contains a Window with a Grid panel. To create a layout based on absolute positioning, you must use a Canvas panel. In this procedure you remove the default Grid and add a Canvas.

To add a panel control

  1. In Design view, select the grid.

  2. Press the DELETE key to delete the Grid.

  3. From the Toolbox, in the Controls group, drag a Canvas control onto the Window.

  4. In the Properties window, set the Height property of the Canvas to Auto.

    The Canvas stretches to fill the height of the Window.

  5. In the Properties window, set the Width property of the Canvas to Auto.

    The Canvas stretches to fill the width of the Window.

  6. On the File menu, click Save All.

Next you add controls to the panel and use the Left and Top attached properties of the Canvas to position them absolutely.

To add controls to the panel

  1. From the Toolbox, in the Common group, drag a Label control onto the Canvas.

  2. In the Properties window, set the following properties for the Label:

    Property

    Value

    Content

    Name:

    Canvas.Left

    20

    Canvas.Top

    20

    Width

    120

    Height

    23

  3. From the Toolbox, in the Common group, drag a Label control onto the Canvas.

  4. In the Properties window, set the following properties for the Label:

    Property

    Value

    Content

    Password:

    Canvas.Left

    20

    Canvas.Top

    60

    Width

    120

    Height

    23

  5. From the Toolbox, in the Common group, drag a TextBox control onto the Canvas.

  6. In the Properties window, set the following properties for the TextBox:

    Property

    Value

    Canvas.Left

    160

    Canvas.Top

    20

    Width

    200

    Height

    23

  7. From the Toolbox, in the Common group, drag a TextBox control onto the Canvas.

  8. In the Properties window, set the following properties for the TextBox:

    Property

    Value

    Canvas.Left

    160

    Canvas.Top

    60

    Width

    200

    Height

    23

  9. From the Toolbox, in the Common group, drag a Button control onto the Canvas.

  10. In the Properties window, set the following properties for the Button:

    Property

    Value

    Content

    OK

    Canvas.Left

    196

    Canvas.Top

    120

    Width

    75

    Height

    23

  11. From the Toolbox, in the Common group, drag a Button control onto the Canvas.

  12. In the Properties window, set the following properties for the Button:

    Property

    Value

    Content

    Cancel

    Canvas.Left

    283

    Canvas.Top

    120

    Width

    75

    Height

    23

  13. On the File menu, click Save All.

Finally, you run the application and verify that the controls respect the absolute positioning.

To test the layout

  1. (Optional) If you locked the size of the window in a previous step, you must unlock it to perform this procedure. In the Properties window, set the following properties for the Window:

    Property

    Value

    MinWidth

    0

    MinHeight

    0

    MaxWidth

    Infinity

    MaxHeight

    Infinity

    ResizeMode

    CanResize

  2. On the Debug menu, click Start Debugging.

    The application starts and the window appears.

  3. Resize the window.

    The controls respect the absolute positioning and do not change size or position.

  4. Close the window.

The following is the completed MainWindow.xaml file:

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="200" Width="400" ResizeMode="CanResize" Name="MainWindow" MinWidth="0" MinHeight="0" MaxWidth="Infinity" MaxHeight="Infinity">
    <Canvas Height="Auto" Name="Canvas1" Width="Auto">
        <Label Canvas.Left="20" Canvas.Top="20" Height="23" Width="120" Name="Label1">Name:</Label>
        <Label Canvas.Left="20" Canvas.Top="60" Height="23" Width="120" Name="Label2">Password:</Label>
        <TextBox Canvas.Left="160" Canvas.Top="20" Height="23" Width="200" Name="TextBox1" />
        <TextBox Canvas.Left="160" Canvas.Top="60" Height="23" Width="200" Name="TextBox2" />
        <Button Canvas.Left="196" Canvas.Top="120" Height="23" Width="75" Name="Button1">OK</Button>
        <Button Canvas.Left="283" Canvas.Top="120" Height="23" Width="75" Name="Button2">Cancel</Button>
    </Canvas>
</Window>
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.