Visual Studio Do-It-Yourself 第 9 回ユーザーコントロール 第 6 回のリソースから第 8 回のテンプレートで さまざまな方法でコントロールをカスタマズできるこ とを学びました 今回のテーマであるユーザーコントロールは 既存の一つのコントロールをカスタマ ズするのではな

Transcription

1 Visual Studio Do-It-Yourself シリーズ 第 9 回ユーザーコントロール -1-

2 Visual Studio Do-It-Yourself 第 9 回ユーザーコントロール 第 6 回のリソースから第 8 回のテンプレートで さまざまな方法でコントロールをカスタマズできるこ とを学びました 今回のテーマであるユーザーコントロールは 既存の一つのコントロールをカスタマ ズするのではなく 複数のコントロールを組み合わせて一つのコントロールのように使うものです ここでは 次のことを学習します ユーザーコントロールの作成 ユーザーコントロールの利用 ユーザーコントロール第 8 回のテンプレートで解説したとおり コントロールテンプレートは その構成要素として複数のコントロールを組み合わせることができます つまり 複数のコントロールを組み合わせることだけがユーザーコントロールを使う理由ではありません コントロールテンプレートを使う場合には コントロールのプロパテゖやベントなどの機能は 対象となるコントロールのものをそのまま使う のに対し ユーザーコントロールを作成する場合は UserControl クラスから派生したクラスで必要なプロパテゖや機能を実装する という違いがあります コントロールテンプレートは Button ならボタンとして CheckBox ならチェックボックスとしての機能を変えるわけではありません ユーザーコントロールは 既存のコントロールでは機能が足りない場合 あるいは新しい機能を持つコントロールを実装したい場合に使います また コントロールテンプレートが ウゖンドウレベルあるいはゕプリケーションレベルでの共通化を 図るものであるのに対し ユーザーコントロールは プロジェクトをまたがって利用できる コントロー ルラブラリとして実装することができます なお 独自の機能を持つコントロールを実装するには 既存のコントロールクラスを継承して作成するカ スタムコントロールという方法もあります ユーザーコントロールは カスタムコントロールに比べて WPF デザナーを使って容易に開発できる利点があります -2-

3 ユーザーコントロールの作成まず 新しい WPF ゕプリケーションを作成します ただし ここで作成されたゕプリケーションは 後でユーザーコントロールを使うためのものとなります また ユーザーコントロールは プロジェクトの一部として作成することもできますが ここでは独立したラブラリとして作成します ソリューションエクスプローラーで ソリューション名を右クリックし [ 追加 ]-[ 新しいプロジェクト ] で表示される 新しいプロジェクトの追加 ダゕログで WPF ユーザーコントロールラブラリ を選びます 名前は MyControlLibrary としておきます ソリューションエクスプローラーには UserControl1.xaml というモジュールを含む MyControlLibrary が追加されます ここで UserControl1.xaml を右クリックして [ 名前の変更 ] を選び NumericBox.xaml に変更します -3-

4 また コードビハンドフゔルの UserControl1 というクラス名を右クリックして [ リフゔクター ] -[ 名前の変更 ] を選び NumericBox への変更を適用します なお ラブラリプロジェクトから UserControl1.xaml を削除して 新しい項目として WPF ユーザー コントロール を追加し 名前を NumericBox にすることもできます これで 新しいユーザーコントロールを作成する準備ができました NumericBox.xaml をダブルクリッ クして WPF デザナーを開くと次のようになっています -4-

5 これまでは もっとも外側はウゖンドウ (Window) でしたが ユーザーコントロールの場合には UserControl 型が使われています このため タトルがなく 大きさはデザナーのための指定 (d:) があるだけです ( コントロールの実際の大きさは配置されるときに決まります ) ここでは 少し高さを低くして 横長にしておきます (XAML エデゖターで d:designheight が 100 になる程度 ) コントロールの中央をクリックすると 配置されている Grid が選択されます 第 2 回のレゕウトで Grid のレゕウト方法について学びました ここでは 上辺のやや右寄りの部分をクリックして分割し さらに左辺の中央部分で分割します 今回は プロパテゖウゖンドウを使って 分割の設定を変更します まず プロパテゖウゖンドウの ColumnDefinitions の右側で [...] ボタンをクリックしてコレクションエデゖターを開きます ここで 最初の ColumnDefinition は Width を * に 2 つめの ColumnDefinition は Width を 20 に設定します これで 右側の列は常に 20 ピクセル分 左側の列は残りの幅を占有するようになります 続いて プロパテゖウゖンドウの RowDefinitions の右側で [...] ボタンをクリックします ここでは両 方の RowDefinition の Height を * にします これで行の高さは常に等分割されます -5-

6 次に TextBox を左側の列で上下にわたるようにし ( これで 2 つの領域をまたがることが示されます ) さ らに 2 つの Button を右上と右下に配置します ( 下図 ) textbox1(textbox) button1(button) button2(button) [Shift]+ クリックを使って この 3 つのコントロールをまとめて選択し プロパテゖウゖンドウで Height HorizontalAlignment Margin VerticalAlignment Width の値をリセットします ( それぞれのプロパ テゖ名を右クリックして [ 値のリセット ] を選びます ) さらに それぞれのコントロールについて 次のようにプロパテゖの値を設定します コントロール プロパティ 値 textbox1 Text 0 VerticalContentAlignment Center button1 Content Button2 Content この結果 WPF デザナーは次の図のようになります textbox1 の文字列をわかりやすくするためフォントサズ (FontSize プロパテゖ ) を大きくすることも できます ( ただし コントロールを配置したときに 配置場所のフォントサズを反映しなくなります ) 続いて コードビハンド (NumericBox.xaml.cs) で このユーザーコントロールの機能を割り当て ます ここには次のように記述してください -6-

7 public partial class NumericBox : UserControl public int Value get int n; if (int.tryparse(textbox1.text, out n)) return n; return 0; set textbox1.text = value.tostring(); public NumericBox() InitializeComponent(); ここでは 整数値をあらわす Value プロパテゖを定義しています Value の値は 設定するときはテキス トボックスの文字列として渡され 取得するときはテキストボックスに入力されている文字列を整数値に 変換して返します さらに 2 つのボタンについて 次のように Click ベントのベントハンドラーを割り当てます private void button1_click(object sender, RoutedEventArgs e) Value = Value + 1; private void button2_click(object sender, RoutedEventArgs e) Value = Value - 1; これで 上下のボタンを使える数値入力用のコントロールが完成しました [Shift]-[F6] などを押して このプロジェクトをビルドしておいてください -7-

8 ユーザーコントロールの利用最初に作成した WPF ゕプリケーションプロジェクトに戻ります ソリューションエクスプローラーでプロジェクト名を右クリックし [ 参照の追加 ] を選びます ここで プロジェクト タブを選ぶと 作成した MyControlLibrary ラブラリが表示されています ( 下図 ) [OK] ボタンを押すと このプロジェクトからラブラリに登録されているコントロールを使えるようになります ただし WPF デザナーで編集するときには まだツールボックスに追加したコントロールは表示されていません このため ツールボックスを右クリックして [ ゕテムの選択 ] を選びます すると ゕテムの選択画面になるので [WPF コンポーネント ] タブを選び [ 参照 ] ボタンを押します ここで さきほどビルドしておいたラブラリ (.dll) を指定します -8-

9 すると ツールボックスゕテムの選択で NumericBox コントロールが表示されてチェックされるので [OK] ボタンを押します ツールボックスに新しいコントロール (NumericBox) が表示されます -9-

10 これで 他のコントロールと同じように ツールボックスからドラッグゕンドドロップして コントロ ールを配置できるようになります テスト用に NumericBox と Button コントロールを一つずつ配置し Button の Click ベントに次のようなベントハンドラーを割り当てます public partial class MainWindow : Window public MainWindow() InitializeComponent(); private void button1_click(object sender, RoutedEventArgs e) MessageBox.Show("Value = " + numericbox1.value.tostring()); プログラムを実行した様子を次に示します なお ここで作成したコントロールは プログラムで Value プロパテゖを扱うことはできますが 第 5 回 で学んだデータバンデゖングの対象として使うことはできません データバンデゖングとして使え るプロパテゖは 依存プロパテゖ でなければならないためです -10-

11 依存プロパティを作成する ( 参考 ) 依存プロパテゖの実装は 単純なプロパテゖの実装よりも複雑になります 前述の NumericBox コントロ ールの Value プロパテゖを 依存プロパテゖとして実装する例を以下に示します public partial class NumericBox : UserControl public int Value get return (int)getvalue(valueproperty); set SetValue(ValueProperty, value); static void valuechangedcallback(dependencyobject property, DependencyPropertyChangedEventArgs args) NumericBox searchtextbox = (NumericBox)property; searchtextbox.textbox1.text = args.newvalue.tostring(); public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(numericbox), new FrameworkPropertyMetadata(0, new PropertyChangedCallback(valueChangedCallBack))); public NumericBox() InitializeComponent(); textbox1.lostfocus += new RoutedEventHandler(textBox1_LostFocus); void textbox1_lostfocus(object sender, RoutedEventArgs e) int n; if (int.tryparse(textbox1.text, out n)) Value = n; else Value = 0; button1_click と button2_click -11-

12 ここで ValueProperty という依存プロパテゖを静的に定義していることに注意してください ここに用意されたデータに基づいて コントロールの外部から間接的にプロパテゖを変更できる仕組みが提供されています また ここでは Value プロパテゖと TextBox コントロールの Text プロパテゖが直接連動しないため TextBox からフォーカスが失われたときに Value プロパテゖを更新しています TextBox にフォーカスがある間 ( 値を入力している間 ) は Value プロパテゖが変化しない ( バンデゖング対象に影響しない ) ことに注意してください まとめ最初に述べたとおり 既存のコントロールを組み合わせてユーザーコントロールを作成する以外にも 既存のコントロールを拡張してカスタムコントロールを作成する方法があります これは 既存のコントロールの仕組み ( プロパテゖやベント ) をあまり変更する必要がないものの コントロールテンプレートのように外観の変更だけで済まない場合に便利です 全 9 回を通じて学んだとおり Visual Studio 2010 を活用することで 機能的かつ使いやすい Windows ゕプリケーションを容易に開発できます ぜひ 皆さんもチャレンジしてみてください -12-