Using Common WPF Controls

In this lesson, you will learn about some of the common Windows Presentation Foundation (WPF) controls that are available in the Toolbox when you create a WPF Application project.

WPF enables you to create visually enhanced user interfaces for your applications. Even the typical controls you're used to seeing in a standard Windows Forms application are enhanced in WPF applications.

The easiest way to add WPF controls to your application is to drag them from the Toolbox to the design surface. In their default state, the controls look much like the controls you'll find in a Windows Forms application. Controls in WPF support styles and templates that enable you to create visually compelling applications. To modify the appearance of a control, you can change its properties in the Properties window. You can also modify the appearance of a control by adding styles and attributes to the control in the XAML editor. Writing XAML on your own can be difficult, so you might want to consider using an application that can generate XAML for you, such as Expression Blend. For more information, see Collaboration with Expression Blend.

Try It!

To add a control to the WPF window

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 WPFControls, and then click OK.

4. A new Windows Presentation Foundation project is created.

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

6. Select the TextBox control.

7. Set the following properties for the text box in the Properties Window.

   Property	Value
   VerticalAlignment	Top
   Width	75
   Height	26

8. Add a Button control to the WPF window, next to the text box.

9. Change the text between the opening and closing Button tags in the XAML editor from Button to Add, as shown in the following example.

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

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

10. Add a ListBox control to the WPF window, underneath the text box.

11. Double-click the button to enter the default event handler, and add the following code:

    If TextBox1.Text IsNot "" Then
        ListBox1.Items.Add(TextBox1.Text)
        TextBox1.Text = ""
    End If
    

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

13. Type some text in the text box and then click the Add button. Verify that the text is added to the list box.

14. Add additional text to the list box.

WPF Controls

The following table shows the most common WPF controls, which you can find on the Common Controls tab of the Toolbox.

Control name	Description
System.Windows.Controls.Border	Displays a border around content.
System.Windows.Controls.Button	Enables a user to perform an action by clicking a button. The Buttonbase.Click event occurs when a Button is clicked.
System.Windows.Controls.CheckBox	Enables a user to select and clear a check box to indicate a Yes/No or True/False value.
System.Windows.Controls.ComboBox	Enables a user to select an item from a drop-down list. The list is displayed when the user clicks a drop-down arrow.
System.Windows.Controls.Grid	Defines a flexible grid area that consists of columns and rows.
System.Windows.Controls.Image	Displays an image.
System.Windows.Controls.Label	Displays text on a form. Provides support for access keys.
System.Windows.Controls.ListBox	Enables a user to select an item from a list.
System.Windows.Controls.RadioButton	Enables a user to choose from among mutually exclusive items. The selection of one radio button is mutually exclusive to any other radio button in the same container.
System.Windows.Controls.StackPanel	Enables you to stack child controls vertically or horizontally.
System.Windows.Control.TabControl	Enables visual content to be arranged in a tabular form.
System.Windows.Controls.TextBox	Displays unformatted text and enables users to enter text.

Additional controls available in the Toolbox include the following:

• Container controls, such as Canvas, DockPanel, and Frame.

• Menus and toolbars, such as Menu, ToolBar, and StatusBar.

• Document controls, such as DocumentViewer and FlowDocumentPageViewer.

• And more!

Next Steps

In this lesson, you learned about the common WPF controls that are available in the Toolbox. You also learned that you can customize these controls to make them visually compelling.

In the next lesson, you will learn how to create event handlers for a WPF control.

Next Lesson: Creating Event Handlers for WPF Controls.

See Also

Tasks

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

How to: Create a New WPF Application Project

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

Concepts

WPF Designer Overview

Other Resources

Creating the Visual Look of Your Program: Introduction to Windows Presentation Foundation

Working with Controls in the WPF Designer