2013年06月23日

WPFサンプル:イベントトリガーでアニメーションを起動する

   このエントリーをはてなブックマークに追加 Clip to Evernote
イベントトリガーを設定すると、マウスがクリックされたなどのイベントに応じて、スタイルを変更することができます。イベントトリガーは、XAMLでは、<EventTrigger>要素を用いますが、プロパティトリガーと異なり、<Setter>要素でプロパティ値を変更することができません。指定できるのは、一連のアクション(アニメーション ストーリーボード) となります。
以下にXAMLの例を示します。

<Window x:Class="EventTriggerSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        Background="Khaki">
    <Window.Resources>
        <Storyboard FillBehavior="HoldEnd" x:Key="myStoryboard" >
            <DoubleAnimation
                Storyboard.TargetName="textBox1"
                Storyboard.TargetProperty="FontSize"
                From="12" To="28" Duration="0:0:01" />
        </Storyboard>
    </Window.Resources>
    <Grid Background="White" Name="grid" >
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <BeginStoryboard >
                    <Storyboard FillBehavior="HoldEnd" >
                        <DoubleAnimation
                            Storyboard.TargetName="grid"
                            Storyboard.TargetProperty="Opacity"
                            From="0" To="1" Duration="0:0:01" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <StackPanel Name="stackPanel" HorizontalAlignment="Left" Width="185" >
            <Button Content="Button" Height="23" Name="button1" Width="180"
                    HorizontalAlignment="Left" Margin="2" >
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboard}}" />
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <TextBox Name="textBox1" Width="180" Text="TextBlock"
                     HorizontalAlignment="Left" Margin="2" FontSize="12" />
        </StackPanel>
    </Grid>
</Window>

ここでは、2つのイベントトリガーを利用してます。
ひとつは、GridのLoadedイベントが発生した時のトリガー。もう一つは、ButtonのClickイベントが発生した時のトリガーです。
Grid.Loadedでは、GridのOpacityプロパティの値を 0 から 1 に変化させています。
Window.Background には "Khaki"が設定されていますので、徐々に、Khaki から Whiteに変化します。

ふたつ目はButton.Clickで、TextBoxのFontSizeを 12 から 28 に変化させ、また 12 に戻しています。
プロパティトリガーでは、一瞬でプロパティの値が変更してしまうのに対し、イベントトリガーでは、プロパティ値をDurationで与えた時間で滑らかに変化させることができます。

※ 今回、WPFサンプルシリーズで初めてアニメーションを使いましたが、アニメーションについて別途サンプルを掲載したいと思います。
Grid.Loadedは、リソースへの定義をせずに、直接 Storyboard を Grid.Triggers要素配下に記述しています。
Button.Clickでは、Window.Resources に定義した Storyboardを指定しています。


コードビハインドには特に何も追加する必要はありません。XAMLのみで実現しています。
以下、ボタンをクリックした時のスクリーンショットです。

eventTrigger1
eventTrigger2
eventTrigger3

WPFサンプル・目次


 

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/gushwell/52325352