FC2ブログ

スポンサーサイト

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

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デモ
 「アニメーション実行」ボタンを押すとアニメーションが実行されボタンの幅が変わります。
 「停止」ボタンを押すとアニメーションが停止され元のサイズに戻ります。
スポンサーサイト

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

コメントの投稿

非公開コメント

カレンダー
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。