Designing a User Interface for a WPF Application (Visual Basic)

  • Article

In this lesson, you will learn how to create a WPF application and how to add controls to the user interface.

Designing a Windows Presentation Foundation (WPF) application is like designing a Windows Forms application; you add controls to a design surface. But there are several differences. In addition to having a designer, Properties window, and Toolbox, there is a window that contains XAML. XAML stands for Extensible Application Markup Language. This is a markup language that is used to create a user interface. The following illustration shows the default location of the XAML editor. For more information, see Walkthrough: Editing XAML in the WPF Designer.

XAML editor

XAML Window

When you create a traditional Windows Forms application, you can drag a control from the Toolbox to a Windows Form, or if you wanted to, you could write code to create the control. When you drag the control to the form, the code is automatically generated for you. Similarly, when you create a WPF application, you can create a control by writing XAML markup, or you can alternatively drag the control to a WPF window.

XAML markup is organized into elements that appear in a hierarchical format. The elements are enclosed in angle brackets, and there is typically an opening and closing element. For example, you could have a simple Button element that appears as follows: <Button></Button>. You typically describe how an element looks by defining attributes, such as its location, height, and width. Attributes of an element resemble properties of an object because they are descriptions of physical appearance or state. Attributes appear within the opening and closing brackets of the opening element. They consist of the attribute's name, the assignment symbol (=), and the value of the attribute enclosed in quotation marks. You can specify the height, for example of a Button element as follows: <Button Height="23"></Button>.

When you drag WPF controls from the Toolbox to the designer, Visual Basic Express automatically generates the XAML markup for the control. For example, XAML markup resembling the following is generated when you double-click a System.Windows.Controls.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>

Note that the Button element has its Height attribute set to "23" and its HorizontalAlignment element set to "Left". There are also several other attributes that describe the element. You can change these attributes by changing the values directly in the XAML markup. (By default, these attributes appear in red font.) You can also change the properties of the control by using the Properties window.

Try it

To create a WPF application

  1. On the File menu, click New Project.

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

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

    A new Windows Presentation Foundation project is created. A new window named Window1 appears. Its XAML markup is visible in the XAML editor of the Visual Basic integrated development environment (IDE) and appears as follows:

    <Window x:Class="Window1"

xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>

  4. Click Window1 to select it.

  5. In the XAML editor, change the Title attribute of the Window element from Window1 to WPF Application.

    The XAML markup will now appear as follows:

    <Window x:Class="Window1"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    Title="WPF Application" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>

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

    Experiment by changing other attributes of the Window, such as Width and Height. When you are ready, continue with the next procedure.

Adding Controls to the WPF Window

In this procedure, you will add controls to your application. You will do this by clicking the control in the Toolbox, usually found on the left-hand side of the Visual Basic IDE, and then dragging the control onto your WPF window. You will set some properties for the control and then adjust the XAML markup to change the control's text and size.

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. Select the TextBox control.

  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 change 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 enter the new value.

  8. Press F5 to run your program. A window containing the text box and button that you just added appears. Notice that you can click the button and type in the text box. You must add event handlers to the controls and then write code that instructs the computer what to do when the button is clicked.

Next Steps

In this lesson, you learned how to create a WPF application and add controls to it. You also learned how to set properties of the controls in the Properties window, and how to change the attributes of the WPF window and controls in XAML view. In the next lesson, you will learn about some of the other controls that are available in the Toolbox.

Next Lesson: Using Common 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 the Visual Look of Your Program: Introduction to Windows Presentation Foundation