[C#/WPF] Animate a UserControl

[James Rose]

Hello gang,

I am learning WPF and I need to animate a UserControl that has been added during runtime

XAML

<Window x:Class="BediaNVMain.MainWindow"
	    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	    Title="MainWindow" Height="515" Width="1598" ShowInTaskbar="False" Topmost="True" WindowState="Maximized" WindowStyle="None" Background="#FF001900" xmlns:my="clr-namespace:BediaMenu;assembly=BediaMenu">
    <Canvas Name="BediaCanvas"
    <Grid Name="BediaGrid" Loaded="BediaGrid_Loaded">
    </Grid>
    </Canvas>
</Window>
[/CODE]

C# code to add UserControl (BediaMenu.BMenu)

[CODE]
var bmnuBediaMenu = new BediaMenu.BMenu();
bmnuBediaMenu.Margin = new Thickness(40, MenuTop, 40, 20);
bmnuBediaMenu.MenuText = MenuTitle;
bmnuBediaMenu.Height = this.MenuSize;
bmnuBediaMenu.Width = this.ActualWidth - 80;
this.BediaGrid.Children.Add(bmnuBediaMenu);
[/CODE]

I attempted to use the code from this page: http://stackoverflow.com/questions/4214155/wpf-easiest-way-to-move-image-to-x-y-programmatically But when it gets to the last line; story.Begin(this); it errors with this statement: "'BediaMenu' name cannot be found in the name scope of 'BediaNVMain.MainWindow'." I have attempted several options... but with no success.

Any thoughts?

[~Johnny]

  On 13/01/2012 at 19:46, James Rose said:

I'd love to just use XAML, but the number of menus varies based on the user's screen height and the height of the menu (customizable) so until runtime I do not know how many I will need. I REALLY wish I could know ahead of time, that would make my life SO much easier.

Should work fine either way - this is actually selfcontained XAML in the bmnuBediaMenu UserControl. Meaning, everytime you create an instance of a new bmnuBediaMenu, it'll run this animation on itself. No additional coding on your part.

[articuno1au]

I admit myself irked >.>

  On 13/01/2012 at 19:48, ~Johnny said:

Should work fine either way - this is actually selfcontained XAML in the bmnuBediaMenu UserControl. Meaning, everytime you create an instance of a new bmnuBediaMenu, it'll run this animation on itself. No additional coding on your part.

That's what I thought, but I didn't want to say that and be wrong >.<

[James Rose]

  On 13/01/2012 at 19:48, ~Johnny said:

Should work fine either way - this is actually selfcontained XAML in the bmnuBediaMenu UserControl. Meaning, everytime you create an instance of a new bmnuBediaMenu, it'll run this animation on itself. No additional coding on your part.

Ah, interesting. (really) I will think it over. Thank you

  On 13/01/2012 at 19:53, articuno1au said:

I admit myself irked >.>

That's what I thought, but I didn't want to say that and be wrong >.<

I always believe it is better to speak up and be wrong than to be silent. But then, I talk too much.

[articuno1au]

And whilst I am inclined to agree with that, I'd rather not lead you astray with my being wrong :p

[~Johnny]

  On 13/01/2012 at 19:56, James Rose said:

Ah, interesting. (really) I will think it over. Thank you

Just drop it inside the bmnuBediaMenu UserControl now and see if it works. Should only take a minute :p It should literally be a copy/paste jobbie.

Failing that, there's also another method where you can write the XAML storyboard in a separate file without an animation target, then load then dynamically load in the XAML storyboard in at runtime and set the target to whatever element you want.

[James Rose]

  On 13/01/2012 at 20:01, ~Johnny said:

Just drop it inside the bmnuBediaMenu UserControl now and see if it works. Should only take a minute :p It should literally be a copy/paste jobbie.

Failing that, there's also another method where you can write the XAML storyboard in a separate file without an animation target, then load then dynamically load in the XAML storyboard in at runtime and set the target to whatever element you want.

I have to deal with something else right now, I will try this out this eve or tomorrow.

Thank you VERY much for your time.

[James Rose]

Hey peoples,

I have not taken the time to go through this... but I did have a thought. The code I have been talking about has been on the MainWindow, not the UserControl. After Johnny posted some code (which I plan on getting to tomorrow) I came to a realization that maybe any (all?) of this code would work if it was within the control. I was attempting to make it work by affecting the control from the window, not within the control itself.

[~Johnny]

public static void Translate(FrameworkElement e, int X, int Y, int dX, int dY, TimeSpan duration)
{
// Create storyboard
var sb = new Storyboard();

// Create TranslateTransform
TranslateTransform tt2 = new TranslateTransform();
e.RegisterName("TT2", tt2);
e.RenderTransform = tt2;

// Create x Animation
DoubleAnimation aniX = new DoubleAnimation
{
From = X, To = dX, Duration = new Duration(duration)
};

sb.Children.Add(aniX);
Storyboard.SetTargetName(aniX, "TT2");
Storyboard.SetTargetProperty(aniX, new PropertyPath(TranslateTransform.XProperty));

// Create Y Animation
DoubleAnimation aniY = new DoubleAnimation
{
From = Y, To = dY, Duration = new Duration(duration)
};

sb.Children.Add(aniY);
Storyboard.SetTargetName(aniY, "TT2");
Storyboard.SetTargetProperty(aniY, new PropertyPath(TranslateTransform.YProperty));

// Register Storyboard
e.Resources.Add("SB);
sb.Begin();

// Unregister Storyboard (Cleanup)
e.Resources.Remove("SB");
e.UnregisterName("TT2");
}[/CODE]

Tested it myself, seems to work fine with UserControls. Not perfect as it overwrites the RenderTransform with a new TranslateTransform each time you use it (and really it should be using transform groups), but it should work for you.

Doesn't have to be used from inside the UserControl. Works fine from using it within the main window. It's pretty close to my previous code, just this time it registers not to the parent element but itself (I have no idea why I decided to do it to the parent the first time, it was very old code of mine)

You will probably want to add some easing modes to it however. Doesn't really look natural without them (Quadratic EaseIn seems like a good fit?)

[James Rose]

Thanks again Johnny, I will have time tomorrow afternoon to work on this again. (damn real job getting in the way /s)

[James Rose]

Johnny,

You last post worked! ThankyouThankyouThankyou! I am going to go through the details now. I truly owe you one.

Thanks.

[~Johnny]

No problem.

Adding the following to the method and then setting the "EasingFunction" of both DoubleAnimations to it should make it look slightly more natural too. (I've found the EaseOut mode always looks better for animating items into view, and EaseIn for animating out of view)

QuadraticEase ease = new QuadraticEase { EasingMode = System.Windows.Media.Animation.EasingMode.EaseOut };
[/CODE]