atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

ぐぬぬシリーズその1:FloatingTileSample

ぐぬぬシリーズです!


ぐぬぬシリーズとは、TLかなんかで ”ふぇぇ。。出来ないよぉ。。” って見かけたネタの中から
「それBlendでノンコーディングでできるよ!0から始めるのネタにしちゃおう!」なんて思ったものの、
やってみたらちょっとでもC#を書かないと実装できなくて、

「あたしの流儀に反する!ぐぬぬ。。。!!」


ってなったネタです!
ぐぬぬ。。。!なので0から始める〜みたいに細かい解説はしません。
代わりに、なぜBlendで出来なかったとなるC#の部分の説明と、プロジェクトファイルを載せます。自分で読んでみてください。
また、Blendだけでもっとスマートにできるぜ!って方は、実現して是非ご一報ください。


■作ったもの
ドラッグしている間、タイルが浮いてるように見えるデザインです。
デモページ
http://c-mitsuba.com/temp/FloatingTileSample/SilverlightApplication14/Bin/Debug/TestPage.html




C#

private void gridControl_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
	var gc = new gridControl();
	gc = (gridControl)sender;
	gc.SetValue(Canvas.ZIndexProperty,1);

        mask.Visibility = Visibility.Visible;
}

private void gridControl_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
	var gc = new gridControl();
	gc = (gridControl)sender;
	gc.SetValue(Canvas.ZIndexProperty,0);

        mask.Visibility = Visibility.Collapsed;
}


■Blendだけで出来ないわけ
動的にZIndexPropertyの操作はコードから書かないとできませんでした。
ChangePropertyActionはそのコントロール自身が持っているプロパティのみ有効です。
ZIndexはGridやCanvasなどパネル的なコントロールが子要素に対して付加するプロパティなので、ダメなんです。

いや、本当はホストしている画面のStoryboardからは操作できるので、表示するgridControlの数*2つ(MouseDown時に1、Up時に0)のStoryboardを書けば可能なのですが、ちょっとスマートじゃないですね。

[StoryboardからZIndexをいじれる。]

ちなみに、タイルみたいなコントロールはCustomControlです。
ドラッグ時とノーマル時のアニメーションをVSMで作っています。
中のStateの切り替えはChangeStateActionで行なっています。
ドラッグ時に表示される影は画像で作っているので、Effectが使えないWPでも今回の表現は実現可能です。


■プロジェクトファイル
http://c-mitsuba.com/temp/FloatingTileSample.zip