Part of a series of tutorials on creating WPF applications in C# Adds some page slide in/out animations and button color changes Source code: github.com/ang...
Great series. It's relatively rare to find a video series that covers the creation of an entire app. For me this type of series is the best method for learning.
Yeah I find it is definitely the only real way to understand the full reason for something, in real situations (after all thats why we learn and make code, to do real things)
Thanks again for the tutorial. Useful stuff to know. I noticed that AngelSix had slipped in the fix for the emoji background being part of the MainWindow and not the LoginPage. If you want to add this to you own project, these are changes you make (as far as I can tell): MainWindow.xaml: Replace With Then we need to take the background off the LoginPage.xaml Change to And remove And that's it!
Also, I did a little rework on the StoryBoardHelpers class to reduce code duplication. private static void AddSlide (Storyboard storyboard, float seconds, Thickness fromThickness, Thickness toThickness, float decelerationRatio = 0.9f) { //Create a slide animation var animation = new ThicknessAnimation { Duration = new Duration(TimeSpan.FromSeconds(seconds)), From = fromThickness, To = toThickness, DecelerationRatio = decelerationRatio }; //Now we need to tell it what to work with Storyboard.SetTargetProperty(animation, new PropertyPath("Margin")); //Add it to the animations for this storyboard storyboard.Children.Add(animation); } public static void AddSlideFromRight (this Storyboard storyboard, float seconds, double offset, float decelerationRatio = 0.9f) { AddSlide(storyboard, seconds, new Thickness(offset, 0, -offset, 0), new Thickness(0)); } public static void AddSlideToLeft (this Storyboard storyboard, float seconds, double offset, float decelerationRatio = 0.9f) { AddSlide(storyboard, seconds, new Thickness(0), new Thickness(-offset, 0, offset, 0)); }
Slight correction. Both the calls to AddSlide should be passing the 'decelerationRatio' argument as well. e.g. AddSlide(storyboard, seconds, new Thickness(offset, 0, -offset, 0), new Thickness(0), decelerationRatio); The AddFadeIn/AddFadeOut helpers can be reworked similarly, and anyone who wants to do that them self shouldn't find it difficult.
Interesting series of videos! Learned a lot! Enjoyed watching every minute ;) What I liked is : - The way you approach things. - The way you make things look simple and easy to do. - Your openmindedness to students on GitHub. - The clean code and architecture design that makes it easy for us to follow. In the meantime, I would suggest : - Having a clear project management approach applied along the way. I think this could be beneficial for us as you may already know that the real word projects are not just typing code but also good planning and requirements writing. I am not asking for a whole project planning, but at least tasks descriptions as it will allow us to follow all along and stay focused on the main goal of each video :) I look forward to seeing much more videos and projects. Keep up the good work
why the class BasePage can call the method SlideAndFadeInFromRightAsync and SlideAndFadeOutToLeftAsync from the class PageAnimations without call this class?
Thanx for the amazing videos I found a strange thing that after animating the page out the border radius of the close button is off a bit, no idea what's wrong keep up the great work!!
I found your channel because of this video and I just can say OH MY GOD, YOU'RE AWESOME! Everything's so easy with your explanation. Maybe you should have named the series something with 'MVVM', there are not that many (good) tutorials out there for it and I think I would have found you earlier then. Sorry for any mistakes in grammar and spelling, English is not my native language. Greetings from Germany and thank you a lot for your great tutorials!
nice It looks like you are a guy loving comments but IMHO comments for one line like this at 31:08 does not add real value and usually the better is to comment why, not what ;-) Thank you. Great series!
33:46 line 78. when I type this line without 'this' before the function name I got the error that this function doesn't exist in the current context. When type 'this.SlideAndFadeInFromRight(SlideSeconds)' it works perfectly. I try to avoid using 'this' when I'm refering to a member of a class I'm inside but here it dosen't work. Is it a bug with extension methods?
'There we go. Oh No!. Never mind' was awesome. Great video btw. I've been watching all the videos in the series. Learning atleast one new thing in every video. Appreciate your efforts and time.
Solved to this Error => Partial declarations of 'page must not specify different base classes Click to LoginPage then F12 (This LoginPage : public partial class LoginPage) Go to the LoginPage.g.i.cs Edit : System.Windows.Controls.Page => Fasetto.Word.BasePage and you have this error (Cannot find definition of namespace location or BasePage.) Add in LoginPage.xaml => xmlns:local="clr-namespace:Fasetto.word"
This was really good. Enjoyed watching the video. Can you help out to do the same for Height of the Expander control. I tried this approach on the same. The expanding event seems to animate, but have a problem with the collapsing event(doesn't work). If you could help out please.
absolutely loving this series. My favorite tutorial thus far. Thank you. Been relearning coding the past 6 months and I'm so glad I found this just as I started WPF.
Great Series. Keep it up buddy! I started from zero, and it helped me a lot. Only thing, Tutorial 02 had like a super steep learning curve which made me struggle a lot to understand the concept
i guess this will come in the next videos, but i noticed when the slide in animation runs, the bottom right corner looses the radius and when the slide out animations runs, the bottom left corner looses the radius and stays that way.
Beautiful work you are doing,thanks so much...I have been on WPF for year, i have never found a tutorial as real and practicable as this.....I am following the tutorial big time.
Thank you, this is the first of your videos I am looking at and I literally stopped in the middle to give you a positive feedback also from me! Oh I see also that you are treating the same topic of animations with a view model here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ofsdVKrMg8I.html which I think I am going to see soon. Just off topic, I have spent the last months with F# and I am really tired of all those fans of functional language while they are clearly biased and exaggerating with the advantages of their elmish patterns... So I am so happy to come back to C# for a while and look at these nice viewmodels and WPF rich desktop apps... In the end they are my bread and butter since it is what I basically do every working day as a programmer. Yeah, I am laughing (I remember a stupid blogger saying: don't use that word programmer because “Programmer” sounds like “anomalously high-cost peon who types some mumbo-jumbo into some other mumbo-jumbo.” If you call yourself a programmer, someone is already working on a way to get you fired.) They are not even close to understanding what we are capable of. I am proud of being a great programmer and I love to listen to other great programmers like you ;-) ))
I'm really glad you stopped to comment as its the only way I know how people feel and if they benefit from what I do, so thanks. Also on "programmer" yes I interviewed a few people to work for my company a few years ago. Me being about 25 then, and the "seniors" being 40+ they instantly get defencing what a young whippersnapper is interviewing them and not the other way around. Out of the whole interview the only comment he had was "I'm not a programmer, I'm a software developer. I've not been called a programmer in 20 years" as some kind of attempt at an insult. Needless to say he didn't get the job. I could care less what things are called, what people are called, what jobs are called, and I'm not afraid to say it, or to use terms I feel are correct even of its not the normal or common thing. At the end of the day, if you can program, you can program. Call yourself a code chef for all it matters, what matters is your abilities to do what you need to. Too many people are defined by their titles and not their abilities and feel it defines them,
I REALLY love this series. I've been meaning to get familiar with WPF and have to say that every tutorial in the various techniques are so different and convoluted but your approach is so clearly explained and concise it's a real breath of fresh air. I particularly like the fact it's not perfect and feel scripted. Watching you work through ideas and come to solutions I think are the most valuable part of the process. I've been developing desktop and web apps with .NET since 2003 and very comfortable with almost all MS frameworks but WPF had me totally baffled as the mindset is vastly different to do it properly. I've been taking what I've learned here so far and applied it to another commercial project and finally have a workable UI replacement which hopefully will make maintenance much easier than it has been with WinForms. My head is now much more clear for a Xamarin Forms project I started last year and lost motivation with due to my lack of WPF understanding at the time. Thanks again you utter legend.
Sir, I still don't understand how it works. The slideAnimation in AnimateIn method has the From property. I don't understand why the left should be Page.Width, and right should be -Page.Width. Can you explain it to me?
If you are sliding away from the left to the right it wants to end at the left being pushed the page width. For the right it needs to push to the left so it pushes by a negative (from left to right is + in C#, so going right to left is negative)
Mi background is moving at the same time as login page, so theres a black background and then the login page. Any idea for reason of that? Tanks a lot.
Sorry, don't mean to be that guy but WHY do you have such a painfully squeaky sound at the end of your intro? Prefacing the video with a splitting headache isn't the way to get ahead. That being said, great vid, keep up the good work.
When did you move the background pattern to the MainWindow? It had me stumped for awhile but I eventually switched it myself and noticed later the code shown at the end of this vid matched what I'd done. I just never saw where you actually made that change
Small issue with the animation, the page is overhanging above the window border and is visible over the window drop shadow area. If you will look very carefully You can see it on Your video as well (before fade in has been added), it is just not so visible as You using standard visual studio theme and the background is white, same as the Sign Up page, as I using Dark theme I notice that straight away. Any simple remedy for that? Is it the same problem we have with close button visible over the rounded corner? Will You address this issue in any of further videos? s1378.photobucket.com/user/Maciej_Nowy/media/New%20Bitmap%20Image%202_zpsvs7qgm63.png.html?sort=3&o=1 And BTW great tutorial :) Much appreciated mate.
Latest code doesn't have that issue... picpaste.com/Screenshot_1-3fXWl8eY.png Not sure at what point I fixed it so just compare with the latest code on GitHub
I kept comparing what I've got so far with Your final version of the Fasetto.Word on github but I could find what causing the animation issue. I also promise myself that I won't move any further with this tutorial till I solve this problem :) So here is how I did that. In the Window Style I removed: and Then I binded Clip in the grid like this: In my WindowViewModel: public RectangleGeometry ClippingGeometry {get; set;} also, I executing following method on window Loaded, SizeChanged, StateChanged: private void RefreshClippingGeometry() { this.ClippingGeometry = new RectangleGeometry( new Rect(0, 0, this._window.Width - (this.OuterMarginSize * 2), this._window.Height - (this.OuterMarginSize * 2)), this.WindowRadius, this.WindowRadius); } It seems to work properly now, but I wonder is it any better way to do that. Any way to do it 100% in xaml? My original idea was to do something like this: (...) That doesnt work as "The property 'Rect' cannot be empty."
The way I did it in the main code I would say is an ok way. It shouldn't need anything more. Hard to say without seeing your code though whats different
github.com/szeliga90/Fasetto.Word/blob/master/Fasetto.Word/Styles/Windows.xaml Here I 've got 2 windows styles, the top one is the one implemented in exactly the same way You did, and while it does a great job with clipping the corner of the close button, it allows the page animation to spill behind the border of the window to the "drop shadow area". The bottom one is the way I make the page to clip correctly using clip property of the grid and the RectangleGeometry. github.com/szeliga90/Fasetto.Word/blob/master/Fasetto.Word/ViewModel/WindowViewModel.cs And here is the ViewModel with additional property/methods to make the "RectangleGeometry way" work. What I wonder is could I do the clipping using RectangleGeometry(as for some reason it seems to do the job better the OpacityMask) without involving any code behind, events execution etc. Just pure xaml. Something like: (...) But that doesn't work as "Rect cannot be empty" or something like that, the VS says.
Your main window looks the same and the pages inside don't overflow on mine. The only difference is you have no resize border github.com/angelsix/fasetto-word/blob/develop/Source/Fasetto.Word/MainWindow.xaml#L32 Perhaps that small change will make the difference.
Great videos tutorials Thank you so much. All my code stopped working after you placed local:PageBase in the LoginPage.Xaml at the top. it gives me errors and doesn't build. I will be thankful to you if you can provide help to solve this issue
oh it worked. Thank you. I am a beginner and I am really enjoying watching your serious. Thank you so much again for your fast response and god bless you
I love that you take the time and completely talk through the logic of what you are trying to accomplish. I think you must be some genius type to even with intellisense be able to wend your way through both the xaml and the code the way you do. Maybe I'll figure it out before you can answer but I am getting a compile error (Partial declarations of 'page must not specify different base classes ) after trying to change the inheritance of the login page from Page to BasePage.
You're tutorial are awesome!!! greeting from Peru. Did you have any tutorial or any book or link for a made a maintenance with SQL express? I would greatly appreciate your help. Thank you
Thanks. We will be using SQLExpress or SQLite after we build the web server and come back to the WPF app for storing cached messages, settings and data
Very nice video! Thank you! You helped me a lot. I need to build a Led Display Marquee. How could I do that? What's is the wpf component you recommend to draw this thing? Thank you!
