先生と生徒の会話形式で理解しよう

生徒

「C#のWPFでアプリを作っているのですが、ボタンのデザインをもっとおしゃれにしたり、オリジナルの機能を持った部品を作ったりすることはできますか？」

先生

「それはカスタムコントロールですね！WPFなら自分だけの部品を自由に作ることができますよ。」

生徒

「難しそうですが、初心者でも作れますか？」

先生

「大丈夫です！仕組みを理解すれば、ブロックを組み立てるような感覚で作成できます。一緒に順を追ってやってみましょう！」

1. カスタムコントロールとは？

カスタムコントロールとは、一言でいえば「自分専用の部品」のことです。プログラミングの道具箱の中には、あらかじめボタンやテキストボックスといった部品が入っています。これらを標準コントロールと呼びますが、それだけでは足りない場面が必ず出てきます。

例えば、会社専用のロゴが入ったボタンや、特定の計算機能を持った入力欄などがこれに当たります。カスタムコントロールを作成することで、同じ見た目や機能の部品を何度も使い回すことができ、プログラムの修正や管理も非常に楽になります。開発効率を大幅にアップさせるための、必須のテクニックといえるでしょう。

2. WPFとXAMLの関係を知ろう

WPF（Windows Presentation Foundation）は、Windowsのデスクトップアプリケーションを作るための強力な仕組みです。ここで重要になるのがXAML（ザムル）という言語です。XAMLは、画面の見た目を作るための設計図のようなものです。

皆さんが普段見ている画面も、このXAMLで「ここにボタンを置く」「ここを赤色にする」といった指示を書いています。カスタムコントロールを作るということは、この設計図を新しく書き換えて、自分だけの部品を作るという工程になります。プログラミングを始めたばかりの人でも、まずは「画面の見た目はXAMLで作る」と覚えておけば間違いありません。

3. Visual Studioを使ってプロジェクトを準備する

まずは開発環境であるVisual Studioを起動しましょう。新しいプロジェクトを作成する際、「WPF アプリケーション」を選択します。ここからがスタート地点です。

画面の左側にある「ツールボックス」という場所を見てください。ここに標準の部品が並んでいますが、私たちが作るカスタムコントロールも、完成すればここに並ぶようになります。まずは、空のプロジェクトを作成し、部品を追加するための準備を整えるところから始めましょう。難しく考える必要はありません。まずはファイルを作ることが第一歩です。

4. ユーザーコントロールを作成してみよう

WPFにはカスタムコントロールを作る方法がいくつかありますが、初心者にとって最も簡単で理解しやすいのが「ユーザーコントロール」です。これは複数の部品を組み合わせて、一つの大きな部品にする方法です。料理に例えるなら、食材を組み合わせて新しいメニューを作るようなものです。

Visual Studioで「新しい項目の追加」から「ユーザーコントロール」を選んで追加してください。すると、新しいXAMLファイルが作成されます。ここに、自分が作りたいボタンやラベルを自由に配置していきます。以下のコードは、シンプルなカスタムコントロールの設計図の例です。


<UserControl x:Class="MyProject.MyButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Background="LightBlue">
        <Button Content="クリックしてね" Height="50" Width="100"/>
        <TextBlock Text="これはカスタム部品です" HorizontalAlignment="Center"/>
    </StackPanel>
</UserControl>

5. プロパティでカスタマイズ機能を追加する

ただ見た目を作るだけでなく、プログラム側から内容を変更できるとさらに便利です。例えば、ボタンの文字を外から指定できるようにします。これを「プロパティ」と呼びます。プロパティとは、部品が持つ「特徴」や「性質」のことです。

C#のコード側（.xaml.csというファイル）にプログラムを書くことで、この機能を追加します。変数を定義し、それをXAMLから読み込めるようにします。これにより、同じ部品でも、場所によって「送信」ボタンにしたり「キャンセル」ボタンにしたりといった使い分けが可能になります。以下は、ボタンのラベルを自由に変更できるようにするプログラム例です。


public partial class MyButton : UserControl
{
    public MyButton()
    {
        InitializeComponent();
    }
    public string ButtonText
    {
        get { return MyBtn.Content.ToString(); }
        set { MyBtn.Content = value; }
    }
}

6. 作成したコントロールを画面に配置する

作った部品を実際にアプリケーションで使う手順です。メインとなる画面のXAMLを開き、そこに自作した部品の名前を記述します。これだけで、自分の作った部品が画面に表示されるようになります。

プログラミングの世界では、このように「一度作ったものを再利用する」ことが非常に重視されます。カスタムコントロールを使えば、修正が必要になったときも、その元のファイルを直すだけで、アプリ全体に反映させることができます。以下のコードは、メイン画面で自作部品を呼び出す方法です。


<Window x:Class="MyProject.MainWindow"
        xmlns:local="clr-namespace:MyProject">
    <Grid>
        <local:MyButton ButtonText="保存" />
        <local:MyButton ButtonText="終了" Margin="0,60,0,0" />
    </Grid>
</Window>

7. イベントを追加して動作を制御する

部品がただあるだけでなく、クリックしたときに何かが起きるようにしましょう。これが「イベント」です。ボタンをクリックするという出来事が起きたとき、プログラムが反応して処理を実行します。

C#でイベントハンドラを作成することで、カスタムコントロールに独自の動作を持たせることができます。例えば、ボタンを押した瞬間にログを出力したり、別の画面を開いたりといったことが可能です。最後に、クリックイベントを処理する簡単な例を紹介します。


private void MyBtn_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("カスタムボタンが押されました！");
}

実行結果は以下のようになります。


カスタムボタンが押されました！

C#のWPFでカスタムコントロールを作成する方法を基礎から解説！初心者向け完全ガイド