演習 - Windows フォーム アプリの作成

  • 10 分

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

旧式の Win32 API に基づく Windows フォームは今でも、手の込んだものを必要としないツールやユーティリティを開発するための人気のある UI テクノロジです。 Windows フォームでビルドされたアプリは Windows デスクトップ、ノートブック、およびタブレット コンピューターで実行され、コンピューターを使用したことのあるほぼすべての人が見慣れている外観を持っています。

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

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

Note

Learn モジュール「Windows 10 開発の概要」で説明されているように、コンピューターに Windows と Visual Studio がセットアップされている必要があります。

Windows フォームの "Say hello" チュートリアル

プロジェクトを作成する

  1. Visual Studio を開き、メニューから [ファイル]>[新規作成]>[プロジェクト] を選択します。 プロジェクト言語として [C#] が選択されている状態で、プロジェクトのオプションから [Windows フォーム アプリ] を見つけてそれを選択します。 [Name] をわかりやすい名前 (例: Say hello) に変更し、変更が完了したら [OK] を選択します。

    Screenshot that shows the Configure your new project window for a Windows Forms App with the Next button selected.

  2. .NET のバージョンを選択し、[作成] を選択します。

  3. 既定では、[ツールボックス]、[ソリューション エクスプローラー]、[プロパティ] の各ペインが開きます。 開かれない場合は、[表示] メニューから開きます。 [ツールボックス] で、[コモン コントロール] を展開して一覧を表示します。

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

UI をビルドする

  1. 開いている Form1 の [プロパティ] ウィンドウで、[テキスト] エントリを「Form1」から「Say hello」に変更します。 画面の反対側の [ツールボックス] から、Button をフォームの下部にドラッグし、TextBox を上部に追加します。 その後、テキスト ボックスを少し広げて、次のようなデザインになるようにします。

    Screenshot that shows a button and text box dragged onto the design layout.

  2. ボタンを選択して、そのプロパティを表示します。 [名前] を「SayHelloButton」に変更してから、プロパティを下にスクロールし、[Text] プロパティを「Say hello」に変更します。

    Screenshot that shows the Name property set in the Properties window.

    Screenshot that shows the Text property set in the Properties window.

  3. ボタンにイベントをアタッチする必要があります。 イベントをアタッチするには、デザイン ビューでボタンを選択するか、または [プロパティ] でイベント アイコンを選択し、Enter キーを押すか、[Click] イベント エントリを選択します。 どちらの方法を選択した場合でも、Visual Studio によって SayHelloButton_Click イベントのアウトライン コードが Form1.cs ファイルに自動的に追加され、そのファイルが開きます。 簡単に見た後、デザイン ビューに戻ります。

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

    Note

    デザイン ビューを誤って閉じた場合は、ソリューション エクスプローラーで Form1.cs をダブルクリックするだけで、もう一度開くことができます。 デザイン ビューでWindows フォームのフォームを開くのは、Visual Studio の既定のアクションです。

  4. デザイン ビューでテキスト ボックスを選択して、そのプロパティを開きます。 イベント リストによる方法を使用してボタン イベントを追加した場合は、[プロパティ] で、レンチと書類を示すアイコンを選択します。 [名前] エントリは [textBox1] のままにします。 [フォント] の横にあるプラス記号を選択し、フォントの [サイズ] を [24] に変更します。 次に、プロパティを少し下にスクロールし、[Text] プロパティを「Hello there!」に変更し、[TextAlign] を「Center」に変更します。

    Screenshot that shows the Textbox properties with the Name, BorderStyle, and font size set in the Properties window.Screenshot that shows the additional Textbox properties of Text and TextAlign set in the Properties window.

コードを追加する

  1. ここで、メイン ビューを切り替えて、Form1.cs が表示されるようにします。

    public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
    }

    private void SayHelloButton_Click(object sender, EventArgs e)
    {

    }
}

  2. テキストの色がランダムに表示されるようにするには、クラスレベルの変数 Random rand を追加する必要があります。 Form1 コンストラクター メソッドでそれを初期化し、短いバイト配列に乱数を格納するメソッドを入力する必要があります。 次のコード行をコピーして貼り付けるか、自分で入力します。

    public partial class Form1 : Form
{
    private Random rand;

    public Form1()
    {
        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, EventArgs e)
    {

    }
}

  3. [Say hello] ボタンが選択されるたびにテキストの色を変更するには、SayHelloButton_Click メソッドの本文をプログラムに追加します。

        private void SayHelloButton_Click(object sender, EventArgs e)
    {
        // Declare an array of bytes and fill it with random numbers
        byte[] rgb = GetRandomBytes(3);
        textBox1.ForeColor = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]);
    }

  4. 少し時間を取ってコードを確認してください。 赤い下線が付いた部分があれば、その部分には何らかの間違いがあります。 単語のスペルミスや、ちょっとしたコードの配置ミスがあることがあります。

実行

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

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

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

  2. ビルドの数秒後に、[Say hello] を繰り返し選択し、[Hello there!] テキストの色が変わることを確認します。

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