WPF

[WPF][C#]イメージのリスト（いい具合に横並び）

kazuki@wankuma.com (かずき) — Thu, 09 Oct 2008 23:19:00 GMT

Vistaの背景画像選ぶときみたいなリストボックスを作りたいということで、叩き台を作ってみた。後は微調整でいけるのかな？

とりあえずXAMLだけを。

<Window x:Class="WpfImageList.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfImageList"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <Window.Resources>
        <local:ImageSizeConverter x:Key="imageSizeConverter" />
    </Window.Resources>
    <Grid>
        <ListBox ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Converter={StaticResource imageSizeConverter}}"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel ItemHeight="100" ItemWidth="100" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</Window>

ListBoxのItemTemplateで、ListBoxItemに画像を表示している部分と、ListBoxのItemsPanelで表示にWrapPanelを使ってるのが特徴。横スクロールはイラナイ（というか有るとWrapPanelが横方向に無限に広がるため折り返さない）のでScrollViewer.HorizontalScrollBarVisibility="Disabled"にしている。

ItemTemplateをもうちょとっと格好良くすればそっくりになるかな？
その他の部分については、下記のプロジェクト参照してください。

[WPF][C#]ListViewの行を交互に色を変える

kazuki@wankuma.com (かずき) — Thu, 02 Oct 2008 08:14:00 GMT

nakamuraさんも同じことをされていたけど、違うアプローチから縞々をしてみようと思う。
Nakamura Blog:ListViewを縞々にする

やり方は基本的に前にやったListBoxの時と同じ。
さくっとしてみよう。

ListViewに表示するデータの準備

まず、表示するデータがないと話しにならない。いつもどおりのPersonクラスを作成する。

namespace WpfApplication4
{
    public class Person
    {
        public int No { get; set; }
        public string Name { get; set; }
    }
}

これをWindowのコンストラクタでDataContextに設定する。

using System.Windows;

namespace WpfApplication4
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            DataContext = new[]
            {
                new Person { No = 1, Name = "田中　太郎" },
                new Person { No = 2, Name = "鈴木　太郎" },
                new Person { No = 3, Name = "田中　次郎" },
                new Person { No = 4, Name = "田中　三郎" },
                new Person { No = 5, Name = "田中　四郎" },
                new Person { No = 6, Name = "田中　五郎" },
                new Person { No = 7, Name = "田中　六郎" },
                new Person { No = 8, Name = "木村さん" },
            };
        }
    }
}

これで準備完了。

ListViewにデータを表示する

表示のさせ方自体は前にもしてるから、さくっとXAMLだけ紹介。

<Window x:Class="WpfApplication4.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>
        <ListView ItemsSource="{Binding}" AlternationCount="2">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="No" DisplayMemberBinding="{Binding No}" />
                        <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

普通にデータが表示されるようになった。いい感じ。

ついに縞々

縞々にするため？に.NET Framework 3.5 SP1から追加されたAlternationCountプロパティをListViewに追加する。縞々なので2を指定した。

<ListView ItemsSource="{Binding}" AlternationCount="2">

そしてListViewのItemContainerStyleでItemsControl.AlternationIndexでTriggerをかけて背景色を変えるようにする。

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <!-- 奇数行だけ金色！ -->
            <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                <Setter Property="Background" Value="Gold" />
            </Trigger>
        </Style.Triggers>
    </Style>
</ListView.ItemContainerStyle>

実行すると縞々にはなってるが…

No3の田中　次郎さんの行をマウスで選択しているのにハイライトが非常にわかりにくい。選択されてるときは、背景色を指定しないように改良してみよう。
やりたいこととしては、ItemsControl.AlternationIndexが0で、選択されてない行だけ色を変えたいということなのでMultiTriggerを使ってやってみた。

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <MultiTrigger>
                <!-- 奇数行で、選択されてない行は金色!! -->
                <MultiTrigger.Conditions>
                    <Condition Property="ItemsControl.AlternationIndex" Value="0" />
                    <Condition Property="IsSelected" Value="False" />
                </MultiTrigger.Conditions>
                <Setter Property="Background" Value="Gold" />
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</ListView.ItemContainerStyle>

こうすると、選択行の色は変わらない。でも、これはこれでイマイチかな…。

選択されてる行でAlternationIndexが0の行にそれっぽい色をつける様なMultiTriggerを設定すれば良さそうだ。早速やってみよう。

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Style.Triggers>
            <!-- 選択されてない奇数行は紫色っぽい色で -->
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="ItemsControl.AlternationIndex" Value="0" />
                    <Condition Property="IsSelected" Value="False" />
                </MultiTrigger.Conditions>
                <Setter Property="Background" Value="#ffee00ff" />
            </MultiTrigger>
            <!-- 選択されてる奇数行は透明っぽい紫色で -->
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="ItemsControl.AlternationIndex" Value="0" />
                    <Condition Property="IsSelected" Value="True" />
                </MultiTrigger.Conditions>
                <Setter Property="Background" Value="#44ee00ff"/>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</ListView.ItemContainerStyle>

これで実行するとそれっぽくなってる。

[WPF][C#]Visual Studio 2008 SP1のWPFデザイナの使い方

kazuki@wankuma.com (かずき) — Wed, 01 Oct 2008 08:01:00 GMT

Visual Studio 2005でアドインという形でVisual Studio上でのWPFアプリケーションの開発がサポートされるようになりました。そこからVS2008 → VS2008 SP1とバージョンアップを経てそこそこ使いやすいものになってます。
VS2008までは、デザイナ画面を使うといってもプレビュー画面程度にしか使ってませんでした。ほとんどXAMLを手打ち！！という漢らしい方法で開発してました。でも、SP1でデザイナもパワーアップしてWindowsFormで出来ること程度のことが出来る感じになってます。

ということでどんな事が出来るかというと…

ツールボックスからドラッグアンドドロップすることで任意の場所にボタンとかを置くことが出来る。コレ位に関してはVS2005のころから出来てたので別に驚くことは無い。

このコントロールをマウスでつかんで画面内の何処に動かすのか移動させることが出来る。その際に、ガイドも出てきてきっちり揃えたレイアウトとかがやりやすくなっている。

そして、ウィンドウがサイズ変更されたときにコントロールのサイズをどうするのかということもデザイナで指定できるようになっている。WindowsFormでいうところのAnchorと同じことが出来る。
やり方は簡単。デザイナ上でコントロールを選択すると、左側と上側に三角形が表示される。この状態は、WindowsFormでAnchorにTopとLeftを指定したのと同じ動きをする。

これにAnchorにRightを設定したのと同じ動きをさせる設定をしようと思う。これは、コントロールの右側に表示されてる丸い部分をクリックすればいい。クリックすると丸から三角に変わる。

これで、ウィンドウサイズを変えるとボタンのサイズも変わるようになる。

こんな感じで、裏ではWPFのGridレイアウトの動きとマージンやWidth Heightを駆使しつつWindowsFormと同じような感じで画面デザインが出来るようになっている。WPFの流儀に従ってるかと言われるとう～んどうだろ？って感じもするけど、これで設定したほうが楽な場合もあるので使える部分では使っていこうと思う。

後は、Gridを選択した状態で画面の上と左に表示される青い帯みたいな部分をクリックするとColumnDefinitionとRowDefinitionが設定できるようになっている。

まぁ、WindowsForm的にデザイナでレイアウトしたい！ってときに使う機能かというと微妙な気はする。

最後に、プロパティウィンドウでイベントの設定も出来る。今まで出来なかったのが不思議でならない。

[後で読む][WPF]WPFアプリケーションのローカライズの仕方

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

MSDNの「方法：アプリケーションをローカライズする」
http://msdn.microsoft.com/ja-jp/library/ms746621(VS.80).aspx

ここに、locbamlを使ってWPFアプリケーションをローカライズする方法が書かれてる。

[WPF][C#]WebBrowserコントロールは？その３

kazuki@wankuma.com (かずき) — Sun, 28 Sep 2008 17:11:00 GMT

その２
http://blogs.wankuma.com/kazuki/archive/2008/01/26/119366.aspx

ずいぶん前に、WebBrowserコントロールの代わりに、Frameを使うといけた！って書いた。
でも、画像を表示しようとすると駄目だったのでションボリといった代物だった。

でも、.NET Framework 3.5/3.0のSP1から正真正銘WebBrowserが追加されたので悩む必要は無い。使い方も簡単で、XAMLでWebBrowserタグを使って画面に置くことが出来る。画面遷移はおなじみのNavigateメソッドでOK。ということで早速軽く試してみたよ。

テキストボックスとボタンとブラウザーを画面に配置。

<Window x:Class="WpfAnimationSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Browser">
    <DockPanel>
        <ToolBarTray DockPanel.Dock="Top">
            <ToolBar>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBox Name="textBoxUrl" MinWidth="250"/>
                    <Button Grid.Column="1" 
                            Name="buttonNavigate"
                            Content="開く" Click="buttonNavigate_Click" />
                </Grid>
            </ToolBar>
        </ToolBarTray>
        <WebBrowser Name="browser" Navigated="browser_Navigated" />
    </DockPanel>
</Window>

ボタンクリックで画面遷移をして、画面遷移完了とともにTextBoxに遷移先のURLを表示するようにしてみた。

using System;
using System.Windows;
using System.Windows.Navigation;

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

        private void buttonNavigate_Click(object sender, RoutedEventArgs e)
        {
            browser.Navigate(new Uri(textBoxUrl.Text));
        }

        private void browser_Navigated(object sender, NavigationEventArgs e)
        {
            textBoxUrl.Text = browser.Source.ToString();
        }
    }
}

実行して動きを試してみよう。
URLを入力して開くボタンを押すと…

ばっちり表示される。

画像自体の表示やPDFとかFlash, SilverlightもOKだ。要はIEで表示できれば大丈夫そう。

[WPF][C#]WPFのアニメーションその２「XAMLで書いてみよう」

kazuki@wankuma.com (かずき) — Thu, 25 Sep 2008 09:44:00 GMT

前回は、C#のコードでアニメーションを組み立てて実行した。実は、これも全てXAMLでかけてしまう。ということで書いてみようと思う。
とりあえず、前回のプロジェクトでC#のコードを書く前の段階に戻す。

<Window x:Class="WpfAnimeStudy.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">  
    <Canvas>  
        <Rectangle Name="animationTarget"  
                   Canvas.Top="10"    
                   Canvas.Left="10"    
                   Width="100"    
                   Height="100"    
                   Fill="Aqua" />  
        <Button Canvas.Bottom="10" Canvas.Left="10">きっかけ！</Button>  
    </Canvas>  
</Window>

ここにStoryboardとDoubleAnimationを追加していく。色々な書き方はあるが、ResourcesにStoryboardを追加してみようと思う。C#のコードで書いていたものをそのままXAML化。

<Window.Resources>
	<Storyboard x:Key="storyboard">
		<DoubleAnimation Storyboard.TargetProperty="Width"
						 Storyboard.TargetName="animationTarget"
						 Duration="0:0:10"
						 From="10" To="200" />
		<DoubleAnimation Storyboard.TargetProperty="Height"
						 Storyboard.TargetName="animationTarget"
						 Duration="0:0:10"
						 From="10" To="200" />
	</Storyboard>
</Window.Resources>

コードとちょっと違うのは、Storyboard.TargetNameという添付プロパティを使用しているところかな。
この添付プロパティを使うと、アニメーションさせたいターゲットを指定できる。この場合animationTargetという名前のRectangleをアニメーションさせたいので、Storyboard.TargetName=”animationTarget”という風になる。

最後に、このストーリーボードを開始する処理を書けば完成だ。これもXAMLでいける。クリック時にストーリーボードを起動するにはTriggersプロパティとEventTriggerとBeginStoryboardというものを使う。Triggersプロパティは、FrameworkElementという結構上の階層で定義されてるので、基本的に画面に置くコントロール系には全て備わっているプロパティです。

StyleやControlTemplate等にも同名のプロパティがあるが、これらはTriggerやDataTriggerやEventTriggerなんかをサポートするけど、FrameworkElement.TriggersではEventTriggerしかサポートしていない。今回の例では、ボタンクリックのイベントが拾えればいいのでEventTriggerが使えればいいので、これを使ってみようと思う。

<Button Canvas.Bottom="10" Canvas.Left="10">
	<Button.Triggers>
		<EventTrigger RoutedEvent="Button.Click">
			<BeginStoryboard Storyboard="{StaticResource storyboard}" />
		</EventTrigger>
	</Button.Triggers>
	きっかけ！
</Button>

EventTriggerで、Button.Clickが起きたらResources内のstoryboardを開始するように指定している。
これで完成だ。一応XAML全体を以下に示します。

<Window x:Class="WpfAnimeStudy.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">
	<Window.Resources>
		<Storyboard x:Key="storyboard">
			<DoubleAnimation Storyboard.TargetProperty="Width"
							 Storyboard.TargetName="animationTarget"
							 Duration="0:0:10"
							 From="10" To="200" />
			<DoubleAnimation Storyboard.TargetProperty="Height"
							 Storyboard.TargetName="animationTarget"
							 Duration="0:0:10"
							 From="10" To="200" />
		</Storyboard>
	</Window.Resources>
	<Canvas>
		<Rectangle Name="animationTarget"  
                   Canvas.Top="10"    
                   Canvas.Left="10"    
                   Width="100"    
                   Height="100"    
                   Fill="Aqua" />
		<Button Canvas.Bottom="10" Canvas.Left="10">
			<Button.Triggers>
				<EventTrigger RoutedEvent="Button.Click">
					<BeginStoryboard Storyboard="{StaticResource storyboard}" />
				</EventTrigger>
			</Button.Triggers>
			きっかけ！
		</Button>
	</Canvas>
</Window>

実行結果は前回と同じなので割愛。
以上！

[C#][WPF]WPFのアニメーションその１「コードからの単純なアニメーション」

kazuki@wankuma.com (かずき) — Wed, 24 Sep 2008 21:32:00 GMT

WPFのアニメーションとは、TVアニメみたいな奴じゃなくて指定した時間の間でプロパティの値を変更していくとかいうものをさすらしい。
とりあえず色々実験するための下地のアプリケーションを作ってみよう。

WpfAnimeStudyという名前のプロジェクトを新規作成して、Window1.xamlを下のような感じにしてみた。

<Window x:Class="WpfAnimeStudy.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">
    <Canvas>
        <Rectangle Name="animationTarget"
                   Canvas.Top="10" 
                   Canvas.Left="10" 
                   Width="100" 
                   Height="100" 
                   Fill="Aqua" />
        <Button Canvas.Bottom="10" Canvas.Left="10">きっかけ！</Button>
    </Canvas>
</Window>

この時点では、まだ何も仕込んでないので下のような水色の四角形とボタンが表示されるだけになってる。

この四角形をアニメーションを使って色々いじくってみようと思う。とりあえず巨大化させるところからだよね。
アニメーションのためのクラスは、<型名>Animationという風にクラス名が統一されている。サイズ指定のためのプロパティのWidthやHeightはDouble型なので、もれなくDoubleAnimationというクラスを使うことになる。

<型名>Animationという名前のクラスにはFromプロパティとToプロパティが定義されている。Fromにアニメーション開始時の値、Toにアニメーション終了時の値を指定することができる。
UIElementクラスには、アニメーションを開始するためのメソッドBeginAnimation(DependencyProperty, AnimationTimeline)というメソッドが用意されている。第一引数にアニメーションさせるプロパティを指定する。第二引数に、アニメーションを指定する。

ということで、10から200にアニメーションさせるDoubleAnimationを作ってRectangleの横幅をずずずぃ～～っと変更させるコードを書いてみた。

using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

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

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // Double型で10から200までアニメーションさせる
            var animation = new DoubleAnimation
            {
                From = 10,
                To = 200
            };
            // そぉぃ
            animationTarget.BeginAnimation(Rectangle.WidthProperty, animation);
        }
    }
}

実行すると...
クリック！

静止画じゃ非常にわかりにくいけど、水色の四角形が1秒間かけて幅１０から２００へ広がっている。この1秒というのも任意の値を指定できるようになっている。Durationというプロパティがそれだ。Durationプロパティは、Durationという型で定義されているが、暗黙の型変換でも定義されているのだろう。TimeSpanを指定できるようになっている。とりあえず、10秒かけてアニメーションするようにコードを変更してみた。

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Double型で10から200までアニメーションさせる
    var animation = new DoubleAnimation
    {
        From = 10,
        To = 200,
        // 10秒間かけてアニメーションしてね！
        Duration = TimeSpan.FromMilliseconds(10000)
    };
    // そぉぃ
    animationTarget.BeginAnimation(Rectangle.WidthProperty, animation);
}

実行結果は、じわりじわりと大きくなっていくだけだから、絵では表しにくい…ということで省略だ。

ストーリーボード

ちなみに、１つ１つのアニメーションを順次BeginAnimationしていくとなると複雑なアニメーションを定義するときに呼び出しがめんどくさいことになる。そういうときのために、複数のアニメーションを１つに取りまとめてくれるストーリーボードなるものがある。

ストーリーボードは、ChildrenプロパティにTimelineオブジェクトをいっぱい格納できるようになっている。
そして、添付プロパティを使って、アニメーションに対して、どのプロパティがターゲットかを教えてあげることができるようになってる。ということで、早速これを使ってWidthとHeightを同時に変化させるアニメーションを定義してみようと思う。

private void Button_Click(object sender, RoutedEventArgs e)
{
    var storyboard = new Storyboard();
    // 横幅！
    {
        // Double型で10から200までアニメーションさせる
        var animation = new DoubleAnimation
        {
            From = 10,
            To = 200,
            // 10秒間かけてアニメーションしてね！
            Duration = TimeSpan.FromMilliseconds(10000)
        };
        Storyboard.SetTargetProperty(animation, new PropertyPath("Width"));
        storyboard.Children.Add(animation);
    }

    // 縦幅！
    {
        // Double型で10から200までアニメーションさせる
        var animation = new DoubleAnimation
        {
            From = 10,
            To = 200,
            // 10秒間かけてアニメーションしてね！
            Duration = TimeSpan.FromMilliseconds(10000)
        };
        Storyboard.SetTargetProperty(animation, new PropertyPath("Height"));
        storyboard.Children.Add(animation);
    }
    // そぉぃ
    animationTarget.BeginStoryboard(storyboard);
}

ストーリーボードを使用すると、アニメーション開始のメソッドがBeginStoryboardになる。まぁ、些細な変更だけど。ということで実行！
この状態からクリックすると…

10秒かけてじわじわと大きくなっていく。これがアニメーションの基本っぽい。

因みに、FromプロパティやToプロパティを省略するとアニメーションの開始時点の値や終了時点の値をプロパティに設定されているデフォルト値に設定できるようになっている。
この例でFromを省略すると幅と高さ100から200へのアニメーションになるっていう寸法だ。ふむふむ。

[WPF][C#]Styleでの値の設定の優先順位

kazuki@wankuma.com (かずき) — Mon, 22 Sep 2008 12:38:00 GMT

WPFではStyleを使って見た目をごにょごにょ出来る。
Triggerとかも使えば、見た目に関するロジックをほとんど全てXAMLで書けてしまうんじゃないんだろうかと思う。

ただ、Styleで値をセットするときに使うSetterは、コントロールで明示的にプロパティを設定してあると効かない。

<Window x:Class="WpfApplication1.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">
	<Window.Resources>
		<!-- カーソルがボタン上に有るか無いかでコンテンツを変えるスタイル -->
		<Style TargetType="Button">
			<Style.Triggers>
				<Trigger Property="IsMouseOver" Value="True">
					<Setter Property="Content" Value="Over!" />
				</Trigger>
				<Trigger Property="IsMouseOver" Value="False">
					<Setter Property="Content" Value="Not Over!" />
				</Trigger>
			</Style.Triggers>
		</Style>
	</Window.Resources>
	<StackPanel>
		<!-- カーソルがボタン上に有るか無いかでコンテンツが変わる -->
		<Button />
		<!-- 明示的にコンテンツを指定してるのでスタイルでの上書きはされない -->
		<Button Content="Button Content!"/>
	</StackPanel>
</Window>

勝手に頭の中でTrigger使った時はTriggerで指定した値が優先だろうと思い込んでたのでメモ。

[WPF][C#]MultiBindingとIMultiValueConverter

kazuki@wankuma.com (かずき) — Sun, 21 Sep 2008 18:47:00 GMT

複数項目をまとめて、１つの場所に表示したいときに使えるMultiBindingというものがあるらしい。
今まで名前しか知らなかったし、簡単なサンプルを組んでる限り必要性を感じなかった代物です。

まぁ、あるんだし使ってみよう。
MultiBindingは、IMultiValueConverterと組み合わせて使う。
IMultiValueConverterは、IValueConverterの複数の値版になってる。ConvertとConvertBackメソッドのシグネチャは下のような感じだ。

object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)

例としてintの値２つをカンマ区切りの文字列に相互変換するIMultiValueConverterの実装は下のようになる。

using System;
using System.Windows.Data;

namespace WpfMultiBindingSample
{
    public class IntArrayToStringConverter : IMultiValueConverter
    {
        // [10,20] -> "10,20"
        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            int x = (int)values[0];
            int y = (int)values[1];
            return string.Format("{0},{1}", x, y);
        }

        // "10,20" -> [10,20]
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
        {
            string text = value.ToString();
            string[] values = text.Split(',');
            return new object[] { int.Parse(values[0]), int.Parse(values[1]) };
        }
    }
}

これを実際に使ってみよう。int型のプロパティを２つ持つMyPointクラスを定義してみた。

namespace WpfMultiBindingSample
{
    public class MyPoint
    {
        public int X { get; set; }
        public int Y { get; set; }
    }
}

コンバータとMyPointをWindow.Resourcesに登録して、MyPointはWindow.DataContextに設定する。

<Window x:Class="WpfMultiBindingSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMultiBindingSample"
    Title="Window1" Height="300" Width="300" DataContext="{DynamicResource myPoint}">
    <Window.Resources>
        <local:MyPoint x:Key="myPoint" X="10" Y="20" />
        <local:IntArrayToStringConverter x:Key="myConverter" />
    </Window.Resources>
</Window>

プロパティには、適当に10と20を設定しておいた。さて、このMyPointをTextBoxのTextにバインドしてみようと思う。単純なBindingだとTextBoxを２つ用意して各々XとYプロパティを表示する形になるけど、MultiBindingを使えば1つのTextBoxにXとYプロパティをバインドできる。
そのとき、どのような形で表示するかをConverterプロパティで指定出来る。早速さっき作ったConverterの使いどころだ。

<Window x:Class="WpfMultiBindingSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMultiBindingSample"
    Title="Window1" Height="300" Width="300" DataContext="{DynamicResource myPoint}">
    <Window.Resources>
        <local:MyPoint x:Key="myPoint" X="10" Y="20" />
        <local:IntArrayToStringConverter x:Key="myConverter" />
    </Window.Resources>
    <StackPanel>
        <TextBox>
            <TextBox.Text>
                <MultiBinding Converter="{StaticResource myConverter}">
                    <Binding Path="X" />
                    <Binding Path="Y" />
                </MultiBinding>
            </TextBox.Text>
        </TextBox>
        <Button Content="Click" Click="Button_Click" />
    </StackPanel>
</Window>

Button_Clickでは、myPointの値をMessageBoxで表示するようにしてみた。これで編集結果がちゃんと反映されているか確認できるって寸法だ。

using System.Windows;

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

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var myPoint = (MyPoint)FindResource("myPoint");
            MessageBox.Show(string.Format("({0},{1})", myPoint.X, myPoint.Y));
        }
    }
}

早速実行！！実行直後はTextBoxに10,20と表示されている。

これを100,40に書き換えてボタンをぽちっとな。

ばっちり！！

[WPF][C#]デフォルトのボタンとキャンセルボタン

kazuki@wankuma.com (かずき) — Mon, 15 Sep 2008 20:54:00 GMT

皆大好きButtonコントロール。アプリを開発したことがある人なら、おそらく一度はボタンというものを使ったことがあるはずと言っても過言ではない、とっても一般的なコントロールの１つである。

さて、ボタンというものにはEnterキーを押されたときにクリックイベントを発行するデフォルトのボタンと、Escキーを押されたときにクリックイベントを発行するキャンセルボタンがある。Windows Formアプリケーションでは、Formに、デフォルトのボタンをキャンセルボタンを設定するプロパティがあった。（と記憶している）
WPFでは、ボタン自身にこのプロパティが移動している。

デフォルトのボタンとキャンセルボタンに関するButtonのプロパティ

IsDefaultプロパティ
TrueにするとEnterキーを押したときにクリックイベントが走る
IsCancelプロパティ
TrieにするとEnterキーを押したときにクリックイベントが走る

ということで実験。テキストフィールド１つとボタン２つを置いて、一方のボタンをデフォルトのボタン、もう一方のボタンをキャンセルボタンにしてみた。
各々のボタンのクリックイベントで、押されたボタンがわかるようなメッセージボックスを表示するようにしてみた。

<Window x:Class="WpfButton.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">
    <StackPanel>
        <TextBox />
        <!-- デフォルトのボタン(Enterでクリック) -->
        <Button Name="button1" Content="Default Button" IsDefault="True" Click="button1_Click" />
        <!-- キャンセルボタン(Escでクリック) -->
        <Button Name="button2" Content="Cancel Button" IsCancel="True" Click="button2_Click" />
    </StackPanel>
</Window>

using System.Windows;

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

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Default Button Click!!");
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Cancel Button Click!!");
        }

    }
}

早速実行！

テキストボックスにフォーカスがある状態でEnterキーを押すとbutton1のクリックイベントが走る。

テキストボックスにフォーカスがある状態でEscキーを押すとbutton2のクリックイベントが走る。

WPF