次の方法で共有


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

Note

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

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

Visual Studio をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。

プロジェクトを作成する

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

  1. Visual Studio を開き、[スタート] ウィンドウで [新しいプロジェクトの作成] を選択します。

  2. [新しいプロジェクトの作成] 画面で、検索ボックスに「ユニバーサル Windows」と入力し、 [空のアプリ (ユニバーサル Windows)] 用の C# テンプレートを選択して、 [次へ] を選択します。

    Screenshot of the 'Create a new project' dialog with 'universal windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Note

    [空のアプリ (ユニバーサル Windows)] プロジェクト テンプレートが表示されない場合は、 [さらにツールと機能をインストールする] リンクをクリックします。

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Visual Studio インストーラーが起動します。 [ユニバーサル Windows プラットフォーム開発] ワークロードを選択し、 [変更] を選択します。

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform development workload.

  3. プロジェクトに「HelloWorld」という名前を付け、 [作成] を選択します。

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

  4. [新しいユニバーサル Windows プラットフォーム プロジェクト] ダイアログ ボックスで、 [ターゲット バージョン][最小バージョン] の既定の設定をそのまま使用します。

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    Note

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

    Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.

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

  1. Visual Studio を開き、[スタート] ウィンドウで [新しいプロジェクトの作成] を選択します。

  2. [新しいプロジェクトの作成] 画面で、検索ボックスに「ユニバーサル Windows」と入力し、 [空のアプリ (ユニバーサル Windows)] 用の C# テンプレートを選択して、 [次へ] を選択します。

    Screenshot of the 'Create a new project' dialog with 'Universal Windows' entered in the search box, and the 'Blank App (Universal Windows)' project template highlighted.

    Note

    [空のアプリ (ユニバーサル Windows)] プロジェクト テンプレートが表示されない場合は、 [さらにツールと機能をインストールする] リンクをクリックします。

    Screenshot of the Create a new project window showing the 'Install more tools and features' link.

    Visual Studio インストーラーが起動します。 [ユニバーサル Windows プラットフォーム開発] ワークロードを選択して、 [変更] を選択します。

    Screenshot of the Visual Studio Installer showing the Universal Windows Platform development workload.

  3. プロジェクトに「HelloWorld」という名前を付け、 [作成] を選択します。

    Screenshot of the 'Configure your new project' dialog with 'HelloWorld' entered in the Project name field.

  4. [新しいユニバーサル Windows プラットフォーム プロジェクト] ダイアログ ボックスで、 [ターゲット バージョン][最小バージョン] の既定の設定をそのまま使用します。

    Screenshot of the New Universal Windows Platform Project dialog box showing the default Target version and Minimum version settings.

    Note

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

    Screenshot showing the UWP Settings dialog box with the option for enabling Developer Mode.

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

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

開発を始めるときがきました。 これから、ボタン コントロールを追加し、ボタンにアクションを追加し、"Hello World" アプリを起動してどのように動作するか確認します。

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

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

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.

    デザイン キャンバスを含む XAML デザイナーと、コードを追加または変更できる XAML エディターの 2 つのウィンドウがあります。

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

  2. [ツールボックス] を選択して、ツールボックスのスライド アウト ウィンドウを開きます。

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    ([ツールボックス] オプションが表示されない場合は、メニュー バーから開くことができます。これを行うには、[表示]>[ツール バー] を選びます。または、Ctrl+Alt+X キーを押します。)

  3. [ピン設定] アイコンをクリックして、[ツールボックス] ウィンドウをドッキングします。

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

  4. [ボタン] コントロールをクリックし、デザイン キャンバスまでドラッグします。

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    XAML エディターでコードを参照すると、そこにもボタンが追加されていることを確認できます。

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

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

    Screenshot of the Solution Explorer window showing the properties, references, assets, and files in the HelloWorld project. The file MainPage.xaml is selected.

    デザイン キャンバスを含む XAML デザイナーと、コードを追加または変更できる XAML エディターの 2 つのウィンドウがあります。

    Screenshot showing MainPage.xaml open in the Visual Studio IDE. The XAML Designer pane shows a blank design surface and the XAML Editor pane shows some of the XAML code.

  2. [ツールボックス] を選択して、ツールボックスのスライド アウト ウィンドウを開きます。

    Screenshot showing the tab for the 'Toolbox' fly-out window highlighted on the left side of the XAML Designer Pane.

    ([ツールボックス] オプションが表示されない場合は、メニュー バーから開くことができます。これを行うには、[表示]>[ツール バー] を選びます。または、Ctrl+Alt+X キーを押します。)

  3. [固定表示] アイコンを選択して、[ツールボックス] ウィンドウをドッキングします。

    Screenshot showing the Pin icon highlighted in the top bar of the Toolbox window.

  4. [ボタン] コントロールを選択し、デザイン キャンバスまでドラッグします。

    Screenshot showing 'Button' highlighted in the Toolbox window and a Button control on the design canvas.

    XAML エディターでコードを参照すると、そこにもボタンが追加されていることを確認できます。

    Screenshot showing the code for the newly added Button highlighted in the XAML editor.

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

  1. XAML エディターで、Button Content の値を "Button" から "Hello World!" に変更します。

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. XAML デザイナーのボタンも変更されることに注目してください。

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

  1. XAML エディターで、Button Content の値を "Button" から "Hello World!" に変更します。

    Screenshot showing the XAML code for the Button in the XAML editor. The value of the Content property has been changed to 'Hello World!'.

  2. XAML デザイナーのボタンも変更されることに注目してください。

    Screenshot showing the Button control on the canvas of the XAML Designer. The label of the button has been changed to 'Hello World!'.

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

「イベント ハンドラー」とは、難しそうに聞こえますが、イベントが発生したときに呼び出されるコードの単なる別名です。 この場合、"Hello World!" ボタンにアクションが追加されます。

  1. デザイン キャンパスでボタン コントロールをダブルクリックします。

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

    ポイントはここからです。 既定のイベント ハンドラーは次のようになります。

    Screenshot showing the C# code for the default Button_Click event handler.

    これを変更して次のようにします。

    Screenshot showing the C# code for the new async Button_Click event handler.

    コピーして貼り付けるコードは次のとおりです。

    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();
    }
    
  1. デザイン キャンパスでボタン コントロールをダブルクリックします。

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

    ポイントはここからです。 既定のイベント ハンドラーは次のようになります。

    Screenshot showing the C# code for the default Button_Click event handler.

    これを変更して次のようにします。

    Screenshot showing the C# code for the new async Button_Click event handler.

    コピーして貼り付けるコードは次のとおりです。

    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 アプリを、ビルド、配置、および起動して、どのように表示および読み上げがあるか確認してみましょう。 ここではその方法を説明します。

  1. 再生ボタン (表示は [ローカル コンピューター] ) を使用して、ローカル コンピューターでアプリケーションを起動します。

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.

    (または、メニュー バーから [デバッグ]>[デバッグの開始] を選択するか、F5 キーを押してアプリを開始します)。

  2. スプラッシュ スクリーンが消えるとすぐ表示されるアプリを確認します。 アプリは次のように表示されるはずです。

    Screenshot showing the running UWP 'Hello World' application.

  3. [Hello World] ボタンをクリックします。

    Windows 10 以降のデバイスでは、"Hello, World!" と文字通り読み上げられます。

  4. アプリを閉じるには、ツール バーで [デバッグの停止] ボタンをクリックします。 (または、メニュー バーから [デバッグ]>[デバッグの停止] を選択するか、Shift + F5 キーを押します)。

"Hello World" UWP アプリを、ビルド、配置、および起動して、どのように表示および読み上げがあるか確認してみましょう。 ここではその方法を説明します。

  1. 再生ボタン (表示は [ローカル コンピューター] ) を使用して、ローカル コンピューターでアプリケーションを起動します。

    Screenshot showing the drop-down box open next to the Play button with 'Local Machine' selected.

    (または、メニュー バーから [デバッグ]>[デバッグの開始] を選択するか、F5 キーを押してアプリを開始します)。

  2. スプラッシュ スクリーンが消えるとすぐ表示されるアプリを確認します。 アプリは次の画像のように表示されるはずです。

    Screenshot showing the running UWP 'Hello World' application.

  3. [Hello World] ボタンを選択します。

    Windows 10 以降のデバイスでは、"Hello, World!" と文字通り読み上げられます。

  4. アプリを閉じるには、ツール バーで [デバッグの停止] ボタンを選択します。 (または、メニュー バーから [デバッグ]>[デバッグの停止] を選択するか、Shift + F5 キーを押します)。

次の手順

これでこのチュートリアルは完了です。 これで UWP および Visual Studio IDE の基本を学習できたはずです。 詳細については、引き続き以下のチュートリアルをご覧ください。

関連項目