Search code examples
c#wpfdatatriggerwpf-animation

BeginStorybard on DataTrigger WPF


I am using a transition animation for when my application boots up.

<Storyboard x:Key="InTransition">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.Opacity)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:05" Value="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:05.5000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-72"/>
                <SplineDoubleKeyFrame KeyTime="00:00:05" Value="-157"/>
                <SplineDoubleKeyFrame KeySpline="0.5,0,0.5,1" KeyTime="00:00:05.5000000" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
</Storyboard>

This works well if I start it as an EventTrigger RoutedEvent="FrameworkElement.Loaded" But I want to bind it to a property on my viewModel called IsInitialized. Problem is Windows.Triggers doesn't allow DataTrigger.

How can I do that?


Solution

  • You are correct that you cannot use a DataTrigger in your Triggers collection. Instead, you need to use the UIElement.Style.Triggers collection. Then you can use the DataTrigger.EnterActions element to host your Storyboard element:

    <Window ...>
        <Window.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding YourProperty}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard ... />
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Window.Style>
    </Window>