mirror of
https://github.com/Stone-Red-Code/docs-desktop.git
synced 2026-09-04 09:06:04 +02:00
Initial WPF content migrated (#17)
* Reset branch for WPF changes * Convert BMP to PNG; fix link-out-of-scope err * Add snippets for WPF... 6794 files!!!! * Add missing snippets * update file updated between migration * Fix paths to include * update breadcrumb and toc * fix index links * fix index links * fix index links * fix markdown
This commit is contained in:
Andy De George
@@ -0,0 +1,115 @@
|
||||
---
|
||||
title: Community resources
|
||||
ms.date: "03/01/2018"
|
||||
helpviewer_keywords:
|
||||
- "community resources [WPF]"
|
||||
- "forums [WPF]"
|
||||
- "bug descriptions [WPF]"
|
||||
ms.assetid: 468b060a-d54b-4900-a74a-9faccb554045
|
||||
---
|
||||
# WPF community feedback
|
||||
|
||||
Microsoft exposes a variety of community resources for you to learn about, discuss, and provide feedback on Windows Presentation Foundation (WPF). These resources include forums and the [Visual Studio Developer Community](https://developercommunity.visualstudio.com/) site. Each community resource offers a different set of benefits. These benefits are described here, as are a set of best practices for using each to ensure the best response from the community at large and Microsoft in particular.
|
||||
|
||||
> [!NOTE]
|
||||
> Don't use the feedback section located at the bottom of each page to send product feedback. These links are for documentation feedback only.
|
||||
|
||||
## Forums
|
||||
|
||||
The [WPF forum](https://social.msdn.microsoft.com/Forums/vstudio/home?forum=wpf) is the primary community resource for discussing and resolving issues. Forums facilitate discussion and problem resolution by offering a comprehensive set of supporting features that include:
|
||||
|
||||
- Searching.
|
||||
- Discussion tracking.
|
||||
- Rich formatting for text and code.
|
||||
- Visual Studio integration.
|
||||
- Most Valued Professional (MVP) and community involvement.
|
||||
- Monitoring to ensure posts are responded to in the quickest possible time.
|
||||
|
||||
Another option for you to ask questions to the community about WPF is [Stack Overflow](https://stackoverflow.com/questions/tagged/wpf).
|
||||
|
||||
### Forum best practices
|
||||
|
||||
Using the following best practices help to address issues posted to the WPF forum in the quickest possible time. These practices are applicable to all forums.
|
||||
|
||||
#### Search existing posts
|
||||
|
||||
Some issues occur widely enough that others have faced them before you. Consequently, you can solve your problem quickly, or you can add your input to an existing discussion.
|
||||
|
||||
#### Use meaningful titles
|
||||
|
||||
Concise, meaningful titles improve the discoverability of your posts. They also make it easier for other WPF forum community members to determine if they can solve your problem.
|
||||
|
||||
#### Include appropriate content
|
||||
|
||||
Describe the issue and how you’ve tried to work through it. If possible, include supporting code snippets, or the simplest possible sample that demonstrates your issue. All these details help to increase the chance your question will be answered quickly.
|
||||
|
||||
## Visual Studio Developer Community
|
||||
|
||||
Issues can sometimes be difficult to resolve, or irresolvable. Such situations arise because of bugs in the technology, difficulties applying the technology to particular scenarios, or lack of support for particular scenarios. This information is important to Microsoft, and can be provided via the [Visual Studio Developer Community](https://developercommunity.visualstudio.com/) site.
|
||||
|
||||
Items posted on the WPF Product Feedback Center are routed to the WPF team's internal bug database. Consequently, it is the most reliable way to get your feedback to the WPF feature owner. In addition, you can validate and track suggestions and bugs as well as vote on them, which helps the WPF team to prioritize issues.
|
||||
|
||||
### Developer Community best practices
|
||||
|
||||
When posting to the Visual Studio Developer Community, searching existing posts, providing a meaningful title and appropriate content are important best practices, just as they are for posting to the WPF forum. The following are additional best practices you should also employ.
|
||||
|
||||
#### Search existing posts
|
||||
|
||||
Some issues occur widely enough that others have faced them before you. Consequently, you can solve your problem quickly, or you can add your input to an existing issue.
|
||||
|
||||
#### Use meaningful titles
|
||||
|
||||
Concise, meaningful titles increase the chance that your issue is directed to the most appropriate WPF team in the shortest amount of time. This is particularly important for a technology like WPF, which contains many interrelated features.
|
||||
|
||||
#### Describe how to reproduce your bug
|
||||
|
||||
When you post about a bug, it is important to include the following where relevant:
|
||||
|
||||
- Provide a clear description of the bug.
|
||||
- Use code snippets to support the bug description.
|
||||
- Provide a list of steps that demonstrate how to reproduce the bug.
|
||||
- Include the smallest possible code sample that reproduces the bug.
|
||||
- Mention whether the bug is consistently reproducible or not.
|
||||
- Include relevant exception information.
|
||||
|
||||
If the bug is install or setup related, attach the relevant install logs and snapshots (files prefixed with "dd_" that are located in your %temp% folder).
|
||||
|
||||
For compile or build issues, attach the build logs. The MSBuild system can be configured to supports logging with various verbosities by using the /v: switch from the command line or by configuring the appropriate level from an Integrated Development Environment (IDE) like Visual Studio.
|
||||
|
||||
#### Provide environment information
|
||||
|
||||
Background information can often be useful for adding context to your post. In particular, mention the operating system platform, processor family, and architecture, such as "Windows 10 Version 1709, Intel(R) Xeon(R), x64."
|
||||
|
||||
If the issue you are posting about is related to rendering, you should also include graphics card and driver details, if possible. This information is important because WPF is a presentation framework.
|
||||
|
||||
#### Provide solution or project information
|
||||
|
||||
Bugs may pertain to the tools used to develop and build your applications and the types of applications you are building. Consequently, it can be useful to specify:
|
||||
|
||||
- The type of application you are building, such as:
|
||||
- Application (*.exe*) or library (*.dll*)
|
||||
- Extensible Application Markup Language (XAML) browser application (XBAP)
|
||||
- Loose XAML application
|
||||
- Standalone installed applications
|
||||
- Standalone ClickOnce-deployed applications
|
||||
- The development tool, such as:
|
||||
- MSBuild
|
||||
- Expression Graphic Designer
|
||||
- Expression Interactive Designer
|
||||
- Visual Studio
|
||||
- The solution configuration, such as:
|
||||
- A solution
|
||||
- A single project
|
||||
- A solution with multiple dependent projects
|
||||
- Whether your application has language-specific or language-neutral resources. For example, did you specify the `UICulture` project property or localizable metadata for `Application`, `Page`, and `Resource` types?
|
||||
- Whether you used the neutral language setting in the AssemblyInfo.cs or AssemblyInfo.vb file.
|
||||
|
||||
#### Provide scenario and impact information
|
||||
|
||||
Provide information about the scenario that manifests the bug and its impact. This information is highly important to the WPF team when it decides if, when, and how a problem should be fixed, or whether an acceptable workaround can be used instead.
|
||||
|
||||
Ordinarily, crash and data loss scenarios are high impact and, therefore, the easiest to prioritize. Some bugs, however, only show up in uncommon scenarios, which may also be mainline scenarios in some cases. Providing context around scenario and impact helps the WPF team make the right decision.
|
||||
|
||||
## See also
|
||||
|
||||
- [How to report a problem with Visual Studio](/visualstudio/ide/how-to-report-a-problem-with-visual-studio)
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: "Getting Started"
|
||||
description: Create desktop client applications with the UI framework of Windows Presentation Foundation (WPF), a subset of the .NET Framework.
|
||||
ms.date: "01/26/2018"
|
||||
helpviewer_keywords:
|
||||
- "getting started [WPF]"
|
||||
- "introduction [WPF]"
|
||||
- "WPF [WPF], getting started"
|
||||
ms.assetid: 04f91da8-708c-46c7-8172-f1695ec847cd
|
||||
---
|
||||
# Get started (WPF)
|
||||
|
||||
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. It is a subset of the .NET Framework, so if you have previously built applications with the .NET Framework 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. This section has topics that introduce and help you get started with WPF.
|
||||
|
||||
## Where should I start?
|
||||
|
||||
|||
|
||||
|-|-|
|
||||
|I want to jump right in…|[Walkthrough: My first WPF desktop application](walkthrough-my-first-wpf-desktop-application.md)|
|
||||
|How do I design the application UI?|[Designing XAML in Visual Studio](/visualstudio/designers/designing-xaml-in-visual-studio)|
|
||||
|New to .NET?|[Overview of the .NET Framework](/dotnet/framework/get-started/overview)<br /><br /> [Getting Started with Visual C# and Visual Basic](/visualstudio/ide/quickstart-visual-basic-console)|
|
||||
|Tell me more about WPF…|[Introduction to WPF in Visual Studio](introduction-to-wpf-in-vs.md)<br /><br /> [XAML Overview (WPF)](/dotnet/desktop-wpf/fundamentals/xaml)<br /><br /> [Controls](../controls/index.md)<br /><br /> [Data Binding Overview](/dotnet/desktop-wpf/data/data-binding-overview)|
|
||||
|Are you a Windows Forms developer?|[Windows Forms Controls and Equivalent WPF Controls](../advanced/windows-forms-controls-and-equivalent-wpf-controls.md)<br /><br /> [WPF and Windows Forms Interoperation](../advanced/wpf-and-windows-forms-interoperation.md)|
|
||||
|
||||
## See also
|
||||
|
||||
- [Class Library](../class-library-wpf.md)
|
||||
- [Application Development](../app-development/index.md)
|
||||
- [.NET Framework Developer Center](https://dotnet.microsoft.com)
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "Introduction to WPF in Visual Studio"
|
||||
titleSuffix: ""
|
||||
description: Build line-of-business desktop applications with the unified programming model provided in Windows Presentation Foundation (WPF).
|
||||
ms.date: "01/26/2018"
|
||||
helpviewer_keywords:
|
||||
- "typography [WPF]"
|
||||
- "media [WPF]"
|
||||
- "code-behind [WPF]"
|
||||
- "Windows Presentation Foundation [WPF], about Windows Presentation Foundation"
|
||||
- "2D shapes [WPF]"
|
||||
- "animation [WPF]"
|
||||
- "standalone applications [WPF]"
|
||||
- "markup [WPF]"
|
||||
- "2D effects [WPF]"
|
||||
- "browser-hosted applications [WPF]"
|
||||
- "WPF [WPF], about Windows Presentation Foundation"
|
||||
- "3D rendering [WPF]"
|
||||
ms.assetid: 582a314e-e23d-4144-b45b-acbbd5579252
|
||||
---
|
||||
# Introduction to WPF in Visual Studio
|
||||
Windows Presentation Foundation (WPF) in Visual Studio provides developers with a unified programming model for building line-of-business desktop applications on Windows.
|
||||
|
||||
[Create Desktop Applications with Windows Presentation Foundation](/visualstudio/designers/create-modern-desktop-applications-with-windows-presentation-foundation)
|
||||
|
||||
[Designing XAML in Visual Studio and Blend for Visual Studio](/visualstudio/designers/designing-xaml-in-visual-studio)
|
||||
|
||||
[Introduction to WPF](../introduction-to-wpf.md)
|
||||
|
||||
[WPF in the .NET Framework](../index.md)
|
||||
|
||||
[Get Visual Studio](https://aka.ms/vsdownload?utm_source=mscom&utm_campaign=msdocs)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
@@ -0,0 +1,13 @@
|
||||
- name: Getting Started
|
||||
href: index.md
|
||||
items:
|
||||
- name: Introduction to WPF in Visual Studio
|
||||
href: introduction-to-wpf-in-vs.md
|
||||
- name: What's New in WPF Version 4.5
|
||||
href: whats-new.md
|
||||
- name: "Walkthrough: My first WPF desktop application"
|
||||
href: walkthrough-my-first-wpf-desktop-application.md
|
||||
- name: WPF Walkthroughs
|
||||
href: wpf-walkthroughs.md
|
||||
- name: WPF Community Feedback
|
||||
href: community-feedback.md
|
||||
+496
@@ -0,0 +1,496 @@
|
||||
---
|
||||
title: Create your first WPF app in Visual Studio 2019 - .NET Framework
|
||||
titleSuffix: ""
|
||||
description: Develop a Windows Presentation Foundation (WPF) desktop application that includes elements common to most WPF applications.
|
||||
ms.date: 09/06/2019
|
||||
dev_langs:
|
||||
- "csharp"
|
||||
- "vb"
|
||||
helpviewer_keywords:
|
||||
- "getting started [WPF], WPF"
|
||||
- "WPF [WPF], getting started"
|
||||
ms.assetid: b96bed40-8946-4285-8fe4-88045ab854ed
|
||||
ms.topic: tutorial
|
||||
ms.custom: "mvc,vs-dotnet"
|
||||
---
|
||||
# Tutorial: Create your first WPF application in Visual Studio 2019
|
||||
|
||||
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.
|
||||
|
||||
In this tutorial, you learn how to:
|
||||
> [!div class="checklist"]
|
||||
>
|
||||
> - Create a WPF project.
|
||||
> - 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 tutorial, 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 in this tutorial is available for both Visual Basic and C# at [Tutorial WPF App Sample Code](https://github.com/Microsoft/WPF-Samples/tree/master/Getting%20Started/WalkthroughFirstWPFApp).
|
||||
>
|
||||
> You can toggle the code language of the sample code between C# and Visual Basic by using the language selector on top of this page.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/?utm_medium=microsoft&utm_source=docs.microsoft.com&utm_campaign=inline+link&utm_content=download+vs2019) with the **.NET desktop development** workload installed.
|
||||
|
||||
For more information about installing the latest version of Visual Studio, see [Install Visual Studio](/visualstudio/install/install-visual-studio).
|
||||
|
||||
## 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:
|
||||
|
||||
[!code-xaml[ExpenseIt#1_A](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt1_A/Application.xaml#1_a)]
|
||||
|
||||
And like the following in C#:
|
||||
|
||||
[!code-xaml[ExpenseIt#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt/App.xaml#1)]
|
||||
|
||||
3. Open *MainWindow.xaml*.
|
||||
|
||||
This XAML file is the main window of your application and displays content created in pages. The <xref:System.Windows.Window> class defines the properties of a window, such as its title, size, or icon, and handles events, such as closing or hiding.
|
||||
|
||||
4. Change the <xref:System.Windows.Window> element to a <xref:System.Windows.Navigation.NavigationWindow>, as shown in the following XAML:
|
||||
|
||||
```xaml
|
||||
<NavigationWindow x:Class="ExpenseIt.MainWindow"
|
||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
...
|
||||
</NavigationWindow>
|
||||
```
|
||||
|
||||
This app navigates to different content depending on the user input. This is why the main <xref:System.Windows.Window> needs to be changed to a <xref:System.Windows.Navigation.NavigationWindow>. <xref:System.Windows.Navigation.NavigationWindow> inherits all the properties of <xref:System.Windows.Window>. The <xref:System.Windows.Navigation.NavigationWindow> element in the XAML file creates an instance of the <xref:System.Windows.Navigation.NavigationWindow> class. For more information, see [Navigation overview](../app-development/navigation-overview.md).
|
||||
|
||||
5. Remove the <xref:System.Windows.Controls.Grid> elements from between the <xref:System.Windows.Navigation.NavigationWindow> tags.
|
||||
|
||||
6. Change the following properties in the XAML code for the <xref:System.Windows.Navigation.NavigationWindow> element:
|
||||
|
||||
- Set the <xref:System.Windows.Window.Title%2A> property to "`ExpenseIt`".
|
||||
|
||||
- Set the <xref:System.Windows.FrameworkElement.Height%2A> property to 350 pixels.
|
||||
|
||||
- Set the <xref:System.Windows.FrameworkElement.Width%2A> property to 500 pixels.
|
||||
|
||||
Your XAML should look like the following for Visual Basic:
|
||||
|
||||
[!code-xaml[ExpenseIt#2_A](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt/MainWindow.xaml#2_a)]
|
||||
|
||||
And like the following for C#:
|
||||
|
||||
[!code-xaml[ExpenseIt#2](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt/MainWindow.xaml#2)]
|
||||
|
||||
7. Open *MainWindow.xaml.vb* or *MainWindow.xaml.cs*.
|
||||
|
||||
This file is a code-behind file that contains code to handle the events declared in *MainWindow.xaml*. This file contains a partial class for the window defined in XAML.
|
||||
|
||||
8. If you're using C#, change the `MainWindow` class to derive from <xref:System.Windows.Navigation.NavigationWindow>. (In Visual Basic, this happens automatically when you change the window in XAML.) Your C# code should now look like this:
|
||||
|
||||
[!code-csharp[ExpenseIt#3](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt9/MainWindow.xaml.cs?highlight=21)]
|
||||
|
||||
## Add files to the application
|
||||
|
||||
In this section, you'll add two pages and an image to the application.
|
||||
|
||||
1. Add a new page to the project, and name it *`ExpenseItHome.xaml`*:
|
||||
|
||||
1. In **Solution Explorer**, right-click on the **`ExpenseIt`** project node and choose **Add** > **Page**.
|
||||
|
||||
1. In the **Add New Item** dialog, the **Page (WPF)** template is already selected. Enter the name **`ExpenseItHome`**, and then select **Add**.
|
||||
|
||||
This page is the first page that's displayed when the application is launched. It will show a list of people to select from, to show an expense report for.
|
||||
|
||||
1. Open *`ExpenseItHome.xaml`*.
|
||||
|
||||
1. Set the <xref:System.Windows.Controls.Page.Title%2A> to "`ExpenseIt - Home`".
|
||||
|
||||
1. Set the `DesignHeight` to 350 pixels and the `DesignWidth` to 500 pixels.
|
||||
|
||||
The XAML now appears as follows for Visual Basic:
|
||||
|
||||
[!code-xaml[ExpenseIt#6_A](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt1_A/ExpenseItHome.xaml#6_a)]
|
||||
|
||||
And like the following for C#:
|
||||
|
||||
[!code-xaml[ExpenseIt#6](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt2/ExpenseItHome.xaml#6)]
|
||||
|
||||
1. Open *MainWindow.xaml*.
|
||||
|
||||
1. Add a <xref:System.Windows.Navigation.NavigationWindow.Source%2A> property to the <xref:System.Windows.Navigation.NavigationWindow> element and set it to "`ExpenseItHome.xaml`".
|
||||
|
||||
This sets *`ExpenseItHome.xaml`* to be the first page opened when the application starts.
|
||||
|
||||
Example XAML in Visual Basic:
|
||||
|
||||
[!code-xaml[ExpenseIt#7_A](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt1_A/MainWindow.xaml#7_a)]
|
||||
|
||||
And in C#:
|
||||
|
||||
[!code-xaml[ExpenseIt#7](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt2/MainWindow.xaml#7)]
|
||||
|
||||
> [!TIP]
|
||||
> You can also set the **Source** property in the **Miscellaneous** category of the **Properties** window.
|
||||
>
|
||||
> 
|
||||
|
||||
1. Add another new WPF page to the project, and name it *ExpenseReportPage.xaml*::
|
||||
|
||||
1. In **Solution Explorer**, right-click on the **`ExpenseIt`** project node and choose **Add** > **Page**.
|
||||
|
||||
1. In the **Add New Item** dialog, select the **Page (WPF)** template. Enter the name **ExpenseReportPage**, and then select **Add**.
|
||||
|
||||
This page will show the expense report for the person that is selected on the **`ExpenseItHome`** page.
|
||||
|
||||
1. Open *ExpenseReportPage.xaml*.
|
||||
|
||||
1. Set the <xref:System.Windows.Controls.Page.Title%2A> to "`ExpenseIt - View Expense`".
|
||||
|
||||
1. Set the `DesignHeight` to 350 pixels and the `DesignWidth` to 500 pixels.
|
||||
|
||||
*ExpenseReportPage.xaml* now looks like the following in Visual Basic:
|
||||
|
||||
[!code-xaml[ExpenseIt#4_A](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt1_A/ExpenseReportPage.xaml#4_a)]
|
||||
|
||||
And like the following in C#:
|
||||
|
||||
[!code-xaml[ExpenseIt#4](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt/ExpenseReportPage.xaml#4)]
|
||||
|
||||
1. Open *ExpenseItHome.xaml.vb* and *ExpenseReportPage.xaml.vb*, or *ExpenseItHome.xaml.cs* and *ExpenseReportPage.xaml.cs*.
|
||||
|
||||
When you create a new Page file, Visual Studio automatically creates its *code-behind* file. These code-behind files handle the logic for responding to user input.
|
||||
|
||||
Your code should look like the following for **`ExpenseItHome`**:
|
||||
|
||||
[!code-csharp[ExpenseIt#2_5](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt2/ExpenseItHome.xaml.cs#2_5)]
|
||||
|
||||
[!code-vb[ExpenseIt#2_5](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt1_A/ExpenseItHome.xaml.vb#2_5)]
|
||||
|
||||
And like the following for **ExpenseReportPage**:
|
||||
|
||||
[!code-csharp[ExpenseIt#5](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt/ExpenseReportPage.xaml.cs#5)]
|
||||
|
||||
[!code-vb[ExpenseIt#5](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt1_A/ExpenseReportPage.xaml.vb#5)]
|
||||
|
||||
1. Add an image named *watermark.png* to the project. You can create your own image, copy the file from the sample code, or get it from the [microsoft/WPF-Samples](https://raw.githubusercontent.com/microsoft/WPF-Samples/master/Getting%20Started/WalkthroughFirstWPFApp/csharp/watermark.png) GitHub repository.
|
||||
|
||||
1. Right-click on the project node and select **Add** > **Existing Item**, or press **Shift**+**Alt**+**A**.
|
||||
|
||||
2. In the **Add Existing Item** dialog, set the file filter to either **All Files** or **Image Files**, browse to the image file you want to use, and then select **Add**.
|
||||
|
||||
## Build and run the application
|
||||
|
||||
1. To build and run the application, press **F5** or select **Start Debugging** from the **Debug** menu.
|
||||
|
||||
The following illustration shows the application with the <xref:System.Windows.Navigation.NavigationWindow> buttons:
|
||||
|
||||
|
||||
|
||||
2. Close the application to return to Visual Studio.
|
||||
|
||||
## Create the layout
|
||||
|
||||
Layout provides an ordered way to place UI elements, and also manages the size and position of those elements when a UI is resized. You typically create a layout with one of the following layout controls:
|
||||
|
||||
- <xref:System.Windows.Controls.Canvas> - Defines an area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.
|
||||
- <xref:System.Windows.Controls.DockPanel> - Defines an area where you can arrange child elements either horizontally or vertically, relative to each other.
|
||||
- <xref:System.Windows.Controls.Grid> - Defines a flexible grid area that consists of columns and rows.
|
||||
- <xref:System.Windows.Controls.StackPanel> - Arranges child elements into a single line that can be oriented horizontally or vertically.
|
||||
- <xref:System.Windows.Controls.VirtualizingStackPanel> - Arranges and virtualizes content on a single line that is oriented either horizontally or vertically.
|
||||
- <xref:System.Windows.Controls.WrapPanel> - Positions child elements in sequential position from left to right, breaking content to the next line at the edge of the containing box. Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.
|
||||
|
||||
Each of these layout controls supports a particular type of layout for its child elements. `ExpenseIt` pages can be resized, and each page has elements that are arranged horizontally and vertically alongside other elements. In this example, the <xref:System.Windows.Controls.Grid> is used as layout element for the application.
|
||||
|
||||
> [!TIP]
|
||||
> For more information about <xref:System.Windows.Controls.Panel> elements, see [Panels overview](../controls/panels-overview.md). For more information about layout, see [Layout](../advanced/layout.md).
|
||||
|
||||
In this section, you create a single-column table with three rows and a 10-pixel margin by adding column and row definitions to the <xref:System.Windows.Controls.Grid> in *`ExpenseItHome.xaml`*.
|
||||
|
||||
1. In *`ExpenseItHome.xaml`*, set the <xref:System.Windows.FrameworkElement.Margin%2A> property on the <xref:System.Windows.Controls.Grid> element to "10,0,10,10", which corresponds to left, top, right and bottom margins:
|
||||
|
||||
```xaml
|
||||
<Grid Margin="10,0,10,10">
|
||||
```
|
||||
|
||||
> [!TIP]
|
||||
> You can also set the **Margin** values in the **Properties** window, under the **Layout** category:
|
||||
>
|
||||
> 
|
||||
|
||||
2. Add the following XAML between the <xref:System.Windows.Controls.Grid> tags to create the row and column definitions:
|
||||
|
||||
[!code-xaml[ExpenseIt#8](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt3/ExpenseItHome.xaml#8)]
|
||||
|
||||
The <xref:System.Windows.Controls.RowDefinition.Height%2A> of two rows is set to <xref:System.Windows.GridLength.Auto%2A>, which means that the rows are sized based on the content in the rows. The default <xref:System.Windows.Controls.RowDefinition.Height%2A> is <xref:System.Windows.GridUnitType.Star> sizing, which means that the row height is a weighted proportion of the available space. For example if two rows each have a <xref:System.Windows.Controls.RowDefinition.Height%2A> of "*", they each have a height that is half of the available space.
|
||||
|
||||
Your <xref:System.Windows.Controls.Grid> should now contain the following XAML:
|
||||
|
||||
[!code-xaml[ExpenseIt#9](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt3/ExpenseItHome.xaml#9)]
|
||||
|
||||
## Add controls
|
||||
|
||||
In this section, you'll update the home page UI to show a list of people, where you select one person to display their expense report. Controls are UI objects that allow users to interact with your application. For more information, see [Controls](../controls/index.md).
|
||||
|
||||
To create this UI, you'll add the following elements to *`ExpenseItHome.xaml`*:
|
||||
|
||||
- A <xref:System.Windows.Controls.ListBox> (for the list of people).
|
||||
- A <xref:System.Windows.Controls.Label> (for the list header).
|
||||
- A <xref:System.Windows.Controls.Button> (to click to view the expense report for the person that is selected in the list).
|
||||
|
||||
Each control is placed in a row of the <xref:System.Windows.Controls.Grid> by setting the <xref:System.Windows.Controls.Grid.Row%2A?displayProperty=nameWithType> attached property. For more information about attached properties, see [Attached Properties Overview](../advanced/attached-properties-overview.md).
|
||||
|
||||
1. In *`ExpenseItHome.xaml`*, add the following XAML somewhere between the <xref:System.Windows.Controls.Grid> tags:
|
||||
|
||||
[!code-xaml[ExpenseIt#10](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt4/ExpenseItHome.xaml#10)]
|
||||
|
||||
> [!TIP]
|
||||
> You can also create the controls by dragging them from the **Toolbox** window onto the design window, and then setting their properties in the **Properties** window.
|
||||
|
||||
2. Build and run the application.
|
||||
|
||||
The following illustration shows the controls you created:
|
||||
|
||||
|
||||
|
||||
## Add an image and a title
|
||||
|
||||
In this section, you'll update the home page UI with an image and a page title.
|
||||
|
||||
1. In *`ExpenseItHome.xaml`*, add another column to the <xref:System.Windows.Controls.Grid.ColumnDefinitions%2A> with a fixed <xref:System.Windows.Controls.ColumnDefinition.Width%2A> of 230 pixels:
|
||||
|
||||
[!code-xaml[ExpenseIt#11](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt9/ExpenseItHome.xaml?highlight=2#NewColumn)]
|
||||
|
||||
2. Add another row to the <xref:System.Windows.Controls.Grid.RowDefinitions%2A>, for a total of four rows:
|
||||
|
||||
[!code-xaml[ExpenseIt#11b](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt9/ExpenseItHome.xaml?highlight=2#NewRows)]
|
||||
|
||||
3. Move the controls to the second column by setting the <xref:System.Windows.Controls.Grid.Column%2A?displayProperty=nameWithType> property to 1 in each of the three controls (Border, ListBox, and Button).
|
||||
|
||||
4. Move each control down a row by incrementing its <xref:System.Windows.Controls.Grid.Row%2A?displayProperty=nameWithType> value by 1 for each of the three controls (Border, ListBox, and Button) and for the Border element.
|
||||
|
||||
The XAML for the three controls now looks like the following:
|
||||
|
||||
[!code-xaml[ExpenseIt#12](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt5/ExpenseItHome.xaml#12)]
|
||||
|
||||
5. Set the <xref:System.Windows.Controls.Panel.Background%2A?displayProperty=nameWithType> property to the *watermark.png* image file, by adding the following XAML anywhere between the `<Grid>` and `</Grid>` tags:
|
||||
|
||||
[!code-xaml[ExpenseIt#14](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt5/ExpenseItHome.xaml#14)]
|
||||
|
||||
6. Before the <xref:System.Windows.Controls.Border> element, add a <xref:System.Windows.Controls.Label> with the content "View Expense Report". This label is the title of the page.
|
||||
|
||||
[!code-xaml[ExpenseIt#13](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt5/ExpenseItHome.xaml#13)]
|
||||
|
||||
7. Build and run the application.
|
||||
|
||||
The following illustration shows the results of what you just added:
|
||||
|
||||
|
||||
|
||||
## Add code to handle events
|
||||
|
||||
1. In *`ExpenseItHome.xaml`*, add a <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event handler to the <xref:System.Windows.Controls.Button> element. For more information, see [How to: Create a simple event handler](https://docs.microsoft.com/previous-versions/visualstudio/visual-studio-2010/bb675300(v=vs.100)).
|
||||
|
||||
[!code-xaml[ExpenseIt#15](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt6/ExpenseItHome.xaml#15)]
|
||||
|
||||
2. Open *`ExpenseItHome.xaml.vb`* or *`ExpenseItHome.xaml.cs`*.
|
||||
|
||||
3. Add the following code to the `ExpenseItHome` class to add a button click event handler. The event handler opens the **ExpenseReportPage** page.
|
||||
|
||||
[!code-csharp[ExpenseIt#16](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt6/ExpenseItHome.xaml.cs#16)]
|
||||
[!code-vb[ExpenseIt#16](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt6/ExpenseItHome.xaml.vb#16)]
|
||||
|
||||
## Create the UI for ExpenseReportPage
|
||||
|
||||
*ExpenseReportPage.xaml* displays the expense report for the person that's selected on the **`ExpenseItHome`** page. In this section, you'll create the UI for **ExpenseReportPage**. You'll also add background and fill colors to the various UI elements.
|
||||
|
||||
1. Open *ExpenseReportPage.xaml*.
|
||||
|
||||
2. Add the following XAML between the <xref:System.Windows.Controls.Grid> tags:
|
||||
|
||||
[!code-xaml[ExpenseIt#17](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt6/ExpenseReportPage.xaml#17)]
|
||||
|
||||
This UI is similar to *`ExpenseItHome.xaml`*, except the report data is displayed in a <xref:System.Windows.Controls.DataGrid>.
|
||||
|
||||
3. Build and run the application.
|
||||
|
||||
4. Select the **View** button.
|
||||
|
||||
The expense report page appears. Also notice that the back navigation button is enabled.
|
||||
|
||||
The following illustration shows the UI elements added to *ExpenseReportPage.xaml*.
|
||||
|
||||
|
||||
|
||||
## Style controls
|
||||
|
||||
The appearance of various elements is often the same for all elements of the same type in a UI. UI uses [styles](/dotnet/desktop-wpf/fundamentals/styles-templates-overview) to make appearances reusable across multiple elements. The reusability of styles helps to simplify XAML creation and management. This section replaces the per-element attributes that were defined in previous steps with styles.
|
||||
|
||||
1. Open *Application.xaml* or *App.xaml*.
|
||||
|
||||
2. Add the following XAML between the <xref:System.Windows.Application.Resources%2A?displayProperty=nameWithType> tags:
|
||||
|
||||
[!code-xaml[ExpenseIt#18](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt7/App.xaml#18)]
|
||||
|
||||
This XAML adds the following styles:
|
||||
|
||||
- `headerTextStyle`: To format the page title <xref:System.Windows.Controls.Label>.
|
||||
|
||||
- `labelStyle`: To format the <xref:System.Windows.Controls.Label> controls.
|
||||
|
||||
- `columnHeaderStyle`: To format the <xref:System.Windows.Controls.Primitives.DataGridColumnHeader>.
|
||||
|
||||
- `listHeaderStyle`: To format the list header <xref:System.Windows.Controls.Border> controls.
|
||||
|
||||
- `listHeaderTextStyle`: To format the list header <xref:System.Windows.Controls.Label>.
|
||||
|
||||
- `buttonStyle`: To format the <xref:System.Windows.Controls.Button> on `ExpenseItHome.xaml`.
|
||||
|
||||
Notice that the styles are resources and children of the <xref:System.Windows.Application.Resources%2A?displayProperty=nameWithType> property element. In this location, the styles are applied to all the elements in an application. For an example of using resources in a .NET app, see [Use Application Resources](../advanced/how-to-use-application-resources.md).
|
||||
|
||||
3. In *`ExpenseItHome.xaml`*, replace everything between the <xref:System.Windows.Controls.Grid> elements with the following XAML:
|
||||
|
||||
[!code-xaml[ExpenseIt#19](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt7/ExpenseItHome.xaml#19)]
|
||||
|
||||
The properties such as <xref:System.Windows.VerticalAlignment> and <xref:System.Windows.Media.FontFamily> that define the look of each control are removed and replaced by applying the styles. For example, the `headerTextStyle` is applied to the "View Expense Report" <xref:System.Windows.Controls.Label>.
|
||||
|
||||
4. Open *ExpenseReportPage.xaml*.
|
||||
|
||||
5. Replace everything between the <xref:System.Windows.Controls.Grid> elements with the following XAML:
|
||||
|
||||
[!code-xaml[ExpenseIt#20](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt7/ExpenseReportPage.xaml#20)]
|
||||
|
||||
This XAML adds styles to the <xref:System.Windows.Controls.Label> and <xref:System.Windows.Controls.Border> elements.
|
||||
|
||||
6. Build and run the application. The window appearance is the same as previously.
|
||||
|
||||
|
||||
|
||||
7. Close the application to return to Visual Studio.
|
||||
|
||||
## Bind data to a control
|
||||
|
||||
In this section, you'll create the XML data that is bound to various controls.
|
||||
|
||||
1. In *`ExpenseItHome.xaml`*, after the opening <xref:System.Windows.Controls.Grid> element, add the following XAML to create an <xref:System.Windows.Data.XmlDataProvider> that contains the data for each person:
|
||||
|
||||
[!code-xaml[ExpenseIt#23](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt8/ExpenseItHome.xaml?range=13,16-40,49)]
|
||||
|
||||
The data is created as a <xref:System.Windows.Controls.Grid> resource. Normally this data would be loaded as a file, but for simplicity the data is added inline.
|
||||
|
||||
2. Within the `<Grid.Resources>` element, add the following `<xref:System.Windows.DataTemplate>` element, which defines how to display the data in the <xref:System.Windows.Controls.ListBox>, after the `<XmlDataProvider>` element:
|
||||
|
||||
[!code-xaml[ExpenseIt#24](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt8/ExpenseItHome.xaml?range=13,43-46,49)]
|
||||
|
||||
For more information about data templates, see [Data templating overview](../data/data-templating-overview.md).
|
||||
|
||||
3. Replace the existing <xref:System.Windows.Controls.ListBox> with the following XAML:
|
||||
|
||||
[!code-xaml[ExpenseIt#25](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt8/ExpenseItHome.xaml#25)]
|
||||
|
||||
This XAML binds the <xref:System.Windows.Controls.ItemsControl.ItemsSource%2A> property of the <xref:System.Windows.Controls.ListBox> to the data source and applies the data template as the <xref:System.Windows.Controls.ItemsControl.ItemTemplate%2A>.
|
||||
|
||||
## Connect data to controls
|
||||
|
||||
Next, you'll add code to retrieve the name that's selected on the **`ExpenseItHome`** page and pass it to the constructor of **ExpenseReportPage**. **ExpenseReportPage** sets its data context with the passed item, which is what the controls defined in *ExpenseReportPage.xaml* bind to.
|
||||
|
||||
1. Open *ExpenseReportPage.xaml.vb* or *ExpenseReportPage.xaml.cs*.
|
||||
|
||||
2. Add a constructor that takes an object so you can pass the expense report data of the selected person.
|
||||
|
||||
[!code-csharp[ExpenseIt#26](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt8/ExpenseReportPage.xaml.cs#26)]
|
||||
[!code-vb[ExpenseIt#26](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt8/ExpenseReportPage.xaml.vb#26)]
|
||||
|
||||
3. Open *`ExpenseItHome.xaml.vb`* or *`ExpenseItHome.xaml.cs`*.
|
||||
|
||||
4. Change the <xref:System.Windows.Controls.Primitives.ButtonBase.Click> event handler to call the new constructor passing the expense report data of the selected person.
|
||||
|
||||
[!code-csharp[ExpenseIt#27](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt8/ExpenseItHome.xaml.cs#27)]
|
||||
[!code-vb[ExpenseIt#27](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ExpenseIt/VB/ExpenseIt8/ExpenseItHome.xaml.vb#27)]
|
||||
|
||||
## Style data with data templates
|
||||
|
||||
In this section, you'll update the UI for each item in the data-bound lists by using data templates.
|
||||
|
||||
1. Open *ExpenseReportPage.xaml*.
|
||||
|
||||
2. Bind the content of the "Name" and "Department" <xref:System.Windows.Controls.Label> elements to the appropriate data source property. For more information about data binding, see [Data binding overview](/dotnet/desktop-wpf/data/data-binding-overview).
|
||||
|
||||
[!code-xaml[ExpenseIt#31](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt9/ExpenseReportPage.xaml#31)]
|
||||
|
||||
3. After the opening <xref:System.Windows.Controls.Grid> element, add the following data templates, which define how to display the expense report data:
|
||||
|
||||
[!code-xaml[ExpenseIt#30](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt9/ExpenseReportPage.xaml#30)]
|
||||
|
||||
4. Replace the <xref:System.Windows.Controls.DataGridTextColumn> elements with <xref:System.Windows.Controls.DataGridTemplateColumn> under the <xref:System.Windows.Controls.DataGrid> element and apply the templates to them.
|
||||
|
||||
[!code-xaml[ExpenseIt#32](~/samples/snippets/csharp/VS_Snippets_Wpf/ExpenseIt/CSharp/ExpenseIt9/ExpenseReportPage.xaml#32)]
|
||||
|
||||
5. Build and run the application.
|
||||
|
||||
6. Select a person and then select the **View** button.
|
||||
|
||||
The following illustration shows both pages of the `ExpenseIt` application with controls, layout, styles, data binding, and data templates applied:
|
||||
|
||||
|
||||
|
||||
> [!NOTE]
|
||||
> This sample demonstrates a specific feature of WPF and doesn't follow all best practices for things like security, localization, and accessibility. For comprehensive coverage of WPF and the .NET app development best practices, see the following topics:
|
||||
>
|
||||
> - [Accessibility](/dotnet/framework/ui-automation/accessibility-best-practices)
|
||||
> - [Security](../security-wpf.md)
|
||||
> - [WPF globalization and localization](../advanced/wpf-globalization-and-localization-overview.md)
|
||||
> - [WPF performance](../advanced/optimizing-wpf-application-performance.md)
|
||||
|
||||
## Next steps
|
||||
|
||||
In this walkthrough you learned a number of techniques for creating a UI using Windows Presentation Foundation (WPF). You should now have a basic understanding of the building blocks of a data-bound .NET app. For more information about the WPF architecture and programming models, see the following topics:
|
||||
|
||||
- [WPF architecture](../advanced/wpf-architecture.md)
|
||||
- [XAML overview (WPF)](/dotnet/desktop-wpf/fundamentals/xaml)
|
||||
- [Dependency properties overview](../advanced/dependency-properties-overview.md)
|
||||
- [Layout](../advanced/layout.md)
|
||||
|
||||
For more information about creating applications, see the following topics:
|
||||
|
||||
- [Application development](../app-development/index.md)
|
||||
- [Controls](../controls/index.md)
|
||||
- [Data binding overview](/dotnet/desktop-wpf/data/data-binding-overview)
|
||||
- [Graphics and multimedia](../graphics-multimedia/index.md)
|
||||
- [Documents in WPF](../advanced/documents-in-wpf.md)
|
||||
|
||||
## See also
|
||||
|
||||
- [Panels overview](../controls/panels-overview.md)
|
||||
- [Data templating overview](../data/data-templating-overview.md)
|
||||
- [Build a WPF application](../app-development/building-a-wpf-application-wpf.md)
|
||||
- [Styles and templates](../controls/styles-and-templates.md)
|
||||
@@ -0,0 +1,125 @@
|
||||
---
|
||||
title: "What's New in WPF Version 4.5"
|
||||
titleSuffix: ""
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "Windows Presentation Foundation [WPF], what's new"
|
||||
- "WPF [WPF], what's new"
|
||||
ms.assetid: db086ae4-70bb-4862-95db-2eaca5216bc3
|
||||
---
|
||||
# What's New in WPF Version 4.5
|
||||
<a name="introduction"></a> This topic contains information about new and enhanced features in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] version 4.5.
|
||||
|
||||
This topic contains the following sections:
|
||||
|
||||
- [Ribbon control](#ribbon_control)
|
||||
|
||||
- [Improved performance when displaying large sets of grouped data](#grouped_virtualization)
|
||||
|
||||
- [New features for the VirtualizingPanel](#VirtualizingPanel)
|
||||
|
||||
- [Binding to static properties](#static_properties)
|
||||
|
||||
- [Accessing collections on non-UI Threads](#xthread_access)
|
||||
|
||||
- [Synchronously and Asynchronously validating data](#INotifyDataErrorInfo)
|
||||
|
||||
- [Automatically updating the source of a data binding](#delay)
|
||||
|
||||
- [Binding to types that Implement ICustomTypeProvider](#ICustomTypeProvider)
|
||||
|
||||
- [Retrieving data binding information from a binding expression](#binding_state)
|
||||
|
||||
- [Checking for a valid DataContext object](#DisconnectedSource)
|
||||
|
||||
- [Repositioning data as the data's values change (Live shaping)](#live_shaping)
|
||||
|
||||
- [Improved Support for Establishing a Weak Reference to an Event](#weak_event_pattern)
|
||||
|
||||
- [New methods for the Dispatcher class](#async)
|
||||
|
||||
- [Markup Extensions for Events](#events_markup_extenions)
|
||||
|
||||
<a name="ribbon_control"></a>
|
||||
## Ribbon control
|
||||
WPF 4.5 ships with a <xref:System.Windows.Controls.Ribbon.Ribbon> control that hosts a Quick Access Toolbar, Application Menu, and tabs. For more information, see the [Ribbon Overview](/visualstudio/vsto/ribbon-overview).
|
||||
|
||||
<a name="grouped_virtualization"></a>
|
||||
## Improved performance when displaying large sets of grouped data
|
||||
UI virtualization occurs when a subset of user interface (UI) elements are generated from a larger number of data items based on which items are visible on the screen. The <xref:System.Windows.Controls.VirtualizingPanel> defines the <xref:System.Windows.Controls.VirtualizingPanel.IsVirtualizingWhenGrouping%2A> attached property that enables UI Virtualization for grouped data. For more information about grouping data, see How to: Sort and Group Data Using a View in XAML. For more information about virtualizing grouped data, see the <xref:System.Windows.Controls.VirtualizingPanel.IsVirtualizingWhenGrouping%2A> attached property.
|
||||
|
||||
<a name="VirtualizingPanel"></a>
|
||||
## New features for the VirtualizingPanel
|
||||
|
||||
1. You can specify whether a <xref:System.Windows.Controls.VirtualizingPanel>, such as the <xref:System.Windows.Controls.VirtualizingStackPanel>, displays partial items by using the <xref:System.Windows.Controls.VirtualizingPanel.ScrollUnit%2A> attached property. If <xref:System.Windows.Controls.VirtualizingPanel.ScrollUnit%2A> is set to <xref:System.Windows.Controls.ScrollUnit.Item>, the <xref:System.Windows.Controls.VirtualizingPanel> will only display items that are completely visible. If <xref:System.Windows.Controls.VirtualizingPanel.ScrollUnit%2A> is set to <xref:System.Windows.Controls.ScrollUnit.Pixel>, the <xref:System.Windows.Controls.VirtualizingPanel> can display partially visible items.
|
||||
|
||||
2. You can specify the size of the cache before and after the viewport when the <xref:System.Windows.Controls.VirtualizingPanel> is virtualizing by using the <xref:System.Windows.Controls.VirtualizingPanel.CacheLength%2A> attached property. The cache is the amount of space above or below the viewport in which items are not virtualized. Using a cache to avoid generating UI elements as they’re scrolled into view can improve performance. The cache is populated at a lower priority so that the application does not become unresponsive during the operation. The <xref:System.Windows.Controls.VirtualizingPanel.CacheLengthUnit%2A?displayProperty=nameWithType> property determines the unit of measurement that is used by <xref:System.Windows.Controls.VirtualizingPanel.CacheLength%2A?displayProperty=nameWithType>.
|
||||
|
||||
<a name="static_properties"></a>
|
||||
## Binding to static properties
|
||||
You can use static properties as the source of a data binding. The data binding engine recognizes when the property's value changes if a static event is raised. For example, if the class `SomeClass` defines a static property called `MyProperty`, `SomeClass` can define a static event that is raised when the value of `MyProperty` changes. The static event can use either of the following signatures.
|
||||
|
||||
- `public static event EventHandler MyPropertyChanged;`
|
||||
|
||||
- `public static event EventHandler<PropertyChangedEventArgs> StaticPropertyChanged;`
|
||||
|
||||
Note that in the first case, the class exposes a static event named *PropertyName*`Changed` that passes <xref:System.EventArgs> to the event handler. In the second case, the class exposes a static event named `StaticPropertyChanged` that passes <xref:System.ComponentModel.PropertyChangedEventArgs> to the event handler. A class that implements the static property can choose to raise property-change notifications using either method.
|
||||
|
||||
<a name="xthread_access"></a>
|
||||
## Accessing collections on non-UI Threads
|
||||
WPF enables you to access and modify data collections on threads other than the one that created the collection. This enables you to use a background thread to receive data from an external source, such as a database, and display the data on the UI thread. By using another thread to modify the collection, your user interface remains responsive to user interaction.
|
||||
|
||||
<a name="INotifyDataErrorInfo"></a>
|
||||
## Synchronously and Asynchronously validating data
|
||||
The <xref:System.ComponentModel.INotifyDataErrorInfo> interface enables data entity classes to implement custom validation rules and expose validation results asynchronously. This interface also supports custom error objects, multiple errors per property, cross-property errors, and entity-level errors. For more information, see <xref:System.ComponentModel.INotifyDataErrorInfo>.
|
||||
|
||||
<a name="delay"></a>
|
||||
## Automatically updating the source of a data binding
|
||||
If you use a data binding to update a data source, you can use the <xref:System.Windows.Data.BindingBase.Delay%2A> property to specify an amount of time to pass after the property changes on the target before the source updates. For example, suppose that you have a <xref:System.Windows.Controls.Slider> that has its <xref:System.Windows.Controls.Primitives.RangeBase.Value%2A> property data two-way bound to a property of a data object and the <xref:System.Windows.Data.Binding.UpdateSourceTrigger%2A> property is set to <xref:System.Windows.Data.UpdateSourceTrigger.PropertyChanged>. In this example, when the user moves the <xref:System.Windows.Controls.Slider>, the source updates for each pixel that the <xref:System.Windows.Controls.Slider> moves. The source object typically needs the value of the slider only when the slider's <xref:System.Windows.Controls.Primitives.RangeBase.Value%2A> stops changing. To prevent updating the source too often, use <xref:System.Windows.Data.BindingBase.Delay%2A> to specify that the source should not be updated until a certain amount of time elapses after the thumb stops moving.
|
||||
|
||||
<a name="ICustomTypeProvider"></a>
|
||||
## Binding to types that Implement ICustomTypeProvider
|
||||
WPF supports data binding to objects that implement <xref:System.Reflection.ICustomTypeProvider>, also known as custom types. You can use custom types in the following cases.
|
||||
|
||||
1. As a <xref:System.Windows.PropertyPath> in a data binding. For example, the <xref:System.Windows.Data.Binding.Path%2A> property of a <xref:System.Windows.Data.Binding> can reference a property of a custom type.
|
||||
|
||||
2. As the value of the <xref:System.Windows.DataTemplate.DataType%2A> property.
|
||||
|
||||
3. As a type that determines the automatically generated columns in a <xref:System.Windows.Controls.DataGrid>.
|
||||
|
||||
<a name="binding_state"></a>
|
||||
## Retrieving data binding information from a binding expression
|
||||
In certain cases, you might get the <xref:System.Windows.Data.BindingExpression> of a <xref:System.Windows.Data.Binding> and need information about the source and target objects of the binding. New APIs have been added to enable you to get the source or target object or the associated property. When you have a <xref:System.Windows.Data.BindingExpression>, use the following APIs to get information about the target and source.
|
||||
|
||||
|To find this value of the binding|Use this API|
|
||||
|---------------------------------------|------------------|
|
||||
|The target object|<xref:System.Windows.Data.BindingExpressionBase.Target%2A?displayProperty=nameWithType>|
|
||||
|The target property|<xref:System.Windows.Data.BindingExpressionBase.TargetProperty%2A?displayProperty=nameWithType>|
|
||||
|The source object|<xref:System.Windows.Data.BindingExpression.ResolvedSource%2A?displayProperty=nameWithType>|
|
||||
|The source property|<xref:System.Windows.Data.BindingExpression.ResolvedSourcePropertyName%2A?displayProperty=nameWithType>|
|
||||
|Whether the <xref:System.Windows.Data.BindingExpression> belongs to a <xref:System.Windows.Data.BindingGroup>|<xref:System.Windows.Data.BindingExpressionBase.BindingGroup%2A?displayProperty=nameWithType>|
|
||||
|The owner of a <xref:System.Windows.Data.BindingGroup>|<xref:System.Windows.Data.BindingGroup.Owner%2A>|
|
||||
|
||||
<a name="DisconnectedSource"></a>
|
||||
## Checking for a valid DataContext object
|
||||
There are cases where the <xref:System.Windows.FrameworkElement.DataContext%2A> of an item container in an <xref:System.Windows.Controls.ItemsControl> becomes disconnected. An item container is the UI element that displays an item in an <xref:System.Windows.Controls.ItemsControl>. When an <xref:System.Windows.Controls.ItemsControl> is data bound to a collection, an item container is generated for each item. In some cases, item containers are removed from the visual tree. Two typical cases where an item container is removed are when an item is removed from the underlying collection and when virtualization is enabled on the <xref:System.Windows.Controls.ItemsControl>. In these cases, the <xref:System.Windows.FrameworkElement.DataContext%2A> property of the item container will be set to the sentinel object that is returned by the <xref:System.Windows.Data.BindingOperations.DisconnectedSource%2A?displayProperty=nameWithType> static property. You should check whether the <xref:System.Windows.FrameworkElement.DataContext%2A> is equal to the <xref:System.Windows.Data.BindingOperations.DisconnectedSource%2A> object before accessing the <xref:System.Windows.FrameworkElement.DataContext%2A> of an item container.
|
||||
|
||||
<a name="live_shaping"></a>
|
||||
## Repositioning data as the data's values change (Live shaping)
|
||||
A collection of data can be grouped, sorted, or filtered. WPF 4.5 enables the data to be rearranged when the data is modified. For example, suppose that an application uses a <xref:System.Windows.Controls.DataGrid> to list stocks in a stock market and the stocks are sorted by stock value. If live sorting is enabled on the stocks' <xref:System.Windows.Data.CollectionView>, a stock's position in the <xref:System.Windows.Controls.DataGrid> moves when the value of the stock becomes greater or less than another stock's value. For more information, see the <xref:System.ComponentModel.ICollectionViewLiveShaping> interface.
|
||||
|
||||
<a name="weak_event_pattern"></a>
|
||||
## Improved Support for Establishing a Weak Reference to an Event
|
||||
Implementing the weak event pattern is now easier because subscribers to events can participate in it without implementing an extra interface. The generic <xref:System.Windows.WeakEventManager> class also enables subscribers to participate in the weak event pattern if a dedicated <xref:System.Windows.WeakEventManager> does not exist for a certain event. For more information, see [Weak Event Patterns](../advanced/weak-event-patterns.md).
|
||||
|
||||
<a name="async"></a>
|
||||
## New methods for the Dispatcher class
|
||||
The Dispatcher class defines new methods for synchronous and asynchronous operations. The synchronous <xref:System.Windows.Threading.Dispatcher.Invoke%2A> method defines overloads that take an <xref:System.Action> or <xref:System.Func%601> parameter. The new asynchronous method, <xref:System.Windows.Threading.Dispatcher.InvokeAsync%2A>, also takes an <xref:System.Action> or <xref:System.Func%601> as the callback parameter and returns a <xref:System.Windows.Threading.DispatcherOperation> or <xref:System.Windows.Threading.DispatcherOperation%601>. The <xref:System.Windows.Threading.DispatcherOperation> and <xref:System.Windows.Threading.DispatcherOperation%601> classes define a <xref:System.Threading.Tasks.Task> property. When you call <xref:System.Windows.Threading.Dispatcher.InvokeAsync%2A>, you can use the `await` keyword with either the <xref:System.Windows.Threading.DispatcherOperation> or the associated <xref:System.Threading.Tasks.Task>. If you need to wait synchronously for the <xref:System.Threading.Tasks.Task> that is returned by a <xref:System.Windows.Threading.DispatcherOperation> or <xref:System.Windows.Threading.DispatcherOperation%601>, call the <xref:System.Windows.Threading.TaskExtensions.DispatcherOperationWait%2A> extension method. Calling <xref:System.Threading.Tasks.Task.Wait%2A?displayProperty=nameWithType> will result in a deadlock if the operation is queued on a calling thread. For more information about using a <xref:System.Threading.Tasks.Task> to perform asynchronous operations, see [Task Parallelism (Task Parallel Library)](/dotnet/standard/parallel-programming/task-based-asynchronous-programming).
|
||||
|
||||
<a name="events_markup_extenions"></a>
|
||||
## Markup Extensions for Events
|
||||
WPF 4.5 supports markup extensions for events. While WPF does not define a markup extension to be used for events, third parties are able to create a markup extension that can be used with events.
|
||||
|
||||
## See also
|
||||
|
||||
- [What's New in the .NET Framework](/dotnet/framework/whats-new/index)
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: "Walkthroughs"
|
||||
description: Use these step-by-step instructions for common scenarios about the WPF product or a particular feature area.
|
||||
ms.date: "03/30/2017"
|
||||
helpviewer_keywords:
|
||||
- "walkthroughs [WPF]"
|
||||
- "WPF walkthroughs [WPF]"
|
||||
ms.assetid: c29bde96-0389-4aff-a9fb-cd678f66b7f7
|
||||
---
|
||||
# WPF Walkthroughs
|
||||
Walkthroughs give step-by-step instructions for common scenarios. This makes them a good place to start learning about the product or a particular feature area.
|
||||
|
||||
This topic contains links to Windows Presentation Foundation (WPF) walkthroughs.
|
||||
|
||||
## WPF Designer Walkthroughs
|
||||
|
||||
|Title|Description|
|
||||
|-----------|-----------------|
|
||||
|[Walkthrough: Building a Simple WPF Application with the WPF Designer](https://docs.microsoft.com/previous-versions/visualstudio/visual-studio-2010/bb546972(v=vs.100))|Demonstrates how to build a simple WPF application with the WPF Designer.|
|
||||
|[Walkthrough: Constructing a Dynamic Layout](https://docs.microsoft.com/previous-versions/visualstudio/visual-studio-2010/bb514519(v=vs.100))|Demonstrates creating a dynamic layout by using a <xref:System.Windows.Controls.Grid> panel control.|
|
||||
|[Walkthrough: Creating a Resizable Application by Using the WPF Designer](https://docs.microsoft.com/previous-versions/visualstudio/visual-studio-2010/bb546954(v=vs.100))|Demonstrates how to create window layouts that are resizable by the user at run time.|
|
||||
|[Walkthrough: Creating a Data Binding by Using the WPF Designer](https://docs.microsoft.com/previous-versions/visualstudio/visual-studio-2010/dd434207(v=vs.100))|Demonstrates how to use the WPF Designer to create data bindings that connect data to a control.|
|
||||
|[Walkthrough: Using a DesignInstance to Bind to Data in the Designer](https://docs.microsoft.com/previous-versions/visualstudio/visual-studio-2010/dd490796(v=vs.100))|Demonstrates how to use the WPF Designer to create data bindings at design time for a data context that is assigned at run time.|
|
||||
|
||||
## WPF Walkthroughs
|
||||
|
||||
|Title|Description|
|
||||
|-----------|-----------------|
|
||||
|[Walkthrough: My first WPF desktop application](walkthrough-my-first-wpf-desktop-application.md)|Demonstrates creating a WPF application using many of the common features of WPF including controls, layout and data binding.|
|
||||
|[Create a Button by Using XAML](../controls/walkthrough-create-a-button-by-using-xaml.md)|Demonstrates how to create an animated button.|
|
||||
|[Create a Button by Using Microsoft Expression Blend](../controls/walkthrough-create-a-button-by-using-microsoft-expression-blend.md)|Demonstrates the process of creating a customized button by using Microsoft Expression Blend.|
|
||||
|[Walkthrough: Display Data from a SQL Server Database in a DataGrid Control](../controls/walkthrough-display-data-from-a-sql-server-database-in-a-datagrid-control.md)|Demonstrates how to retrieve data from a SQL Server database and display that data in a <xref:System.Windows.Controls.DataGrid> control.|
|
||||
|
||||
## Migration and Interoperability in WPF
|
||||
|
||||
|Title|Description|
|
||||
|-----------|-----------------|
|
||||
|[Walkthrough: Hosting a Windows Forms Control in WPF](../advanced/walkthrough-hosting-a-windows-forms-control-in-wpf.md)|Demonstrates how to host a Windows Forms <xref:System.Windows.Forms.MaskedTextBox?displayProperty=nameWithType> control in a WPF application.|
|
||||
|[Walkthrough: Hosting a Windows Forms Composite Control in WPF](../advanced/walkthrough-hosting-a-windows-forms-composite-control-in-wpf.md)|Demonstrates how to host a Windows Forms data-entry composite control in a [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] application.|
|
||||
|[Walkthrough: Hosting a WPF Composite Control in Windows Forms](../advanced/walkthrough-hosting-a-wpf-composite-control-in-windows-forms.md)|Demonstrates how to host a WPF data-entry composite control in a Windows Forms application.|
|
||||
|[Walkthrough: Arranging Windows Forms Controls in WPF](../advanced/walkthrough-arranging-windows-forms-controls-in-wpf.md)|Demonstrates how to use WPF layout features to arrange Windows Forms controls in a hybrid application.|
|
||||
|[Walkthrough: Binding to Data in Hybrid Applications](../advanced/walkthrough-binding-to-data-in-hybrid-applications.md)|Demonstrates how to use data binding in hybrid applications that include both Windows Forms and WPF controls.|
|
||||
|
||||
## Related Sections
|
||||
|
||||
|Title|Description|
|
||||
|-----------|-----------------|
|
||||
|[Visual Studio Walkthroughs](https://docs.microsoft.com/previous-versions/visualstudio/visual-studio-2010/szatc41e(v=vs.100))|Gives a related list of walkthroughs for all areas of programming in Visual Studio.|
|
||||
Reference in New Issue
Block a user