question

cronkropjc-6874 avatar image
cronkropjc-6874 asked ·

ObjectAnimationUsingKeyFrames. Is it possible Canvases usage instead of Images?

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-wpf
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

AlexLi-MSFT avatar image
AlexLi-MSFT answered ·

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.


7 comments Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@AlexLi-MSFT

I did mention a bit different stuff. You didn't get rid of images entirily.
What about Canvas? What can we do with Canvas here?


  <DiscreteObjectKeyFrame.Value>
                                      <Canvas???    />
     </DiscreteObjectKeyFrame.Value>

Simple I can't find any examples on it. That's pretty rare stuff...
Thanks.

And one more thing... previously I had used "BitmapImage" + "Image", now you have shown me "ImageBrush" + "Canvas" variant.
Is there any significant difference between them? Advantages? Drawbacks?









0 Votes 0 · ·

Hi, please tell us, which property of which UI-Control you want to use for animating with StoryBoard, e.g. where you want assign Canvas. Please, show XAML without StoryBoard, only UI-Element with Property and included Canvas.

0 Votes 0 · ·
cronkropjc-6874 avatar image cronkropjc-6874 PeterFleischer-3316 ·

@PeterFleischer-3316

I can't enter entire code due to 1000 characters limitation here.

Well. Very simplified.
Within a common Canvas:

  • there is a Path which poses a Container.

  • Five Paths which pose five bricks for example (Canvas"big heap").

  • Four Paths which pose four bricks for example (Canvas "mid heap").

  • Three Paths which pose three bricks for example (Canvas "small heap" ).

The Paths which pose the content are located in a shape which poses the Container.

Scenario: emptying Container. Replacement Canvases one after another.
Thanks.

Btw, working with ImageBrush and BitmapImage had given poor results in tems of image quality.


0 Votes 0 · ·
Show more comments