C# WPF入門：初心者でもわかるデスクトップアプリ開発の始め方と基本サンプル

はじめに

C# WPFは、Windows向けのデスクトップアプリを作りたい人にとって、今でも実用性の高い開発技術です。業務システム、社内ツール、データ入力フォーム、管理画面など、Windowsパソコン上で動くアプリをC#で作りたい場合、WPFは有力な選択肢になります。

WPFは「Windows Presentation Foundation」の略で、Microsoftが提供するWindows専用のUIフレームワークです。画面はXAML、処理はC#で書くことができ、見た目とロジックを分けながら開発できる点が大きな特徴です。Microsoft公式ドキュメントでも、WPFは.NETにおけるWindows専用のUIフレームワークとして説明されています。

この記事では、「c# wpfをこれから学びたい」「WPFで最初のデスクトップアプリを作ってみたい」という初心者向けに、基本概念、開発環境の準備、Hello Worldアプリ、入力フォームのサンプル、データバインディング、MVVM、よくあるエラーまで順番に解説します。

1. C# WPFとは？初心者向けに特徴とできることを解説

C# WPFとは、C#とWPFを使ってWindowsデスクトップアプリを開発する方法のことです。C#は処理を書くためのプログラミング言語、WPFは画面を作るためのUIフレームワークと考えると理解しやすいです。

たとえば、画面にボタンを置く、テキストボックスに入力された文字を取得する、一覧表を表示する、クリックされたら処理を実行するといった機能を、C#とWPFで実装できます。

1-1. WPFはWindowsデスクトップアプリを作るためのUIフレームワーク

WPFは、Windows上で動作するデスクトップアプリを作るための仕組みです。Webブラウザで表示するWebアプリではなく、ユーザーのPCにインストールして使うアプリを作る場面で使われます。

WPFでは、ボタン、テキストボックス、ラベル、チェックボックス、リスト、表、メニューなど、デスクトップアプリに必要なUI部品を利用できます。また、レイアウト、スタイル、データバインディング、アニメーション、2Dグラフィックスなど、見た目を柔軟に作るための機能も用意されています。WPFのコントロールはXAMLまたはコードから作成でき、スタイルやイベントと組み合わせて利用できます。

1-2. C#とXAMLで画面と処理を分けて開発できる仕組み

C# WPFでは、主に次の2つのファイルを使ってアプリを作ります。

MainWindow.xaml     ：画面の見た目を定義するファイル
MainWindow.xaml.cs  ：ボタンを押したときなどの処理を書くC#ファイル

XAMLには、画面に配置する部品やレイアウトを書きます。C#には、クリックされたときの処理、入力値のチェック、計算、ファイル保存などの動作を書きます。

たとえば、XAMLでボタンを配置し、C#でクリック時の処理を書くと、次のようになります。

XML
<Button Content="クリック" Click="Button_Click" />

C#
private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("ボタンがクリックされました");
}

このように、画面と処理を分けて書けるため、規模が大きくなっても整理しやすいのがWPFの特徴です。

1-3. WPFで作れるアプリの例：業務ツール・管理画面・入力フォーム

WPFでは、次のようなWindowsアプリを作成できます。

・顧客情報を登録する入力フォーム
・在庫や売上を管理する業務ツール
・CSVやExcelファイルを読み込んで処理する社内アプリ
・画像やログを確認するビューアー
・設定画面付きのデスクトップツール
・データベースと連携する管理画面

特に、社内利用のWindowsアプリや、業務用PCで動かす入力・管理ツールでは、C# WPFは使いやすい選択肢です。C#で処理を書けるため、ファイル操作、データベース連携、API通信なども組み合わせやすいです。

1-4. WPFが初心者に難しく感じられる理由

WPFは便利な一方で、初心者には少し難しく感じられることがあります。理由は、C#だけでなくXAMLも学ぶ必要があるからです。

また、Grid、StackPanel、DataContext、Binding、イベント、コードビハインド、MVVMなど、最初に出てくる用語が多い点もつまずきやすいポイントです。

ただし、最初からすべてを理解する必要はありません。まずは「画面を作る」「ボタンを押したら処理する」「入力値を取得する」という基本から始めるのがおすすめです。

2. C# WPFを学ぶ前に知っておきたい基礎知識

C# WPFを学ぶ前に、最低限知っておくと理解がスムーズになる基礎知識があります。特に重要なのは、C#の基本文法、.NET、XAML、WindowやControlの考え方です。

2-1. C#の基本文法で最低限理解しておきたいこと

WPFアプリではC#で処理を書きます。そのため、次のような基本文法を理解しておくと学習しやすくなります。

・変数
・if文
・for文
・メソッド
・クラス
・プロパティ
・イベント
・文字列の扱い
・nullの考え方

最初から高度なC#文法をすべて覚える必要はありません。WPF初心者の場合、まずはボタンクリック時に文字を表示する、TextBoxの値を取得する、if文で入力チェックをする、といった基本操作ができれば十分です。

2-2. .NETとWPFの関係

.NETは、C#などの言語でアプリケーションを作るための開発基盤です。WPFは、その.NET上でWindowsデスクトップアプリの画面を作るためのUIフレームワークです。

つまり、C# WPFアプリは次のような関係で成り立っています。

C#       ：処理を書く言語
.NET     ：アプリを動かす開発基盤
WPF      ：Windowsデスクトップ画面を作るUIフレームワーク
XAML     ：画面を記述するマークアップ言語

現在のWPFは.NETで利用できるWindows専用UIフレームワークとして提供されています。

2-3. XAMLとは？HTMLとの違いも含めて解説

XAMLは「ザムル」と読み、WPFの画面を定義するために使われるマークアップ言語です。見た目がHTMLに似ているため、Web制作の経験がある人には比較的なじみやすいかもしれません。

たとえば、XAMLでは次のようにボタンを配置します。

XML
<Button Content="保存" Width="100" Height="40" />

HTMLとの違いは、HTMLがWebページの構造を表すのに対して、XAMLはWPFアプリの画面部品やレイアウトを表す点です。WPFにおけるXAMLは、Windowsアプリの画面を記述するために使われます。

2-4. Window・Control・Layoutの基本概念

WPFを理解するうえで、Window、Control、Layoutの3つは重要です。

Windowはアプリの画面そのものです。通常、最初に作成される画面はMainWindow.xamlです。

Controlは画面上に配置する部品です。Button、TextBox、Label、TextBlock、CheckBox、ListBoxなどが代表的です。

Layoutは部品をどのように並べるかを決める仕組みです。Grid、StackPanel、DockPanelなどがあります。

Window
 └─ Grid
     ├─ Label
     ├─ TextBox
     └─ Button

このように、Windowの中にLayoutを置き、その中にControlを配置するイメージです。

3. WPFとWindows Forms・WinUI・MAUIの違い

C#で画面アプリを作る技術には、WPF以外にもWindows Forms、WinUI、.NET MAUIなどがあります。初心者は「結局どれを選べばいいのか」で迷いやすいため、それぞれの違いを整理しておきましょう。

3-1. WPFとWindows Formsの違い

Windows Formsは、古くからあるWindowsデスクトップアプリ開発技術です。画面部品をドラッグ＆ドロップで配置しやすく、シンプルなツールを作る場合には今でも使われます。

一方、WPFはXAMLを使って画面を作り、デザインやレイアウトを柔軟に設定できます。データバインディングやスタイルの仕組みも強力です。

Windows Forms：シンプルで直感的、古くから使われている
WPF          ：デザインやデータ連携に強く、XAMLで画面を作る

初心者が小さなツールをすぐ作りたいならWindows Formsも選択肢になりますが、XAML、データバインディング、MVVMなどを学びながら本格的な画面アプリを作りたいならWPFが向いています。

3-2. WPFとWinUIの違い

WinUIは、Windows App SDKをベースにした比較的新しいWindowsアプリ向けUI技術です。Windows App SDKはWinUI 3や既存のデスクトップアプリ向けに、アプリライフサイクル、ウィンドウ、通知などの機能を提供する仕組みとして説明されています。

WPFは長く使われてきた成熟した技術で、情報量や既存資産が多い点が強みです。WinUIはより新しいWindows UIに近いアプリを作りたい場合に候補になります。

WPF   ：実績が多く、業務アプリや既存システムで使いやすい
WinUI ：新しいWindowsアプリ開発で検討されるUI技術

初心者がC#でデスクトップアプリを学ぶなら、情報が多くサンプルも豊富なWPFは学びやすい選択肢です。

3-3. WPFと.NET MAUIの違い

.NET MAUIは、Android、iOS、macOS、Windowsなど複数のプラットフォームを対象に、C#とXAMLでネイティブアプリを作るためのクロスプラットフォームUIフレームワークです。Microsoft公式ドキュメントでも、.NET MAUIはモバイルとデスクトップを対象にしたクロスプラットフォームUIツールキットとして説明されています。

WPFはWindows専用です。Windows以外でも動かしたい場合は.NET MAUIを検討します。一方、Windowsだけで使う業務アプリを作るなら、WPFのほうがシンプルに始めやすい場合があります。

WPF       ：Windows専用のデスクトップアプリ向け
.NET MAUI ：Windows、Android、iOS、macOSなど複数環境向け

3-4. 初心者がC# WPFを選ぶべきケース

初心者がC# WPFを選ぶべきなのは、次のようなケースです。

・Windows上で動くデスクトップアプリを作りたい
・C#を使って画面付きアプリを作りたい
・業務ツールや入力フォームを作りたい
・XAMLやデータバインディングを学びたい
・将来的にMVVMも理解したい
・既存のWPFアプリを保守する必要がある

逆に、スマホアプリも同時に作りたい場合は.NET MAUI、最新のWindows UIを重視する場合はWinUI、非常に簡単な画面だけでよい場合はWindows Formsも候補になります。

4. C# WPF開発に必要な環境を準備する

C# WPFアプリを作るには、Visual Studioを使うのが一般的です。Visual Studioには、WPFアプリのプロジェクト作成、画面デザイナー、コード補完、デバッグ機能などが含まれているため、初心者でも開発を始めやすいです。

4-1. Visual Studioをインストールする

まず、Microsoftの公式サイトからVisual Studioをインストールします。個人学習や小規模開発であれば、Visual Studio Communityを利用できます。

インストール時には、C#や.NETデスクトップ開発に必要な機能を選択します。Microsoft公式のWPFチュートリアルでも、Visual Studioと.NET desktop developmentワークロードが前提として案内されています。

4-2. 必要なワークロードを選択する

Visual Studio Installerを開いたら、ワークロードの選択画面で次の項目を選びます。

.NET デスクトップ開発

このワークロードを選択すると、C#でWPFやWindows Formsなどのデスクトップアプリを開発するために必要な機能がインストールされます。

環境によっては、対象にする.NETのバージョンも選択できます。初心者の場合、まずはVisual Studioが推奨する最新の安定版を選ぶとよいでしょう。

4-3. WPFアプリケーションプロジェクトを作成する

Visual Studioを起動したら、次の手順でWPFプロジェクトを作成します。

1. 「新しいプロジェクトの作成」をクリック
2. 検索欄に「WPF」と入力
3. 「WPF アプリケーション」を選択
4. プロジェクト名を入力
5. 保存場所を指定
6. 対象フレームワークを選択
7. 作成をクリック

プロジェクト名は、最初は「WpfSampleApp」など分かりやすい名前にするとよいです。

4-4. プロジェクト構成と主要ファイルの役割

WPFプロジェクトを作成すると、主に次のようなファイルが生成されます。

App.xaml
App.xaml.cs
MainWindow.xaml
MainWindow.xaml.cs
プロジェクト名.csproj

それぞれの役割は次のとおりです。

App.xaml
アプリ全体の設定を書くファイルです。最初に表示する画面などもここで指定されます。

App.xaml.cs
App.xamlに対応するC#コードです。アプリ全体の起動処理などを書けます。

MainWindow.xaml
最初に表示されるメイン画面の見た目を定義するファイルです。

MainWindow.xaml.cs
MainWindow.xamlに対応するC#コードです。ボタンクリックなどの処理を書きます。

.csproj
プロジェクトの設定ファイルです。対象フレームワークや参照パッケージなどが管理されます。

初心者が最初によく触るのは、MainWindow.xamlとMainWindow.xaml.csです。

5. C# WPFで最初のHello Worldアプリを作る

ここでは、C# WPFで最初のHello Worldアプリを作ります。画面に文字を表示し、ボタンをクリックするとメッセージが変わる簡単なアプリです。

5-1. MainWindow.xamlに画面を作成する

MainWindow.xamlを開くと、最初は次のようなコードが表示されます。

XML
<Window x:Class="WpfSampleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Windowは画面全体、Gridはその中に部品を配置するためのレイアウトです。

5-2. TextBlockで文字を表示する

画面に文字を表示するには、TextBlockを使います。

XML
<Window x:Class="WpfSampleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Hello WPF" Height="300" Width="400">
    <Grid>
        <TextBlock Text="Hello World"
                   FontSize="28"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Grid>
</Window>

この状態で実行すると、画面中央に「Hello World」と表示されます。

5-3. Buttonを配置してクリック処理を追加する

次に、ボタンを追加します。TextBlockとButtonを縦に並べたいので、StackPanelを使います。

XML
<Window x:Class="WpfSampleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Hello WPF" Height="300" Width="400">
    <Grid>
        <StackPanel HorizontalAlignment="Center"
                    VerticalAlignment="Center">
            <TextBlock x:Name="MessageText"
                       Text="Hello World"
                       FontSize="28"
                       Margin="0,0,0,20"
                       TextAlignment="Center" />

            <Button Content="クリック"
                    Width="120"
                    Height="40"
                    Click="Button_Click" />
        </StackPanel>
    </Grid>
</Window>

ここでは、TextBlockにx:Name="MessageText"を指定しています。これにより、C#コードからこのTextBlockを操作できます。

5-4. MainWindow.xaml.csにC#コードを書く

MainWindow.xaml.csを開き、Button_Clickメソッドを追加します。

C#
using System.Windows;

namespace WpfSampleApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageText.Text = "C# WPFへようこそ！";
        }
    }
}

Button_Clickは、ボタンがクリックされたときに呼び出されるメソッドです。MessageText.Textに新しい文字列を代入することで、画面に表示される文字を変更しています。

5-5. アプリを実行して動作確認する

Visual Studio上部の実行ボタンを押すと、WPFアプリが起動します。

画面に「Hello World」と表示され、ボタンをクリックすると「C# WPFへようこそ！」に変われば成功です。

このサンプルで、WPFの基本である「XAMLで画面を作る」「C#で処理を書く」「イベントで画面を操作する」という流れを確認できました。

6. WPFの画面作成でよく使うXAMLの基本

WPFではXAMLを使って画面を作ります。初心者が最初に覚えるべきなのは、Grid、StackPanel、TextBox、Button、Label、Margin、Name属性などです。

6-1. Gridで画面を分割する

Gridは、画面を行と列に分けて部品を配置するレイアウトです。入力フォームや管理画面でよく使います。

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

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

    <Label Content="名前" Grid.Row="0" Grid.Column="0" />
    <TextBox Grid.Row="0" Grid.Column="1" />
</Grid>

RowDefinitionで行、ColumnDefinitionで列を定義します。Grid.RowとGrid.Columnを指定すると、部品を置く位置を決められます。

6-2. StackPanelで部品を縦横に並べる

StackPanelは、部品を縦または横に並べるシンプルなレイアウトです。

縦に並べる場合は次のように書きます。

XML
<StackPanel>
    <TextBlock Text="名前" />
    <TextBox />
    <Button Content="送信" />
</StackPanel>

横に並べる場合は、Orientation="Horizontal"を指定します。

XML
<StackPanel Orientation="Horizontal">
    <Button Content="OK" />
    <Button Content="キャンセル" />
</StackPanel>

簡単な画面ならStackPanelだけでも作れますが、複雑な入力フォームではGridと組み合わせると便利です。

6-3. TextBox・Button・Labelの使い方

WPFでよく使う基本コントロールは、TextBox、Button、Labelです。

TextBoxは文字入力に使います。

XML
<TextBox x:Name="NameTextBox" Width="200" />

Buttonはクリックできるボタンです。

XML
<Button Content="登録" Click="RegisterButton_Click" />

Labelは項目名の表示に使います。

XML
<Label Content="名前：" />

入力フォームでは、Labelで項目名を表示し、TextBoxで入力し、Buttonで処理を実行する構成がよく使われます。

6-4. Margin・Padding・Width・Heightの指定方法

WPFでは、Margin、Padding、Width、Heightを使って見た目を調整します。

XML
<Button Content="保存"
        Width="120"
        Height="40"
        Margin="10"
        Padding="8" />

それぞれの意味は次のとおりです。

Width   ：横幅
Height  ：高さ
Margin  ：部品の外側の余白
Padding ：部品の内側の余白

Marginは4つの値で指定することもできます。

XML
<TextBox Margin="10,5,10,5" />

この場合、左、上、右、下の順番で余白を指定します。

6-5. Name属性でC#コードからコントロールを操作する

C#コードからXAML上の部品を操作したい場合は、x:Nameを指定します。

XML
<TextBox x:Name="UserNameTextBox" />
<TextBlock x:Name="ResultTextBlock" />

C#側では、次のように参照できます。

C#
string name = UserNameTextBox.Text;
ResultTextBlock.Text = "こんにちは、" + name + "さん";

x:Nameを付け忘れると、C#側でコントロール名を使えません。初心者がよくつまずくポイントなので注意しましょう。

7. C# WPFのイベント処理を理解する

WPFアプリでは、ユーザーの操作に応じて処理を実行します。ボタンをクリックした、文字を入力した、選択項目を変更した、画面を開いたといった操作をきっかけに動く処理をイベント処理と呼びます。

7-1. ボタンクリックイベントの基本

ボタンクリックイベントは、WPF初心者が最初に覚えるべきイベントです。

XAMLでは、Click属性にメソッド名を指定します。

XML
<Button Content="実行" Click="ExecuteButton_Click" />

C#側では、同じ名前のメソッドを作成します。

C#
private void ExecuteButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("実行されました");
}

メソッド名がXAMLとC#で一致していないとエラーになります。

7-2. TextBoxの入力値を取得する方法

TextBoxに入力された値を取得するには、Textプロパティを使います。

XML
<TextBox x:Name="NameTextBox" />
<Button Content="表示" Click="ShowButton_Click" />

C#
private void ShowButton_Click(object sender, RoutedEventArgs e)
{
    string name = NameTextBox.Text;
    MessageBox.Show(name);
}

入力された文字はstring型として取得されます。数値として使いたい場合は、int.TryParseなどで変換します。

C#
if (int.TryParse(AgeTextBox.Text, out int age))
{
    MessageBox.Show($"年齢は{age}歳です");
}
else
{
    MessageBox.Show("年齢は数値で入力してください");
}

7-3. 画面にメッセージを表示する方法

WPFで簡単にメッセージを表示するには、MessageBox.Showを使います。

C#
MessageBox.Show("登録しました");

結果を画面内に表示したい場合は、TextBlockやLabelのTextまたはContentを変更します。

C#
ResultTextBlock.Text = "登録が完了しました";

エラーや確認メッセージはMessageBox、通常の結果表示はTextBlockを使うと分かりやすいです。

7-4. 初心者がつまずきやすいイベント処理の注意点

イベント処理でよくあるミスは次のとおりです。

・XAMLのClickに書いた名前とC#のメソッド名が違う
・メソッドの引数が間違っている
・x:Nameを付けていないためC#側で参照できない
・InitializeComponent()を削除してしまった
・MainWindow.xamlとMainWindow.xaml.csのクラス名やnamespaceがずれている

特に、イベントハンドラーの形は次のように覚えておきましょう。

C#
private void メソッド名(object sender, RoutedEventArgs e)
{
    // 処理
}

8. C# WPFの基本サンプル：簡単な入力フォームアプリを作る

ここでは、C# WPFの基本サンプルとして、名前と年齢を入力して結果を表示するフォームアプリを作ります。入力チェックも含めることで、実際の業務アプリに近い基本パターンを学べます。

8-1. 作成するサンプルアプリの完成イメージ

作成するアプリの動きは次のとおりです。

1. 名前を入力する
2. 年齢を入力する
3. 「確認」ボタンをクリックする
4. 未入力や数値エラーをチェックする
5. 問題なければ結果を画面に表示する

完成イメージは、入力フォームとしてよくある構成です。

名前：[          ]
年齢：[          ]

[確認]

結果：山田さんは30歳です。

8-2. 画面レイアウトをXAMLで作成する

MainWindow.xamlに次のコードを書きます。

XML
<Window x:Class="WpfSampleApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="入力フォームサンプル"
        Height="300"
        Width="420">
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

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

        <Label Content="名前：" Grid.Row="0" Grid.Column="0" Margin="0,0,0,10" />
        <TextBox x:Name="NameTextBox"
                 Grid.Row="0"
                 Grid.Column="1"
                 Margin="0,0,0,10" />

        <Label Content="年齢：" Grid.Row="1" Grid.Column="0" Margin="0,0,0,10" />
        <TextBox x:Name="AgeTextBox"
                 Grid.Row="1"
                 Grid.Column="1"
                 Margin="0,0,0,10" />

        <Button Content="確認"
                Grid.Row="2"
                Grid.Column="1"
                Width="100"
                Height="35"
                HorizontalAlignment="Left"
                Click="ConfirmButton_Click" />

        <TextBlock x:Name="ResultTextBlock"
                   Grid.Row="3"
                   Grid.ColumnSpan="2"
                   Margin="0,20,0,0"
                   FontSize="16"
                   TextWrapping="Wrap" />
    </Grid>
</Window>

Gridを使うことで、ラベルと入力欄をきれいに並べられます。

8-3. 入力内容をC#で取得する

MainWindow.xaml.csに、ボタンがクリックされたときの処理を書きます。

C#
using System.Windows;

namespace WpfSampleApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ConfirmButton_Click(object sender, RoutedEventArgs e)
        {
            string name = NameTextBox.Text;
            string ageText = AgeTextBox.Text;

            ResultTextBlock.Text = $"名前：{name}、年齢：{ageText}";
        }
    }
}

この段階では、入力チェックをしていないため、空欄でも文字でもそのまま表示されます。

8-4. 入力チェックを実装する

次に、名前が空欄の場合、年齢が数値でない場合にエラーを表示します。

C#
private void ConfirmButton_Click(object sender, RoutedEventArgs e)
{
    string name = NameTextBox.Text;
    string ageText = AgeTextBox.Text;

    if (string.IsNullOrWhiteSpace(name))
    {
        MessageBox.Show("名前を入力してください");
        return;
    }

    if (string.IsNullOrWhiteSpace(ageText))
    {
        MessageBox.Show("年齢を入力してください");
        return;
    }

    if (!int.TryParse(ageText, out int age))
    {
        MessageBox.Show("年齢は数値で入力してください");
        return;
    }

    ResultTextBlock.Text = $"{name}さんは{age}歳です。";
}

returnを使うことで、エラーがあった時点で処理を中断できます。

8-5. 結果を画面に表示する

入力内容が正しい場合、ResultTextBlockに結果を表示します。

C#
ResultTextBlock.Text = $"{name}さんは{age}歳です。";

MessageBoxだけでなく、画面内のTextBlockに結果を表示すると、入力フォームアプリらしい動きになります。

このサンプルには、WPFの基本であるレイアウト、TextBox、Button、イベント、入力チェック、画面表示が含まれています。C# WPF初心者は、まずこのような小さなフォームを作れるようになると理解が進みます。

9. WPFで重要なデータバインディングの基本

WPFを学ぶうえで重要なのが、データバインディングです。最初は少し難しく感じるかもしれませんが、WPFらしい開発をするためには欠かせない仕組みです。

9-1. データバインディングとは何か

データバインディングとは、画面の表示とC#側のデータを結び付ける仕組みです。

たとえば、C#側にNameというプロパティがあり、それを画面のTextBoxに表示したい場合、バインディングを使うと値を連携できます。

Microsoft公式ドキュメントでは、WPFのデータバインディングは、アプリがデータを表示し操作するための一貫した方法を提供すると説明されています。

9-2. XAMLとC#の値を連携する仕組み

コードビハインドでは、次のようにC#から直接TextBoxの値を操作しました。

C#
NameTextBox.Text = "山田";

一方、データバインディングでは、画面部品とC#のプロパティを結び付けます。

XML
<TextBox Text="{Binding UserName}" />

このように書くことで、TextBoxのTextとUserNameプロパティを連携できます。

9-3. Bindingの基本的な書き方

Bindingの基本形は次のとおりです。

XML
<TextBlock Text="{Binding プロパティ名}" />

たとえば、UserNameというプロパティにバインドする場合は次のように書きます。

XML
<TextBlock Text="{Binding UserName}" />

TextBoxで入力値をC#側に反映したい場合は、ModeやUpdateSourceTriggerを指定することもあります。

XML
<TextBox Text="{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

TwoWayは、画面からC#、C#から画面の両方向に値を反映する指定です。PropertyChangedは、入力内容が変わるたびに値を更新する指定です。

9-4. DataContextの役割

DataContextは、Bindingがどのオブジェクトを参照するかを決めるための設定です。

たとえば、MainWindow自身をDataContextにする場合は、C#側で次のように書けます。

C#
public MainWindow()
{
    InitializeComponent();
    DataContext = this;
}

そして、C#側にプロパティを用意します。

C#
public string UserName { get; set; } = "山田太郎";

XAMLでは次のようにバインドします。

XML
<TextBlock Text="{Binding UserName}" />

WPFのBindingは、通常DataContextを参照してバインディング元を解決します。DataContextが明示されていない場合、親要素のDataContextが継承される仕組みです。

9-5. コードビハインドとの違い

コードビハインドは、MainWindow.xaml.csに直接処理を書く方法です。初心者には分かりやすく、最初の学習に向いています。

一方、データバインディングを使うと、画面とデータの関係をXAMLで表現できるため、コードの見通しがよくなります。

コードビハインド
・分かりやすい
・小さなアプリに向いている
・画面と処理が密結合になりやすい

データバインディング
・WPFらしい書き方
・画面とデータを分けやすい
・MVVMにつなげやすい

初心者は、まずコードビハインドでWPFの動きを理解し、その後でデータバインディングを学ぶとスムーズです。

10. C# WPFでよく出てくるMVVMとは

C# WPFを調べていると、MVVMという言葉がよく出てきます。MVVMはWPF開発でよく使われる設計パターンですが、初心者が最初から完璧に理解する必要はありません。

10-1. MVVMは画面と処理を分ける設計パターン

MVVMは、Model、View、ViewModelの3つに役割を分ける設計パターンです。

WPFでは、XAMLで作る画面と、C#で扱うデータや処理を分離するためにMVVMがよく使われます。画面に直接処理を書きすぎると、アプリが大きくなったときに修正しにくくなります。MVVMを使うと、画面とロジックを整理しやすくなります。

10-2. Model・View・ViewModelの役割

MVVMの役割は次のように考えると分かりやすいです。

Model
データや業務ロジックを担当します。顧客情報、商品情報、計算処理、データベース処理などです。

View
画面を担当します。WPFでは主にXAMLがViewになります。

ViewModel
ViewとModelの橋渡しを担当します。画面に表示するデータや、ボタン操作で実行する処理を持ちます。

WPFでは、ViewとViewModelをデータバインディングでつなぐことが多いです。

10-3. 初心者は最初からMVVMを使うべきか

初心者が最初からMVVMを使う必要はありません。

最初からMVVMを使おうとすると、ViewModel、INotifyPropertyChanged、Command、DataContextなど、覚えることが一気に増えてしまいます。その結果、WPFそのものの基本が分からなくなることがあります。

まずは、コードビハインドで次のことを理解しましょう。

・XAMLで画面を作る
・Buttonを配置する
・Clickイベントを書く
・TextBoxの値を取得する
・TextBlockに結果を表示する
・GridやStackPanelでレイアウトする

その後、データバインディングを学び、次の段階でMVVMに進むのがおすすめです。

10-4. MVVMを学ぶタイミングと学習順序

MVVMを学ぶおすすめの順序は次のとおりです。

1. WPFの基本コントロールを使えるようにする
2. イベント処理を理解する
3. データバインディングを理解する
4. DataContextを理解する
5. INotifyPropertyChangedを学ぶ
6. Commandを学ぶ
7. MVVMで小さなアプリを作る

MVVMを実装する際には、CommunityToolkit.Mvvmのようなライブラリを使うこともあります。Microsoft公式ドキュメントでは、CommunityToolkit.Mvvmはモダンで高速、モジュール式のMVVMライブラリとして紹介されています。

11. C# WPF初心者がよく遭遇するエラーと解決方法

C# WPFを学び始めると、XAMLやイベント、コントロール名に関するエラーに遭遇しやすいです。ここでは、初心者がよくつまずくエラーと解決方法を紹介します。

11-1. XAMLの構文エラーが出る

XAMLでは、タグの閉じ忘れや属性の書き間違いでエラーが出ます。

よくある例は次のようなものです。

XML
<Button Content="保存"

このコードは、タグが閉じられていないためエラーになります。正しくは次のように書きます。

XML
<Button Content="保存" />

また、開始タグと終了タグの名前が一致していない場合もエラーになります。

XML
<StackPanel>
    <Button Content="保存" />
</Grid>

この場合、StackPanelで始まっているのにGridで閉じているため、正しくありません。

XML
<StackPanel>
    <Button Content="保存" />
</StackPanel>

XAMLエラーが出たら、まずタグの閉じ忘れ、ダブルクォーテーションの不足、開始タグと終了タグの対応を確認しましょう。

11-2. コントロール名がC#側で認識されない

XAMLに配置したTextBoxやTextBlockをC#側で使いたい場合は、x:Nameが必要です。

間違った例です。

XML
<TextBox />

このままでは、C#側で名前を指定して操作できません。

正しくは次のように書きます。

XML
<TextBox x:Name="NameTextBox" />

C#側では次のように参照できます。

C#
string name = NameTextBox.Text;

x:Nameを書いたのに認識されない場合は、一度ビルドし直す、XAMLにエラーがないか確認する、MainWindow.xaml.csのクラス名やnamespaceが一致しているか確認しましょう。

11-3. イベントハンドラーが見つからない

XAMLでClickイベントを指定したのに、C#側に対応するメソッドがないとエラーになります。

XML
<Button Content="保存" Click="SaveButton_Click" />

この場合、C#側には次のメソッドが必要です。

C#
private void SaveButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("保存しました");
}

メソッド名のスペルミスにも注意しましょう。SaveButton_ClickとSaveButon_Clickのように1文字違うだけでも認識されません。

11-4. ビルドは成功するが画面が表示されない

ビルドは成功するのに画面が表示されない場合、App.xamlのStartupUriを確認します。

XML
<Application x:Class="WpfSampleApp.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
</Application>

StartupUriに存在しないXAMLファイル名が指定されていると、起動時に画面が表示されない原因になります。

また、MainWindowのコンストラクターでInitializeComponent()を削除していないかも確認しましょう。

C#
public MainWindow()
{
    InitializeComponent();
}

InitializeComponent()は、XAMLで定義した画面を読み込むために必要です。

11-5. 日本語や文字化けに関するトラブル

WPFアプリで日本語が文字化けする場合、ファイルの文字コードや外部ファイルの読み書き方法を確認します。

C#のソースコードやXAML自体は通常、日本語をそのまま扱えます。ただし、CSVやテキストファイルを読み込む場合、ファイルの文字コードがShift_JIS、UTF-8、UTF-8 BOM付きなどで異なることがあります。

たとえば、UTF-8のファイルを読み込む場合は次のように書けます。

C#
string text = File.ReadAllText("sample.txt", System.Text.Encoding.UTF8);

古いExcelや業務システムから出力されたCSVではShift_JISが使われていることもあります。その場合は、読み込み時のエンコーディング指定を確認しましょう。

12. C# WPFアプリを見た目よく作るための基本

WPFは、見た目を柔軟に調整できる点が強みです。最初は難しいデザインを目指す必要はありませんが、フォントサイズ、余白、色、Styleを使うだけでもアプリの見やすさは大きく変わります。

12-1. フォントサイズや色を指定する

TextBlockやButtonには、FontSize、Foreground、Backgroundなどを指定できます。

XML
<TextBlock Text="ユーザー登録"
           FontSize="24"
           FontWeight="Bold"
           Margin="0,0,0,20" />

文字色を指定する場合はForegroundを使います。

XML
<TextBlock Text="エラーがあります"
           Foreground="Red"
           FontSize="14" />

ボタンの背景色を指定する場合はBackgroundを使います。

XML
<Button Content="保存"
        Background="LightBlue"
        Padding="10"
        Width="120" />

ただし、色を使いすぎると見づらくなります。初心者は、余白を整える、文字サイズをそろえる、ボタンの大きさを統一するだけでも十分です。

12-2. Styleでデザインを共通化する

同じデザインを複数のボタンに適用したい場合は、Styleを使います。

XML
<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Width" Value="120" />
        <Setter Property="Height" Value="35" />
        <Setter Property="Margin" Value="5" />
        <Setter Property="Padding" Value="8" />
    </Style>
</Window.Resources>

このStyleを定義すると、同じWindow内のButtonに共通の見た目が適用されます。

XML
<StackPanel Orientation="Horizontal">
    <Button Content="保存" />
    <Button Content="キャンセル" />
</StackPanel>

Styleを使うと、ボタンごとにWidthやMarginを何度も書かなくて済みます。画面全体のデザインを統一しやすくなるため、WPFアプリを見た目よく作るうえで重要な機能です。

まとめ

C# WPFは、Windowsデスクトップアプリを作るための実用的な開発技術です。C#で処理を書き、XAMLで画面を作ることで、業務ツール、管理画面、入力フォームなどを効率よく開発できます。

初心者がC# WPFを学ぶときは、最初からすべてを理解しようとせず、次の順番で学ぶのがおすすめです。

1. Visual StudioでWPFプロジェクトを作る
2. MainWindow.xamlで画面を作る
3. TextBlock、TextBox、Buttonを使う
4. ボタンクリックイベントを書く
5. TextBoxの入力値を取得する
6. 入力チェックを実装する
7. GridやStackPanelでレイアウトする
8. データバインディングを学ぶ
9. 必要に応じてMVVMを学ぶ

最初はコードビハインドで小さなアプリを作り、WPFの基本操作に慣れることが大切です。その後、データバインディングやMVVMを学ぶことで、より保守しやすく本格的なWPFアプリを作れるようになります。

C# WPFは、Windows向けのデスクトップアプリ開発を学ぶうえで、今でも価値のある技術です。まずはHello Worldや簡単な入力フォームから始めて、少しずつ機能を追加していきましょう。