3

MSDN アニメーション チュートリアルを読んでいて、ストーリーボードを要素に適用する次の手順について説明しています。

  1. ストーリーボードを作成します。
  2. プロパティでターゲット要素名を指定しTargetNameます。
  3. (対象のプロパティを指定);
  4. (アニメーションを開始するイベント トリガーを追加します);

そこから私の難しさを導き出す概念的な問題が見えます。それは次のとおりです。

ストーリーボードと要素の間には 1 対 1 の関係があり、この関係はストーリーボードで定義されています。次に、1 つのストーリーボードを作成し、それを複数の要素に条件付きで適用して、要素自体からアニメーションをトリガーするにはどうすればよいでしょうか (バインディング/トリガーを介して)。

私が意図した使用例は、LED のパネル (楕円のスタックパネル) を模倣することです。各 LED は、オン、オフ、高速で点滅、低速で点滅 (イーサネット ルーターとほとんど同じ) の 4 つの論理状態のいずれかになります。次に、 ViewModel がそれぞれの論理状態に入ったときにトリガーされるアニメーションBlinkingSlowと を作成します。BlinkingFast次に、ViewModel の動作だけに気を配り、いくつかの StaticResource ストーリーボードを適切にトリガーして再利用することで、View 自体に任せることができます。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        xmlns:local="clr-namespace:blinking"
        x:Class="blinking.MainWindow"
        Title="MainWindow"
        Background="{x:Null}"
        WindowStartupLocation="CenterScreen">

    <Window.Resources>
        <System:Double x:Key="Diameter">40</System:Double>
        <Color x:Key="RedOn">Red</Color>
        <Color x:Key="RedOff">#FF570000</Color>
        <Storyboard x:Key="BlinkSlow" RepeatBehavior="Forever">
            <ColorAnimationUsingKeyFrames
                    Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
                    Storyboard.TargetName="led4"
                    AutoReverse="True"
                    RepeatBehavior="Forever">
                <DiscreteColorKeyFrame KeyTime="0" Value="{StaticResource RedOn}"/>
                <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="{StaticResource RedOn}"/>
                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="{StaticResource RedOff}"/>
                <DiscreteColorKeyFrame KeyTime="0:0:1" Value="{StaticResource RedOff}"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>       
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource BlinkSlow}"/>
        </EventTrigger>
    </Window.Triggers>

    <StackPanel x:Name="leds_container" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,20,4,0">
        <Ellipse x:Name="led1" Width="{StaticResource Diameter}" Height="{StaticResource Diameter}" Fill="#FFF90F0F" Margin="20,0,0,0"/>
        <Ellipse x:Name="led2" Width="{StaticResource Diameter}" Height="{StaticResource Diameter}" Fill="#FFF90F0F" Margin="20,0,0,0"/>
        <Ellipse x:Name="led3" Width="{StaticResource Diameter}" Height="{StaticResource Diameter}" Fill="#FFF90F0F" Margin="20,0,0,0"/>
        <Ellipse x:Name="led4" Width="{StaticResource Diameter}" Height="{StaticResource Diameter}" Fill="#FFF90F0F" Margin="20,0,0,0"/>
    </StackPanel>
</Window>

なにか提案を?

4

1 に答える 1