チュートリアル: XAML と C を使用して Visual Studio で初めてのユニバーサル Windows プラットフォームアプリケーションを作成する#

[アーティクル]
01/31/2025

このチュートリアルでは、Visual Studio 統合開発環境 (IDE) の概要として、Windows 10 以降のデバイスで実行される "Hello World" アプリを作成します。これを行うには、ユニバーサル Windows プラットフォーム (UWP) プロジェクトテンプレート、拡張アプリケーションマークアップ言語 (XAML)、および C# プログラミング言語を使用します。

手記

ユニバーサル Windows プラットフォーム (UWP) の現在の機能に満足している場合は、プロジェクトの種類を Windows App SDK に移行する必要はありません。 WinUI 2.x と Windows SDK では、UWP プロジェクトの種類がサポートされています。 WinUI 3 と Windows App SDK の使用を開始する場合は、Windows App SDK チュートリアルのの手順に従うことができます。

このチュートリアルでは、次の操作を行います。

プロジェクトを作成する
アプリケーションを作成する
アプリケーションを実行する

前提条件

このチュートリアルを完了するには、Visual Studio が必要です。無料版については、Visual Studio のダウンロードページを参照してください。

手記

このチュートリアルでは、空のアプリ (ユニバーサル Windows) プロジェクトテンプレートが必要です。インストール中に、ユニバーサル Windows プラットフォーム開発 ワークロードを選択します。

ユニバーサル Windows プラットフォーム開発ワークロードを示す Visual Studio インストーラーのスクリーンショット。

Visual Studio が既にインストールされていて、追加する必要がある場合は、メニューから [ツール] >[ツールと機能の取得]を選択するか、[新しいプロジェクト の作成] ウィンドウで、[[その他のツールと機能のインストール] リンク 選択します。

[新しいプロジェクトの作成] ウィンドウのスクリーンショット。[その他のツールと機能のインストール] リンクが表示されています。

プロジェクトを作成する

まず、ユニバーサル Windows プラットフォームプロジェクトを作成します。プロジェクトの種類には、何かを追加する前に、必要なすべてのテンプレートファイルが付属しています。

Visual Studio を開き、スタートウィンドウで [新しいプロジェクト の作成]選択します。
[新しいプロジェクトの作成] 画面で、検索ボックスに「ユニバーサル Windows」と入力し、[空のアプリ (ユニバーサル Windows)] 用の C# テンプレートを選択して、[次へ] を選択します。
プロジェクトに HelloWorldという名前を付け、[作成]を選択します。
[新しいユニバーサル Windows プラットフォームプロジェクト] ダイアログボックスで、既定の ターゲットバージョンの と 最小バージョンの 設定をそのまま使用します。

手記

Visual Studio を初めて使用して UWP アプリを作成する場合は、[設定] ダイアログボックスが表示されることがあります。 [開発者モード ]を選択し、[はい]を選択します。

Visual Studio によって追加の開発者モードパッケージがインストールされます。パッケージのインストールが完了したら、[設定] ダイアログボックスを閉じます。

Visual Studio を開き、スタートウィンドウで [新しいプロジェクト の作成]選択します。
[新しいプロジェクトの作成] 画面で、検索ボックスに「ユニバーサル Windows」と入力し、空のアプリ (ユニバーサル Windows)の C# テンプレートを選択して、[次へ] を選択します。
プロジェクトに名前を付け、HelloWorldとしてください。そして作成を選択します。
[新しいユニバーサル Windows プラットフォームプロジェクト] ダイアログボックスで、既定の ターゲットバージョンの と 最小バージョンの 設定をそのまま使用します。

手記

Visual Studio を初めて使用して UWP アプリを作成する場合は、[Windows の開発者モードを有効にする] ダイアログボックスが表示されます。 開発者用の設定を選択して、[設定] を開きます。 開発者モードをオンにしてから、[はい]を選択します。

Visual Studio によって追加の開発者モードパッケージがインストールされます。パッケージのインストールが完了したら、[設定] ダイアログボックスを閉じます。

アプリケーションを作成する

開発を始めましょう。ボタンコントロールを追加し、ボタンにアクションを追加してから、"Hello World" アプリを起動して、その外観を確認します。

デザインキャンバスにボタンを追加する

ソリューションエクスプローラーので、MainPage.xaml をダブルクリックして分割ビューを開きます。

2 つのペインがあります。デザインキャンバスを含む XAML デザイナーと、コードを追加または変更できる XAML エディター。
[ツールボックス] を選択して、ツールボックスのスライドアウトウィンドウを開きます。

ツールボックス オプションが表示されない場合は、メニューバーから開くことができます。これを行うには、表示>ツールバーを選択します。または、Ctrl +Alt+X押します。
ピン留め アイコンを選択して、[ツールボックス] ウィンドウをドッキングします。
ボタン コントロールを選択し、デザインキャンバスにドラッグします。

XAML エディターのコードを見ると、ボタン も表示されます。

ソリューションエクスプローラーので、MainPage.xaml をダブルクリックして分割ビューを開きます。

2 つのペインがあります。デザインキャンバスを含む XAML デザイナーと、コードを追加または変更できる XAML エディター。
[ツールボックス] を選択して、ツールボックスのスライドアウトウィンドウを開きます。

ツールボックス オプションが表示されない場合は、メニューバーから開くことができます。これを行うには、[表示>ツールバー] を選択します。または、Ctrl +Alt+X押します。
ピン留め アイコンを選択して、[ツールボックス] ウィンドウをドッキングします。
ボタン コントロールを選択し、デザインキャンバスにドラッグします。

XAML エディターのコードを見ると、そこにボタンも表示されます。

ボタンにラベルを追加する

XAML エディターので、Button Content の値 [ボタン] から [Hello World] に変更します。
XAML デザイナーのボタンが変更されることに注意してください。も同様です。

XAML エディターので、Button Content の値 [ボタン] から [Hello World] に変更します。
XAML デザイナーのボタンも変更されることに注目してください。

イベントハンドラーを追加する

イベントハンドラー 複雑に思われますが、イベントが発生したときに呼び出されるコードの名前にすぎません。この場合、Hello World!ボタンにアクションが追加されます。

デザインキャンバス上のボタンコントロールをダブルクリックします。

コードビハインドページ MainPage.xaml.csでイベントハンドラーコードを編集します。

ここで興味深い情報が得られます。既定のイベントハンドラーは次のようになります。

次のように変更します。

新しい非同期Button_Click イベントハンドラーの C# コードを示すスクリーンショット。

コピーして貼り付けるコードを次に示します。

private async void Button_Click(object sender, RoutedEventArgs e)
{
   MediaElement mediaElement = new MediaElement();
   var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
   Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
   mediaElement.SetSource(stream, stream.ContentType);
   mediaElement.Play();
}

デザインキャンバス上のボタンコントロールをダブルクリックします。

コードビハインドページ MainPage.xaml.csでイベントハンドラーコードを編集します。

ここで興味深い情報が得られます。既定のイベントハンドラーは次のようになります。

次のように変更します。

新しい非同期Button_Click イベントハンドラーの C# コードを示すスクリーンショット。

コピーして貼り付けるコードを次に示します。

private async void Button_Click(object sender, RoutedEventArgs e)
{
   MediaElement mediaElement = new MediaElement();
   var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
   Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
   mediaElement.SetSource(stream, stream.ContentType);
   mediaElement.Play();
}

私たちは何をしましたか?

このコードでは、一部の Windows API を使用して音声合成オブジェクトを作成し、言うテキストを提供します。 SpeechSynthesisの使用方法の詳細については、System.Speech.Synthesisを参照してください。

アプリケーションを実行する

次に、"Hello World" UWP アプリをビルド、展開、起動して、外観やサウンドを確認します。その方法を次に示します。

[再生] ボタンを使用して、ローカルコンピューターでアプリケーションを起動します。 "ローカルマシン" というテキストが付いています。

または、メニューバーから [デバッグ] >[デバッグの開始]選択するか、F5 キー押してアプリを起動することもできます。
スプラッシュ画面が消えた直後に表示されるアプリを表示します。アプリは次の図のようになります。
Hello World ボタンを選択します。

Windows 10 以降のデバイスでは、文字どおり "Hello, World!" と表示されます。
アプリを閉じるには、ツールバーの [デバッグの停止] ボタンを選択します。または、メニューバー [デバッグ]>[デバッグの停止] を選択するか、Shift キー+押して F5します。

次に、"Hello World" UWP アプリをビルド、展開、起動して、外観やサウンドを確認します。その方法を次に示します。

[再生] ボタン (ローカルコンピューターテキスト) を使用して、ローカルコンピューターでアプリケーションを起動します。

または、メニューバーから [デバッグ] >[デバッグの開始]選択するか、F5 キー押してアプリを起動することもできます。
スプラッシュ画面が消えた直後に表示されるアプリを表示します。アプリは次の画像のようになります。
Hello World ボタンを選択します。

Windows 10 以降のデバイスでは、文字どおり "Hello, World!" と表示されます。
アプリを閉じるには、ツールバーの [デバッグの停止] ボタンを選択します。または、メニューバー [デバッグ]>[デバッグの停止] を選択するか、Shift キー+押して F5します。

UWP の概要
UWP アプリのサンプルを取得する

次の手順

このチュートリアルを完了しておめでとうございます。 UWP と Visual Studio IDE に関するいくつかの基本を学習していただければ幸いです。詳細については、次のチュートリアルに進んでください。

ユーザーインターフェイスを作成する

次の方法で共有

チュートリアル: XAML と C を使用して Visual Studio で初めてのユニバーサル Windows プラットフォームアプリケーションを作成する#

前提条件

プロジェクトを作成する