How to Template, Style, and Animate a WPF Button Control

hey there and thanks for joining me for this screencast my name is David Anderson with decom engineering I'm going to show you how to restyle many of the WPF built-in controls things like buttons things like text boxes list views combo boxes and things like that I've had a lot of feedback from you guys in the comments from my mvvm videos asking me how to do these things so we're gonna adventure into a serious videos where I'm going to do one control per video and we're gonna start out with actually the button control and we're gonna show you how to make a reusable themed library so the byte at the time we go through all these different controls you should have a very basic starting point for building your own application thing so to get started we're actually of a empty visual studio solution here I'm using Visual Studio 2013 you can use 2012 or 2010 entirely up to you I'm going to add two new projects the first project will be just a desktop app that we're gonna use to demonstrate the usage of these controls that we read template as we go through these videos and we're just gonna call this WTF theme demo desktop client and for actually building the theme we're gonna add a WTF user control library now you can use regular class library you can also use a wind WPF custom control library either or you can still add zamel files to each of those and resource dictionaries you can add references to presentation framework and windows base and all that good stuff but WPF user control library and custom control library Visual Studio handles laws a little bit better and it allows you to add things a little bit easier just because the project template so we're gonna call this to be a theme oops capitalized to WF theme demo windows just to be consistent with the way dotnet named the WPF layer and dotnet and we're gonna call this dot theme and we can just nuke this user controlled exam will file completely we don't need that now for themes to work in the PF at least for what we're going to do we need to add a new resource dictionary right away and we're gonna call this theme sam'l and this will essentially be where we gather the collection of control styles that way we can just reference just the theme sam'l from our application so before we actually get into building this stuff let's do that now let's go to our app sam'l in our desktop client and reference that and I do that first simple we're gonna use a merged resource dictionary so in our application dot resources we're gonna create a new resource dictionary we're going to do resource dictionary merge dictionaries now we're going to resource dictionary again and we're going to essentially say source equals and the name of our simply so WPF theme demo Windows theme semicolon component bird slash and then the path to the file which would be themed zamel and we need to add a reference to that library file so it knows where to pull it from and there we go so very straightforward so again reference to our theme library from the desktop client merge diksha a merged dictionary with a reference to the location of that zamel file okay so let's go ahead and close out everything except for our themes amel and we're gonna to kind of did the same thing we're gonna do resource dictionary that merge dictionaries and we're going to also say a resource dictionaries source and then for this we're gonna say a button style zamel and this is actually in our theme demo file and we're going to create a button style zamel resource dictionary that's where we're gonna be doing all of our work so we're gonna do that in the theme library so we're gonna say add new resource dictionary I'll call this style and now our theme does and we'll can see that so creating styles and andrey templating controls and WPF is actually a lot easier than you think the most important piece is you need to know ahead of time kind of how you at least a concept idea of what you want the your control to look like in this case we need to decide what colors do we want the button to be do we want to anomie when the user moves their mouse over it do we want to anomie when they click on the button you know the pressed state versus a non pressed state to order and things like that so yes we want all those things so I'm going to show you kind of different ways we can approach this now personally what I like to do is mock up my colors and kind of how I want my controls to look and Adobe Photoshop now you don't have to do this I'm just doing this mainly for the color picker that Photoshop has you can use anything else like paint.net the use the color picker out on the way up you don't even have to use a color picker you can just do this in Visual Studio I'm gonna create a blank canvas and I'm gonna create a new layer I'm just going to go ahead and drag a rectangle out here fill that with a foreground color we'll go ahead and stick with blue and I'll add a gradient overlay pattern to this guy and then we'll basically say color burn and we'll pick a actually excuse me normal for the blending mode and we're just gonna pick some shades of blue now I'm gonna darken these shades of blue and this is gonna be kind of the colors that I want for our default state of the button okay it's gonna click OK and then I'm gonna add a probably a two pixel stroke and make that light gray like so okay so this just gives me an idea of what I want my button to like and the reason I'm doing this and again like I said you don't have to use Photoshop but you can use anything you want is I'm going to grab this eyedropper tool and we grab the a RGB values for the colors so I'm going to take my first color and I'm going to take the light color value I'm gonna switch my palette and we're gonna take the dark color value and we're gonna do the light color value first and basically I'm going to take note of the RGB value which is 0 1 33 209 I'm going to go to my resource dictionary we're gonna add a color or I call this we're gonna add a key values because this is a resource I call this background color one and the Alpha value will make 255 full alpha and then we'll say red green blue and then we'll add those color values which again 0 133 to 209 okay we're gonna do the same thing except this will be a background color to it we'll take the dark color value which is 0 6 194 now I'm going to take these because when we hover over our button we want to make the color a little bit lighter and we want to animate it so we're gonna take those two values we're gonna do the same exact thing except we're going to call these mouse over and we're gonna go ahead and close this now what I'm gonna do is I'm going to add a color overlay I'm gonna pick a kind of a light color blue and I'm going to just kind of change the blending mode cuz I have to do too much work I'll find something I kind of like and that looks pretty good we just want it to be kind of subtle but not too drastic so I want to go ahead and enable that now I'm going to grab the color values for these two colors so we'll do the same thing we'll grab the light value which is 0-1 56 231 and then we'll take the dark value which is 0 91 55 okay now I kind of have our baseline for some colors to work with but now we actually need to start template ating the control so the way this is done is we can actually define a style whose target type is a button we're gonna say setter property and we want to basically say we're gonna override that the buttons control template so you can see that the property name is template and it's of type control template now when you do this what I want you to remember is that essentially when you're at this point you have full rein to decide what your button looks like you basically think of it as a blank canvas you can define a border you could use a text block use grids and dock panels and whatever you want it's a blank slate that you can work with so we need to do setter dot value and we're gonna say we want to set this to the value of the control template whose target type it is also a bug and we know that we want a border for our buttons and let's say that the border brush is and we'll go ahead and create a new static resource for this bubble call this border brush and we'll say the border thickness is 4 and let's go ahead and create that new resource we'll say a solid color brush and we'll do a light gray which is ececec and for our border thickness instead of putting the value of four here what we can do is we can basically do a template binding because button itself exposes I believe a border thickness and we can basically say devalue this for and then what we can do here is basically say template binding border thickness so these are properties that the button control itself exposes their dependency properties and basically what we're doing is we're basically re templating it to use our own layout but we're saying go ahead and reuse the existing dependency property a border thickness that the button already exposes and what this allows is you can override this property and override this style or tweak it without having to read template the entire control and that's kind of the key behind making these custom controls flexible and we could actually do the same thing for border brush we could because the button control exposes died because a cetera property border brush that will do setter and actually let's go down here value okay the same exact thing move the static resource up here to the template and then we'll do template binding order brush so this will allow people to override specific areas of the controls so if someone wanted to tweak this button and just modify the border brush they could do that without having to read template the entire thing so now what we want to do is that we have our order we want to define a background we're gonna do the same thing we're do set our property background now for this we're going to do the setter value actually excuse me this needs to be in the control template and I'll show you why here in just a second so we're going to do order dot background and we're gonna do a linear gradient brush or say the start point is zero zero it's the upper left-hand corner and again point zero one we'll make this a linear top-to-bottom gradient and then what we're gonna do is we're gonna say gradient stops we're going to find the color points of the gradient so this will start at the very top and then the color will be again a static resource to our background color one and then we'll do the same thing except this will be at the bottom this will be a background color too and we need to name these I will essentially call these background gradient stop one and background gradient stop too now the reason we need these in the control temple is because we need to be able to animate when these are mouse is over the button we want to change those two values the color values of each gradient stop and the way we do that is we're going to say control template.dot triggers and we're going to create a new multi trigger and the reason we're doing a multi trigger is because we want to only animate if the button is enabled and the mouse is over so we need both of those conditions which is what we're going to do so we're going to say multi trigger conditions and the first condition will essentially be is enabled and the value must be true in the second condition the is mouse-over value equals true and then what we want to say is that would win views are Mouse's into the button we want to essentially kick off a new animation storyboard we're gonna do multi trigger interactions now we're gonna say begin a new storyboard so basically we're saying begin a animation and the storyboard that we're gonna do essentially will be a bunch of color animations and we're gonna need two of them one for the first gradient stop and one for the second gradient stop now we're gonna name this storyboard we're gonna say mouse over animation and we're to do two color animations so these are pretty simple actually the gist of a color animation is that we need to say what the target is in this case the first gradient stop and what's the property that we're animating in this case color and then we're gonna say what color do we want to animate this to and that will essentially be the static resource we created earlier which will be mouse over background color 1 and then we also need to specify a duration and we're gonna say 0 hours 0 minutes and 0 seconds and I believe this is 100 milliseconds and we can just take this whole color animation and duplicate that for the second background gradient stop except we're going to change the color to color number two okay now at this point we kind of have a basic template we have a border we have a trigger to do our animation when the user Mouse's over one thing that we also need to do is define our content presenter we want people to add text of the button maybe images and we're going to basically say our content presenter has a margin that is equal to template binding padding because remember this is inside our border control and we can do the same thing we could take this border and we could define its margin as template binding and use the buttons marginal property and we'll kind of cascade these down make it easier to read okay now we can test this real quick we can go to our main window and we had already what the app does ml modified our app dogs ml to include this theme file so we're just gonna build a project make sure everything compiles real quick and then what we're gonna do is real quick cuz I forgot one last thing is in our border we want to change this border thickness to to just make that a little bit more curse now we're going to go to our main window and we're going to declare button we're just gonna give some text so a button something simple and then we'll say our width is 72 pixels height is let's say let's do 32 okay let's actually do 90 96 now if we run this we can see that we already have the style of our button in our application now if I hover over this we can see that it slowly animates with the different kind of the lighter colors that we added to the template now if we mouse out nothing animates it back to its original color so we have to do those visual states as well which we're going to do now so we'll go back to our button style sample and this is pretty easy we're just going to go back down to our multi trigger that we had for animating the colors in and we're going to essentially do multi trigger exit actions instead of interactions so let's do the exact opposite exit actions and we can do almost the same exact thing we're going to take this whole storyboard except we'll call this Mouse out animation and then we can actually just say let's animate our colors back to the originals so we're gonna say our static resources are just our original colors background color 1 and background color 2 and that will be our exit action now if we run our app again now we animate it in we can see the color changes first of all now if we animate out because see it restored back to the original colors so there we go that changed and every see it changing back now let's close this and our border isn't very visible so let's go ahead and change our border brush to a little bit of a dark color now if you have a sharper which is a productivity tool for developers made by jetbrains you can go over here and say pick from color palette and it'll show up with their color picker dialog essentially and you can just kind of change it a little bit you could run the app and see the difference that that makes so we could see our borders a little bit more visible at this point maybe we want to change that to just a one pixel border for example and there we go so now what we want to do is animate essentially the mouse down and mouse up animations which are very similar to mouse over and mouse out except these will be kind of their own triggers so this one will be another multi trigger and the property that we care about for pressing down is the is pressed properties so we're going to do multi trigger and we're gonna say conditions and our first condition is our second condition will again be is pressed those are conditions and we're gonna do the same thing we're gonna say multi trigger interactions and we'll say again begin a storyboard and you can use some of these previously previous animations kind of as a template as it go long because they're very similar so we're gonna copy this entire storyboard except we're gonna call this mouse down animation and really what we need to do now is kinda find some dark colors that we want the button to represent when we press on it so we're gonna go to this layer they had in Photoshop we're gonna get rid of this color overlay and just kind of see the difference between what it looks like originally what it looks like when you had a cover color overlay but now I want to make it dark so we're gonna take this blue we're gonna make it kind of a really really really dark blue now you can see that the button looks quite a bit darker than even its original state and that's exactly what we want so we're gonna say enable that and again we're going to take those two colors so we're going to take the light color first which is zero nine eight one nine five for the RGB values and again you can use these color resources as templates so we're gonna say Mouse pressed background one and mouse press background too and what I see those color values for zero nine eight one and five zero nine eight one five okay and then we'll take the dark value zero three six seven - so now we have those colors so we go down here to our animation and do the same thing so we're gonna say now suppressed background color one and mousepressed background color - so if were to run that again we still have our mouse over animation Mouse out now let go over this way press down you can see that we have our mouse down animation so the button got quite a bit darker but if I release my mouse we don't have any animation back to the original estate which is mouths over animation so we need to add the eggs actions for the multi trigger which we're going to take this entire interactions section copy that in there we're gonna call this mouse up animation and what we want to do is in this new media exit actions what we want to do is basically restore it back to the colors when the mouse is hovering over the button we're going to go up here and we have our mouse over background color one and two and those are the colors that we want to restore the button to now we can run this and we have mouse over mouse down and if we lift back up now I have our restored State now I want you to notice something when I took the mouse out it didn't hannah me back to the original colors of State the colors of the mouse over animation now the trick to this is there's a feature on these storyboards called Phil behavior and let's go ahead and add that and I'll show you what that does and we actually need to add that to both the mouse up animation so we're gonna say a storyboard Phil behavior and the Phil behavior everybody's stopped now if you read the intellisense for this basically what this does is the timeline stops if it is outside its active period while its parent is inside its act appeared so what we're saying is after this animation is over stopped the animation and we need to do the same thing for Mouse out if we run this there's our mouse-over animation mouse out mouse over Mouse down mouse up and mouse out and now restores back to its original state like we expect so basically what we have here is pretty much a fully animated button we have all of our different states I can click and the colors will restore back and forth but we also if we go to our window and we set this guide to is enabled equals false run this we shouldn't get any animations because one of our trigger values was that we don't want to animate if it's not enabled but we do need to change the color of the button when it's disabled so we're gonna do that next so we're gonna go to our button style sale and we're going to add some additional colors to see is not enabled background color one and you don't have to use gradients for this although we are and where we do the same thing so we're going to say our alpha is two five five red zero and we'll pick some colors and Photoshop here in a second same thing too and let's take this and let's add a color overlay but let's change this to a desaturated color and then change the blending mode and actually maybe you want to pick some lighter gray colors but that's fine so let's actually do this let's pick it looks like a good great two three three or two three okay and then we want to do kind of the same thing we want to add a trigger for when the button is not enabled and we'll add this one at the top we'll say it's just a normal trigger doesn't have to be a multi trigger I'll say is enable the value is false now you can animate this like we did the other actions whether you're mousing over mousing out or pressing down and pressing out but what I like in a button is when it gets enabled or disabled I like it to happen immediately so we're just gonna use a normal trigger for this and we're gonna do the same thing we're gonna create some setters and we're gonna say actually target name is again our background Guardian stop 1 and the property color the value the static resource is not enabled background color 1 that's good cascade these are easier to read and then we'll do the same exact thing for the second gradient stop now if we run this now what we need to remember here is that with a trigger the target name on a setter does not work with dependency properties only works with framework elements or framework content elements so but I mean by that is if we do setter and we try to do target name background gradient stop one that won't compile so we do have to use a storyboard for this we're gonna do the same things we're going to say trigger against her actions and we're gonna say begin story okay a storyboard and we'll give this a name and we'll call it disabled animation now we're gonna do the same thing we're going to do a color animation I'll do a static resource tour is not enabled background color one and then we could basically I think not define a duration and it would be instant let's go ahead and give that a loken and see so that didn't look instant actually so let's actually just say duration is zero and that that time it was instance or and go back and we're going to do the same thing except for our second courteous stop so now we have ourselves a disabled button that when we mouse over it and we click and we try to perform all those actions it does not animate at all and you may have to do a similar thing where and let's just test this theory real quick let's give this button a name and then let's create a second but I will create a little click event I will just say a button one is enabled equals true and this will just kind of allow us to do and we need to go to our window here let's just make this a stackpanel for simplicity so one button has enabled once not so we're gonna click this and it should rename our other button so what we see though is it didn't when we re enabled it anim back out of the disabled state so we do need to add the exit actions for that so we can do that now for the exit actions we can kind of do a similar thing Epsilon I'll call us is enabled animation and what we'll do is we'll just restore this to its normal state so we'll say background color 1 and background color too and rerun this so now what we'll have is when I click this now you can see that it went back to its normal state while we re-enable the button and that's exactly what we wanted so what you can see is now that we have a fully animated button we could Center our text if we wanted to so we could provide basically a default template and to do that basically we're gonna say what I did earlier and we're going to use template bindings so we're going to go to our content presenter and basically say horizontal alignment is equal to the template binding of the horizontal content alignment for the buck control and I do the same thing for vertical alignment and what we'll actually do is say be content for this context completely equal to a temple binding of content content like so and then we'll basically also say content template so let's make our button extensible so others can like I said tweak parts of the button without having to read template the entire thing they can provide a Content template for the wrong so again with our margin which is equal to template binding padding content and for good practice it's usually good to name the different parts of your controls so we'll give this a name and we'll just call this presenter like so now if we run the app now we could see that we have centered text so we have essentially a fully functional button control the animations that we did in this video a little subtle the colors are very similar but you could tweak it to your heart's content we could even go back and do things like say border and we could check to see if the button suppose is a corner radius and it does it so we will go to our border and say corner radius is equal to 6 and now we have round buttons so you can do a lot so rich in bloating and styling WPF controls not that bad the one thing I will say is how do you know where to start the button control is one of the more simple controls to do now something like a combo box is actually made up of multiple parts so you have a button for the piece on the right hand side that displays the pop-up menu you have the area that could be a text box if the combo box is editable or it could just be a border no text box at all so those types of controls get a little bit more complicated because there's more pieces and they're more interactive than a button as button is strictly just a click control with some animations and some styling so it's a good place to start now what I can say is MSDN let me drag this tab over here from internet explorer if you go to MSDN they have a page and this is the silverlight section but you can find a WPF section as well they have articles on customizing controls and what you can find in here is they also have templates and things like that for each of the other controls now some of these I believe these ones specifically are more visual state managers and that would be one way to animate the controls but you don't have to and these aren't actually the control templates that I'm thinking of they're kind of hard to find but if I find the link I will post it in the video description when I upload this video and you can also go to expression blend if you have that installed so blend for visual studio 2012 or 2013 and I'll show you a cool tricks a new project WPF will do a WPF app and we'll just drag oh I don't know let's drag a well let's go and do a comma box okay so there's comma box if you right-click on that guy you can go down to edit template and we'll say edit a copy and we'll say combo box style one and we'll say let's go ahead we'll go ahead to find it in a new resource dictionary and if you look at the sample for this guy here is the default control template for a combo box and you can see that the combo box is quite a bit more than a button control but again still workable and you can use these kind of as a baseline to customize the control as you see fit so you don't necessarily have to write it from a scratch like we did for the button control but I did want to go through the motions and the steps so you can kind of see the process so we'll go ahead and cut it off there and like I said if you if you think these videos are useful make sure to LIKE and subscribe in the buttons below because I won't be doing more of these and we will actually do things like the combo box the text box list view and things like that so thank you very much for all your support watching these videos and hopefully this helps you dive into customizing your WPF applications

Channel: DCOM Engineering, LLC

Views: 122,990

Keywords: wpf button style, wpf button template, wpf custom button, wpf custom button style, wpf custom button template, wpf custom button control template, wpf button controltemplate, wpf button, button style wpf, button template wpf, controltemplate wpf, button xaml, button xaml template, button animation wpf, wpf button animation, wpf design, xaml, wpf, c#, c# wpf, visual studio, wpf tutorial, wpf ui, wpf templates, wpf style, wpf styles, wpf ui design, .net framework, .net, dotnet

Id: W8GoWHSkT4g

Length: 41min 17sec (2477 seconds)

Published: Wed Jan 08 2014