かずきのBlog

C#やJavaやRubyとメモ書き

目次

Blog 利用状況

ニュース

わんくまBlogが不安定になったため、前に書いてたはてなダイアリーにメインを移動します。
かずきのBlog@Hatena
技術的なネタは、こちらにも、はてなへのリンクという形で掲載しますが、雑多ネタははてなダイアリーだけに掲載することが多いと思います。
コメント
プログラマ的自己紹介
お気に入りのツール/IDE
プロフィール
経歴
広告
アクセサリ

書庫

日記カテゴリ

[C#][Silverlight]Visual State Managerって何?

Silverlight2に、VisualStateManagerというものがある。
(WPF Toolkitにも入ってるのでWPF Toolkitを入れればWPFでも使えそう(未確認))

このVisual State Managerという代物は一体何をしてくれるのか?というのがずっと疑問だった。
直訳すると、見た目の状態管理する人となる。具体的に言うと、どういう状態のときに、どういうアニメーションを起こすかということw管理してくれるものらしい。

状態には、名前をつけて管理することが出来て、コードからは名前を指定するだけで一連のアニメーションを動かすことが出来るようになる。ということで、非常に簡単な例だけど、ボタンをクリックすると文字が黒から赤色になって、もう一度クリックすると黒に戻るというものをVisualStateManagerを使って作ってみようと思う。

土台の作成

まずは、Visual State Managerとはまったく関係無い部分を作りこんでいく。
といっても今回はボタンが1つ置いてある画面を作るだけなので大して書くことは無い。

VSMSampleという名前でSilverlightアプリケーションを作成して。Page.xamlを以下のように編集した。

<UserControl x:Class="VSMSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button x:Name="button1" Content="ここの色が変わります" Foreground="Black" />
    </Grid>
</UserControl>

実行結果は下のような感じ。ボタンがあるだけです。
image

VisualStateGroupの作成

ついにVisual State Manager関係のコードの作成に入ります。
VisualStateManagerは、VisualStateGroupsという添付プロパティを持っています。ここにVisualStateGroupを複数定義することが出来るようになっています。

今回は、ボタンの文字色が黒の時と、赤の時の2パターンあるのでVisualStateGroupを2つ定義します。VisualStateGroupの中にVisualStateを複数定義することが出来ます。

VisualStateには、x:Nameを使って名前をつけることが出来ます。今回はボタンの文字が赤色になる状態を表すredStateと、通常の状態を表すnormalStateの2つを定義しました。

<UserControl x:Class="VSMSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <!-- VisualStateManager.VisualStateGroups添付プロパティ -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="redState">
                    <!-- ボタンの文字が赤色の状態 -->
                </VisualState>
                <VisualState x:Name="normalState">
                    <!-- ボタンの文字が黒色の状態 -->
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Button x:Name="button1" Content="ここの色が変わります" Foreground="Black" />
    </Grid>
</UserControl>

ここにアニメーションを定義していきます。
VIsualStateのStoryboardプロパティにStoryboardを定義することでアニメーションを定義します。ここでは、redStateに、ボタンの前景色を赤色にするアニメーションをs鋳込みます。

色のアニメーションは、ColorAnimationを使って実現します。
ColorAnimationにStoryboard.TargetNameプロパティとStoryboard.TargetPropertyプロパティを設定してボタンの前景色を指定します。
Storyboard.TargetPropertyは、若干複雑になっていますが、これはButtonのForegroundプロパティにはSolicColorBrushが指定されていて、それのColorプロパティをアニメーションの対象に指定しているためです。

<!-- VisualStateManager.VisualStateGroups添付プロパティ -->
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="redState">
            <VisualState.Storyboard>
                <!-- button1のForegroundを赤色へアニメーションする -->
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="button1"
                            Storyboard.TargetProperty="(Button.Foreground).(SolidColorBlush.Color)"
                            To="Red" />
                </Storyboard>
            </VisualState.Storyboard>
        </VisualState>
        <VisualState x:Name="normalState">
            <!-- 特に何もアニメーションしない(デフォが黒色なので)-->
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

状態の遷移

これでVisualStateGroupの定義が終わったので、後は状態を遷移させる処理を書くだけです。
状態を遷移させるためには、VisualStateManager.GoStateを使います。

GoStateには、第一引数に状態を遷移させるコントロールのインスタンス、第二引数に状態名、第三引数にVisualTransitionを使うかどうかを指定します。
VisualTransitionは、今回は使ってない(というか何かよくわかってない)ので第三引数にはfalseを指定します。
第二引数には、遷移したいステータス名なのでクリックの度にredState, normalStateを交互に渡します。

第一引数には、botton1ではなく、このページ自体を現すthisを渡します。
button1を渡してもアニメーションはしません。何故ならVIsualStateManager.VisualStateGroupsを指定しているのはLayoutRootという名前のGridだからです。
VisualState内で、button1という名前で要素にアクセスしたかったのでButtonよりも外側の要素にVisualStateGroupsを設定したためです。

上記の理屈ならLayoutRootをそのまま渡せばいいんじゃない?ってなるのですが、GridはControlを継承していないため、Gridの親のPage自信を渡しています。

ボタンクリックのタイミングで状態を遷移させるので、Clickイベントを定義します。

<Button x:Name="button1" Content="ここの色が変わります" Foreground="Black" Click="button1_Click"  />

Clickイベントで、GoStateメソッドを使って状態を繊維させます。

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;

namespace VSMSample
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        // redState -> normalState -> redState -> normalState ...と文字列を返す
        // IEnumerator<string>を作る。
        private IEnumerator<string> stateGenerator = CreateStateGenerator();
        private static IEnumerator<string> CreateStateGenerator()
        {
            while (true)
            {
                yield return "redState";
                yield return "normalState";
            }
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            // 次の状態へ遷移する
            stateGenerator.MoveNext();
            VisualStateManager.GoToState(
                this, stateGenerator.Current, false);
        }
    }
}

これで完成です。
実行させて、ボタンをクリックすると文字の色が赤・黒・赤・黒とクリックのたびに変わります。

初期状態
image

一度クリックすると赤色へ(1秒かけてアニメーションします)
image

もう一度クリックすると黒色に戻ります
image

ちゃんと動いてる。
これはお手軽でいいかもしれない。Triggerよりも見た目を管理することに専念するように作られているのが好印象でした。

投稿日時 : 2008年11月30日 20:12

Feedback

# Internet Marketing Promotions Alone Iincreased My Businness Over Night 2011/08/23 8:30 marketing3

http://www.maxvideodigital.com/foro/index.php?topic=26952.new#new
http://download.mmm.com.mk/forum/index.php/topic,94283.0.html
http://skichase.com/forum/index.php/topic,226949.new.html#new
http://ramialjarrah.is-the-boss.com/php-bb/posting.php?mode=reply&t=5068
http://www.polacy24.pl/forum/viewtopic.php?f=58&t=450573&p=605135#p605135
http://ijailbreak.de/forum/index.php?topic=153024.new#new
http://tocardeouvido.com/forum/index.php?topic=66080.new#new
http://www.poljoglasnik.com/forum/index.php?topic=251733.new#new
http://aefib.parysz.com.pl/viewtopic.php?p=328865#328865
http://www.angermgmt.com/ubb/Forum8/HTML/001066.html

# t shirt scarf 2012/10/27 22:22 http://www.burberryoutletonlineshopping.com/burber

you are in reality a just right webmaster. The web site loading velocity is amazing. It seems that you are doing any unique trick. Also, The contents are masterpiece. you have done a excellent process in this subject!
t shirt scarf http://www.burberryoutletonlineshopping.com/burberry-scarf.html

# louis vuitton diaper bag 2012/10/28 3:06 http://www.louisvuittonoutletdiaperbag.com/

If you would like a powerful shipping for your truly, count neighbors.
louis vuitton diaper bag http://www.louisvuittonoutletdiaperbag.com/

# louis vuitton handbags 2012/10/28 3:06 http://www.louisvuittonoutletbags2013.com/

Glee is a aromatize that people afin de along most people without ending up with a few loses along your self.
louis vuitton handbags http://www.louisvuittonoutletbags2013.com/

# louis vuitton outlet 2012/10/28 3:06 http://www.louisvuittonwallets2013.com/

Cherish is considered the hectic difficulty on the lifestyle in addition to the expansion of that which a number of us like.
louis vuitton outlet http://www.louisvuittonwallets2013.com/

# louis vuitton outlet store 2012/10/28 3:07 http://www.louisvuittonbackpack2013.com/

In which there's always partnership whilst not fancy, you will find fancy whilst not partnership.
louis vuitton outlet store http://www.louisvuittonbackpack2013.com/

# t shirts 2012/10/28 13:17 http://www.burberryoutletonlineshopping.com/burber

Thanks, I've recently been searching for info about this topic for ages and yours is the best I've found out so far. However, what about the conclusion? Are you positive about the supply?
t shirts http://www.burberryoutletonlineshopping.com/burberry-womens-shirts.html

# mens shirts 2012/10/28 13:17 http://www.burberryoutletonlineshopping.com/burber

I like this website so much, bookmarked. "To hold a pen is to be at war." by Francois Marie Arouet Voltaire.
mens shirts http://www.burberryoutletonlineshopping.com/burberry-men-shirts.html

# Burberry Watches 2012/10/28 13:17 http://www.burberryoutletonlineshopping.com/burber

I conceive this site contains some very excellent information for everyone :D. "Do not go where the path may lead, go instead where there is no path and leave a trail." by Ralph Waldo Emerson.
Burberry Watches http://www.burberryoutletonlineshopping.com/burberry-watches.html

# burberry wallets 2012/10/31 19:56 http://www.burberrysalehandbags.com/burberry-walle

But wanna remark that you have a very decent site, I love the design it really stands out.
burberry wallets http://www.burberrysalehandbags.com/burberry-wallets-2012.html

# burberry scarf 2012/10/31 19:56 http://www.burberrysalehandbags.com/burberry-scarf

I like this post, enjoyed this one thankyou for putting up.
burberry scarf http://www.burberrysalehandbags.com/burberry-scarf.html

# t shirts 2012/10/31 19:56 http://www.burberrysalehandbags.com/burberry-women

Perfectly pent content, thanks for selective information. "Necessity is the mother of taking chances." by Mark Twain.
t shirts http://www.burberrysalehandbags.com/burberry-womens-shirts.html

# burberry watches for women 2012/10/31 19:57 http://www.burberrysalehandbags.com/burberry-watch

Simply wanna input on few general things, The website pattern is perfect, the content is really superb. "By following the concept of 'one country, two systems,' you don't swallow me up nor I you." by Deng Xiaoping.
burberry watches for women http://www.burberrysalehandbags.com/burberry-watches.html

# burberry bag 2012/10/31 19:57 http://www.burberrysalehandbags.com/burberry-tote-

You could definitely see your skills within the work you write. The sector hopes for even more passionate writers such as you who are not afraid to mention how they believe. All the time follow your heart. "Until you've lost your reputation, you never realize what a burden it was." by Margaret Mitchell.
burberry bag http://www.burberrysalehandbags.com/burberry-tote-bags.html

# re: [C#][Silverlight]Visual State Manager???? 2012/11/06 12:39 Joe.V

This article on blogs.wankuma.com gives the light in which we can observe the reality. Wish you luck!

# Heya just wanted to give you a brief heads up and let you know a few of the images aren't loading correctly. I'm not sure why but I think its a linking issue. I've tried it in two different web browsers and both show the same outcome. 2018/09/23 12:19 Heya just wanted to give you a brief heads up and

Heya just wanted to give you a brief heads up and let you know a few of the images aren't loading correctly.
I'm not sure why but I think its a linking issue. I've tried
it in two different web browsers and both show the same outcome.

# I have read so many posts on the topic of the blogger lovers except this post is truly a fastidious piece of writing, keep it up. 2018/09/27 22:50 I have read so many posts on the topic of the blog

I have read so many posts on the topic of the blogger lovers
except this post is truly a fastidious piece of writing, keep it up.

# It's impressive that you are getting ideas from this article as well as from our dialogue made here. 2018/10/01 16:30 It's impressive that you are getting ideas from th

It's impressive that you are getting ideas from this article as well
as from our dialogue made here.

# A motivating discussion is worth comment. I think that you ought to write more about this subject matter, it may not be a taboo subject but typically folks don't talk about these subjects. To the next! Best wishes!! 2018/11/12 20:36 A motivating discussion is worth comment. I think

A motivating discussion is worth comment. I think that you ought to write more about this
subject matter, it may not be a taboo subject but typically folks don't talk about these subjects.

To the next! Best wishes!!

# Heya i'm for the first time here. I came across this board and I find It truly useful & it helped me out a lot. I hope to give something back and help others like you aided me. 2018/11/12 23:55 Heya i'm for the first time here. I came across th

Heya i'm for the first time here. I came across this board and I find It truly useful
& it helped me out a lot. I hope to give something back and help
others like you aided me.

# Hello to every body, it's my first visit of this blog; this website includes amazing and truly good stuff designed for readers. 2018/11/14 23:58 Hello to every body, it's my first visit of this b

Hello to every body, it's my first visit of this blog; this website
includes amazing and truly good stuff designed for readers.

# ブランド商店-賢者の買物 2019/09/28 6:15 MarquisTax

ブランド商店-賢者の買物


弊社は各ランクのブランド商品満載し、ブランド通販店で一番信用のある店なので!。
品質はこちらが間違いなく保証します。
相互信頼を旨(むね)として貿易関係を結びたいのですが。
今後ともよろしくご愛顧くださいますよう、お願い申し上げます
URL:
https://www.88kopi.com/menu/menu-p-3-pid-38.html

■取扱ブランド ルイ.ヴィトン、シャネル、クリスチャン ディオール、グッチ、コーチ、ROEXL 、S品、A品、超A品
■主要取扱商品 バッグ、財布、腕時計、靴、服、ベルト、ネクタイ、ライタ!
お取り引きを開始させていただきたく思います。
詳細に関してはどうぞお気軽にご連絡ください。
https://www.88kopi.com/product/product-4968.html

タイトル  
名前  
Url
コメント