|
| 1 | +# Session 0503 - Introduction to WPF |
| 2 | + |
| 3 | +In this session, we'll introduce the basics of the Windows Presentation Foundation (WPF) user-interface framework. WPF has been available to develop with since its initial release in 2006 as part of .NET Framework 3.0 and since then has been updated and released as [open-source](https://github.com/dotnet/wpf) starting with the release of .NET Core 3.0 and continuing through .NET 5 and .NET 6. |
| 4 | + |
| 5 | +## What is WPF? |
| 6 | + |
| 7 | +From the [official documentation](https://docs.microsoft.com/visualstudio/designers/getting-started-with-wpf): |
| 8 | + |
| 9 | +> Windows Presentation Foundation (WPF) is a UI framework that creates desktop client applications. The WPF development platform supports a broad set of application development features, including an application model, resources, controls, graphics, layout, data binding, documents, and security. The framework is part of .NET, so if you have previously built applications with .NET using ASP.[]()NET or Windows Forms, the programming experience should be familiar. WPF uses the Extensible Application Markup Language (XAML) to provide a declarative model for application programming. |
| 10 | +
|
| 11 | +> WPF is resolution-independent and uses a vector-based rendering engine, built to take advantage of modern graphics hardware. WPF provides a comprehensive set of application-development features that include controls, data binding, layout, 2D and 3D graphics, animation, styles, templates, documents, media, text, and typography. WPF is part of .NET, so you can build applications that incorporate other elements of the .NET API. |
| 12 | +
|
| 13 | +## What is XAML? |
| 14 | + |
| 15 | +Extensible Application Markup Language (XAML) is a declarative language that's based on XML. XAML is used in the following types of applications to build user interfaces: |
| 16 | + |
| 17 | + - Windows Presentation Foundation (WPF) apps |
| 18 | + - Universal Windows Platform (UWP) apps |
| 19 | + - Xamarin.Forms apps |
| 20 | + - .NET MAUI apps _(starting with .NET 6)_ |
| 21 | + |
| 22 | +From the [official documentation](https://docs.microsoft.com/dotnet/desktop/wpf/xaml/): |
| 23 | + |
| 24 | +> XAML is a declarative markup language. As applied to the .NET Core programming model, XAML simplifies creating a UI for a .NET Core app. You can create visible UI elements in the declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files that are joined to the markup through partial class definitions. XAML directly represents the instantiation of objects in a specific set of backing types defined in assemblies. This is unlike most other markup languages, which are typically an interpreted language without such a direct tie to a backing type system. XAML enables a workflow where separate parties can work on the UI and the logic of an app, using potentially different tools. |
| 25 | +
|
| 26 | +> When represented as text, XAML files are XML files that generally have the .xaml extension. The files can be encoded by any XML encoding, but encoding as UTF-8 is typical. |
| 27 | +
|
| 28 | +> The following example shows how you might create a button as part of a UI. This example is intended to give you a flavor of how XAML represents common UI programming metaphors. |
| 29 | +
|
| 30 | +```xaml |
| 31 | +<StackPanel> |
| 32 | + <Button Content="Click Me"/> |
| 33 | +</StackPanel> |
| 34 | +``` |
| 35 | + |
| 36 | +### Markup and Code-Behind |
| 37 | + |
| 38 | +WPF lets you develop an application using both markup and code-behind, an experience with which ASP.NET developers should be familiar. You generally use XAML markup to implement the appearance of an application while using managed programming languages (code-behind) to implement its behavior. This separation of appearance and behavior has the following benefits: |
| 39 | + |
| 40 | +- Development and maintenance costs are reduced because appearance-specific markup isn't tightly coupled with behavior-specific code. |
| 41 | + |
| 42 | +- Development is more efficient because designers can implement an application's appearance simultaneously with developers who are implementing the application's behavior. |
| 43 | + |
| 44 | +- Globalization and localization for WPF applications is simplified. |
| 45 | + |
| 46 | +## Hello World with WPF |
| 47 | + |
| 48 | + |
| 49 | + |
| 50 | +Let's create our first application with a simple button that triggers a message box. We'll create a new WPF application with the command-line command: |
| 51 | + |
| 52 | +``` |
| 53 | +dotnet new wpf -o FirstApp |
| 54 | +``` |
| 55 | + |
| 56 | +Next, we'll add some content to the `MainWindow.xaml` to add a button that can be clicked: |
| 57 | + |
| 58 | +``` |
| 59 | +<Window x:Class="FirstApp.MainWindow" |
| 60 | + xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| 61 | + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| 62 | + xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
| 63 | + xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
| 64 | + xmlns:local="clr-namespace:FirstApp" |
| 65 | + mc:Ignorable="d" |
| 66 | + Title="Window with Button" Height="100" Width="250"> |
| 67 | +
|
| 68 | + <!-- The new button we added --> |
| 69 | + <Button Name="button" Click="button_Click">Click Me!</Button> |
| 70 | +
|
| 71 | +</Window> |
| 72 | +``` |
| 73 | + |
| 74 | +Next, we'll give the button some code to trigger by adding the `button_Click` method to the **Code Behind** in `MainWindow.xaml.cs` |
| 75 | + |
| 76 | +``` |
| 77 | +public void button_Click(object sender, RoutedEventArgs e) { |
| 78 | + |
| 79 | + MessageBox.Show("Welcome to WPF!"); |
| 80 | +
|
| 81 | +} |
| 82 | +``` |
| 83 | + |
| 84 | +Finally, we can run the app by clicking the Play button or pressing F5 in Visual Studio. At the command-line, we can instead execute the command `dotnet run` to start the application. |
| 85 | + |
| 86 | +## Building your first application: the Names application |
| 87 | + |
| 88 | +The Names application is a simple application walkthrough in the [official documentation](https://docs.microsoft.com/dotnet/desktop/wpf/get-started/create-app-visual-studio) and is available with some additional code TODOs in the `src/Names` folder. |
| 89 | + |
| 90 | +## WPF Controls available |
| 91 | + |
| 92 | +The built-in WPF controls are listed here: |
| 93 | + |
| 94 | +- **Buttons:** Button and RepeatButton. |
| 95 | + |
| 96 | +- **Data Display:** DataGrid, ListView, and TreeView. |
| 97 | + |
| 98 | +- **Date Display and Selection:** Calendar and DatePicker. |
| 99 | + |
| 100 | +- **Dialog Boxes:** OpenFileDialog, PrintDialog, and SaveFileDialog. |
| 101 | + |
| 102 | +- **Digital Ink:** InkCanvas and InkPresenter. |
| 103 | + |
| 104 | +- **Documents:** DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader, FlowDocumentScrollViewer, and StickyNoteControl. |
| 105 | + |
| 106 | +- **Input:** TextBox, RichTextBox, and PasswordBox. |
| 107 | + |
| 108 | +- **Layout:** Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSplitter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer, StackPanel, Thumb, Viewbox, VirtualizingStackPanel, Window, and WrapPanel. |
| 109 | + |
| 110 | +- **Media:** Image, MediaElement, and SoundPlayerAction. |
| 111 | + |
| 112 | +- **Menus:** ContextMenu, Menu, and ToolBar. |
| 113 | + |
| 114 | +- **Navigation:** Frame, Hyperlink, Page, NavigationWindow, and TabControl. |
| 115 | + |
| 116 | +- **Selection:** CheckBox, ComboBox, ListBox, RadioButton, and Slider. |
| 117 | + |
| 118 | +- **User Information:** AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock, and ToolTip. |
| 119 | + |
| 120 | +## Working with a Web Service |
| 121 | + |
| 122 | + |
| 123 | + |
| 124 | +Let's walk through the image search sample from the Learn Module ["Write Internet Connected Windows Apps"](https://docs.microsoft.com/learn/modules/build-internet-connected-windows10-apps/1-building-app-that-uses-cloud-service?pivots=wpf). We'll write a simple application that searches Bing for an image and displays it in an image box. |
| 125 | + |
| 126 | +## Databinding with Entity Framework Sample |
| 127 | + |
| 128 | + |
| 129 | + |
| 130 | +The Entity Framework team shared [a sample](https://docs.microsoft.com/ef/core/get-started/wpf) that shows how to bind to a simple Parent-Child form to a data source. This sample shows how to use Lazy Loading and CollectionViewSource objects to define and automatically bind a DataGrid to a database table |
| 131 | + |
| 132 | +## Migrating from .NET Framework to .NET Core |
| 133 | + |
| 134 | +WPF for .NET 5.0 provides new features and enhancements over .NET Framework. To learn how to migrate an app, see [How to migrate a WPF desktop app to .NET 5.](https://docs.microsoft.com/dotnet/desktop/wpf/migration/convert-project-from-net-framework) |
0 commit comments