WPF アプリの作成 - Training

15 分

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

Visual Studio の Windows Presentation Foundation (WPF) では、デスクトップ、メモ帳、およびタブレットコンピューター用のアプリをビルドするための API インターフェイスが開発者に提供されます。 WPF は強力な DirectX グラフィックスシステムを基盤としており、プログラミングをほとんど行わずに数多くの優れた UI 機能と効果を得ることができます。

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

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

Note

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

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

プロジェクトを作成する

Visual Studio を開き、メニューから [ファイル]>[新規作成]>[プロジェクト] を選択します。プロジェクト言語として [C#] を選択します。次に、プロジェクトの種類として [WPF アプリケーション] を選択し、[名前] フィールドに「Say hello」などのわかりやすい名前を入力します。完了したら、 [次へ] を選択します。
.NET のバージョンを選択し、[作成] を選択します。
プロジェクトが開いたら、[ソリューションエクスプローラー] と [プロパティ] のペインが開いていることを確認することをお勧めします。これらは、既定では、Visual Studio ウィンドウの右側に配置されます。表示されていない場合は、[表示] メニューを開いて、両方を選択します。
[ソリューションエクスプローラー] に、これから作業する 2 つのファイルの名前が表示されていることを確認します。MainWindow.xaml と、その "分離コード" ファイルである MainWindows.xaml.cs です。 [MainWindow.xaml] を選択して開きます。

UI をデザインする

ツールボックスが開いていない場合は、[表示] メニューを選択し、[ツールボックス] を選択します。 [ツールボックス] で、[コモン WPF コントロール] を選択します。
Button をデザイナーレイアウトの下部にドラッグします。次に、TextBox をレイアウトの上部にドラッグし、その角を少し外にドラッグして、次のようになるようにします。

Note

レイアウトの下に表示される XAML 定義の <Grid> に、ボタンと TextBox のエントリがどのように追加されるかに注目してください。
次に、ウィンドウのタイトルバーに表示されるテキストを更新します。デザイナーレイアウトで [ウィンドウ] を選択し、そのプロパティが [プロパティ] ペインに表示されるようにして、[タイトル] を「Say hello」に変更します。
ここで、新しい UI 要素にいくつかのプロパティを設定します。ボタンを選択して、そのプロパティが [プロパティ] ウィンドウに表示されるようにします。 [名前] を「SayHelloButton」のような単純なものに変更し、[共通] プロパティの [内容] を「Say hello」に変更します。
ボタンにイベントをアタッチする必要があります。ボタン自体を選択できますが、それができるのは、デザイナーレイアウトが求められている状態にある場合だけです。イベントを入力するための確実な方法は、その UI 項目に対して利用できるイベントを開くことです。これは、[プロパティ] ウィンドウに表示されている稲妻アイコンを選択することで実行でき、開いたら Click イベント用のエントリを選択します。これで、名前付きイベントである SayHelloButton_Click が自動的に作成され、適切なコードエントリが MainWindow.xaml.cs ファイルに追加され、そのファイルが開きます。
まだコードを入力しないため、メインビューで [MainWindow.xaml] を選択します。ここでは、引き続き UI に取り組みます。
デザイナーで作成したテキストボックスを選択して、そのプロパティを表示します。テキストボックスのプロパティには、多くの変更を加えます。 [プロパティ] ペインにイベントが表示されている場合は、([名前] の横にある) レンチアイコンを選択して、名前付きプロパティに戻ります。
[名前] エントリを「textBox1」に変更した後、[レイアウト] プロパティで、[幅] と [高さ] をそれぞれ「360」と「80」に変更します。
[レイアウト] セクションを折りたたみます。
[テキスト] のサイズの一覧で、ポイントサイズを「36」(見やすいサイズ) に変更します。
[テキスト] セクションでは、既定では [A] というラベルが付いたフォントタブが開きます。段落アイコンを選択し、配置を [中央揃え] に変更します。
[テキスト] セクションを折りたたみ、[外観] を展開します。外観プロパティの表示された一覧の下部にある下矢印を選択して、一覧全体を表示します。境界線の太さを、左と上は「1」に、右と下は「8」に変更します。ボックスにドロップシャドウ効果が少し追加されました。
[外観] を折りたたみ、[共通] を展開します。テキストボックスに、「Hello there!」などのわかりやすいテキストを入力します。

アプリの 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 要素全体を追加したりできます。それはこのチュートリアルでは行いません。

分離コードを記述する

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

    private void SayHelloButton_Click(object sender, RoutedEventArgs e)
    {

    }
}
```
必要な using ステートメントがすべてあることを確認しましょう。ここに示されているものがあることを確認し、ない場合は追加します。ファイルの編集が完了したら、必要に応じて、プロジェクトの作成時に Visual Studio によって追加された不要な using ステートメントを削除できます。 (未使用の名前空間は灰色で表示されます。)
```
using System;
using System.Windows;
using System.Windows.Media;
```

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

public partial class MainWindow : Window
{
    private Random rand;

    public MainWindow()
    {
        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)
    {

    }
}

最後に、ボタンクリックイベントから 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;
    }

自分のコードをもう一度確認します。赤い下線が付いた部分があれば、その部分には何らかの間違いがあります。単語のスペルが間違っているか、コードの一部があってはならない場所にある可能性があります。

実行

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

Visual Studio で、[デバッグ] メニューから [デバッグなしで開始] を選択します ([デバッグの開始] を選択できますが、このチュートリアルではデバッグは行いません)。または単純に F5 キーを選択します。すべてを正しく入力していると、実行中のアプリが次のように表示されるはずです。
[Say hello] ボタンを繰り返し選択して、Hello there! テキストと境界線がランダムな色に変わることを確認します。

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

続行

演習 - WPF アプリの作成

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

プロジェクトを作成する

UI をデザインする

分離コードを記述する

実行

フィードバック