Search code examples
wpfanimationpreviewxaml-designer

Is there a way to preview animation in xaml editor?


I am coding some basic animation and would like to see it's render without building/deploying the entire project. If I remember correctly, I already managed to see such preview when creating animation in codebehind. I am now using the xaml and am trying to find out how to get the same result.

I know there's the "Blend" solution, but i'd like to avoid it. The "Turn ON render effects" and "Enable project code" buttons are active in xaml designer.

            <Image
              Name="CompressorGreySmokeNormalWay"
              Source="/VirtualTrain.Setrag.GT46AC;component/Resources/Images/Common/SmokeIconGrey.png"
              Width="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Canvas}}}"
              Height="{Binding ActualHeight, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Canvas}}}" >
              <Image.Triggers>
                <EventTrigger
                  RoutedEvent="UserControl.Loaded">
                  <BeginStoryboard>
                    <Storyboard
                      AutoReverse="True"
                      Storyboard.TargetProperty="Opacity">
                      <DoubleAnimation
                        RepeatBehavior="Forever"
                        BeginTime="0:0:00.00"
                        From="1.0"
                        To="0.0"
                        Duration="0:0:01.00"/>
                    </Storyboard>
                  </BeginStoryboard>
                </EventTrigger>
              </Image.Triggers>
            </Image>

I expected the designer to preview the Opacity variations, but it actually doesn't. Am I missing something ?


Solution

  • I finally found the solution !

    You actually need to create a separate userControl on which the animation is applied. Once you load your userControl inside another one, the animation is playing.

    My guess is that the userControl is (pre-)compiled and enables the xaml designer to play the animation.