チュートリアル 1: ピクチャ ビューアーの作成Tutorial 1: Create a Picture Viewer

このチュートリアルでは、ピクチャをファイルから読み込んでウィンドウに表示するプログラムを作成します。In this tutorial, you build a program that loads a picture from a file and displays it in a window. ボタンやピクチャ ボックスなどのコントロールをフォームにドラッグする方法、それらのプロパティを設定する方法、およびコンテナーを使用してフォームのサイズを滑らかに変更する方法を習得できます。You learn how to drag controls like buttons and picture boxes on your form, set their properties, and use containers to smoothly resize the form. また、コードの記述の基本事項についても学習します。You also get started writing code. 以下の方法について説明します。You learn how to:

  • 新しいプロジェクトを作成します。Create a new project.

  • アプリケーションをテスト (デバッグ) します。Test (debug) an application.

  • チェック ボックスやボタンなどの基本的なコントロールをフォームに追加します。Add basic controls like check boxes and buttons to a form.

  • レイアウトを使用してフォーム上のコントロールの位置を設定します。Position controls on a form using layouts.

  • [ファイルを開く] ダイアログ ボックスと [色] ダイアログ ボックスをフォームに追加します。Add Open File and Color dialog boxes to a form.

  • IntelliSense とコード スニペットを使用してコードを記述します。Write code using IntelliSense and code snippets.

  • イベント ハンドラー メソッドを記述します。Write event handler methods.

    完成すると、プログラムは次の図のようになります。When you finish, your program will look like the following picture.

    このチュートリアルで作成する画像Picture that you create in this tutorial
    このチュートリアルで作成する画像Picture that you create in this tutorial

    サンプルの完全バージョンをダウンロードするには、「Complete Picture Viewer tutorial sample」 (画像ビューアーのチュートリアルの完全なサンプル) を参照してください。To download a completed version of the sample, see Complete Picture Viewer tutorial sample.

    ビデオへのリンクこのトピックのビデオ版については、「How Do I: Create a Picture Viewer in Visual Basic?」(操作方法: Visual Basic によるピクチャ ビューアーの作成) または「How Do I: Create a Picture Viewer in C#?」(操作方法: C# によるピクチャ ビューアーの作成) を参照してください。link to videoFor a video version of this topic, see How Do I: Create a Picture Viewer in Visual Basic? or How Do I: Create a Picture Viewer in C#?.

注意

これらのビデオでは、旧バージョンの Visual Studio を使用しているため、一部のメニュー コマンドやその他のユーザー インターフェイス要素が若干異なります。These videos use an earlier version of Visual Studio, so there are slight differences in some menu commands and other user interface elements. ただし、概念および手順は、現在のバージョンの Visual Studio でも同様です。However, the concepts and procedures work similarly in the current version of Visual Studio. このチュートリアルでは、Visual C# と Visual Basic の両方が取り上げられているため、使用しているプログラミング言語固有の情報に注意してください。Visual C# and Visual Basic are both covered in this tutorial, so focus on information specific to the programming language that you're using.

Visual Basic のコードを確認するには、コード ブロックの上部にある [VB] タブをクリックし、Visual C# のコードについては、[C#] タブをクリックします。Visual C++ の学習に関心がある場合は、「Visual Studio 内の C++ の概要」および「C++ Language Tutorial」(C++ 言語のチュートリアル) を参照してください。To see code for Visual Basic, choose the VB tab at the top of code blocks, and to see code for Visual C#, choose the C# tab. If you're interested in learning about Visual C++, see Getting Started and C++ Language Tutorial.

Visual C# アプリまたは Visual Basic UWP アプリの記述方法に興味がございましたら、「UWP アプリの構築」を参照してください。If you're interested in learning how to write Visual C# or Visual Basic UWP apps, see Build UWP apps.

タイトルTitle 説明Description
手順 1: Windows フォーム アプリケーション プロジェクトの作成Step 1: Create a Windows Forms Application Project 最初に Windows フォーム アプリケーション プロジェクトを作成します。Begin by creating a Windows Forms application project.
手順 2: プログラムの実行Step 2: Run Your Program 前の手順で作成した Windows フォーム アプリケーション プログラムを実行します。Run the Windows Forms application program that you created in the previous step.
手順 3: フォームのプロパティの設定Step 3: Set Your Form Properties [プロパティ] ウィンドウを使用してフォームの外観を変更します。Change the way your form looks using the Properties window.
手順 4: TableLayoutPanel コントロールを使用したフォームのレイアウトの設定Step 4: Lay Out Your Form with a TableLayoutPanel Control フォームに TableLayoutPanel コントロールを追加します。Add a TableLayoutPanel control to your form.
手順 5: フォームへのコントロールの追加Step 5: Add Controls to Your Form PictureBox コントロールや CheckBox コントロールなどのコントロールをフォームに追加します。Add controls, such as a PictureBox control and a CheckBox control, to your form. また、ボタンも追加します。Add buttons to your form.
手順 6: ボタン コントロールの名前の設定Step 6: Name Your Button Controls ボタンの名前をわかりやすい名前に変更します。Rename your buttons to something more meaningful.
手順 7: フォームへのダイアログ コンポーネントの追加Step 7: Add Dialog Components to Your Form OpenFileDialog コンポーネントと ColorDialog コンポーネントをフォームに追加します。Add an OpenFileDialog component and a ColorDialog component to your form.
手順 8: [Show a Picture] ボタンのイベント ハンドラーのコードの記述Step 8: Write Code for the Show a Picture Button Event Handler IntelliSense ツールを使用してコードを記述します。Write code using the IntelliSense tool.
手順 9: レビュー、コメントの追加、およびコードのテストStep 9: Review, Comment, and Test Your Code コードのレビューとテストを行います。Review and test your code. 必要に応じてコメントを追加します。Add comments as needed.
手順 10: その他のボタンおよびチェック ボックスに対するコードの記述Step 10: Write Code for Additional Buttons and a Check Box 他のボタンやチェック ボックスを使用できるようにするために、IntelliSense を使用してコードを記述します。Write code to make other buttons and a check box work using IntelliSense.
手順 11: プログラムの実行とその他の機能の使用Step 11: Run Your Program and Try Other Features プログラムを実行して背景色を設定します。Run your program and set the background color. 色、フォント、および境界線の変更など、その他の機能を試します。Try other features, such as changing colors, fonts, and borders.