WPF - Animated User Control

Question

Hello

I am currently building an application in WPF since I am pretty new to WPF. I'm having some difficulties. I asked my question, but did not have much success. This is the current situation, the XAML of the main window is below:

<Grid Height="279" HorizontalAlignment="Left" Margin="166,0,0,0" Name="gridScoreboard" VerticalAlignment="Top" Width="808"> <!--Scoreboard Image--> <Image Source="pack://application:,,,/Images/Style/Scoreboard.png" Width="517" Height="91" HorizontalAlignment="Left" Margin="138,1,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" /> <Canvas Name="canvasRacePlayer1" Width="14" Height="14" Canvas.Left="33" Canvas.Top="66" Background="Transparent" MouseLeftButtonDown="canvasRacePlayer1_MouseLeftButtonDown" Margin="171,70,623,195" /> <local:ucRaces HorizontalAlignment="Center" Margin="93,62,632,187" Width="78" Visibility="Hidden" x:Name="ucRacesP1" Height="33" /> </Grid> 

The user control is hidden from the start (ucRaces), after clicking a small canvas (canvasRacePLayer1) the user control will be shown. However, I would like this user control to “slide” from right to left from a specific point. As if it will become visible in small steps. I found animation information for rectangles and buttons, but failed for success for custom controls.

Thank you in advance

Answer 1

If you are going to create animations for your WPF project, I suggest you use Expression Blend. You can design your program using EB and implement its functionality using Visual Studio. It's hard to make an animation by writing XAML syntax or C # code.

How could you animate your user controls with EB? Well, actually it’s very simple. First you need to open an existing WPF project. Then go to File → New Item → Custom Control and create a custom control. Then, if you want to add it to your project, go back to the WPF project that is currently open in EB and right-click (→) on the toolbar located on the left side of the screen and go to Project → [User control here ]. Now you have added it to your project.

If you want to animate a user control, you need to add StoryBoard to your timeline. When you are in a WPF project in EB, in the "Objects" and "Timeline" section, click the plus sign (+) and add a new StoryBoard. You now have a graph that you need to use to animate your user control. You can put the KeyTime attributes in the timeline and determine the path that the user control should follow from location A to location B, as well as the opacity level, if you want the user control to gradually become visible.

You can add another user control and implement its logic for the second user. Expression Blend makes your life easier.

Answer 2

The animation of your UserControl should not be much different from the animation of any other WPF object: you can either animate the margin (using ThicknessAnimation ), or drop your user control onto your own canvas, and then animate the Canvas.Left property of your user control. In the latter case, make sure that the name of the property is indicated in parentheses: Storyboard.TargetProperty="(Canvas.Left)" .