Material Design In XAML Toolkit An Introduction

hi I'm James I'm the guy behind material design enzyme we'll talk it and dragonballs as well and it's going to be doing a little tutorial on how to get up and running with material design means I will talk it and hopefully get you creating some WPF applications that look they'll call it nice I write you guys but I spend a lot of time working in the enterprise and you know some of that some of the applications that all of us end up writing in the enterprise kind of well visually leave it a little bit to be desired let's say you know with the advent of you know particularly mobile phones over the last however many years I think you know people people expect a bit more now and it's up to us as developers to maybe try a little bit harder you know in our business apps and and give them some nice things to look at instead of the kind of classic gray old screens that you know with I don't Windows for years and years and years so hopefully this tutorial will help you get started with material design in zamel toolkit and spruce up your application to me okay let's get started with the basics I would say but particularly the first time you're using the talk is just try and have a copy of the demo of all the source code up and running you don't obviously have to use the the source code we can get this from from a NuGet package which is what we'll do but if you've got the demo up and running it's easy easier to see what's going on and gets dyed so I've got a brand new WPF project here with our main main window so let's um let's do some basic things we'll get a get a couple of things at it in what we want you want a text block 9 a checkbox and the button submit let's um let's put all this on a row I am using resharpen here so I can kind of get those ID'd in pretty quickly Griz belt and column one right so nice simple little form so if we run that er ah that's pretty awful right there we go got on vertex block where a text box and we've got a buttered so let's just make that look a little bit more professional along to the top and stickler will Marge you man there bit of white space never did anybody any harm I know some people are kind of better at designing lighter than over if you find it hard just just stick a bit of white space in there I'm things just start looking a little bit best right away okay so name but this um so start to look a little bit like something what you might see in the average liner line of business application let's stick a little margin in here so there we go I've got a very simple little form pretty bland pretty boring but you know sort of the purpose so if we want to bring material designing double-talk it into this and straight away hopefully give ourselves and some better effects then the easiest ways is for NuGet which you can use for their command line but for the Pirkle in this demo this let's run this I don't think I've got the lace version of nougat installed on this desktop but hey don't mind so let's have a search for not tear your design see the wonders of search find that for us I was thinking about it okay so looks like someone's packaged up material design lite which is um which is Google CSS library or one of Google CSS JavaScript libraries from zero design light but you can see here we've got what we are interested in material design colors some March resources if you use my apps and but the main package material design themes so let's let's get that installed it's going to bring in two colors package as well and up we go now if you fire that up we're not going to see much change at this point yeah still the same so we've just got to make a couple of quite basic things into our example to tell WPF what Styles templates etc we want to start using so I'm going to copy this straight from the demo source which I've got here so let's let's bring in some resource dictionaries and then we'll have a look what we've got okay so we've got these resource dictionaries so these these are the four basic dictionaries and that's pretty much all we need to get us going and we're gonna tell it we want to use the light theme by default we've got a lot in a dark theme this one is really important the default start sam'l that wool well that's that that's a big Zappa fall that's got all the templates all the styles that we're going to use they're going to come out the material design library and then we got to toujours dictionaries ruin cluding that are going to give us our pallet so straight from the demo we've got the primary color which is deep purple and the accent cover which is lime at this point I should say that Google have got a pretty good spec on their website for the hole in material design if you want to try and start sprucing up your applications it's not just a case of bringing in this libraries you know trying to understand what they've tried to achieve their library and they've got very good rules around the palettes and what colors work with each other so we've kind of got all of all of the swatches what they've defined and we've got them included in this library so we have a primary color and an accent color the primary color has three different hues and the accent just has the one you can see we've got deep purple and lying okay so now hopefully just by bringing in those four resources we're going to see something there we go okay so straightway now things look a little bit different than we can see you can see little animation appear now when the highlighting will get that kind of feel and got submit button you can see a little animation the shadow growing we've got a ripple effect like we see if you use an Android phone you and know that very well obviously you've got a few alignment issues here but straight away you can see things are looking a little bit better so let's say let's just try and line all this stuff vertical aligned Center and straight away as well I'm going to bring in some visuals of first thing let's list to follow the kind of guidelines that's my name caps which does look quite nice and then let's move these along one column I took another column in here and then we can add a pack icon and this is from the icon pack we use from a great website a material design icons by khaliqul kind I can't think of an icon at the top of my head let's guess user no person no I can't I don't even know what this is to be honest but now that went wrong three and this listen this lets privately margins yeah put margin in the front of the front and the front it's always always a good starting point and just make sure that this is a line to it so we got should have an icon there we go and we got we got the we got the our common one there so straight away things looking pretty good he's looking a lot better now there's a couple of other little changes what we need to make to our main window to kind of complete the design and again I'm just going to bring these straight in from on the demo sorry in in them in the material design demo what we've got here let's get into main windows amal a couple things we want to do we need to define the default text color font and then yep fondant background so to get the colors just right as per Google specification will work those text option things in there as well try and get the rendering just nice I can't say that we're not willing on this on my laptop which has got a kind of Ultra HD screen it really does look nice and crisp but like like what we used to know looking at phones so in here we've got the foreground color for our text elements we design the font we specify the font it's saying it's not found there but hopefully will be and paper right paper is the slightly off-white background color so now we're using the Roboto font which is a fun walk google recommends to use and the Roboto font is included in in the tool kit okay so straight away just things look look a lot better there we might want to add a menu which is very common in in Windows applications obviously so we've got we've got fins for everything let's just see if we can quickly young dock panel let's put this in the dock panel get a menu in here now again I'm going to go straight to the to the demo because that is a great way I've gained some code Aspen ages mucking together that's a great way of getting them one doing areas right so go to menus and toolbars as I look at this tunnel why so we got got them we've got some things in here right so let's just get let's get an edit menu now with some with some classic classic commands cut copy paste and again you can see we're using the icons so we can get get your images up and running quickly and should we should refer should refer a toolbar in or put a toolbar so I try and limit this down and you'll be able down one all this stuffing skill more typing let's get rid of some of this some of this junk will keep you safe but um sighs okay I think on there I'm running up so you'll see what we've got and this but you can see straight weights coming in that's all a bit chunky let's try and fix that like we need to dock that to the top that way and I think we've got this toolbar trash ducky in there okay so we've got a menu and a toolbar and then our um a little form so nothing too complicated yeah we go so exceed there's that there's a lot of white space in these but you know that's I think something that we do need to try and try and enjoy a bit more in an hour line of business applications because traditionally in the past we've done quite a bank job of that but there you can go disabled but it's all there so let's go back now to our example and have a little look at some of these things so we've got these these um colours let's just let's put pigs something yellow dot sam'l our coughing wall we've got blue dot sam'l so we're going to change the primary to yellow which are Jackson to bloom it's going to look a bit ugly let's make it dark and there we go so you can literally see we've with these four resource dictionaries we've got make things look quite differently already so I think that's so good a good starting point okay so thing kind of illustrate from that that we've got default themes for pretty much all of the WPF controls we've got some extra controls as well to try and just help help you in building till design looking application so let's let's throw a few more in have a look what we've got I'm in your column let's add a in fact we don't need a new column we need some new word less usually sharp to help receipt so what we're going to do is add a card and there you can see straight away getting into think of the name space so card world and let's put this on read Row one the second row and let's just make east fun all up column so it doesn't look a bit squished up option there's different ways and there's different panels but I'm just trying to throw this together easily so what have we got here we've got a card looks pretty pretty awful low to be honest this nice again quickly fit back flick back to our light theme what's what those around us don't look through your so bloom green let's get this a height of 400 stackpanel it's my keep flow horizontally and put on margin where lots of night white space you know is exuse way to get things looking quickly let's get an icon kind Twitter so let's have a Twitter thing again we can just set the height let's make it a bit bigger 64 so it's nice and a card less so we've got a Twitter box and then that some text block let's let it wrap around let's upper Hey please follow me on Twitter and again we've got margin there let's let's let's stick a margin here of Aussies probably going to look pretty horrible 16:06 teeth ones of top as well or not I can't see the edges on my car there I think it's gonna squash themself water for muscly shadow so let's put a margin mount here 32 I'll say it's all going to be run using what we need to do is fix up height so let's let that one where the card is fill out some space probably don't need that vertical on the top very good we can take off the height here see this is you can see I'm just hacking around to get this to get this just right so we'll let this unless next you see one that looks like you're always going to play around a little bit to there we go you know we do need a bit of a minimum on there we need weather but you can see we've got a card now we've got that nice bare shadow which is you know big part of material designs just raising things up and that's quite simple just inside the card control do manage a bit of the clip around the corners for you so you don't have to worry about that let's show you something on shadows while we're talking about shadows we've got lots of little helpers so here we've got shadow it's exist and that cars got a deep default shadow set for you but we can actually just adjust the shutter so let's make this nice deep shadow there you go see there's a nice big shadow and on that in there now so you've got full control over the shadows and you can pretty much apply that to any button so any control that's got a shadow we can put that shadow assist on so you can do the same on here as well although I think that shadow dates complete overkill but you understand okay so that's time to look a bit there now okay it's a straight away you've got some basic controls basic WPF controls and we've got start for owning some of our custom controls that we've got now and got a pallet a nice glue palette we have ways as well of making you work with those pallets a lot easier particularly let's talk about the colors own also let's like add another row in here alright let's just let's just copy this content this is this is actually you know in some ways quite similar to a card but we've got this color zone and let's put it on the row equals to nice height 100 so what's important about this color zone is this mode property so straight away now you can see if you remember I mentioned at the start we've got a primary color which has three issues so we've got the mid for light to dark we can have light inverted dark really accent oh I say so let's let's use the accents on this one to really kind of bring in some color okay so there's the accent not bad okay so we've got that color zone just to prove things less of a primary primary light and I'm going to add kin as well call it a radius eight and as I mentioned a while ago we're going to add a little shadow in there so should I set the shadow depth of one just give it a little shadow okay so that's using the light color and you can see that the font there it's quite interesting these black yeah so what happens if we pick primary dark now that main kind of might be getting to be too dark from the black to displace and magically we have white text in there man and again this is all driven by the Google specifications around the way color were the police work with each other and we've kind of wrapped up all of that inside the line before you and again in the color zones that's all managed for you and what we can do is we can embed color zones so let's have a mode and let's make this the light color and then let's have in here a text block I and come on let's give it a last Margie okay so we've embedded a color zone within a color zone and so on so you can you can do that and I quickly show you on that on the main demo which I've got them running here you know you can start this is an example of that we've got color zone with another one invaded with little corner radius there's a little drop shadow applied there and then just in there we you know we we build a nice search bar that's the kind of thing you'll see on Google Maps or whatever all the time these days and it does look quite nice you may have noticed from that build a search bar let's let's let's go ahead and do that let's build that search bar let's keep this a corner radius let's just to prove how easy is corner radius of two shadow assist shadow depth let's give it a little shadow and then let's do a stackpanel orientation horizontal let's get our icon in there do we have so much magnify magnify and now let's have a text block text box sorry and then let's have another button we've want to grab another one we had her wait a microphone button anyway so again back on and we're not going to be there at the first run but I'll show you how we can get there on ice right away I'm going to want a little Marchmont a bit we want a bit of padding can we do that combo neck and also sorry yes put a little margin ran their margin here let's go and a control don't probably 20 ever let's run this up and have a look a little search bar okay so you can see well there's a text box pretty ugly that button not quite what we want but we get in there so let's give this insane I mean with of 129 we want to give it a little prompt yeah so we've got this text field assist hint yeah research let's run that up see how things are looking that can work - all did it I completely say we all make mistakes I applied that completely to the wrong thing so in our text box I mean with please search okay so get in there now you might think oh well this this this little underlined prettier it is you know in a normal field like this in this kind of color zone it doesn't quite look the part so that's pretty easy we can turn that off and we've got text field assist decoration visibility so we can just collapse hide hide that time do it this mess what we're making okay so actually I need to set the border thickness to zero because about two things we've got the the underline then the actual animation as well which is two pixels instead of one wishes at the normal of the lighter I think that's going to solve that here we go okay so luster underline still want to get this looking a little bit better now as I've already said a couple of times it's good to have the demo knocking around so if we write this little button here what stall was that because there's plenty of plenty of different styles in the in the demo app that that we can draw on and you know to be honest I can't even remember some of the stores off the top of my head myself so let's go to the source code and in here in the demo we've got the color zones page on what we're looking for we're looking for where we did this build a search bar so a search bar and there we can see that the burn underneath is using this style here material design tool burn which you can see we're bringing in dynamically because that's declared in one of the Zama Falls that's bought in as part of those four that we added in right the start we can afford to just bring it in jointly you know the name is we do body by looking at the demo so let's get that back out the way get back to our little application and let's restyle the microphone button and of course let's give these a bit of their alignment let's just make sure icon and what what's the biggest what's the smallest if we line it all up run this up there you go we've got a search bar maybe it's a bit fat but i you know it's not too difficult to tweak that so you can see by puttin together the color zones you can easily build some quite striking things let's say you know you can you can have a bit of fun wicked wicked use the accent color or what she's gonna look like now but there you go everything's kind of set up there for you so we've got a card we've got color zones we've got nested color zones we've got buttons with toggles there are buttons with ripples we've got our pallet which is pretty much also up for you so you know even if you know you're not very good with colors tourists are on coloured lines quite heavily myself so you know if you need help with colors just go to the demo app go to the pallet page and here we go let's let's find some ink our brown brown and teal so we know we're using brown as the primary teal as the accident and then all you've got to do is go here once a brown teal and there you go that's that so um let's have a bit of fun let's that lets us let's up some flood now one of the great controls that this that's come out of all this material design stuff is this floating action but you should note that um that the standard is you only have one of these per page so don't just you probably don't want to go you know blasting those all over all over your page and then obviously what we see now in a lot of applications is this kind of effect so we've got some nice animations on there so you can have a normal button and you can have the additional actions let's go to the home page we've got it on here and you can see we've got a bunch of different colors and we can also control how eager it is to pop up you know according to all the mass is doing because obviously on the desktop so you know mostly using the mouse but what's what's in the way is implementing a hope quite easy and also we take a look at this little control here that's a pop-up box it says it's a custom control written for his library this pop-up box is the same and this floating action button are the same thing although this is a burn so we've got a tooltip under here material design floating action button a button that style that's what you do so let's let's just let's just do this material design floating action button let's go back to our main window and we had a we had a burn right at the top the submit burn yes I let's go let's give it that style dynamic resource okay to real design floating action button okay a dynamic resource resource excellent right now see texting is going to be a bit big so let's let's just put on a little smile in there let's see what that looks like obviously you can use the pack icons that we've been looking at there you go so there's your floating action button next to the ripple the little shadow okay but come on let's promised you a floating action button with multiple stuff so first of all let's comment that out let's put a pop-up box so you can see that's part of the material design library okay and then let's cost more in there stick that in our column so we know where we want it okay zooms out of it okay so you can see the pop-up box with a smile in there okay cord in a way quite nicely over there but as I say let's let's jump back to a demo project what we're after is is this puppy here yeah but if we go to the buttons there you go so there's the name of the style material design multi floating action accent pop-up so that's the action problem a car rainbow all of that sort of the necklace see how far we get dynamic resource material design multi floating action and seated accent because we want to use the accent color so that's an option let's just double check multi floating action accent pop-up box um you know totally got this wrong and then let's do these properly one button in there live a happy face okay and what this is gonna do is going to realize it's got buttons in there and it's going to smile them style them for us so let's put happy face sad face see what happens blaka you can only have one child so I thought we just put these inside the stack panel didn't find any okay but you can see happy face and a sad face we still haven't got the name of the star right hence why it's not finding it material design multi floating action accent material design multi floating action accent pop-up box now I think what we've got to do this is one one little extra bit what we've got to do and this is why it's good traffic code we're not finding that style so we've probably got going and bring in the resource dictionary from that okay so let's give that a blast so merging dictionaries is a little bit of a boast but not the end of the world resources resource dictionary source Dictionary dot merged resources resource dictionary sauce black and now pack URLs which are always fun to Roy I especially when the editor tries to jump in on you but come on listen let's not do this go back to the demo which has got all the stuff we want so quite simple in the demo the button starts Amal you can see here right we actually bring it in the store because we're going to override that default style with the kind of vertical ellipse I'm going to bring that in bring in the extra star from the pop-up box okay because we've bought in that style we can get rid of the dynamic resource static results now we can actually check crawlspace there is we found it okay f5 I really need to enlarge this window so don't have to keep dragging it open but there we go so we've got floating action button we should same control and there we go happy sad happy okay quite simple now we can also customize this a bit further dot toggle so we've got the toggle content which is when the action buttons close when the toggle checked content because basically the the big the big part of the round button control thing is a toggle button so let's add some drink into there so let's rely on our PAC icon which is always a good way to get something up and running quickly find pencil hopefully we should see okay you can see the pencil coming in there now it's a bit off alignment but you know I don't think I'm going to worry about that for now I think I'm going to wrap up this demo hopefully you've seen some of the basics how to get your app dot saml setup which is really easy to be honest and then you know start using usual WPF controls and then just take advantage of the cards and the color zones to just add those beat blocks a striking color in and the shadows which can all be tweaked and then again you know start enjoying some of these some of these phone controls and as I say always have the demo running side by side find the style that you want bring it in and hey presto so thank you I'll try and come back some more stuff will touch on Dragon Balls integration my hearts that kind of stuff okay

Channel: James Willock

Views: 80,432

Keywords: C#, WPF, Material Design

Id: -n5yeEOsbCk

Length: 46min 15sec (2775 seconds)

Published: Sun Jan 31 2016