ObjectAnimationUsingKeyFrames. Is it possible Canvases usage instead of Images?

Question

question

cronkropjc-6874 asked · Apr 19, 2020 at 06:07 PM

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

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

Answer 1 · 2020-04-20T02:21:53.26Z

AlexLi-MSFT answered · Apr 20, 2020 at 02:21 AM

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 · Share

10 |1000 characters needed characters left characters exceeded

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

cronkropjc-6874 · Apr 20, 2020 at 09:26 AM

@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 ·

PeterFleischer-3316 cronkropjc-6874 · Apr 20, 2020 at 10:38 AM

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 ·

cronkropjc-6874 PeterFleischer-3316 · Apr 20, 2020 at 12:27 PM

@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 ·

Show more comments

question