LoginSignup
0
2
@kiku09020

【WPF】ユーザーコントロール ざっくり入門

Posted at

はじめに

WPFで独自のUIを作れるユーザーコントロール機能について、ざっくりまとめます

ユーザーコントロールとは

  • 独自でUIを作れる機能
  • 繰り返し使うUIなどを使いたい場合とかに使える

ユーザーコントロールとカスタムコントロールの違い

  • ユーザーコントロールは、既存のコントロールをグループ化する際に使う
  • カスタムコントロールは、新規でコントロールを作成する際に使う

また、ユーザーコントロールでは、xamlファイルでプレビューを確認しながら変更できますが、カスタムコントロールの場合はプレビューが表示されません

使用例

パス選択UIを作ってみました
image.png

普通に作ると、全て直置きでコントロールを配置する必要がありますが、配置するのはアホみたいなので、こんな感じでユーザーコントロールとしてまとめて、簡単に配置できるようになります

内容

このユーザーコントロールは、以下のコントロールをグループ化して作成しています

  • ラベル
  • テキストボックス
  • 参照ボタン

作り方

ユーザーコントロール

  • VisualStudioで、プロジェクトを作成後、Ctrl + Shift + Aで新しい項目の追加
  • ユーザーコントロール(WPF) を選択
    image.png

  • 追加すると、.xamlと.csファイルが作成される
    • .xaml：スタイルを記述するもの
      • ボタンのサイズとか
    • .cs：UIの処理とかを記述するもの
      • ボタンのクリック時の処理とか

  • xamlファイルを開いて、いい感じに調整する
    image.png

  • クラス側でメンバとして操作できるようにするために、各コントロールのNameを設定する
    image.png

クラス

コントロールの参照
  • コントロールの参照は、上記の通りNameを設定することで利用できるようになる
    image.png
    • ♡マークついてるやつが、xaml側でName指定したコントロールです
プロパティの利用
  • 今回の例では、以下の内容をプロパティで設定できるようにします
    • ラベル名
    • 選択対象はファイルかフォルダか

  • プロパティは、そのままプロパティを定義すると表示されます
    • Category属性を付けると、独自のカテゴリに分別することができます
      image.png 
      [Category("パス選択")]
public string NameText { get; set; }

[Category("パス選択")]
public bool IsFolder { get; set; }

  • 開始時にプロパティを参照したい場合、コンストラクタではなく、OnApplyTemplate()などのタイミングで参照する必要があります

利用側

  • ユーザーコントロールのxaml, クラスを記述したら、一度ビルドする必要があります
    • Ctrl + B でビルド
  • ビルドし終えたら、ツールボックスにユーザーコントロールが表示されます
    image.png
  • これをD&Dでウィンドウに持っていけば、配置できます。

さいごに

ユーザーコントロールを駆使して、UIをいい感じに効率的に配置しましょう～

参考

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2