Walkthrough: My first WPF desktop application

Walkthrough: My first WPF desktop application

This article shows you how to develop a Windows Presentation Foundation (WPF) desktop application that includes the elements that are common to most WPF applications:

Extensible Application Markup Language (XAML) markup, code-behind, application definitions, controls, layout, data binding, and styles. To develop the application, you'll use Visual Studio.

This walkthrough includes the following steps:

• Use XAML to design the appearance of the application's user interface (UI).

• Write code to build the application's behavior.

• Create an application definition to manage the application.

• Add controls and create the layout to compose the application UI.

• Create styles for a consistent appearance throughout the application's UI.

• Bind the UI to data, both to populate the UI from data and to keep the data and UI synchronized.

By the end of the walkthrough, you'll have built a standalone Windows application that allows users to view expense reports for selected people. The application is composed of several WPF pages that are hosted in a browser-style window.

 Tip

The sample code that is used to build this walkthrough is available for both Visual Basic and C# at Walkthrough WPF App Sample Code.

You can toggle the code language of the sample code between C# and Visual Basic by using the </> drop-down on the upper right side of this article.

 

Create the application project

The first step is to create the application infrastructure, which includes an application definition, two pages, and an image.

1. Create a new WPF Application project in Visual Basic or Visual C# named ExpenseIt:

   1. Open Visual Studio and select Create a new project under the Get started menu.

      The Create a new project dialog opens.

   2. In the Language dropdown, select either C# or Visual Basic.

   3. Select the WPF App (.NET Framework) template and then select Next.

The Configure your new project dialog opens.

                     4.Enter the project name ExpenseIt and then select Create.

Visual Studio creates the project and opens the designer for the default application window named MainWindow.xaml.

 

       2.Open Application.xaml (Visual Basic) or App.xaml (C#).

This XAML file defines a WPF application and any application resources.

You also use this file to specify the UI, in this case MainWindow.xaml, that automatically shows when the application starts.

Your XAML should look like the following in Visual Basic:

And like the following in C#:

StartupUri boot file

<Application x:Class="CardQuery.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:CardQuery"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
         
    </Application.Resources>
</Application>

    3.

• Open MainWindow.xaml.

  This XAML file is the main window of your application and displays content created in pages. The Window class defines the properties of a window, such as its title, size, or icon, and handles events, such as closing or hiding.