Neutral Scent

App developments & Gadgets

UserControlのPopupで色選択


WPFのUserControlの使い方って情報が少なくって困ります。
これはUserControlを使って、ささっと作ったColorPickerコントロールを、Window上のボタンからPopupさせてみよう、というサンプル。
イメージ的にはWord/Excelツールバーの文字色選択ボタンと同じような動きです。
まずはコントロールを作りましょう。

< UserControl x:Class="ColorPickerSample.ColorPicker"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
    
    
    
    
    
    
    
    
    
    
  

単純にWrapPanelにボタンを並べただけ、超簡単ですね。
でこいつのハンドラがこちら。

public partial class ColorPicker : System.Windows.Controls.UserControl
{
	public event EventHandler Canceled;
	public event EventHandler Picked;

	private Brush brush = Brushes.DarkRed;

	public ColorPicker()
	{
		InitializeComponent();

		cmdCancel.Click += new RoutedEventHandler(cmdCancel_Click);
	}

	void cmdCancel_Click(object sender, RoutedEventArgs e)
	{
		if (Canceled != null)
			Canceled(this, new EventArgs());
		e.Handled = true;
	}

	void colors_Click(object sender, RoutedEventArgs e)
	{
		Button btn = sender as Button;
		if (btn == null)
		{
			System.Diagnostics.Debug.Assert(false);
			return;
		}

		brush = btn.Background;

		if (Picked != null)
			Picked(this, new EventArgs());
		e.Handled = true;
	}

	public Brush PickedBrush
	{
		get { return brush; }
		set { brush = value; }
	}
}

そんなに複雑なことはしてません。ようするに、色ボタンが押されたらプロパティに格納する。ボタンが押されたときはイベントを返す。そんだけです。

で、これを使う側のウインドウですが、

< Window x:Class="ColorPickerSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ColorPickerSample" Height="177" Width="224"
    >
    
    
  

ButtonのコンテンツにStackPanelを使ってテキストとPopupコントロールを突っ込んでいるのがキモです。
で、そのハンドラ。

public partial class Window1 : System.Windows.Window
{
	private ColorPicker colPicker = new ColorPicker();
	public Window1()
	{
		InitializeComponent();

		cmdPickTheColor.Click += new RoutedEventHandler(cmdPickTheColor_Click);

		PickPopper.Child = colPicker;
		colPicker.Picked += new EventHandler(colPicker_Picked);
		colPicker.Canceled += new EventHandler(colPicker_Canceled);
	}

	void cmdPickTheColor_Click(object sender, RoutedEventArgs e)
	{
		PickPopper.IsOpen = !PickPopper.IsOpen;
	}

	void colPicker_Canceled(object sender, EventArgs e)
	{
		PickPopper.IsOpen = false;
	}

	void colPicker_Picked(object sender, EventArgs e)
	{
		this.Background = colPicker.PickedBrush;
		PickPopper.IsOpen = false;
	}
}

PickPopper.IsOpenでPopupを出したり引っ込めたりするわけです。
細かいパーツの使い方さえわかってしまえば簡単ですね。
UserControlやPopupクラスは解説してるサンプルやドキュメントがほんと少なくてまいりました。RC1のciderはUserControlのnamespace呼び出しに対応してないようなので、xaml側で書けないし...。ほんとはもう少しスマートな使い方があるかも知れませんが、とりあえず、それぞれの動きを理解する役には立つのではないかと思います。
まーでも、ふわふわさせるのもプロパティ一つだし、便利になったものですよ。