初めての WinUI アプリをビルドする

初めての WinUI アプリをビルドし、Windows 上で動き出すのを確認しましょう。 このクイック スタートでは、ツールのセットアップからアプリの実行まで進み、最初のインターフェース更新について説明します。

始める前に

学習する内容

  • 開発ツールを選択して設定する
  • WinUI アプリを作成して実行します。
  • インターフェースを更新し、実行中のアプリで変更が反映されたことを確認します。

開発ツールを選択する

このクイックスタートでは、次のいずれかの推奨される手順に従ってください。

  • winapp CLI: お好みのエディターでターミナルから作業できます。 このコマンドラインワークフローは、エージェント型コーディングにもうまく機能します。
  • Visual Studio: 統合された開発およびデバッグ環境を利用します。

ツールが既にインストールされている場合は、「 最初のアプリの作成」に移動します。

ツールのインストール

  1. 開発者モードを有効にする。 開発者設定からその設定を開くことができます。

  2. .NET 10 SDK と Windows アプリ Development CLI をインストールしてください。 WinGet を使用する場合は、実行:

    winget install --id Microsoft.DotNet.SDK.10 --exact --source winget
winget install --id Microsoft.WinAppCLI --exact --source winget

    必要なツールが既にインストールされている場合は、インストールをスキップしてください。

  3. インストールしたコマンドを認識するように新しいターミナルを開き、その後バージョンを確認します。

    dotnet --version
winapp --version

    このワークフローには、.NET SDK 10 以降と winapp CLI 0.6 以降を使用してください。

Note

winapp CLI は現在パブリック プレビュー中です。 winapp new は WinUI プロジェクト テンプレートを管理しますが、.NET SDK はインストールしません。 新しい project コマンドと run コマンドについては、CLI 0.6 の発表を参照してください。

最初のアプリの作成

上記でインストールしたワークフローを使用して、プロジェクトを作成して起動してください。

プロジェクトを保存しているフォルダーで、次のコマンドを実行します。

winapp new --name MyWinUIApp --template winui --use-defaults
cd MyWinUIApp
winapp run

winapp new は空の WinUI アプリを作成します。 winapp run プロジェクトをビルドして起動します。別のビルドまたはパッケージ登録コマンドは必要ありません。

アプリはデスクトップ上にウィンドウを開きます。 下の「変更を行う」を選択して続行します。

変更を加える

先ほど作成したプロジェクトはそのままにしておきます。 既存のインターフェイスにメッセージを追加します。

  1. 実行中のアプリを閉じます。 エディターで MainPage.xaml を開きます。 テンプレートにそのファイルが含まれていない場合は、代わりに MainWindow.xaml を開いてください。

  2. アプリのコンテンツを保持するレイアウト パネルを見つけます。 現在の CLI の空のテンプレートでは、MainPage.xaml に空の <Grid /> が含まれています。 空のグリッドを次のように置き換えます。

    <Grid>
    <TextBlock
        Text="Hello, WinUI!"
        HorizontalAlignment="Center"
        VerticalAlignment="Center" />
</Grid>

    パネルに既にコントロールが含まれている場合は、そのパネル内には TextBlock のみを追加してください。 既存のコントロール、名前、およびイベント ハンドラーを保持します。 周囲の Page や Window、または MainWindow.xamlのフレームとタイトル バーは置き換えないでください。

  3. ファイルを保存します。 プロジェクト フォルダーからwinapp runをもう一度実行するか、Visual Studioで F5 キーを押します。

おめでとうございます! 最初の WinUI アプリを作成、実行、更新しました。 ウィンドウに Hello, WinUI! が表示されるようになりました。

Troubleshooting

問題 確認すべきこと
winapp または dotnet が認識されません。 インストール後にターミナルを再度開きます。 CLI タブでバージョン コマンドを使用して、両方のツールが利用可能であることを確認します。
winapp new が認識されません。 このワークフローには winapp CLI 0.6 以降が必要です。 選択したインストール方法を使用して CLI を更新します。
WinUI テンプレートはVisual Studioに表示されません。 Visual Studio インストーラーを開き、変更 を選択し、WinUI アプリケーション開発 ワークロードがインストールされていることを確認します。 その後、Visual Studioを再起動します。
ビルドによって SDK または復元エラーが報告されます。 選択したワークフローの前提条件と、ビルド出力の最初のエラーを確認します。 Windows アプリ SDKサポートを使用して、プロジェクトのプロパティを変更する前にバージョン要件を確認します。
展開では、開発者モードが無効になっていることを報告します。 開発者モードを有効にして、アプリをもう一度起動してください。
新しいメッセージが表示されません。 XAML ファイルを保存し、プロジェクトを再度起動します。 MainPage.xamlを含むテンプレートでは、ウィンドウのホスト フレームを置き換えるのではなく、そのページにそのメッセージを追加します。

次のステップ

ノート アプリを作成する

Notes チュートリアルでは、ページ、ナビゲーション、データバインディング、ローカルストレージを学ぶために、別の WinUINotes プロジェクトを使用します。 また、 リソースに重点を置いたコントロールの例を見つけることもできます。

  • Last updated on