Designing a User Interface for a WPF Application

  • Article

You can design a user interface for a Windows Presentation Foundation (WPF) application just as you can for a Windows Form application. You drag controls from the Toolbox to the design surface. The integrated development environment (IDE) is different for WPF applications. In addition to having a Properties window and Toolbox, the WPF IDE has a XAML editor. XAML is an extensible application markup language that can be used to create a user interface. The following illustration shows the location of the XAML editor. For more information, see Walkthrough: Editing XAML in the WPF Designer.

XAML Editor

XAML Window

Just as you can create a control by writing code manually in Windows Forms development, you can use XAML markup to create controls. In most cases, you would not write XAML to create controls; it is much easier to drag the controls from the Toolbox and let Visual C# Express Edition generate the XAML for you. You can then modify the XAML markup to change attributes of the control, such as its Height or Text. For example, the following XAML markup resembles the markup that is generated when you double-click a Button control to add it to a WPF window.

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

By default, attributes that you can modify, such as the width and height, appear in red font color. You can change the values directly in the XAML markup, as shown in the following example.

<Button Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" 
    Name="Button1" VerticalAlignment="Top" Width="60">Submit</Button>

To create a WPF application

  1. On the File menu, click New Project.

  2. In the New Project dialog box, click WPF Application.

  3. In the Name box, type WPF Application, and then click OK.

    A new WPF project is created. A new window named Window1 appears, and its XAML markup is visible in the XAML editor of the Visual C# Express Edition IDE.

  4. Click Window1 to select it.

  5. In XAML view,change the Title attribute of the Window element to WPF Application.

    The text in the title bar of Window1 changes to WPF Application.

Adding Controls to the WPF Window

You can add controls to the WPF window by dragging them from the Toolbox. For more information, see Common WPF Controls.

To add a control to the WPF window

  1. From the Toolbox, drag a TextBox control to the upper-right side of the WPF window.

  2. Click the TextBox control to select it.

  3. In the Properties window, click the first arrow (Left) for the HorizontalAlignment property, as shown in the following illustration.

    HorizontalAlignment property

    HorizontalAlignment Property

    This moves the TextBox from the right side of the WPF window to the left side.

  4. Set the following properties for the TextBox.

    Property

    Value

    VerticalAlignment

    Top

    Width

    75

    Height

    26

  5. In the XAML editor, change the Width attribute of the TextBox element to 140, and change the Margin element to 30, 56, 0, 0, as shown in the following example.

    <TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
    Name="TextBox1" VerticalAlignment="Top" Width="140" />

    The width and location of the TextBox changes after you type the new values.

  6. Add a Button control to the WPF window, next to the TextBox.

  7. Change the text between the opening and closing Button tags from Button to Submit, as shown in the following example.

    <Button Height="23" HorizontalAlignment="Right" Margin="0,59,35,0" 
    Name="Button1" VerticalAlignment="Top" 
    Width="75">Submit</Button>

    The text on the button changes after you type the new value.

  8. Press F5 to run your program. A window that contains the text box and button that you just added appears.

    Notice that although you can click the button and type in the text box, nothing occurs when you do this. You must add event handlers to the controls and then write code that instructs the computer what to do when the button is clicked. For more information, see How to: Create Event Handlers for WPF Controls.

See Also

Tasks

How to: Create a New WPF Application Project

How to: Add New Items to a WPF Project

Other Resources

Creating WPF Applications