チュートリアル: Visual Studio でピクチャ ビューアー Windows フォーム アプリを作成する

  • [アーティクル]

この一連の 3 つのチュートリアルでは、画像を読み込んで表示する Windows フォーム アプリケーションを作成します。 Visual Studio の統合開発環境 (IDE) には、アプリを作成するために必要なツールが含まれています。 詳細については、「Visual Studio IDE へようこそ」を参照してください。

このチュートリアルでは、次の方法について説明します。

  • Windows フォームを使用する Visual Studio プロジェクトを作成する
  • レイアウト要素を追加する
  • アプリケーションを実行する

前提条件

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

Windows フォーム プロジェクトを作成する

ピクチャ ビューアーを作成する場合、最初の手順は、Windows フォーム アプリ プロジェクトを作成することです。

  1. Visual Studio を開きます。

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

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. [新しいプロジェクトの作成] ウィンドウで "Windows フォーム" を検索します。 次に、 [プロジェクトの種類] 一覧から [デスクトップ] を選択します。

  4. C# または Visual Basic に対して [Windows フォーム アプリ (.NET Framework)] テンプレートを選択し、 [次へ] を選択します。

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Note

    [Windows フォーム アプリ (.NET Framework)] テンプレートが表示されない場合は、[新しいプロジェクトの作成] ウィンドウからインストールできます。 [お探しの情報が見つかりませんでしたか?] メッセージで、 [さらにツールと機能をインストールする] リンクを選択します。

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    次に、Visual Studio インストーラーで、 [.NET デスクトップ開発] を選択します。

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Visual Studio インストーラーで、 [変更] を選択します。 作業内容を保存するよう求められることがあります。 次に、 [続行] を選択してワークロードをインストールします。

  5. [新しいプロジェクトの構成] ウィンドウで、ご自分のプロジェクトに PictureViewer という名前を付けて、 [作成] を選択します。

  1. Visual Studio を開きます。

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

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. [新しいプロジェクトの作成] ウィンドウで "Windows フォーム" を検索します。 次に、 [プロジェクトの種類] 一覧から [デスクトップ] を選択します。

  4. C# または Visual Basic に対して [Windows フォーム アプリ (.NET Framework)] テンプレートを選択し、 [次へ] を選択します。

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Note

    [Windows フォーム アプリ (.NET Framework)] テンプレートが表示されない場合は、[新しいプロジェクトの作成] ウィンドウからインストールできます。 [お探しの情報が見つかりませんでしたか?] メッセージで、 [さらにツールと機能をインストールする] リンクを選択します。

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    次に、Visual Studio インストーラーで、 [.NET デスクトップ開発] を選択します。

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Visual Studio インストーラーで、 [変更] を選択します。 作業内容を保存するよう求められることがあります。 次に、 [続行] を選択してワークロードをインストールします。

  5. [新しいプロジェクトの構成] ウィンドウで、ご自分のプロジェクトに PictureViewer という名前を付けて、 [作成] を選択します。

    Screenshot shows the Configure your new project dialog box.

Visual Studio により、アプリのソリューションが作成されます。 ソリューションは、アプリに必要なすべてのプロジェクトとファイルのコンテナーです。

この時点で、Visual Studio に Windows フォーム デザイナーの空のフォームが表示されます。

レイアウト要素を追加する

画像表示アプリには、次のチュートリアルで追加するピクチャボックス、チェックボックス、4 つのボタンが含まれています。 レイアウト要素は、フォーム上の位置を制御します。 このセクションでは、フォームのタイトルを変更する方法、フォームのサイズを変更する方法、およびレイアウト要素を追加する方法について説明します。

  1. プロジェクトで、[Windows フォーム デザイナー] を選択します。 このタブでは、C# の場合は [Form1.cs [Design]] 、Visual Basic の場合は [Form1.vb [Design]] が読み取られます。

  2. [Form1] 内の任意の場所を選択します。

  3. [プロパティ] ウィンドウに、フォームのプロパティが表示されるようになりました。 通常、 [プロパティ] ウィンドウは Visual Studio の右下にあります。 このセクションでは、前景と背景の色、フォームの上部に表示されるタイトル テキスト、フォームのサイズなど、さまざまなプロパティを制御します。

    [プロパティ] が表示されない場合は、 [表示]>[プロパティ ウィンドウ] を選択します。

  4. [プロパティ] ウィンドウで [Text] プロパティを見つけます。 一覧の並べ替え方法によっては、下へのスクロールが必要になる場合があります。 値「ピクチャ ビューアー」を入力して、Enter キーを選択します。

    これで、フォームのタイトル バーに「ピクチャ ビューアー」というテキストが表示されます。

    注意

    プロパティは、カテゴリまたはアルファベット順に表示できます。 [プロパティ] ウィンドウのボタンを使用して切り替えることができます。

  5. もう一度、フォームを選択します。 フォームの右下のドラッグ ハンドルを選択します。 ハンドルは、フォームの右下隅にある小さな白い四角形です。

    Screenshot shows the Forms window with the Drag handle in the lower right.

    このハンドルをドラッグしてフォームのサイズを変更します。ここでは、幅を広げ、高さを少し高くします。 [プロパティ] ウィンドウで、 [Size] プロパティが変更されています。 [Size] プロパティを変更して、フォームのサイズを変更することもできます。

  6. Visual Studio IDE の左側で、 [ツールボックス] タブを選択します。表示されない場合は、メニュー バーから [表示]>[ツールボックス] を選択するか、Ctrl+Alt+X キーを押します。

  7. [コンテナー] の横にある小さな三角形を選択して、グループを開きます。

    Screenshot shows the Containers group in the Toolbox tab.

  8. [ツールボックス] の [TableLayoutPanel] をダブルクリックします。 コントロールをツールボックスからフォームにドラッグすることもできます。 TableLayoutPanel コントロールがフォームに表示されます。

    Screenshot show the form with the TableLayoutPanel control added.

    Note

    TableLayoutPanel を追加した後、 [TableLayoutPanel タスク] というタイトルのウィンドウがフォーム内に表示された場合は、フォーム内の任意の場所をクリックして閉じます。

  9. [TableLayoutPanel] を選択します。 プロパティ ウィンドウで、どのコントロールが選択されているかを確認できます。

    Screenshot shows the Properties window showing the TableLayoutPanel control.

  10. TableLayoutPanel を選択した状態で、 [Dock] プロパティを見つけます。その値は [なし] です。 ドロップダウンの矢印を選択し、 [塗りつぶし] を選択します。これは、ドロップダウン メニューの中央にある大きいボタンです。

    Screenshot shows the Properties window with Fill selected.

    ドッキング とは、ウィンドウが別のウィンドウまたは領域にどのようにアタッチされているかを指します。

    これで、TableLayoutPanel がフォーム全体を塗りつぶします。 この後にフォームのサイズを変更した場合、TableLayoutPanel はドッキングされたまま、フォームに合わせてサイズが変更されます。

  11. フォームで、[TableLayoutPanel] を選択します。 右上隅に、小さな黒い三角形のボタンがあります。

    その三角形を選択して、コントロールのタスク一覧を表示します。

    Screenshot shows TableLayoutPanel tasks.

  12. [行および列の編集] を選択して、 [列と行のスタイル] ダイアログ ボックスを表示します。

  13. [Column1] を選択し、サイズを 15% に設定します。 [パーセント] ボタンが選択されている必要があります。

  14. [Column2] を選択し、85% に設定します。

    Screenshot shows TableLayoutPanel column and row styles.

  15. [列と行のスタイル] ダイアログ ボックスの上部にある [表示] で、 [行] を選択します。 Row1 を 90% に、Row2 を 10% に設定します。 [OK] を選択して変更を保存します。

    これで、TableLayoutPanel の上の行が大きくなり、下の行が小さくなります。また、左の列が小さくなり、右の列が大きくなります。

    Screenshot shows the form with resized TableLayoutPanel.

レイアウトが完成しました。

注意

アプリケーションを実行する前に、 [すべてを保存] ツール バーのボタンを選択してアプリを保存します。 別の方法でアプリを保存するには、メニュー バーから [ファイル]>[すべてを保存] を選択します (または、Ctrl+Shift+S キーを押します)。 早めに、かつ頻繁に保存することをお勧めします。

アプリを実行する

Windows フォーム アプリ プロジェクトを作成するときは、実行されるプログラムをビルドします。 この段階で、ピクチャ ビューアー アプリが行うことは、あまりありません。 現時点では、タイトル バーに [ピクチャ ビューアー] と表示された空のウィンドウが開きます。

アプリを実行するには、次の手順に従います。

  1. 以下のいずれかの方法を使用します。

    • F5 キーを選択します。
    • メニュー バーで、 [デバッグ]>[デバッグ開始] の順に選択します。
    • ツール バーの [スタート] ボタンを選択します。

    Visual Studio でアプリが実行されます。 ピクチャ ビューアーというタイトルのウィンドウが表示されます。

    Screenshot shows the Windows Forms app running.

    Visual Studio IDE ツール バーをご覧ください。 アプリケーションを実行すると、他のボタンがツール バーに表示されます。 これらのボタンを使用するとアプリの停止や開始などの操作ができ、エラーの追跡に役立ちます。

    Screenshot shows the Debugging toolbar where you can stop the app.

  2. アプリを停止するには、次のいずれかの方法を使用します。

    • ツール バーで [デバッグの停止] ボタンを選択します。
    • メニュー バーで、[デバッグ]>[デバッグの停止] を選択します。
    • キーボードから Shift+F5 を入力します。
    • [ピクチャ ビューアー] ウィンドウの上隅にある [X] を選択します。

    Visual Studio IDE 内からアプリを実行すると、デバッグが呼び出されます。 アプリケーションを実行してバグを見つけ、修正します。 同じ手順で他のプログラムを実行し、デバッグします。 デバッグの詳細については、「デバッガーでのはじめに」をご覧ください。

次のステップ

次のチュートリアルに進み、ピクチャ ビューアー プログラムにコントロールを追加する方法を学習してください。

チュートリアル パート 2: ピクチャ ビューアーにコントロールを追加する