C#

[WPF][C#]TemplateBindingとBindingのRelativeSource TemplatedParentの違い

kazuki@wankuma.com (かずき) — Thu, 04 Sep 2008 20:28:00 GMT

WPFのControlTemplateとかで使えるBindingの特殊な書き方にTemplateBindingというものがある。こいつは、プロパティ名を受け取るだけのシンプルなもの。
TemplateBindingを使わなくても、BindingのRelativeSourceに{RelativeSource TemplatedParent}を指定することで、TemplateBindingと同じような動きをさせることが出来る。
ただし、使ってみると微妙に動きが違うことに気づいた。今まではTemplateBindingを使うと楽チンくらいにしか思ってなかったけど、違いを明らかにするために、いくつか実験をしてみようと思う。

とりあえず、実験するためにカスタムコントロールを１つこさえる。Controlを継承して、Textプロパティを定義しただけのシンプルなコントロール。

using System.Windows;
using System.Windows.Controls;

namespace WpfComboBoxStudy
{
    // TextBoxもどきコントロール
    public class CustomControl : Control
    {
        static CustomControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl)));
        }

        #region Textプロパティ
        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register(
                "Text", 
                typeof(string), 
                typeof(CustomControl), 
                new UIPropertyMetadata(null));
        #endregion

    }
}

Generic.xaml側はこんな感じ。TextBoxを置いて、TemplateBindingを使ってTextBoxのTextプロパティとCustomControlのTextプロパティをバインドしている。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfComboBoxStudy">
    <Style TargetType="{x:Type local:CustomControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomControl}">
                    <!-- TemplateBinding!!!! -->
                    <TextBox Text="{TemplateBinding Text}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

このコントロールを、WindowにおいてTextプロパティにHello worldを設定する。

<Window x:Class="WpfComboBoxStudy.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfComboBoxStudy"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <local:CustomControl x:Name="customControl" Text="Hello world" />
    </StackPanel>
</Window>

これを実行すると、TextBoxにHello worldと表示される素敵な画面が出来上がる。

さて、ここで１つ問題が出てくる。問題を明らかにするためにボタンを１つ置いてClickイベントでCustomControlのTextプロパティをMessageBoxで表示するようにしてみた。

<Window x:Class="WpfComboBoxStudy.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfComboBoxStudy"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <local:CustomControl x:Name="customControl" Text="Hello world" />
        <!-- ↓こいつね！！！↓ -->
        <Button Content="Alert" Click="Alert" />
    </StackPanel>
</Window>

using System.Windows;

namespace WpfComboBoxStudy
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Alert(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(customControl.Text);
        }

    }
}

これを実行してみると、ちょっとした問題にぶちあたる。実行直後にボタンを押すと期待通りの値になる。

ただし、TextBoxの中身を書き換えてボタンを押すと…

ばっちり値が反映されてない。つまり、ターゲットからソースへの書き戻しが行われない。
ソースからターゲットへの書き戻しは普通に動く。試してみよう。

もう１つボタンを置く。

<Window x:Class="WpfComboBoxStudy.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfComboBoxStudy"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <local:CustomControl x:Name="customControl" Text="Hello world" />
        <Button Content="Alert" Click="Alert" />
        <!-- ↓足したのはこいつね！！！↓ -->
        <Button Content="Update Source" Click="UpdateSource" />
    </StackPanel>
</Window>

そして、イベントハンドラでcustomControlのTextプロパティの値を更新する処理を書く。

private void UpdateSource(object sender, RoutedEventArgs e)
{
    customControl.Text = "筋肉が落ちていく";
}

これを実行して、Update Sourceボタンを押すと…
ぽちっとな

ソースからターゲットへ、値の更新がばっちり反映されている。

ということで、TemplateBindingは一方通行なのでした。Bindingを使うと…

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfComboBoxStudy">
    <Style TargetType="{x:Type local:CustomControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CustomControl}">
                    <!-- Binding!!!! -->
                    <TextBox Text="{Binding Path=Text,
                                            RelativeSource={RelativeSource TemplatedParent}}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

テキストボックスを編集してAlertを押してみると、ちゃんとCustomControlのTextプロパティが書き換わってる。

もちろんUpdateSourceボタンを押したときの動作もOK。

ということで簡単にまとめ。

TemplateBindingはソースからターゲットへの一方通行。
細かな制御をしたければ{Binding RelativeSource={RelativeSource TemplatedParent}, ....}を使おう。

[WPF][C#]BindingGroupを使ってみる　その２

kazuki@wankuma.com (かずき) — Thu, 28 Aug 2008 22:10:00 GMT

その１：http://blogs.wankuma.com/kazuki/archive/2008/08/14/153008.aspx

.NET Framework 3.5 SP1で追加されたBindingGroupというクラス。
こいつは、結構使いでがあるんじゃないかと思ってる。正統派な使い方ではないのかもしれないけど、上手に使えばINotifyPropertyChangedインターフェースとか実装しなきゃいけないパターンが減るかもしれない。ということで実験。

まずは、Personクラスを作る。INotifyPropertyChangedは実装せずに、普通にプロパティを定義するだけ。定義するプロパティは、いつも通りNameとAgeの２つにした。

namespace WpfBindingGroupTest
{
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}

これをWindowのDataContextへ設定する。最近はコードから設定するよりも、XAMLから設定するほうがお試しのときは楽なように感じてきだした。最初はコードからじゃないと嫌だったんだけど、慣れって恐ろしいわ。

<Window x:Class="WpfBindingGroupTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfBindingGroupTest"
    Title="Window1" Height="300" Width="300"
    DataContext="{DynamicResource tanaka}">
    <Window.Resources>
        <local:Person x:Key="tanaka" Name="田中　太郎" Age="50" />
    </Window.Resources>
    <Window.BindingGroup>
        <BindingGroup />
    </Window.BindingGroup>
    <StackPanel>
        <TextBlock Text="名前" />
        <TextBox Text="{Binding Name}" />
        <TextBlock Text="年齢" />
        <TextBox Text="{Binding Age}" />
        <Button Content="Update Source" Click="UpdateSource_Click" />
        <Button Content="Source To Target" Click="SourceToTarget_Click" />
    </StackPanel>
</Window>

ついでに、適当に画面を組み立てておいた。実行すると見た目はこんな感じ。

WindowのDataContextにPersonの田中　太郎さん50歳を設定する。そして、テキストボックスに名前と年齢をそれぞれバインドしておいた。BindingGroupをWindowに設定してWindow以下のBindingをさくっとグルーピング。Update Sourceは、CommitEditを呼んでPersonオブジェクトへテキストボックスの中身を書き戻す。

private void UpdateSource_Click(object sender, RoutedEventArgs e)
{
    // 変更を反映
    BindingGroup.CommitEdit();
}

ついに本題

さて、PersonクラスはINotifyPropertyChangedを実装していないので、Personオブジェクトの中身が書き換えられてもTextBoxの値って書き換わらない。もし、Personクラスの中身をTextBoxへ反映させようと思ったらName用のBindingとAge用のBindingすべてに対してメソッド呼び出しをして回らないといけなかったと思う。

BindingGroupを使うと、これがイッパツで出来るようになる。つまり、楽チンってこと。

private void SourceToTarget_Click(object sender, RoutedEventArgs e)
{
    // リソースからPersonオブジェクトを取得して
    var tanaka = (Person)FindResource("tanaka");
    // データを初期化して
    tanaka.Name = "田中　太郎";
    tanaka.Age = 50;
    // TextBoxのほうへ反映
    BindingGroup.CancelEdit();
}

これで、どんなときもボタンを押すと「田中　太郎さん50歳」のデータが画面に出るようになる。INotifyPropertyChangedインターフェースだと、いっぱいプロパティを書き換えると、そのつど更新処理が走ってたけど、BindingGroupを使うことで、ここらへんを一まとめにしてドカーンと行えるようになる。

ありがたやありがたや。

[WPF][C#]CheckedListBoxを作ろう　その２

kazuki@wankuma.com (かずき) — Wed, 27 Aug 2008 20:54:00 GMT

昨日のエントリは、だめっぷりを発揮してしまった。
http://blogs.wankuma.com/kazuki/archive/2008/08/27/154403.aspx

だめっぷりその１

ListBoxにStringを突っ込むときはユニークな文字列を突っ込まないと、いやんな動きをすることがある。
知ってるので、全部データを変えて入れてたけど、知らない人が見ることもあるので、書いておくべきだった。

ちなみに、どういう動きをするのかというと…

上のように田中　太郎さんが三人いて、３つ選択した状態でDumpボタンを押すと…

田中　太郎が３つ表示されるのではなく、１つしか表示されない。
さらに、上のように３つの田中　太郎をチェックした状態でどれかのチェックを１つ外すと…

あれ？2個チェックが消えた？？といった動きをするのです。

だめっぷりその２

下のような事を書いてたけど真っ赤なうそだった。

ListBoxItemの選択状態は、添付プロパティのSelector.IsSelectedで管理されている。ListBoxItem自体にはIsSelectedといったプロパティは定義されてないといった有様だ。
直感的ではないが、まぁ仕方ないのだろう。分離分離。

ListBoxItemに普通にあります。IsSelectedプロパティ。申し訳ないです。
ということなので、XAMLのCheckBoxの所のBindingも変わって下のような形でOK。

<CheckBox Content="{TemplateBinding Content}"  
          IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}"/>

IsCheckedのBindingのPathが(Selector.IsSelected)だったけど、普通にIsSelectedで大丈夫。

ふぅ。

[WPF][C#]CheckedListBoxを作ろう

kazuki@wankuma.com (かずき) — Wed, 27 Aug 2008 00:07:00 GMT

ということで、CheckedListBoxを作ってみようと思う。
基本的に、ListBoxの中身の１つの要素の実態のListBoxItemってやつのTemplateをCheckBoxに差し替えるだけで見た目は完成する。

ということで作っていこう。

普通にListBoxを作成

いつもならPersonクラスを作って…とかになるんだけど、今回はめんどくさいのでSystem.StringをそのままListBoxの要素として指定するようにした。

<Window x:Class="WpfCheckedListBox.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <ListBox Name="listBox">
            <System:String>田中　太郎</System:String>
            <System:String>田中　次郎</System:String>
            <System:String>田中　三郎</System:String>
            <System:String>田中　四郎</System:String>
            <System:String>田中　五郎</System:String>
        </ListBox>
        <Button Content="Dump" Click="Button_Click" />
    </StackPanel>
</Window>

ボタンのクリックイベントには、現在選択中の要素の値をメッセージボックスに表示する処理を書いておいた。

using System;
using System.Text;
using System.Windows;

namespace WpfCheckedListBox
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // 選択中の要素をつなげてメッセージボックスに表示
            var sb = new StringBuilder();
            foreach (var item in listBox.SelectedItems)
            {
                sb.AppendLine((String) item);
            }
            MessageBox.Show(sb.ToString());
        }
    }
}

これを実行すると、おそらく予想通りの結果になる。
田中　三郎を選択した状態でボタンを押すと…
田中　三郎が表示される。

現状複数選択は出来ないが、ListBoxのSelectionModeをMultipleにしておくと、複数選択にも対応できる。CheckedListBoxの動き的には、複数選択できるほうがしっくりくると思うので、Multipleに設定しておこうと思う。

<ListBox Name="listBox" SelectionMode="Multiple">

複数選択も可能。
ボタンを押したときの動作もばっちり。

CheckBox化してみよう

見た目をCheckBoxに差し替えてみようと思う。ListBoxに、ItemContainerStyleというプロパティがあるので、そこにStyleを設定するとListBoxItemにStyleを指定できる。StyleからTemplateをCheckBoxに変えるようにカキカキ。

<Window x:Class="WpfCheckedListBox.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <ListBox Name="listBox" SelectionMode="Multiple">
            <!-- ContainerStyle -->
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <!-- CheckBoxに見た目を差し替えてContentをバインドする -->
                                <CheckBox Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
            <System:String>田中　太郎</System:String>
            <System:String>田中　次郎</System:String>
            <System:String>田中　三郎</System:String>
            <System:String>田中　四郎</System:String>
            <System:String>田中　五郎</System:String>
        </ListBox>
        <Button Content="Dump" Click="Button_Click" />
    </StackPanel>
</Window>

これで実行すると、見た目はばっちり動作はしょんぼりになる。
見た目は出来てそうだけど…
ListBoxの選択状態とCheckBoxのチェックが全然連動できてない。

次は、この問題を解決してみようと思う。

ListBoxの選択状態とCheckBoxのチェックの同期

ListBoxItemの選択状態は、添付プロパティのSelector.IsSelectedで管理されている。ListBoxItem自体にはIsSelectedといったプロパティは定義されてないといった有様だ。
直感的ではないが、まぁ仕方ないのだろう。分離分離。

ということで、Selector.IsSelectedとCheckBoxのIsCheckedプロパティが同期すればよさそうだ。二つのプロパティの値を同期とるってことは…バインドすればOKです。ということでやってみた。

<CheckBox Content="{TemplateBinding Content}"
          IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Selector.IsSelected)}"/>

IsCheckedは、添付プロパティのSelector.IsSelectedとバインドするため、プロパティ名だけを指定するTemplateBindingではなくて、きちんとBindingでRelativeSourceをTemplatedParentにして使った。Pathは、括弧で囲ってSelector.IsSelectedで１つのプロパティをあらわしていることを明示しないと動かない。

早速実行してみよう。
動きは勿論大丈夫。
選択状態もばっちりいけてる。

最後にStyleに切り出し

最後に、再利用可能なようにStyleに切り出しておく。Application.Resourcesあたりに登録して使うといいだろう。

<Style x:Key="CheckedListBoxStyle" TargetType="{x:Type ListBox}">
    <Setter Property="SelectionMode" Value="Multiple" />
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <!-- CheckBoxに見た目を差し替えてContentをバインドする -->
                            <CheckBox Content="{TemplateBinding Content}"
                                  IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Selector.IsSelected)}"/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

使う側はStaticResourceでStyleプロパティに設定するだけでCheckedListBoxとして使えるようになる。

<ListBox Name="listBox" Style="{StaticResource CheckedListBoxStyle}">
    ....省略...
</ListBox>

めでたしめでたし。

[WPF][C#]カスタムコントロール入門その１

kazuki@wankuma.com (かずき) — Mon, 25 Aug 2008 23:49:00 GMT

ずっと思ってた。WPFをやり始めたころからずっと。
カスタムコントロールコントロールを作りたい！！！ということでコツコツDependencyPropertyとかCommandとかやってきたのが実を結んで、ついにカスタムコントロール作成を入門してみるよ。

プロジェクトの作成

WpfMyControlという名前でプロジェクトを作成した。あえて見出しをつけるまでもないけど、はじめを大事にね。

コントロールの作成

右クリックメニューからさくっと追加。カスタムコントロール（WPF）っていうのを選ぼう。
WPFついてないのを選ぶとWindowsFormのになっちゃうので要注意。

名前はGreetControlにしてみた。コントロールを作成すると、Themes\Generic.xamlとGreetControl.csというファイルが作られる。

Generic.xamlは、見た目を定義するのに使います。GreetControlに、CommandやDependencyPropertyを定義する。

今回の目標

最初に書いておけって感じがしなくもないけど、今回の目標を書いておく。といあえず、テキストボックスとボタンがあって、ボタンを押すと、テキストボックスの中身がメッセージボックスで表示されるものを目指す。

見た目の作成

見た目を作っていく。見た目はGeneric.xamlにあるStyleに書いていく。最初の状態だとGeneric.xamlには、下のようなStyleが定義されている。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMyControl">


    <Style TargetType="{x:Type local:GreetControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:GreetControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

GreetControlをTargetTypeにして、Templateを設定するStyleが定義されているのがわかる。
ここにStackPanelを置いて、TextBoxとButtonをとりあえず置いてみた。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMyControl">


    <Style TargetType="{x:Type local:GreetControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:GreetControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel>
                            <TextBox />
                            <Button Content="Greet!!" />
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

ちょっと見た目を弄ったので、Window1.xamlに置いてみる。namespaceを定義してWindowにぽちっと置いてみた。

<Window x:Class="WpfMyControl.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMyControl"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <local:GreetControl />
    </StackPanel>
</Window>

実行してみると、確かに見た目は出来てる！

次はプロパティを作ってみよう。とりあえず、TextBoxに入力された値を保持するためのプロパティが必要になりそう。ということでプロパティをつくってみようと思う。

プロパティの定義

プロパティは、普通に依存プロパティで作ることになる。string型のValueプロパティなので、こんな感じでいける。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfMyControl
{
    public class GreetControl : Control
    {

        #region Value 依存プロパティ
        public string Value
        {
            get { return (string)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        // GreetControlのstring型のValueプロパティで、デフォルト値が空文字
        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register(
                "Value", 
                typeof(string), 
                typeof(GreetControl), 
                new UIPropertyMetadata(""));
        #endregion

        static GreetControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(GreetControl), new FrameworkPropertyMetadata(typeof(GreetControl)));
        }
    }
}

usingとかが長いけど、追加したのはregion～endregionまでの間になる。これで、Window1.xamlでValueプロパティに値を設定できるようになる。

<Window x:Class="WpfMyControl.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMyControl"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <local:GreetControl Value="こんにちは" />
    </StackPanel>
</Window>

ビルドは通るけど、ぜんぜん動きとしては変わらない。プロパティの値を見た目に反映させるには、Generic.xamlをいじくることになる。

プロパティの値をバインドして画面に出すよ

ということでGeneric.xamlに戻って編集を再開。ValueプロパティをTextBoxにバインドして出してみようと思う。
ということでTemplateBindingでさくっとバインドをする。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMyControl">


    <Style TargetType="{x:Type local:GreetControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:GreetControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel>
                            <!-- Binding!! -->
                            <TextBox Text="{TemplateBinding Value}"/>
                            <Button Content="Greet!!" />
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

これで実行すると、画面にWindow1.xamlで設定した「こんにちは」が表示されるようになる。

動きをつけよう

最後に動きをつけて完成かな。このコントロールの動きは、ボタンを押したときにポローンとメッセージボックスが出るってだけ。単純にイベントを登録するのではなく、Commandを使ってボタンのクリックを補足します。
とりあえずCommandの定義をGreetControl.csに追加。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfMyControl
{
    public class GreetControl : Control
    {

        #region Value 依存プロパティ
        public string Value
        {
            get { return (string)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        // GreetControlのstring型のValueプロパティで、デフォルト値が空文字
        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register(
                "Value", 
                typeof(string), 
                typeof(GreetControl), 
                new UIPropertyMetadata(""));
        #endregion

        #region GreetCommand
        public static ICommand GreetCommand = new RoutedCommand(
            "GreetCommand", typeof(GreetControl));
        #endregion
        static GreetControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(GreetControl), new FrameworkPropertyMetadata(typeof(GreetControl)));
        }
    }
}

Commandが定義できたらStaticコンストラクタにCommandBindingを追加する。Staticメソッド経由でインスタンスメソッドを呼び出してる。そこでMessageBoxの表示処理を書くって寸法。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfMyControl
{
    public class GreetControl : Control
    {

        #region Value 依存プロパティ
        public string Value
        {
            get { return (string)GetValue(ValueProperty); }
            set { SetValue(ValueProperty, value); }
        }

        // GreetControlのstring型のValueプロパティで、デフォルト値が空文字
        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register(
                "Value", 
                typeof(string), 
                typeof(GreetControl), 
                new UIPropertyMetadata(""));
        #endregion

        #region GreetCommand
        public static ICommand GreetCommand = new RoutedCommand(
            "GreetCommand", typeof(GreetControl));
        #endregion
        static GreetControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(GreetControl), new FrameworkPropertyMetadata(typeof(GreetControl)));
            
            // CommandBingingを登録
            var greetCommandBinding = new CommandBinding(
                GreetCommand, OnGreetCommand);
            CommandManager.RegisterClassCommandBinding(
                typeof(GreetControl), greetCommandBinding);
        }

        #region Command
        private static void OnGreetCommand(object sender, ExecutedRoutedEventArgs e)
        {
            // senderからコントロールを取得して、インスタンスメソッドに処理を丸投げ
            var control = (GreetControl)sender;
            control.OnGreetCommand();
        }

        /// <summary>
        /// GreetCommandの処理の実体
        /// </summary>
        public void OnGreetCommand()
        {
            MessageBox.Show(this.Value);
        }
        #endregion
    }
}

そして、Generic.xamlで、ButtonとCommandを関連付ける。

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMyControl">


    <Style TargetType="{x:Type local:GreetControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:GreetControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel>
                            <!-- Binding!! -->
                            <TextBox Text="{TemplateBinding Value}"/>
                            <!-- Command!! -->
                            <Button Content="Greet!!" Command="{x:Static local:GreetControl.GreetCommand}" />
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

動作確認

ということで、実行して動作を確認してみる。実行してボタンをぽちっとすると…

でた～！ということで始めての、作り方は正統派のコントロールの作り方でした。

[WPF][C#]ついに妥当性検証します！その２

kazuki@wankuma.com (かずき) — Thu, 21 Aug 2008 22:19:00 GMT

Validationの事に触れたのが半年前。ということで前回のエントリはこちら。
http://blogs.wankuma.com/kazuki/archive/2008/02/11/122718.aspx

今回は、Validationクラスの細かいところをちょっと見てみようと思う。とりあえず復習がてら簡単なValidatorをこさえてみようと思う。前に作ったのと同じ偶数のみOKなバリデータ。さくっと実装。

using System.Windows.Controls;

namespace WpfValidation
{
    /// <summary>
    /// 偶数のみ通すバリデータ
    /// </summary>
    public class MyValidationRule : ValidationRule
    {
        public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)
        {
            string inputValue = value as string;
            // 入力は文字列だよね常識的に考えて
            if (value == null)
            {
                return new ValidationResult(false, "おかしい");
            }
            // 数値だよね
            int inputNumber = 0;
            if (!int.TryParse((string)value, out inputNumber))
            {
                return new ValidationResult(false, "数値ではありません");
            }
            // 偶数だよね
            if (inputNumber % 2 != 0)
            {
                return new ValidationResult(false, "偶数ではありません");
            }
            // OK!偶数だ
            return ValidationResult.ValidResult;
        }
    }
}

Window1.xaml.csは、下のような感じ。DataContextの設定と、ボタンが押されたときに、値を表示するだけ。

using System.Windows;

namespace WpfValidation
{
    public partial class Window1 : Window
    {
        // これにテキストボックスの値をバインドする
        public int TargetValue { get; set; }

        public Window1()
        {
            InitializeComponent();
            // お試し用なので、自分自身をDataContextにセット
            this.DataContext = this;
        }

        private void AlertButton_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(this.TargetValue.ToString());
        }
    }
}

XAML側も、前回とほとんど同じなのでさくさくっといくよ。

<Window x:Class="WpfValidation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:WpfValidation="clr-namespace:WpfValidation"
    Title="Validation" Height="99" Width="248">
    <StackPanel>
        <TextBox Margin="3">
            <TextBox.Text>
                <!-- UpdateSourceTriggerをPropertyChangedにしてテキストボックスが
                     変更されたら即ソースを書き換えるようにする。 -->
                <Binding Path="TargetValue" UpdateSourceTrigger="PropertyChanged">
                    <Binding.ValidationRules>
                        <!-- 自作のバリデーションルール -->
                        <WpfValidation:MyValidationRule />
                        <!-- 何か例外でたらエラーにしてくれるルール -->
                        <ExceptionValidationRule />
                    </Binding.ValidationRules>
                </Binding>
            </TextBox.Text>
        </TextBox>
        <Button Margin="3" Content="Alert" Click="AlertButton_Click" />
    </StackPanel>
</Window>

これで、OK。実行してみよう。偶数以外では、赤枠になってる。

Validationプロパティの中身をのぞいてみよう

ということで！バリデーションエラーが起きたときどうなってるのかをちょっと観察してみようと思う。Validation.ErrorsとValidation.HasErrorという添付プロパティがあったりする。その値をAlertを押したときに表示してみようと思う。

まずは、TextBoxにName属性をつけてC#側から触れるようにする。

<TextBox Name="textBox" Margin="3">

次に、AlertのクリックイベントでValidation.ErrorsとValidation.HasErrorを表示するように書き換え。

private void AlertButton_Click(object sender, RoutedEventArgs e)
{
    var hasError = Validation.GetHasError(textBox);
    var errors = Validation.GetErrors(textBox);

    var sb = new StringBuilder();
    // 情報を文字列にして表示
    sb.AppendFormat("Validation.HasError: {0}\n", hasError);
    sb.Append("Validation.Errors: [");
    foreach (var error in errors)
    {
        sb.AppendFormat("{0}, ", error.ErrorContent);
    }
    sb.Append("]");
    MessageBox.Show(sb.ToString());
}

これを実行してみて動きを確認すると、下のような感じになる。

実行直後は、エラーも何も無い。奇数を入力してみると…

Validation.HasErrorがちゃんとTrueになってValidation.Errorsには、エラーの内容が入っている。エラーがあるときだけ、エラーの内容を表示しようとするとなるとStyleのTriggerを使うと出来る。
要は、TriggerでValidation.HasErrorがTrueのときにToolTipにValidation.Errorsの最初の要素のErrorContentを設定してやればいい。Styleの設定だけ抜粋。

<TextBox.Style>
    <Style TargetType="{x:Type TextBox}">
        <Style.Triggers>
            <!-- エラーがあるときにメッセージをToolTipに表示 -->
            <Trigger Property="Validation.HasError" Value="True">
                <Setter Property="ToolTip" 
                        Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</TextBox.Style>

本当にやるときには、共通のStyleとしてくくりだすのがいいだろう。実行してみると、エラーメッセージがToolTipとして表示される。すばらしい。
エラー無し状態

数字じゃないとき

偶数じゃないとき

[WPF][C#].NET Framework 3.5 SP1で追加された機能を使ってListBoxの背景色を交互に変えるぜ

kazuki@wankuma.com (かずき) — Fri, 15 Aug 2008 22:39:00 GMT

AlternationCountという依存プロパティと、AlternationIndexという添付プロパティがItemsControlに追加されたっぽい。
AlternationCountを指定すると、各要素にAlternationIndexが設定されるようになる。AlternationCountが2の場合は、AlternationIndexは0,1,0,1,0,1...という感じでふられるみたいだ。

これと、StyleのTriggerを組み合わせることでListBoxとかの行の色を交互に変えたりってことが簡単に出来るようになるって寸法らしい。ということで早速実験。

いつも通りPersonクラスを定義してとかがめんどくさくなったので、ListBoxのタグの下にListBoxItemタグを直接書いてListBoxの中身をハードコーディングして適当にデータを表示する部分まででっちあげてみた。

<Window x:Class="WpfListBackground.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ListBox>
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />
            <ListBoxItem Content="田中　三郎" />
            <ListBoxItem Content="田中　四郎" />
            <ListBoxItem Content="田中　五郎" />
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />
            <ListBoxItem Content="田中　三郎" />
            <ListBoxItem Content="田中　四郎" />
            <ListBoxItem Content="田中　五郎" />
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />
            <ListBoxItem Content="田中　三郎" />
            <ListBoxItem Content="田中　四郎" />
            <ListBoxItem Content="田中　五郎" />
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />
            <ListBoxItem Content="田中　三郎" />
            <ListBoxItem Content="田中　四郎" />
            <ListBoxItem Content="田中　五郎" />
        </ListBox>
    </Grid>
</Window>

実行すると、特に何の変哲も無いウィンドウとリストボックスが表示される。

今回の目玉の機能を追加していこうと思う。ListBoxに、AlternationCountプロパティの設定を追加する。交互に色を変えたいので、2を設定しておいた。

    <Grid>
        <ListBox AlternationCount="2">
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />

そして、ListBoxのItemContainerStyleプロパティでAlternationIndexが0の時と1の時とでTriggerを使って背景色を変えるようなスタイルを設定する。

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Style.Triggers>
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="LightGray" />
            </Trigger>
            <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                <Setter Property="Background" Value="LightGreen" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ListBox.ItemContainerStyle>

これを実行すると、下のようになる。交互に色が変わっていていい感じ。

今回はC#のコードを書いてない。欲求不満だ！！
ということで、XAML全体を晒してこのエントリは終了。因みに、試してないけどItemsControlの子のコントロールは全部この方法で色を交互にしたり出来ると思われる。素敵だね。

<Window x:Class="WpfListBackground.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ListBox AlternationCount="2">
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Style.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                            <Setter Property="Background" Value="LightGray" />
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                            <Setter Property="Background" Value="LightGreen" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />
            <ListBoxItem Content="田中　三郎" />
            <ListBoxItem Content="田中　四郎" />
            <ListBoxItem Content="田中　五郎" />
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />
            <ListBoxItem Content="田中　三郎" />
            <ListBoxItem Content="田中　四郎" />
            <ListBoxItem Content="田中　五郎" />
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />
            <ListBoxItem Content="田中　三郎" />
            <ListBoxItem Content="田中　四郎" />
            <ListBoxItem Content="田中　五郎" />
            <ListBoxItem Content="田中　太郎" />
            <ListBoxItem Content="田中　次郎" />
            <ListBoxItem Content="田中　三郎" />
            <ListBoxItem Content="田中　四郎" />
            <ListBoxItem Content="田中　五郎" />
        </ListBox>
    </Grid>
</Window>

[WPF][C#]DataGridの表示が崩れる？

kazuki@wankuma.com (かずき) — Fri, 15 Aug 2008 20:08:00 GMT

DataGridをちょっと触ってて気になることがおきた。
再現の仕方がわからないけど、表示が崩れることがあるっぽい。10000行のあるデータを表示させてスクロールさせると、たまにずれてる。百聞は一見にしかずということなので、スクリーンショット。

これは、ちょっと悲しい。何だろう？

[WPF][C#]WPFのDataGridにコンボボックス出してみよう

kazuki@wankuma.com (かずき) — Fri, 15 Aug 2008 18:01:00 GMT

１つ前のエントリでは、CheckBoxを列に出してみた。引き続きComboBoxを出してみようと思う。Personクラスをちょろっと拡張して年齢を持たせることにした。年齢の男/女をComboBoxで表示させようって寸法だ。

namespace WpfDataTableSample
{
    public class Person
    {
        public string Name { get; set; }
        public int Age { get; set; }
        // C#好きかどうかのフラグ
        public bool CSharper { get; set; }
        // 性別
        public GenderType Gender { get; set; }
    }

    public enum GenderType
    {
        男,女
    }
}

DataContextに突っ込むデータにも、男と女が交互に出るように書き換えた。

            DataContext = Enumerable.Range(10, 50).Select(i =>
                new Person 
                { 
                    Name = "田中　太郎 no" + i, 
                    Age = i % 50, 
                    CSharper = i % 5 == 0,
                    Gender = i % 2 == 0 ? GenderType.男 : GenderType.女
                }).ToList();

次に、ComboBoxを表示するための列の定義を行う。そのための下準備としてWindowのResourcesプロパティにComboBoxに表示するための元データを定義しておく。

<Window.Resources>
    <!-- 性別のコンボボックスに表示するためのデータ -->
    <x:Array x:Key="GenderTypeSource" Type="{x:Type WpfDataTableSample:GenderType}">
        <WpfDataTableSample:GenderType>男</WpfDataTableSample:GenderType>
        <WpfDataTableSample:GenderType>女</WpfDataTableSample:GenderType>
    </x:Array>
</Window.Resources>

そして、DataGridComboBoxColumnをDataGridのColumnsプロパティに追加する。

<!-- 自動でカラムを生成しないように指定 -->
<WPFToolkit:DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False">
    <WPFToolkit:DataGrid.Columns>
        <!-- 名前の表示 -->
        <WPFToolkit:DataGridTextColumn DataFieldBinding="{Binding Name}" 
                                       Header="なまえ" />
        <!-- 年齢の表示 StringFormatでフォーマットも指定してみた -->
        <WPFToolkit:DataGridTextColumn DataFieldBinding="{Binding Age, StringFormat=000歳}"
                                       Header="ねんれい" />
        <!-- CheckBoxを使うときも基本的にTextBoxと同じようにいける -->
        <WPFToolkit:DataGridCheckBoxColumn DataFieldBinding="{Binding CSharper}"
                                           Header="C#大好き？" />
        <!-- 性別！ -->
        <WPFToolkit:DataGridComboBoxColumn DataFieldBinding="{Binding Gender}"
                                           Header="性別" 
                                           ItemsSource="{Binding Source={StaticResource GenderTypeSource}}" >
        </WPFToolkit:DataGridComboBoxColumn>
    </WPFToolkit:DataGrid.Columns>
</WPFToolkit:DataGrid>

TextBoxやCheckBoxのときと同じようにDataFieldBindingとHeaderプロパティに値を設定する。そして、ComboBoxに表意jするためのデータをItemsSourceプロパティに設定する。
今回の例では、さっきWindowのResourcesに用意したGenderTypeSourceをバインドした。

この状態で実行すると、コンボボックスで男と女を選べるようになる。

ここまで順調にきてる。いい感じだ。

[C#][WPF]DataGridにbool型のデータを表示してみる（CheckBox使うってことね）