WinUI 3 ノート アプリを構築する

このチュートリアル シリーズでは、XAML と C# を使用して WinUI アプリを作成する方法について説明します。 作成するアプリはノート アプリであり、ユーザーは複数のノートを作成、保存、読み込むことができます。 このチュートリアルのコードは、GitHub リポジトリからダウンロードまたは表示できます。

空のプロジェクトをビルドして実行したら、ここから始めます。 これは、Visual Studioを使用した WinUI 3 の基礎のステップ バイ ステップの概要です。AI コーディング アシスタントや MVVM ツールキットは必要ありません。

このチュートリアルでは、以下の内容を学習します。

• XAML マークアップを使用して、アプリのユーザー インターフェイスを定義します。
• C# コードを使用して XAML 要素と対話します。
• ローカル ファイル システムからファイルを保存して読み込みます。
• ビューを作成し、データにバインドします。
• ナビゲーションを使用して、アプリ内のページとの間を移動します。
• ドキュメントやサンプル アプリなどのリソースを使用して、独自のアプリを作成します。

メモを入力してローカル アプリ ストレージに保存するために使用できるアプリを作成します。 アプリには次の 2 つのページがあります。

• NotePage - 1 つのメモを編集するためのページ。
• AllNotesPage - 保存されているすべてのノートを表示するページ。

最終的なアプリケーションは、次のとおりです。

AllNotesPage

NotePage

Visual Studio projectを作成する

「クイック スタート: ツールのインストールとプロジェクトの作成のために WinUI 3 プロジェクトを作成して実行する」のVisual Studioパスに従います。 次のチュートリアル固有の設定で、パッケージ化された C# プロジェクトを使用します。

• プロジェクト名

  これは、WinUINotes に設定する必要があります。 projectに別の名前が付けられている場合、このチュートリアルからコピーして貼り付けたコードによってビルド エラーが発生する可能性があります。 これは、Visual Studioがアプリ コードの既定の namespace としてproject名を使用するためです。

• Windows アプリ SDK

  このチュートリアルでは、Windows アプリ SDK 1.7 以降で使用できる機能を使用します。 Windows アプリ SDK NuGet パッケージがバージョン 1.7 以降に更新されていることを確認します。

続行する前に、空の WinUINotes プロジェクトをビルドして起動します。 次のような空のウィンドウが表示されます。

ヒント

Windows アプリの構築中は、API リファレンス ドキュメントと概念ドキュメントを頻繁に参照します。 このチュートリアルでは、リンクがテキスト内にインラインで表示され、「ドキュメントの詳細:」というラベルが付いたグループに表示されます。 これらのリンクは省略可能です。チュートリアルを完了するためにそれらに従う必要はありません。 これらは、独自のアプリの作成を開始するときに必要な情報を検索する場所をメモする場合に提供されます。

手順 1 に進み、プロジェクトセットアップを行います