チュートリアル: WPF アプリの最新化Tutorial: Modernize a WPF app

アプリを最初から書き換えるのではなく、最新の Windows 機能を既存のソースコードに統合することによって、既存のデスクトップアプリを最新化する方法は多数あります。There are many ways to modernize existing desktop apps by integrating the latest Windows features into the existing source code instead of rewriting the apps from scratch. このチュートリアルでは、次の機能を使用して、既存の WPF 基幹業務アプリを最新化するためのいくつかの方法について説明します。In this tutorial we'll explore several ways to modernize an existing WPF line-of-business app by using these features:

  • .NET Core 3.NET Core 3
  • XAML アイランドを使用した UWP XAML コントロールUWP XAML controls with XAML Islands
  • アダプティブカードと Windows 10 の通知Adaptive Cards and Windows 10 notifications
  • MSIX の展開MSIX deployment

このチュートリアルでは、次の開発スキルが必要です。This tutorial requires the following development skills:

  • WPF を使用した Windows デスクトップアプリの開発に関する経験があります。Experience in developing Windows desktop apps with WPF.
  • および XAML にC#関する基本的な知識。Basic knowledge of C# and XAML.
  • UWP の基本的な知識。Basic knowledge of UWP.

概要Overview

このチュートリアルでは、Contoso の経費という単純な WPF 基幹業務アプリのコードを提供します。This tutorial provides the code for a simple WPF line-of-business app named Contoso Expenses. このチュートリアルの架空のシナリオでは、contoso 社の支出は、レポートによって送信された経費を追跡するために Contoso Corporation のマネージャーによって使用される内部アプリです。In the fictional scenario of the tutorial, Contoso Expenses is an internal app used by managers of Contoso Corporation to keep track of the expenses submitted by their reports. これで、マネージャーはタッチ対応デバイスを装備しています。マウスやキーボードを使用せずに Contoso の経費アプリを使用したいと考えています。The managers are now equipped with touch-enabled devices, and they would like to use the Contoso Expenses app without a mouse or keyboard. 残念ながら、現在のバージョンのアプリはタッチフレンドリではありません。Unfortunately, the current version of the app isn't touch friendly.

Contoso では、従業員が経費報告書を効率的に作成できるように、新しい Windows 機能でこのアプリを最新化したいと考えています。Contoso wants to modernize this app with new Windows features to enable employees to create expenses reports more efficiently. 多くの機能は、新しい UWP アプリを構築することによって簡単に実装できます。Many of the features could be easily implemented by building a new UWP app. ただし、既存のアプリは複雑であり、さまざまなチームによる多数の開発の結果となっています。However, the existing app is complex and is the result of many years of development by different teams. そのため、新しいテクノロジを使用して最初から書き換えることはできません。As such, rewriting it from scratch with a new technology isn't an option. チームは、既存のコードベースに新機能を追加するための最適な方法を探しています。The team is looking for the best approach to add new features into the existing codebase.

このチュートリアルの冒頭では、Contoso の経費が .NET Framework 4.7.2 をターゲットとし、次のサードパーティ製のライブラリを使用します。At the beginning of the tutorial, Contoso Expenses targets the .NET Framework 4.7.2 and uses the following 3rd party libraries:

  • MVVM Light。 MVVM パターンの基本実装です。MVVM Light, a basic implementation for the MVVM pattern.
  • Unity (依存関係挿入コンテナー)。Unity, a dependency injection container.
  • LiteDb は、データを格納する埋め込みの NoSQL ソリューションです。LiteDb, an embedded NoSQL solution to store the data.
  • 偽のデータを生成するためのツール。Bogus, a tool to generate fake data.

このチュートリアルでは、新しい Windows 機能で Contoso の支出を強化します。In the tutorial, you'll enhance Contoso Expenses with new Windows features:

  • 既存の WPF アプリを .NET Core 3.0 に移行します。Migrate an existing WPF app to .NET Core 3.0. これにより、今後新しい重要なシナリオが開きます。This will open up new and important scenarios in the future.
  • Windows Community Toolkit によって提供されるsystem.windows.controls.inkcanvas> およびmapcontrolのラップされたコントロールをホストするには、XAML アイランドを使用します。Use XAML Islands to host the InkCanvas and MapControl wrapped controls provided by the Windows Community Toolkit.
  • XAML アイランドを使用して、標準の UWP XAML コントロール (この場合はCalendardView) をホストします。Use XAML Islands to host any standard UWP XAML control (in this case, a CalendardView).
  • アダプティブカードと Windows 10 の通知をアプリに統合します。Integrate Adaptive Cards and Windows 10 notifications into the app.
  • アプリを MSIX でパッケージ化し、Azure DevOps に CI/CD パイプラインを設定して、使用可能になったらすぐに新しいバージョンのアプリをテスト担当者とユーザーに自動的に配信できるようにします。Package the app with MSIX and set up a CI/CD pipeline on Azure DevOps so that you can automatically deliver new versions of the app to testers and users as soon as it is available.

必要条件Prerequisites

このチュートリアルを実行するには、開発用コンピューターに次の前提条件がインストールされている必要があります。To perform this tutorial, your development computer must have these prerequisites installed:

Visual Studio 2019 では、次のワークロードとオプション機能をインストールしていることを確認します。Make sure you install the following workloads and optional features with Visual Studio 2019:

  • .NET デスクトップ開発.NET Desktop development
  • ユニバーサル Windows プラットフォームの開発Universal Windows Platform development
  • Windows 10 SDK (10.0.18362.0 以降)Windows 10 SDK (10.0.18362.0 or later)

Contoso の経費のサンプルアプリを入手するGet the Contoso Expenses sample app

チュートリアルを開始する前に、Contoso の経費アプリのソースコードをダウンロードし、Visual Studio でコードをビルドできることを確認します。Before you begin the tutorial, download the source code for the Contoso Expenses app and make sure you can build the code in Visual Studio.

  1. Appconsult WinAppsModernization ワークショップリポジトリ[リリース] タブからアプリのソースコードをダウンロードします。Download the app source code from the Releases tab of the AppConsult WinAppsModernization workshop repository. 直接リンクはhttps://aka.ms/wamwcです。The direct link is https://aka.ms/wamwc.
  2. Zip ファイルを開き、すべてのコンテンツをC:\ ドライブのルートに抽出します。Open the zip file and extract all the content to the root of your C:\ drive. C:\WinAppsModernizationWorkshopという名前のフォルダーが作成されます。It will create a folder named C:\WinAppsModernizationWorkshop.
  3. Visual Studio 2019 を開き、 C:\WinAppsModernizationWorkshop\Lab\Exercise1\01-Start\ContosoExpenses\ContosoExpenses.slnファイルをダブルクリックしてソリューションを開きます。Open Visual Studio 2019 and double click on the C:\WinAppsModernizationWorkshop\Lab\Exercise1\01-Start\ContosoExpenses\ContosoExpenses.sln file to open the solution.
  4. [スタート] ボタンまたは CTRL キーを押しながら F5 キーを押して、Contoso の経費の WPF プロジェクトをビルド、実行、およびデバッグできることを確認します。Verify that you can build, run, and debug the Contoso Expenses WPF project by pressing the Start button or CTRL + F5.

Get started

Contoso の経費サンプルアプリのソースコードを取得し、それを Visual Studio でビルドできることを確認できるので、チュートリアルを開始する準備ができています。After you have the source code for the Contoso Expenses sample app and you can confirm that you can build it in Visual Studio, you're ready to start the tutorial:

重要な概念Important concepts

以下のセクションでは、このチュートリアルで説明する主な概念の背景について説明します。The following sections provide background for some of the key concepts discussed in this tutorial. これらの概念を既に理解している場合は、このセクションを省略できます。If you're already familiar with these concepts, you can skip this section.

ユニバーサル Windows プラットフォーム (UWP)Universal Windows Platform (UWP)

Windows 8 では、Windows ランタイム (WinRT) と呼ばれる新しいフレームワークが導入されました。In Windows 8, Microsoft introduced a new framework called the Windows Runtime (WinRT). .NET Framework とは異なり、WinRT は、アプリに直接公開されている Api のネイティブ層です。Unlike the .NET Framework, WinRT is a native layer of APIs which are exposed directly to apps. また、WinRT には、ランタイムの上に追加されたレイヤーである言語のプロジェクションも導入されておりC# 、開発者は、 C++やなどの言語を使用して、との対話を行うことができます。WinRT also introduced language projections, which are layers added on top of the runtime to allow developers to interact with it using languages such as C# and JavaScript in addition to C++. プロジェクションを使用すると、開発者は、.NET Framework を使用しC#たアプリの構築で取得したものと同じおよび XAML の知識を活用して、WinRT 上にアプリを構築できます。Projections enable developers to build apps on top of WinRT that leverage the same C# and XAML knowledge they acquired in building apps with the .NET Framework.

Windows 10 では、WinRT の上に構築されたユニバーサル Windows プラットフォーム (UWP)が導入されました。In Windows 10, Microsoft introduced the Universal Windows Platform (UWP), which is built on top of WinRT. UWP の最も重要な機能は、すべてのデバイスプラットフォームで共通の Api セットを提供することです。アプリがデスクトップで実行されている場合でも、Xbox One でも HoloLens でも、同じ Api を使用できます。The most important feature of UWP is that it offers a common set of APIs across every device platform: no matter if the app is running on a desktop, on a Xbox One or on a HoloLens, you’re able to use the same APIs.

今後、Windows 10 の新機能のほとんどは、タイムライン、プロジェクトローマ、Windows Hello などの機能を含む、WinRT Api を介して公開されています。Going forward, most new Windows 10 features are exposed via WinRT APIs, including features such as Timeline, Project Rome, and Windows Hello.

MSIX パッケージ化MSIX packaging

Msix (旧称 AppX) は、Windows アプリの最新のパッケージモデルです。MSIX (formerly known as AppX) is the modern packaging model for Windows apps. MSIX は UWP アプリだけでなく、Win32、WPF、Windows フォーム、Java、電子などのテクノロジを使用して構築されたデスクトップアプリもサポートしています。MSIX supports UWP apps as well as desktop apps building using technologies such as Win32, WPF, Windows Forms, Java, Electron, and more. MSIX パッケージでデスクトップアプリをパッケージ化する場合、アプリを Microsoft Store に発行できます。When you package a desktop app in an MSIX package, you can publish your app to the Microsoft Store. デスクトップアプリでは、インストール時にパッケージ id を取得することもできます。これにより、デスクトップアプリでより広範な WinRT Api のセットを使用できるようになります。Your desktop app also get package identity when it is installed, which enables your desktop app to use a broader set of WinRT APIs.

詳細については、次の記事を参照してください。For more information, see these articles:

XAML IslandsXAML Islands

Windows 10 バージョン 1903 以降では、XAML Islands と呼ばれる機能を使用して UWP 以外のデスクトップ アプリで UWP コントロールをホストできます。Starting in Windows 10, version 1903, you can host UWP controls in non-UWP desktop apps using a feature called XAML Islands. この機能では、UWP コントロールを介してのみ使用できる最新の Windows 10 の UI 機能を使用して既存のデスクトップ アプリの外観、操作性、および機能性を向上させることができます。This feature enables you to enhance the look, feel, and functionality of your existing desktop apps with the latest Windows 10 UI features that are only available via UWP controls. つまり、既存のWPF、Windowsフォーム、およびC++Win32アプリでは、Windows Ink などの UWP 機能と Fluent Design System をサポートするコントロールを使用できます。This means that you can use UWP features such as Windows Ink and controls that support the Fluent Design System in your existing WPF, Windows Forms, and C++ Win32 apps.

詳細については、デスクトップ アプリケーション (XAML Islands) の UWP コントロール をご参照ください。For more information, see UWP controls in desktop applications (XAML Islands). このチュートリアルでは、2 つの異なるタイプの XAML Islandsコントロールを使用するプロセスを案内します。This tutorial guides you through the process of using two different types of XAML Island controls:

  • Windows Community Toolkit のsystem.windows.controls.inkcanvas>mapcontrolThe InkCanvas and MapControl in the Windows Community Toolkit. これらの WPF コントロールは、対応する UWP コントロールのインターフェイスと機能をラップし、Visual Studio デザイナーの他の WPF コントロールと同様に使用できます。These WPF controls wrap the interface and functionality of the corresponding UWP controls and can be used like any other WPF control in the Visual Studio designer.

  • UWPカレンダービューコントロール。The UWP Calendar view control. これは、Windows Community Toolkit のWindowsxamlhostコントロールを使用してホストする標準 UWP コントロールです。This is a standard UWP control that you will host by using the WindowsXamlHost control in the Windows Community Toolkit.

.NET Core 3.NET Core 3

.Net Coreは、完全な .NET Framework のクロスプラットフォーム、軽量、および拡張可能なバージョンを実装するオープンソースフレームワークです。.NET Core is an open-source framework that implements a cross-platform, lightweight and easily extensible version of the full .NET Framework. 完全な .NET Framework と比較すると、.NET Core の起動時間が大幅に短縮され、Api の多くが最適化されています。Compared to the full .NET Framework, .NET Core startup time is much faster and many of the APIs have been optimized.

最初のいくつかのリリースでは、web またはバックエンドアプリをサポートするために .NET Core の焦点を絞っていました。Through its first several releases, the focus of .NET Core was for supporting web or back-end apps. .NET Core を使用すると、Windows、Linux、または Docker コンテナーのようなマイクロサービスアーキテクチャでホストできるスケーラブルな web アプリまたは Api を簡単に構築できます。With .NET Core, you can easily build scalable web apps or APIs that can be hosted on Windows, Linux, or in micro-service architectures like Docker containers.

.NET Core 3 は .NET Core の最新リリースです。.NET Core 3 is latest release of .NET Core. このリリースのハイライトは、Windows フォーム、WPF アプリを含む Windows デスクトップ アプリのサポートです。The highlight of this release is support for Windows desktop apps, including Windows Forms and WPF apps. .NET Core 3 で新規および既存の Windows デスクトップ アプリを実行し、.NET Core で提供されるすべての特典を利用することができます。You can run new and existing Windows desktop apps on .NET Core 3 and enjoy all the benefits that .NET Core has to offer. XAML Islandsでホストされている UWP コントロールを、.NET Core 3 を対象とする Windows フォームや WPF アプリでも使用できます。UWP controls that are hosted in XAML Islands can also be used in Windows Forms and WPF apps that target .NET Core 3.

注意

WPF と Windows フォームがクロスプラットフォームになっていないため、Linux および MacOS で WPF や Windows フォームを実行することはできません。WPF and Windows Forms are not becoming cross-platform, and you cannot run a WPF or Windows Forms on Linux and MacOS. WPF と Windows フォームの UI コンポーネントは、引き続き Windows レンダリングシステムに依存しています。The UI components of WPF and Windows Forms still have a dependency on the Windows rendering system.

詳細については、「.NET Core 3.0 の新機能」をご覧ください。For more information, see What's new in .NET Core 3.0.