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

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

このチュートリアルでは、次の作業を行いました。

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

前提条件

WPF アプリを作成する

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

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

Visual Studio の重要な部分

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

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

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

2. プロパティ

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

3. ツールボックス

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

4. XAML デザイナー

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

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

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

5. XAML コード エディター

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

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

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>

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 のであるNames.MainWindowまたはMainWindow ファイル) にマップします。

• Title 属性

  XAML オブジェクトで宣言される通常の属性により、そのオブジェクトのプロパティが設定されます。 この例では、Title 属性によって Window.Title プロパティが設定されます。

ウィンドウを変更する

例のアプリの場合、このウィンドウは大きすぎて、タイトル バーがわかりにくくなっています。 これを修正してみましょう。

1. まず、 F5 キーを押すか、メニューから Debug>Start Debugging を選択して、アプリを実行します。

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

   

2. Titleを Names に設定して、ウィンドウのタイトルを変更します。

3. ウィンドウのサイズを変更するには、 Width を 180 に、 Height を 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. <Grid>要素に新しい属性 (Margin="10") を追加します。

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

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

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

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

   

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

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

1. 行と列の定義の後に、<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 を表示するようにラベルのコンテンツを設定することで同じことが行われます。

   ラベルは、グリッドの最初の行と列に自動的に配置されているため、ウィンドウの半分を占めることがわかります。 最初の行では、その行をラベルに使用するだけなので、それほど多くのスペースは必要ありません。

2. 最初の 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 に復元します。

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

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

1. <ListBox /> コントロールの下で<Label> コントロールを宣言します。

2. Grid.Row プロパティを 1 に設定します。

3. 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添付プロパティを使用してコントロールを配置する場所をグリッドに伝えますが、スタック パネルは各子コントロールを順番に自動的にレイアウトします。 各コントロールを互いに "スタック" します。

1. <StackPanel> コントロールの下で<ListBox> コントロールを宣言します。

2. Grid.Row プロパティを 1 に設定します。

3. Grid.Column プロパティを 1 に設定します。

4. 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 型であり、両方の値を解釈できます。 太さでは、四角形のフレームの各辺の左、上、右、下の周囲のスペースがそれぞれ定義されます。 余白の値が単一の値の場合は、4 辺すべてにその値が使用されます。

5. <StackPanel> コントロール内に、<TextBox /> コントロールを作成します。

   1. x:Name プロパティを txtName に設定します。

6. 最後に、 <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 属性は、プロパティの設定に使用されるのと同様に、イベントをサブスクライブするために使用されます。

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

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

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

   このアクションは、指定されたハンドラー名と一致する分離コード内のメソッドを生成します。

   private void ButtonAddName_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
   
   End Sub
   

4. 次は、これらの 3 つの手順を行うために以下のコードを追加します。

   1. テキスト ボックスに名前が含まれていることを確認します。
   2. テキスト ボックスに入力された名前がまだ存在しないことを確認します。
   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
   

アプリを実行する

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

関連するコンテンツ

• Windows Presentation Foundation についてさらに学習する
• XAML の概要