C# WPF UI Tutorials: 12 - MVVM View Model Binding to Animations

Part of a series of tutorials on creating WPF applications in C#

This time we show how to maintain MVVM binding to the UI at the same time as animate elements based on that.

Making a cool use of attached properties gives us a very expandable and re-usable animation to MVVM structure

[tj]

These are very high quality video. Please continue making them. They really teach us good practices. Too many of the videos on Youtube just teach us basic functionalities instead of proper code structure (the latter being much more important to learn).

[stepanbaratta]

Hands down the best programming tutorial series on YouTube, can't understand you don't have more views. There is a real lack of good programming tutorials in here showing good practices in architectural design and clean code. Hope you will be expanding the application, I would love to see database integration with working login/register system. Really appreciate your work and I hope you will continue!

[markokleut]

LOL you fixed the previous problem I was having without realizing it. Once I saw you change the the border from Padding to Margin in the main window. it clicked for me that that may have been the issue everyone was having previously with the snapping to sides. I tried it with one of your older versions and it fixed the issue. Nice one :)

I might have to watch ththe last few videos a few more times to get my head around what it happening with the animations. But love your work.

[admonarch]

AngelSix your Videos are pure Gold bro thank you

[duncanmcdonald]

Thanks again for continuing to post these tutorials. I will admit I got a little lost in the middle when you added the to the BaseAttachedProperty class, but I'll work it out.

In case anyone makes the same mistake I did:

My slide in animations seemed to be ignoring the animation time (DecelerationRatio) and just appearing in place, but my slide out animations were fine, as were the FadeIn and FadeOut. This I traced to being because the element had a width of 0 (zero). And the reason for that is that in the FrameworkAnimations.cs, both my SlideAndFadeOutToLeft/Right had set the
"element.Visibility = Visibility.Collapsed".

I wonder why I did that?

[adbelouahabbenhocine]

Really big thnx mate, you are doing alot of efforts to give us premium quality videos, again thnx man :).

[tavershimaako]

I want to first appreciate you for the tutorial. There's a trivia thing I have noticed moving from the PageAnimations to FrameworkAnimation. When I create the overloads and I use element.ActualWidth, it doesn't return the actual width through the page property IsLoaded reads true. When I change it back to be a page extension instead of FrameworkElement, it gives the desired slide result

[varunsingh]

Since FrameworkElementAnimations and PageAnimations were so similar, couldn’t you have them in the same class and just use parameters? Or at least extract the similarities into a static class?

[azzen_v]

I'm struggeling the last few days with on of the animation things. If I add the tag to my side menu it doesn't call the DoAnimation() method if I bind it to the ApplicationViewModel. If I just set the value to true or false by default the method is called. It's frustrating. Any ideas?

[TraxxStudios]

Hi. Awesome stuff. I see you using single namespace for whole project, is it a good practice or just preference? Also, how do you see WPF future? I've just learned basics of WPF and moved to UWP, but the restriction to share app through the store makes me feel, that WPF is a more viable option for business applications and simple tools.

[kritikyorumer]

Why didint create course at the udemy man ? thank a lot

[_buffer]

Very nice! Also.. How often do you upload?

[ondrejdlesk]

Hi, this series of tutorials is amazing, I've learned a lot. But now I'm facing a problem with animations. Even in your project when I click on a button which should show/hide side menu, nothing happens, the code goes through all blocks and functions but menu stays intact. I have Visual Studio 2015 so I had to change few things but nothing in functionality. Do you have any idea why it is not working for me?

[TheGuyof]

I don't understand how the following lines of code in the OnValueUpdated method in
make the variable element available for the rest of the method.

if (!(sender is FrameworkElement element))
return;

Ar a first glance I would think that the scope of element is just within the parenthesis,

Could you explain the syntax for this. Is this new in C# 7?

[AustrianGamingBrothers]

I have one more question: I already told you that I'm making my own software and your videos help me a lot. I watch most of your videos but I don't remeber how I can change the current page because if the user has logged in succesfully the log in page should slide out and the new main page should slide in. I hope you can help! Thanks a lot, Elias! ;D

[tomas]

Hereinafter we have to use FrameworkElementAnimation and AnimateBaseProperty for create animations? Or it is only for the SideMenuControl?

[krimbelkacem]

thank you very much for this tutorial! does wpf pages support sessions and cookies?! cause i never seen someone implement sessions in wpf to make the registration work. thank you again for this awesome tutorial

[patrikbak]

OT. I'm coding a table game. When a player clicks on a cell, it should change it's position to a position calculated in the view model (or rather in the game back-end). I want to animate this. So basically I need to trigger an animation from the view model with some additional data (where the cell should be animated). How should I do this properly please?

[taoxia]

Tremendous work!!! Thank you so much. Where is the link to the source code you posted?

[MultiMinors]

Will you make wpf storyboard tutorial which covers everything about animations, not only sliding/fading/spinning?