ObjectAnimationUsingKeyFrames. Is it possible Canvases usage instead of Images?

cron kropjc 41 Reputation points
2020-04-19T18:07:45.94+00:00

Hello everyone,
I'm currently using Storyboard type based on Image replacement. The code is below. It works fine, however there's a question arisen.
Is there a way to replace images with canvases? Simple I failed to find such a variant in the Web.
I need example.

Thanks in advance!

Storyboard

 <Storyboard x:Key="Storyboard_for_Wave" x:Name="Storyboard_for_Wave">
                <!--  Completed="Storyboard_for_Wave_Completed"  -->
                <!--  RepeatBehavior="5x"  -->
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Source" Duration="0:0:1.2">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                        <DiscreteObjectKeyFrame.Value>
                            <BitmapImage UriSource="pack://application:,,,/Test;component/Images/Wave_00.png" />
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime="0:0:.3">
                        <DiscreteObjectKeyFrame.Value>
                            <BitmapImage UriSource="pack://application:,,,/Test;component/Images/Wave_01.png" />
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime="0:0:.6">
                        <DiscreteObjectKeyFrame.Value>
                            <BitmapImage UriSource="pack://application:,,,/Test;component/Images/Wave_02.png" />
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime="0:0:.9">
                        <DiscreteObjectKeyFrame.Value>
                            <BitmapImage UriSource="pack://application:,,,/Test;component/Images/Wave_03.png" />
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
    
    
Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,184 questions
No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Alex Li-MSFT 1,081 Reputation points
    2020-04-20T02:21:53.26+00:00

    Welcome to our Microsoft Q&A platform!

    Would you like to use Canvas instead of Image?see my test code,it works well.

     <Window.Resources>
            <Storyboard x:Key="Storyboard_for_Wave" x:Name="Storyboard_for_Wave">
                <!--  Completed="Storyboard_for_Wave_Completed"  -->
                <!--  RepeatBehavior="5x"  -->
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Duration="0:0:1.2" Storyboard.TargetName="canvas1"   >
                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                        <DiscreteObjectKeyFrame.Value>                           
                                    <ImageBrush ImageSource="pack://application:,,,/Test;component/Images/1.jpg"/>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime="0:0:.3">
                        <DiscreteObjectKeyFrame.Value>                         
                                    <ImageBrush ImageSource="pack://application:,,,/Test;component/Images/2.jpg"/>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime="0:0:.6">
                        <DiscreteObjectKeyFrame.Value>
                                    <ImageBrush ImageSource="pack://application:,,,/Test;component/Images/3.jpg"/>>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime="0:0:.9">
                        <DiscreteObjectKeyFrame.Value>
                                    <ImageBrush ImageSource="pack://application:,,,/Test;component/Images/4.jpg"/>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </Window.Resources>
        <StackPanel>
            <Button Content="btn1">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click" >
                        <BeginStoryboard Storyboard="{StaticResource Storyboard_for_Wave}"  ></BeginStoryboard>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <!--<Image x:Name="image1"></Image>-->
            <Canvas x:Name="canvas1" Width="200" Height="200"></Canvas>
        </StackPanel>
    

    Thanks.