チュートリアル: .NETを使用してWPF アプリを作成する

このチュートリアルでは、Visual Studioを使用してWindows Presentation Foundation (WPF) アプリを作成する方法について説明します。 Visual Studioでは、ウィンドウにコントロールを追加し、イベントを処理します。このチュートリアルを完了すると、リストボックスに名前を追加する簡単なアプリが作成されます。

このチュートリアルでは、次の操作を行います。

新しいWPF アプリを作成します。
ウィンドウにコントロールを追加します。
コントロールイベントを処理して、アプリの機能を提供します。
アプリを実行します。

このチュートリアルに従って作成されたアプリのプレビューを次に示します。

WPF チュートリアル用の完成したサンプルアプリ

[前提条件]

Visual Studio 2026
- .NETデスクトップ開発ワークロードを選択します。
- .NET 10 個の個々のコンポーネントを選択します

WPF アプリを作成する

新しいアプリを作成するための最初の手順は、Visual Studioを開き、テンプレートからアプリを生成することです。

Visual Studioを開きます。
[ 新しいプロジェクトの作成] を選択します。
[ テンプレートの検索 ] ボックスに「 wpf」と入力し、検索結果が表示されるまで待ちます。
code language ドロップダウンで、C# または Visual Basic を選択します。
テンプレートの一覧で WPF Application を選択し、 Next を選択します。

重要

WPF Application (.NET Framework) テンプレートを選択しないでください。

次の図は、C# と Visual Basic .NET の両方のプロジェクトテンプレートを示しています。コード言語フィルターを適用した場合は、対応するテンプレートが一覧表示されます。
[ 新しいプロジェクトの構成 ] ウィンドウで、[ プロジェクト名 ] を [名前] に設定し、[ 次へ] を選択します。

場所のパスを調整して、プロジェクトを別のフォルダーに保存することもできます。
最後に、追加情報 ウィンドウで、 .NET 10.0 (Long Term Support)Framework 設定を選択し、Create を選択します。

アプリVisual Studio生成されると、既定のウィンドウの XAML デザイナーウィンドウ MainWindow が開きます。デザイナーが表示されない場合は、ソリューションエクスプローラーウィンドウで MainWindow.xaml> ファイルをダブルクリックしてデザイナーを開きます。

Visual Studioの重要な部分

Visual Studio の WPF サポートには、アプリ作成時に使用する重要な 5 つのコンポーネントがあります。

.NET 用のWPFプロジェクトを作成するときに知っておくべきVisual Studio 2026の重要なコンポーネント

ソリューションエクスプローラー

すべてのプロジェクトファイル、コード、ウィンドウ、およびリソースがこのウィンドウに表示されます。
プロパティ

このウィンドウには、選択した項目のコンテキストに基づいて構成できるプロパティ設定が表示されます。たとえば、ソリューションエクスプローラー から項目を選択すると、ファイルに関連する設定が表示されます。デザイナーでオブジェクトを選択すると、コントロールまたはウィンドウのプロパティが表示されます。
ツールボックス

ツールボックスには、デザインサーフェイスに追加できるすべてのコントロールが含まれています。コントロールを現在のサーフェスに追加するには、コントロールをダブルクリックするか、コントロールをデザイナーにドラッグアンドドロップします。代わりに XAML コードエディターウィンドウを使用してユーザーインターフェイス (UI) をデザインし、XAML デザイナーウィンドウを使用して結果をプレビューするのが一般的です。
XAML デザイナー

これは XAML ドキュメントのデザイナーです。対話型で、ツールボックスからオブジェクトをドラッグアンドドロップできます。デザイナーで項目を選択して移動することで、アプリの UI を視覚的に作成できます。

デザイナーとエディターの両方が表示されると、一方への変更がもう一方に反映されます。

デザイナーで項目を選択すると、[ プロパティ ] ウィンドウにそのオブジェクトに関するプロパティと属性が表示されます。
XAML コードエディター

これは、XAML ドキュメントの XAML コードエディターです。 XAML コードエディターは、デザイナーなしで UI を手動で作成する方法です。デザイナーは、コントロールがデザイナーに追加されたときに、コントロールのプロパティを自動的に設定する場合があります。 XAML コードエディターを使用すると、より多くの制御が可能になります。

デザイナーとエディターの両方が表示されると、一方への変更がもう一方に反映されます。コードエディターでテキストキャレット内を移動すると、[ プロパティ ] ウィンドウにそのオブジェクトに関するプロパティと属性が表示されます。

XAML を調べる

プロジェクトを作成すると、XAML コードエディターが開きます。ウィンドウを表示する最小限の XAML コードが表示されます。エディターが開いていない場合は、ソリューションエクスプローラー ウィンドウで MainWindow.xaml 項目をダブルクリックします。次の例のような XAML が表示されます。

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

重要

Visual Basic でコーディングする場合、XAML は少し異なります。具体的には、x:Class=".." 属性です。 Visual Basicの XAML は、オブジェクトのクラス名を使用し、クラスの名前空間を省略します。

XAML について理解を深めるために、次に説明します。 XAML は、WPF が UI を作成するために処理する XML の一種です。 XAML を理解するには、少なくとも XML の基本を理解しておく必要があります。

ドキュメントルートは、XAML ファイルによって記述されるオブジェクトの種類を表します。このファイルは 8 つの属性を宣言し、通常は次の 3 つのカテゴリに属します。

XML 名前空間

XML 名前空間は、XML に構造を提供します。ファイルで宣言できる XML コンテンツが決まります。

メイン属性は、ファイル全体の XML 名前空間をインポートします。この場合、WPFによって宣言された型にマップされます。その他の XML 名前空間では、プレフィックスを宣言し、XAML ファイルの他の型とオブジェクトをインポートします。たとえば、名前空間は、プレフィックスを宣言し、プロジェクトによって宣言されたオブジェクト ( コード名前空間で宣言されたオブジェクト) にマップします。
属性

この属性は、<Window>を、MainWindow.xaml.cs または MainWindow.xaml.vb ファイル (C# では Names.MainWindow クラス、Visual Basic では MainWindow) で定義された型にマップします。
属性

XAML オブジェクトで宣言する通常の属性は、そのオブジェクトのプロパティを設定します。この場合、属性はプロパティを設定します。

ウィンドウを変更する

この例のアプリでは、このウィンドウは大きすぎて、タイトルバーは説明的ではありません。これを修正しましょう。

まず、 F5 キーを押すか、メニューから [デバッグデバッグの開始 ] を選択して、アプリを実行します。

テンプレートによって生成された既定のウィンドウが、コントロールなしで表示され、 MainWindow のタイトルが表示されます。
をに設定して、ウィンドウのタイトルを変更します。

ウィンドウのサイズを変更するには、をに、をに設定します。

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

レイアウトを準備する

WPFは、さまざまなレイアウトコントロールを備えた強力なレイアウトシステムを提供します。レイアウトコントロールは、子コントロールの配置とサイズ設定に役立ち、自動的に配置することもできます。この XAML で提供される既定のレイアウトコントロールは、コントロールです。

グリッドコントロールを使用すると、テーブルと同様に行と列を定義し、特定の行と列の組み合わせの境界内にコントロールを配置できます。任意の数の子コントロールまたはその他のレイアウトコントロールをグリッドに追加できます。たとえば、特定の行と列の組み合わせに別のコントロールを配置し、その新しいグリッドにより多くの行と列を定義し、独自の子を持つことができます。

グリッドコントロールは、子コントロールを行と列に配置します。グリッドには常に 1 つの行と列が宣言されています。つまり、既定ではグリッドは 1 つのセルです。この既定の設定では、コントロールを配置する際の柔軟性は大きくはありません。

このアプリに必要なコントロールのグリッドのレイアウトを調整します。

要素に新しい属性 () を追加します。

この設定により、ウィンドウの端からグリッドが表示され、少し見た目が良くなります。

グリッドを 4 つのセルに分割して、2 つの行と 2 つの列を定義します。

<Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

XAML コードエディターまたは XAML デザイナーでグリッドを選択します。 XAML デザイナーには、各行と列が表示されます。

最初のコントロールを追加する

グリッドが構成されたので、コントロールの追加を開始できます。まず、ラベルコントロールを追加します。

行と列の定義の後に、要素内に新しい要素を作成します。要素の内容を文字列値に設定します。
```
<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>
```
は、コンテンツを定義します。一部のコントロールはコンテンツの処理方法を理解し、他のコントロールは扱いません。コントロールの内容は、プロパティにマップされます。 XAML 属性構文を使用してコンテンツを設定する場合は、次の形式を使用します: 。どちらの方法でも同じことが行われます。ラベルの内容を設定して、テキストを表示します。

ラベルは、グリッドの最初の行と列に自動的に配置されたため、ウィンドウの半分を占めます。最初の行では、ラベルにその行のみを使用するため、それほど多くの領域は必要ありません。
最初のの属性をからに変更します。

値は、グリッド行のサイズを、その内容のサイズ (この場合はラベルコントロール) に自動的に設定します。
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>
```
デザイナーに、使用可能な高さの少量を占めるラベルが表示されるようになりました。次の行を占有する余地が増えました。

制御の配置

コントロールの配置について説明します。前のセクションで作成したラベルは、グリッドの行 0 と列 0 に自動的に配置されます。行と列の番号付けは 0 から始まり、1 ずつインクリメントされます。コントロールはグリッドについて何も認識せず、コントロールはグリッド内での配置を制御するプロパティを定義しません。

コントロールにグリッドに関する知識がない場合に、別の行または列を使用するようにコントロールに指示するにはどうすればよいですか? 添付プロパティ! グリッドは、WPFによって提供されるプロパティシステムを利用します。

グリッドコントロールは、子コントロールが自身にアタッチできる新しいプロパティを定義します。プロパティは、コントロール自体には実際には存在しませんが、グリッドに追加されるとコントロールで使用できるようになります。

グリッドには、子コントロールの行と列の配置を決定する 2 つのプロパティ ( と ) が定義されています。コントロールからこれらのプロパティを省略すると、既定値は 0 になります。そのため、コントロールはグリッドの行と列に配置されます。属性をに設定して、コントロールの配置を変更してみてください。

<Label Grid.Column="1">Names</Label>

ラベルが 2 番目の列に移動していることに注意してください。と添付プロパティを使用して、作成する次のコントロールを配置できます。ただし、ここではラベルを列 0 に復元します。

名前リストボックスを作成する

グリッドのサイズが正しく、ラベルが作成されたので、ラベルの下の行にリストボックスコントロールを追加します。

コントロールの下でコントロールを宣言します。
プロパティをに設定します。
プロパティをに設定します。

コントロールに名前を付けたら、コードビハインドでそのコントロールを参照できます。属性を使用して、コントロールに名前を割り当てます。

XAML の外観を次に示します。

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

残りのコントロールを追加する

テキストボックスとボタンを追加します。ユーザーはこれらのコントロールを使用して、リストボックスに追加する名前を入力します。これらのコントロールを配置するためにグリッドに行と列を追加する代わりに、これらのコントロールをレイアウトコントロールに配置します。

スタックパネルは、コントロールの配置方法でグリッドとは異なります。プロパティと添付プロパティを使用して、コントロールが必要な場所をグリッドに通知すると、スタックパネルが自動的に動作します。それは各子コントロールを順番にレイアウトします。各コントロールを互いに "スタック" します。

コントロールの下でコントロールを宣言します。
プロパティをに設定します。
プロパティをに設定します。
をに設定します。
```
<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>
```
以前はグリッドで属性を使用しましたが、単一の値 ( ) のみを入力しました。この余白の値はであり、とは大きく異なります。 margin プロパティは型であり、両方の値を解釈できます。太さは、四角形のフレームの各辺の周りのスペースを定義します。それぞれ、左、上、右、下。余白の値が 1 つの値である場合は、4 つの辺すべてにその値が使用されます。
コントロール内に、コントロールを作成します。
1. プロパティをに設定します。
最後に、の後、の内部にコントロールを作成します。
1. プロパティをに設定します。
2. をに設定します。
3. コンテンツをに設定します。

XAML の外観を次に示します。

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

ウィンドウのレイアウトが完了しました。ただし、アプリには、実際に機能するためのロジックはありません。次に、コントロールイベントをコードにフックし、アプリで実際に何かを行う必要があります。

Click イベントのコードを追加する

作成したには、ユーザーがボタンを押したときにアプリによって発生するイベントがあります。このイベントをサブスクライブし、リストボックスに名前を追加するコードを追加します。プロパティを設定する場合と同様に、XAML 属性を使用してイベントをサブスクライブします。

コントロールを見つけます。

属性を（ここに値を入れてください）に設定します。

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

イベントハンドラーコードを生成します。を右クリックし、[定義に移動] を選択します。

このアクションにより、指定したハンドラー名と一致する分離コード内のメソッドが生成されます。
```
private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}
```
```
Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub
```

次に、次の 3 つの手順を実行するコードを追加します。

テキストボックスに名前が含まれていることを確認します。
テキストボックスに入力した名前がまだ存在していないことを確認します。
リストボックスに名前を追加します。

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

アプリを実行する

イベントを処理した後、アプリを実行します。ウィンドウが表示され、テキストボックスに名前を入力できます。ボタンを選択して名前を追加します。

Visual Studio 2026 で .NET 向けの WPF アプリを実行します。

Windows Presentation Foundation
XAML の概要

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-12-18