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

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

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

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

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

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

[前提条件]

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

WPF アプリを作成する

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

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

重要

WPF アプリケーション (.NET Framework) テンプレートは選択しないでください。

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

場所のパスを調整して、プロジェクトを別のフォルダーに保存することもできます。
最後に、[追加情報] ウィンドウで、フレームワーク設定の .NET 10.0 (長期サポート) を選択し、[作成] を選択します。

$Visual Studio 2026 の [追加情報] ダイアログのスクリーンショット。[Framework] ドロップダウンボックスでは、[.NET 10 (Long Term Support)]$.NET 10 (長期サポート)$ が選択され、赤いボックスで強調表示されています。[作成] ボタンも赤いボックスで強調表示されています。$

Visual Studio でアプリが生成されると、既定のウィンドウ MainWindow の XAML デザイナーウィンドウが開きます。デザイナーが表示されない場合は、ソリューションエクスプローラー ウィンドウで 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 の基本を理解しておく必要があります。

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

XML 名前空間

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

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

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

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

ウィンドウを変更する

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

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

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

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

<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 で提供される既定のレイアウトコントロールは、 <Grid> コントロールです。

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

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

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

<Grid>要素に新しい属性 (Margin="10") を追加します。

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

グリッドを 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 デザイナーには、各行と列が表示されます。

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

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

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

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

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

    <Label>Names</Label>

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

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

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

制御の配置

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

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

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

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

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

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

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

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

<ListBox /> コントロールの下で<Label> コントロールを宣言します。
Grid.Row プロパティを 1に設定します。
x:Name プロパティを lstNamesに設定します。

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

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>

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

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

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

<StackPanel> コントロールの下で<ListBox> コントロールを宣言します。
Grid.Row プロパティを 1に設定します。
Grid.Column プロパティを 1に設定します。
Margin を 5,0,0,0 に設定します。
```
<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 属性を使用しましたが、単一の値 ( 10) のみを入力しました。この余白の値は 5,0,0,0 であり、 10とは大きく異なります。 margin プロパティは Thickness 型であり、両方の値を解釈できます。太さは、四角形のフレームの各辺の周りのスペースを定義します。 それぞれ、左、上、右、下。余白の値が 1 つの値である場合は、4 つの辺すべてにその値が使用されます。
<StackPanel> コントロール内に、<TextBox /> コントロールを作成します。
1. x:Name プロパティを txtNameに設定します。
最後に、 <TextBox>の後、 <StackPanel>の内部に <Button> コントロールを作成します。
1. x:Name プロパティを btnAddに設定します。
2. Margin を 0,5,0,0 に設定します。
3. コンテンツを Add Nameに設定します。

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 イベントのコードを追加する

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

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

Click属性をButtonAddName_Clickに設定します。

<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>

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

このアクションにより、指定したハンドラー名と一致する分離コード内のメソッドが生成されます。
```
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 で WPF for .NET アプリを実行する。

フィードバック

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

Last updated on 2025-12-18