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

2025-05-07

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

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

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

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

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

[前提条件]

Visual Studio 2022 バージョン 17.12 以降のバージョン
- .NET デスクトップ開発ワークロードを選択する
- .NET 9 の個々のコンポーネントを選択する

WPF アプリを作成する

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

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

重要

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

次の図は、C# と Visual Basic の両方の .NET プロジェクトテンプレートを示しています。 コード言語フィルターを適用した場合、その言語のテンプレートのみが表示されます。
[ 新しいプロジェクトの構成] ウィンドウで、次の操作を行います。
1. [ プロジェクト名 ] ボックスに「 名前」と入力します。
2. [ ソリューションとプロジェクトを同じディレクトリに配置 する] チェックボックスをオンにします。
3. 必要に応じて、別の場所を選択してコードを保存します。
4. [ 次へ ] ボタンを選択します。
[追加情報] ウィンドウで、ターゲットフレームワークの .NET 9.0 (Standard Term Support) を選択します。 [作成] ボタンを選択します。

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

Visual Studio の重要な部分

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

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

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

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

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

ツールボックスには、デザインサーフェイスに追加できるすべてのコントロールが含まれています。コントロールを現在のサーフェスに追加するには、コントロールをダブルクリックするか、サーフェス上のコントロールをドラッグアンドドロップします。代わりに 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 は、UI を作成するために WPF によって処理される単なる 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 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>

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

追加する最後の 2 つのコントロールは、テキストボックスとボタンです。このボタンは、ユーザーがリストボックスに追加する名前を入力するために使用します。ただし、これらのコントロールを配置するためにグリッドに行と列を追加する代わりに、これらのコントロールを <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値は 1 つだけです。この余白の値は 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

アプリを実行する

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

.NET アプリ用の Windows Presentation Foundation (WPF) の実行。