ObjectAnimationUsingKeyFrames. Is it possible Canvases usage instead of Images?

Question

ObjectAnimationUsingKeyFrames. Is it possible Canvases usage instead of Images?

cron kropjc 41

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>

Answer 1

Alex Li-MSFT 1,086

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.

cron kropjc 41 Reputation points

2020-04-20T09:26:43.77+00:00
@Alex Li-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?
Peter Fleischer (former MVP) 18,376 Reputation points

2020-04-20T10:38:06.477+00:00

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.
cron kropjc 41 Reputation points

2020-04-20T12:27:12.4+00:00
anonymous user-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.
Peter Fleischer (former MVP) 18,376 Reputation points

2020-04-20T14:35:29.32+00:00
Hi, is this that what you mean?

<Canvas> <Canvas.Children> <CanvasFromStoryBoard/> </Canvas.Children> </Canvas>
cron kropjc 41 Reputation points

2020-04-20T16:07:44.457+00:00

Maybe... I didn't try that.
So, how to replace "CanvasFromStoryboard" by means of Storyboard?
I'm asking because as I wrote above a work with Images had given poor results. So I would like to try with Canvases.

thanks.
Peter Fleischer (former MVP) 18,376 Reputation points

2020-04-20T18:54:29.573+00:00

Hi, I unterstand your question that you have a parent canvas and you want different canvases as children inside the parent canvas. Adding canvases as children via Storyboard is impossible in XAML in DiscreteObjectKeyFrame.Value because Storyboard work in other thread and instantiate new canvases in this other thread. You must at first instantiate canvas in UI thread and then use these instances in Storyboard. Now I haven't any solution for this case.

Please, write at first which target you want use in Storryboard.
Alex Li-MSFT 1,086 Reputation points

2020-04-23T02:52:22.94+00:00

What is your storyboard.TargetName?if targetname is image,you can't set Canvas as DiscreteObjectKeyFrame.Value.

ObjectAnimationUsingKeyFrames. Is it possible Canvases usage instead of Images?

1 answer

Activity