FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

VisualStateManagerで独自状態に遷移する

 前回は、VisualStateManagerでMouseOver等のあらかじめ用意されている状態の見た目をカスタマイズする方法を紹介しました。今回は、独自に作成した状態に遷移する方法を紹介します。
 以下の例では、StackPanelに「Red」と「White」という独自の状態を作成し、ボタンを押すことで「Red」に遷移したり、「White」に遷移させたりします。
<Window x:Class="VisualStateManagerDemo2.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        Title="MainWindow" Height="350" Width="525">

    <!--StackPanelでBackgroundを指定しないと実行時にエラーになる-->
    <StackPanel Name="LayoutRoot" Background="White">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="Original">
                <VisualState x:Name="White"/>
                <VisualState x:Name="Red">
                    <Storyboard>
                        <ColorAnimationUsingKeyFrames
                            Storyboard.TargetName="LayoutRoot"
                            Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                            <EasingColorKeyFrame KeyTime="0"
                                                 Value="Red"/>
                        </ColorAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <!--GoToStateActionで状態遷移する場合-->
        <Button Content="赤くする" Width="100">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:GoToStateAction StateName="Red"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        
        <!--コードビハインドで状態遷移する場合-->
        <Button Content="戻す" Width="100" Click="Button_Click"/>
    </StackPanel>
</Window>
 今回、見た目を変更するのはStackPanelなので、StackPanel以下でVisualStateManagerの定義を行います。
 作成するのは独自の状態なので、VisualStateGroupの名前は「Original」としました。(どんな名前でもOKです。)
 あとは、VisualStateに状態の名前を付けて見た目の定義をするだけです。ここら辺は前回と同じなので説明は省略します。
 「Red」や「White」は独自の状態なので、状態が遷移するタイミングを指定する必要があります。
 VisualStateManagerの状態を遷移させる方法は2種類あり、1つがBlend SDKのGoToStateActionを使用する方法。もう1つが、コードビハインドでVisualStateManager.GoToElementStateメソッドを使用する方法です。
 このサンプルコードでは、状態「Red」への遷移はGoToStateActionを使用し、「White」への遷移はVisualStateManager.GoToElementStateを使用しています。
 GoToStateActionを使用する場合は、GoToStateActionのStateNameで遷移したい状態名を指定するだけです。
 VisualStateManager.GoToElementStateメソッドで状態遷移を行う場合は以下の様にします。
using System.Windows;

namespace VisualStateManagerDemo2.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToElementState(this.LayoutRoot, "White", false);
        }
    }
}
 GoToElementStateメソッドの第1引数にはVisualStateManagerを含んでいるルート要素を指定します。
 第2引数には遷移する状態名を指定します。
 第3引数にはVisualTransitionオブジェクトを使用して遷移するかどうかを指定します。今回は使っていないのでfalseです。
 これを実行し、ボタンを押すとStackPanelの背景色が以下の様に変わります。
VisualStateManagerDemo2.png
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

非公開コメント

カレンダー
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
11  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。