fc2ブログ

Blend SDKのControlStoryboardActionを使ってみる

 Blend SDKのControlStoryboardActionを使うとアニメーションの実行ができます。
 以下のサンプルコードではボタンを押した際にアニメーションの実行を行っています。
<Window x:Class="Blend2.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"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:v="clr-namespace:Blend2.Views"
        xmlns:vm="clr-namespace:Blend2.ViewModels"
        Title="MainWindow" Height="90" Width="325">
    
    <Window.Resources>
        <Storyboard x:Key="storyboard1">
            <DoubleAnimation Storyboard.TargetName="button1"
                             Storyboard.TargetProperty="Width"
                             To="250"
                             Duration="0:0:1"/>
        </Storyboard>    
    </Window.Resources>
    
    <StackPanel>
        <Button Name="button1" Width="100" Content="アニメーション実行">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource storyboard1}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Content="停止" Width="100">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource storyboard1}"
                                                ControlStoryboardOption="Stop"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </StackPanel>
</Window>
 ControlStoryboardActionのStoryboardプロパティに実行したいアニメーションのStoryboardを指定します。
 アニメーションの実行を行うだけならこれでOKですが、ControlStoryboardOptionオプションを指定することでアニメーションの制御も可能です。(アニメーションのStopやResume等が可能です。規定はPlayです)
 このコードを実行すると以下の様になります。
ControlStoryboardActionデモ
 「アニメーション実行」ボタンを押すとアニメーションが実行されボタンの幅が変わります。
 「停止」ボタンを押すとアニメーションが停止され元のサイズに戻ります。
スポンサーサイト



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

コメントの投稿

非公開コメント

カレンダー
02 | 2024/03 | 04
- - - - - 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
31 - - - - - -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
04  10  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