演習 - UWP アプリの作成

完了

Screenshot that shows the UWP, WPF, and Windows Forms logo.

Visual Studio のユニバーサル Windows プラットフォーム (UWP) は、1 つのアプリを任意のデバイス (デスクトップ、ノート PC、タブレット、Xbox、Surface Hub HoloLens デバイスなど) で実行できるようになるテクノロジです。 UWP の開発と Windows Presentation Foundation (WPF) の開発には類似点が多くありますが、微妙な違いもいくつかあります。 このチュートリアルでは、これらの違いについて説明します。それは UWP プログラミングの世界への最初の一歩です。

このユニットでは、次のことを行います。

  • Visual Studio を使用して、新しい UWP プロジェクトを作成します。
  • UI とコード要素をプロジェクトに追加し、"hello world" プログラムの楽しいバリエーションを作成します。 [Say hello] ボタンを選択するたびに、"Hello there!" テキストと境界線の色がランダムに変化します。
  • プロパティを設定し、イベントを作成する方法を学習します。

Note

コンピューターに Windows と Visual Studio 2022 がセットアップされていることが前提となります。詳細については、Learn モジュール「Windows 10 開発の概要」を参照してください。

UWP の "Say hello" チュートリアル

プロジェクトを作成する

  1. Visual Studio を開き、メニューから [ファイル]>[新規作成]>[プロジェクト] を選択します。 次に、プロジェクト言語として [C#] を選択します。 次に、[空のアプリ (ユニバーサル Windows)] プロジェクト タイプを選択します。 [名前] フィールドに、SayHello のようなフレンドリ名を入力します。 完了したら [作成] を選択します。

    注意

    [新しいユニバーサル Windows プラットフォーム プロジェクト] ダイアログ ボックスが表示され、UWP の [ターゲット][最小] バージョンを選択するオプションが示された場合は、[OK] を選択してください。 このプロジェクトでは既定の選択項目で問題なく機能します。

    Screenshot that shows the Configure your new project window for a Blank App (Universal Windows) with the create button selected.

  2. プロジェクトが開いたら、[ソリューション エクスプローラー][プロパティ] のペインが開いていることを確認することをお勧めします。 これらは、既定では、Visual Studio の右側に配置されます。 表示されていない場合は、[表示] メニューを開いて、両方を選択します。

  3. [ソリューション エクスプローラー] に、操作する 2 つのファイルの名前 (MainPage.xaml と、その分離コード ファイルである MainPage.xaml.cs) が表示されていることを確認します。 [MainPage.xaml] を選択して開きます。

    Screenshot that shows the MainPage.xaml and MainPage.xaml.cs files in a red box in Solution Explorer.

UI をデザインする

  1. [ツールボックス] パネルがまだ開いていない場合は、[表示] メニューを選択し、[ツールボックス] を選択します。 [ツールボックス] で、[コモン XAML コントロール] を選択します。

    Screenshot that shows the Toolbox menu in Visual Studio with Button and TextBox in red boxes.

  2. Button をデザイナー レイアウトの下部にドラッグします。 次に、TextBox をレイアウトの上部にドラッグし、その角を少し外にドラッグして、次のようになるようにします。

    Screenshot that shows a button dragged onto the design layout.

    Note

    レイアウトの下に表示される XAML 定義の <Grid> に、ボタンとツールボックスのエントリがどのように追加されるかに注目してください。

  3. ここで、これらの UI 要素にいくつかのプロパティを設定します。 ボタンを選択して、そのプロパティが [プロパティ] ウィンドウに表示されるようにします。 [名前] を「SayHelloButton 」のような単純なものに変更し、([共通] を展開して) [内容] を「Say hello」に変更します。

    Screenshot that shows the Name and Content properties set in the Properties window.

    Note

    レイアウトの下に表示される XAML 定義の [ボタン] エントリに [名前] プロパティがどのように追加されるかに注目してください。 デザイナーでプロパティを変更すると、XAML 定義が自動的に更新されます。

  4. ボタンにイベントをアタッチする必要があります。 ボタン自体を選択できますが、それができるのは、デザイナー レイアウトが求められている状態にある場合だけです。 イベントを入力するための確実な方法は、その UI 項目に対して利用できるイベントを開くことです。 これは、[プロパティ] ペインに表示されているアイコンを選択することで実行でき、Click イベント用のエントリを選択します。 これで、名前付きイベントである SayHelloButton_Click が自動的に作成され、適切なコード エントリが MainPage.xaml.cs ファイルに追加され、そのファイルが開きます。

    Screenshot that shows the Events pane selected in the Properties window, and the Click event in a red box.

  5. コードはまだ入力しません。メイン ビューで MainPage.xaml を選択します。 ここでは UI の操作を続けます。

  6. デザイナーで作成したテキスト ボックスを選択して、そのプロパティを表示します。 テキスト ボックスのプロパティには、多くの変更を加えます。 [プロパティ] ペインにイベントが表示されている場合は、([名前] の横にある) レンチ アイコンを選択して、名前付きプロパティに戻ります。

  7. [名前] エントリを「textBox1」に変更した後、[レイアウト] プロパティで、[幅][高さ] をそれぞれ「360」と「80」に変更します。

    Screenshot that shows the Layout properties of Width and Height set in the Properties window.

  8. [レイアウト] セクションを折りたたみます。

  9. [テキスト] のサイズの一覧で、ポイント サイズを「36」(見やすいサイズ) に変更します。

    Screenshot that shows the Name set as textBox1 in the properties, and the Tex tab open with 36px selected as the text size.

  10. [テキスト] セクションでは、既定では [A] というラベルが付いたフォント タブが開きます。 段落アイコンを選択し、配置を [中央揃え] に変更します。

    Screenshot that shows the paragraph tab under the Text menu selected, and Center selected as the paragraph justification.

  11. [テキスト] セクションを折りたたみ、[外観] を展開します。 外観プロパティの表示された一覧の下部にある下矢印を選択して、一覧全体を表示します。 境界線の太さを、左と上は「1」に、右と下は「8」に変更します。 ボックスにドロップ シャドウ効果が少し追加されました。

    Screenshot that shows the Appearance menu expanded in the Properties window, with the BorderThickness settings in a red box.

  12. [外観] を折りたたみ、[共通] を展開します。 テキスト ボックスに、「Hello there!」などのわかりやすいテキストを入力します。

    Screenshot that shows the Common menu expanded in the Properties window, with Hello there entered in the Text property.

アプリの UI 要素がほぼ完成しました。 XAML ファイルの <Grid> エントリは次のようになっているはずです。

Screenshot that shows an example of the the XAML file, with a Button and TextBox element inside the Grid element. All of the Button and Textbox properties are displayed.

Note

念のために言っておくと、もちろん XAML を直接編集して、数値を変更したり、UI 要素全体を追加したりできます。 それはこのチュートリアルでは行いません。

分離コードを記述する

  1. ここで、UI からアプリのコードに移ります。 ここで、MainPage.xaml.cs ファイルを再び開きます。 メイン ビューの上または [ソリューション エクスプローラー] でファイルを選択します。 MainPage クラスは次のようになっているはずです。

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    
        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
        {
    
        }
    }
    
  2. 必要な using ステートメントがすべてあることを確認しましょう。 以下のものがあることを確認し、ない場合はそれを追加します。 特に、using Windows.UI; ステートメントがあることを確認します。 ファイルの編集が完了したら、必要に応じて、プロジェクトの作成時に Visual Studio によって追加された不要な using ステートメントを削除できます。 未使用の名前空間は灰色で表示されます。

    using System;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Media;
    
  3. ボタンを選択するたびに、アプリによって、hello テキストがランダムな色でレンダリングされます。 そのため、クラスレベルの Random オブジェクトと、RGB 設定として使用する値をランダムに入力する GetRandomBytes メソッドを追加する必要があります。 次のコードをコピーして貼り付けるか、自分で入力して、MainPage クラス が次のようになるようにします。

    public sealed partial class MainPage : Page
    {
        private Random rand;
    
        public MainPage()
        {
            this.InitializeComponent();
            rand = new Random();
        }
    
        private byte[] GetRandomBytes(int n)
        {
            // Fill an array of bytes of length "n" with random numbers.
            var randomBytes = new byte[n];
            rand.NextBytes(randomBytes);
            return randomBytes;
        }
    
        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
        {
    
        }
    }
    
  4. 最後に、ボタン クリック イベントから GetRandomBytes を呼び出し、返されたバイトの配列からランダムな色を作成し、テキスト ボックスのプロパティをその色に変更する必要があります。 完成した SayHelloButton_Click メソッドは次のようになるはずです。

        private void SayHelloButton_Click(object sender, RoutedEventArgs e)
        {
            byte[] rgb = GetRandomBytes(3);
    
            // Create a solid color brush using the three random numbers.
            var randomColorBrush = new SolidColorBrush(Color.FromArgb(255, rgb[0], rgb[1], rgb[2]));
    
            // Set both the text color and the text box border to the random color.
            textBox1.BorderBrush = randomColorBrush;
            textBox1.Foreground = randomColorBrush;
        }
    
  5. 自分のコードをもう一度確認します。 赤い下線が付いている部分があれば、何かが間違っています。 単語のスペルが間違っているか、コードの一部があってはならない場所にある可能性があります。

実行

プログラムをコンパイルして実行しましょう。

  1. Visual Studio の [デバッグ] メニューで、[デバッグなしで開始] を選択するか、単に F5 キーを押します。 すべてを正しく入力した場合は、アプリを実行すると次の画面が表示されます。

    Screenshot that shows the app running. Hello there displays with green text in a green box with the Say hello button below it.

  2. [Say hello] ボタンを繰り返し選択して、"Hello there!" キストと境界線がランダムな色に変わることを確認します。

そのように動作すれば、完成です。 このチュートリアルは終了しました。 そのようにならない場合は、どこかに誤りがないか、自分のコードと UI プロパティの設定をよく見直してください。