ぐぬぬシリーズです!
ぐぬぬシリーズとは、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