WPF C# Professional Modern Flat UI Tutorial

all right so this is the application that we're gonna create today as you can see it has a super modern look to it super simplistic it has multiple views and it's just all in all super easy to use this one's gonna be a blast so make sure to check out the entire episode and don't forget that the source code and all the project files will be available on my patreon that you will find in the description down below let's get started right so starting off you want to create a wpf app.net framework so it's going to be c sharp sam windows and desktop so we're not doing net core in this one we're using the dot net framework let's give it a name i'm going to call this modern design and i click create and it's going to create the project for me now there are a couple of things i like to do before starting the actual project that is fixing my layout so i'm going to hit this vertical split right here that's going to make it so i have the designer on the left hand side and the xaml on the right right i'm going to clean this up a little bit and then remove the title because we're not going to be using that anyways and let's start by adding some folders right now let's go ahead and add some folders to the project because we're going to make sure that this is all nice and structured first folder is going to be core second folder is going to be fonts because we're going to be using a custom font third one is going to be images fourth one is going to be mvvm this one's going to contain subfolders we'll get to that in just a sec and obviously theme now within our mvvm folder we want to create a new folder called model another one called view and then one more called view model there we go now if you're worried there isn't going to be a whole lot of back-end code we're going to be mainly focusing on the ui but we are going to have to implement some back-end stuff in order to have multiple views and whatnot and we're doing this properly so right so within our core folder we want to create a new class we're going to call this observable object just like that we're going to add that this one's going to inherit from i notify property changed that interface so i notify property changed we're going to have to import the using namespace there we go and you can see that we currently have an error that's because we're not implementing the actual interface i'm just gonna hover over the interface and control dot and implement interface right so that actually implemented the event now let's go ahead and implement the on property changed method that's going to be protected void on property changed this is going to take an attribute caller member name we're gonna have to import that namespace to string name equals and we're gonna put it as null for now now we need to note check the actual event so property changed question mark dot invoke so if it's not null we want to invoke it the sender is going to be this and for the event args we want to create a new property change event args and we want to pass a name just like that and that's it for our observable object we can close that down now real quick if you don't know what the inotify property change is for i would highly recommend you looking into what it does and how you use it it's mainly used for updating the ui when binding i am going to make a dedicated video just for that it's okay as for now just follow along it'll be just fine now we want to create a relay command we could go with the normal command but i don't like how static they are and how not flexible if you will let's go ahead and create a new class we're gonna call this relay command there we go gonna inherit from i command again just import the namespace now this time we're not gonna implement the interface as suggested so we're gonna create two private fields private action it'll be of type object i call it execute i was going to create a private func which takes two types object and bool we'll call this can execute we're not going to create the event so public event event handler and execute changed followed by curly braces now we want to add and make use of the command manager dot require suggested and we're going to hook on to that event with value and essentially do the same thing we're gonna unsubscribe using remove and then minus equals also make sure not to forget the semicolon at the end of value there we go all of this might look super intimidating but trust me it's super easy and again i will have a dedicated video on the relay commands in the future as well all right let's create a constructor takes two parameters it's going to take an action type object we'll call this execute and the func you guessed it of type object and bool can be called can execute equals to null as default should be call can not call and just to eliminate the factor of having to use this keyword we're actually going to put underscores in front of the private variables right so underscore execute we're going to assign that to execute saying goes for can execute we're going to assign that to can execute there we go now we need to finish this off with two simple functions going to be a public bool can execute it's going to take a generic parameter called object parameter followed by curly braces now this is obviously going to return a bool so we're going to do return underscore can execute equals equals nulls we'll check if it's null or underscore can execute and it takes the parameter oops parameter there we go now for the final function which is actually the easiest one it's not going to return anything it's just going to be public void execute it takes a parameter object a generic one parameter followed by curly braces underscore execute and pass in the parameter there we go and obviously if you didn't finish off the curly braces curly brace at the end you have to do so all right there we go right so make sure to spell this right otherwise it's not going to be you know it's not going to recognize the the actual event handler i'm going to clean this up a little bit there we go and believe it or not but that's actually the hardest part done with the next is just going to be view models and those are simple but before we can do that let's actually start working on the ui alright so starting at the top we want to change the height to roughly 600 the width is going to be 920. for anyone who wants to make this resizable by all means you can i don't feel like that's a good idea for this design moving on window style set it to none resize mode no resize background transparent allow transparency true now instead of this grid we're actually going to be using a border so border here we go let's set the background to something like um let's see 27 25 37 yes this is a really cool part pay attention to the corner see how they are like super sharp corner radius 10. kind of hard to see but you can see that it's actually you know rounded off you can change that to 20 and it's even more rounded off that's easier to see all right now we can actually create the grid inside here and we want two columns and two rows so we're gonna do grid dot column definitions column definition we're gonna add two of those same goes for the row definition so grid dot row definitions gonna create a one row definition and then another one now here's the thing we want the first row to not be as tall so we're gonna set a height of um let's do 75 it's perfect and the first column is actually going to have the width of 200. that's gonna resemble the menu the logo so you can have whatever up here in our case we're gonna have a custom text box and then this is gonna be the place for the actual view that changes all right so first things first let's start off with the logo at the top this is just going to be like a simple name logo you could switch this out for an image whatever as for now we're just going to use a label actually we're going to use the text block we're going to set the text to elijahn just like in the example the vertical alignments can be center horizontal alignment center foreground let's put it a white font size oop that's font weight font size is going to be 22 and that's good for now let's move that into the grid there we go as you can see it's looking pretty darn nice it's missing the custom font but we'll add that later on you know what i don't like it being in the middle i want to have it more to the left so horizontal alignment left that's obviously going to be too much to the left so we're gonna add a small margin to it so margin going from left top right and bottom we'll do twenty zero zero zero let's clean this up a bit oops there we go that's looking pretty nice now let's go ahead and create the actual menu this is going to consist of a stack panel because we're going to stack the buttons on top of each other stack panel there we go we're actually going to assign it because it's currently in the first row in the first column we don't want that we want it in the first column but the second row which is index space so we lose grid dot row one see how it moved down there we have it at zero it can move up there right and this is where we're actually going to start creating our own theme we're gonna use a radio button rather than a button and it's just gonna be amazing right so starting off radio button we're gonna self-close that and if we look at it like this it's that doesn't resemble a good looking button at all anyways we're gonna set the content to home we're going to set the height to 50. the foreground is going to be white font size is going to be 14 and this is where we're actually going to create the style for it all right so within our theme folder if we want to add new resource dictionary we'll call this menu button theme you can give it whatever name you want right and in here we're going to create the style so style this is based on a static resource of type so x type toggle button target type is going to be of x type radio button because that's what we're actually targeting obviously a key to to access it so x key we'll call this menu button theme so whenever we apply style that's what we're going to reference to right so let's create setters style setters the first setter is going to have the property of template because we want to customize the template we're going to give it the value so setter value is going to be of control template which is going to contain a grid so what we're doing right now is we're essentially styling the template of the radio button it's going to make sense as soon as i add the text box to it so let's give the grid some properties such as vertical alignment stretch horizontal alignment stretch the background of the actual because the grid is going to define the background we're actually going to bind that to the template so template binding background all right and inside the grid we're gonna have a text block the text property is obviously gonna be we don't wanna set it okay but just to demonstrate i'll set the text to hello you can do so as well we that's the only thing we're gonna change later on so just follow along for now vertical alignment center and we're not going to set a margin just yet just in order to see how things look right so let's create a couple more setters so setter self close property is going to be background value is going to be transparent we'll create another one called border thickness we'll set the value to zero and we are going to set the actual the font of this style in here as well but we haven't imported the font yet so we'll do it in a bit under the setters we want to create a trigger as well so style the triggers create a trigger with the property is checked because we want to check if the button is actually checked because it is after all the radio button if the value is true we want to change the background so if the button is selected if it's showing that particular view we want to change the background of the button showing well indicating that it's actually selected that's going to make sense in just a second as well if it didn't already it's going to have a setter we're going to set the background property background so slightly darker color so like 22 22f that's a hex value alright and that's essentially the the menu button theme done now in order to use this we need to head over to the app.xaml within the application resources we want to create a resource dictionary in here we want to create a resource dictionary dot dictionaries because we're going to have two styles we're going to create a resource dictionary with the source gonna be themes actually it's just theme yeah flash and then the name of the uh the menu button theme so you just copy that over paste it in dot saml so it would be menu button theme that's ammo all right so heading back into the main window where we have the actual menu let's apply the actual style so you see this the horrible style that we have right now yeah let's apply the one that we just created style static resource you can see that the menu button theme shows up voice crack this is what i wanted to show with the margin as well you see how it's like the text is super close to the left we don't like that head back over into the actual style and let's add a margin to the text block so remember it's from left top right bottom so we'll do like 50 0 0 0 heading back in here we can see that the text now is is slightly shifted over to the right right and if we were to add more radio buttons obviously there would be more so we could do like discovery and then featured like whatever you want your menu to say oh yeah i almost forgot it only says hello because well though we set it to hello here and you might be thinking how do i how do i get it to the content that's on the actual template well i'm glad you asked so heading back into the actual text block instead of just the static text hello we want to template binding and one of the properties on the template is content want to change the control template now the target type of radio button so that we can access its properties so we want to do text template binding you can do property for the sake of being explicit wanna set content now if we tab over we can see that all the text is as it should be everything is just fine and dandy we can even go ahead and run the application and click each individual button and we can see that it selects whichever one we select that's because they're all in the stack panel so they're all grouped automatically all right we're not going to bind commands to it yet because we haven't even started the view model i'd say since we're on the topic of creating our own themes let's go ahead and create that search button up here that's going to be a simple text box we're going to set the width 250 height to 40 vertical content alignment center that's going to be so the actual text the you know the blinking timeline thingy it's going to be set in the center horizontal alignment we'll put it at left let the margin of 5 and you see how it's stuck in the first column how do we change that grid dot column dot or well not dot one but we're passing one as the value all right you got yourself a text box it doesn't quite look like the one that i showed you in the example that's because we haven't applied the style yet now this style is gonna have a little bit more code to it it's not going to be much at all and it's going to have an amazing outcome so let's go ahead and create a new resource dictionary let's call it text box theme or so whatever you feel is an appropriate name and add that to the project and just like before we're going to create a style target type is going to be x type and since we're working with a text box it's going to be a text box can't forget the key so we can access it x key called modern text box or something similar now let's create a setter for the property template you guessed that's editor obviously setter.value the control template it's going to be of target type x type there we go text box gonna contain a border rather than a grid corner radius because we want to round it off 10 hence why we want the border background let's do 33 35 40 35 33 here we'll do we'll do 35 33 40. the width maybe 200 height can be 40 which kind of makes it redundant setting it here but you know we'll fix that in just a second right within the border we want to create a grid which is going to hold everything we'll add a rectangle stroke oh stroke thickness put a one we might not need a rectangle we'll check it out in just a second all right we'll create a text box margin margin one margin one text is obviously going to be bound to the template so template binding property actually we don't need to specify property we can just say text border thickness gonna be zero background transparent vertical content alignment center padding five foreground so the actual text color we'll do c e c e c e or c f c f c f see if it looks better that's a better color now we actually need to specify a name for this one because we're gonna do some custom things here call it search box so what i'm demonstrating right now is you see how it's a search right here when we click this and start typing that placeholder text goes away that's the function that we want to accomplish right here now right underneath the text box we want the text block so not a text box but it takes to block underneath it's not going to be self-closed and have a couple of properties is hit test visible false making it to where we can actually click through this text block text is going to be search or whatever you want your text holder text to be or whatever you want your placeholder text to be vertical alignment center horizontal alignment left margin so go from left top right bottom 10 0 0 0 font size 11 for ground dark gray it's going to be in the grid column 1. all right let's add a style to this because we need to add a trigger a style trigger hence why we type something this entire thing just goes invisible so text block style create a style in here target type x oop x type text block style.triggers i want a data trigger in here i want to do some binding binding text of the element name so given the path let's do element name search box setting value oop value nothing so when the value is nothing of the text of the element name so when the element search box which we define [Music] here when the text property of that element has the value of nothing want to create a setter property visibility and we have a value of visible so we're going to show this placeholder text when there's no text within the text box otherwise a default setter property this is really important as well visibility value hidden all right so if there's a value or if there's text in here where we're going to just hide this one all right and believe it or not but that's actually it that's how simple this theme was just a bunch of properties really now let's head over to the the app.table and add that one as well this one's textbox theme there we go and let's look at this beautiful transformation when we add the style style static resource which is not even here actually it is modern text box and there we go i've mistaken it for the other one i realized that it's a text box that's why all right trying this out here we go look at that that's oh it's so easy all right so the final stretch this is where the fun stuff's gonna start happening this is where we actually start adding content making the application look more alive and all that fun stuff right so underneath the text box we're gonna add one more control then everything else that we do is gonna be separate views and stuff like that so you know that's to be all creator content control set grid dot row it's obviously going to be the first one so if you go down one grid dot column one so now we're in this one right here at a margin of 10 and you can't see it right now because obviously there's nothing within the content control but this is where we're gonna start binding stuff you know that's not theme related actual data so this might sound super scary but trust me it's really not and it's a really cool concept let's head into the view model create a new item well a new class called this main view model we're going to start by inheriting from our observable not collection observable object that we created earlier gonna import the namespace all right since we don't really have we don't have a new view so we're gonna we're actually gonna create a new view let's create a constructor as well so it's not as empty and we can't really bind to a view if you don't have a view yet so we're gonna create a new view so heading into the the view folder right click add user control this is going to be our home view we're going to add that split the designer and let's go ahead and you know change actually we can keep those there we'll keep the background transparent so that we can see the actual background of the the main application right so if we take a look at the application we have everything stacked in a stacked layout so we got a text block we got some borders some more borders you know that's what we're going to do right now instead of a grid we want to stack panel create a text create a text block set the text to discover foreground white white font size it's going to be 28 horizontal alignment left so it doesn't take up that much space margin going 0 0 0 20 because we're going to add some margin to the bottom of this so it does it's not too close and the font family we're going to change later on once we import the font now remember how there were two borders right here so we're going to create a stack panel underneath with a horizontal orientation stack panel or orientation horizontal going from left to right obviously just a border oop let's do a border there we go give it a width of 400 it's 300 to 400 height is going to be 200. you can already start seeing the structure of what it's going to look like let's add a background to it we don't want to well you could add a solid color really um you could do like a background let's say orange if that's what you prefer um that's not quite what i'm going to do i want a more gradient one also yes uh this is a border and it's not as you see right now the corners aren't rounded off but we're gonna get to that we're actually gonna use clipping rather than just a corner radius and that's really important because we're gonna have an image within it then again this is all theoretical you can customize this whichever way you feel fits your project right that's the beauty of these tutorials all right so we'll do border background have a linear gradient brush start point is going to be zero comma zero end point oops end point is gonna be one comma two yes i'll move this over here so you can see it better i'll do a gradient stop oop gradient stop there we go self close that one color i had a somewhat of a blue color like um 5b c3 ff yeah and you set an offset of 0.0 this one's going to have offset of one obviously a slightly darker color so we'll do like 3a a0ff and i don't know if you can see it on the video but you should be able to see it on your screen if you did the same thing how it kind of gradually fades from top left to bottom right i love that effect now let's add the border clip as well so border oops so border dot clip here we go rectangle geometry sounds scary but it's really not radius x could be 10 radius y and b10 rect now the form or well forming the actual rectangle zero comma zero comma 400 and the height was 200 right now you can see that it rounds out the edges and again it's going to be clipping everything inside it so when we go to add an image it's actually going to clip off the image as well all right let's go ahead and add a grid it'll be inside here we'll create a stack panel it's going to contain a text oop text block this can have whatever text you feel like i'm going to set the text to whatever was in the showcase so world leader followed by oh this this is how you break a line in samoa it's very strange so you do the and character followed by hashtag x 0 a semicolon a hashtag there we go we'll do in global finance close it off with a with a with a quotation mark as well obviously so that's one way of breaking a line now the text looks boring and it looks like it doesn't fit and it looks like well it looks like crap that's why we change some of the properties like the foreground to white already looking a billion times better font size to 28 that's quite big margin 20 10 10 0. here we go now the font isn't really that big yeah okay it's not that big and it's gonna look better once we change the font as well let's create another text block underneath we can actually copy this one for simplicity sake we'll change the text to get started today exclamation mark give it a size of 18 rather see that's already looking so much better right so what i'm going to do is i'm going to right click images open folder in file explorer and we can see how this folder is empty i'm gonna add in this man character right here and it didn't update straight away it might add a copy it did not okay cool so the the one that i'm using is this one this will be added in the project files on my patreon again you can find it in the in the description right so this is the image that i'm going to be using you can use whatever you feel like right underneath the stack panel we want to create an image we can self-close that one we'll set the width to 250 height going to be 250. source is obviously going to be images slash man.pnge there we go it's looking so nice horizontal alignment center actually let's put it to the right vertical alignment bottom you know what the margin where we're gonna move this manually to the point where it looks better here we go something like that looks that looks really good to me i see how it generated the properties for us looking good all right and now we just add a couple of more borders and we're good to go right so underneath the border but still within the stack panel i'm gonna create a new border with let's put it at item 200 height 200 let's actually style that a little bit better here we go got a corner radius 10 because we're not adding an image to this one and we're going to do the same thing with the background we're just going to change the color so we can add that in here straight away we're actually not going to self-close that there we go then a margin to this as well so from the left we'll do like 50 0 0 0 or like 45 yeah 45 and the colors instead of blue we'll do ffc 554 and obviously not blue at the bottom we want a darker shade of orange so do ff b73a yes that's looking good all right perfect now underneath let's just clean this up a little bit we can um yeah let's keep it like that underneath the stack panel we want to create a new stack panel because it's going to be a stack panel down here we can copy this text blocks that we have up here let's chuck that in there obviously change the font size to something more more appropriate like 20. we'll change the text to most watch so 20 here we'll do 10. all right and inside the stack panel we'll create another stack panel with the orientation of horizontal you guessed it orientation horizontal we'll create a couple of borders in here these are going to be a bit more simple so we'll do width 150 height 150 background on the first one is going to be 84 4e ff yes corner radius of 10 and let's uh make four of these two three four we could set the margin on each one individually but i have a better idea let's change the colors second one is going to be 4e 99 ff third one is going to be 4e ff91 yes and then ec ff4e right looking good so far now the stack panel itself let's use stack panel dot resources we'll do a quick style here inside target type obviously x type border border setter is going to have a property can be margin the value is going to be going from left to 15 0 0 0. all right look at that and obviously if we want this one to um you know stay in line with these we can just get this first one the first border and set a margin of zero here we go all right and that's it now we just gotta make sure to set the appropriate content in here so if we're running right now nothing's gonna happen because we haven't bound it yet let's go ahead and create a view model to associate with the actual the view that we just created as well inside the view model we'll create a new class we'll call this home view model let's add that real quick we don't have to add any code in here we have our home view let's head into app.saml and this is where we're going to create a data template this is something that's really cool as well so underneath the merge dictionaries still within the resource dictionary we'll create a data template it's not going to be self-close the data type is well we haven't added the name space for the view model so let's do that real quick xml ns for namespace give it a prefix of view model equals and we just type in view model and we should get the path which is clr namespace the name of the project the input folder nvm and then the viewmodel folder so now we can access the actual viewmodel by doing finding to x type view model here we go i'll do home home view model here we go now this obviously is not completed we need to associate a view with it so we can do the same thing here but instead of view mode we call it view view mode we'll do view and we'll do view here we go home view as self-closed should be able to rebuild this all right there we go rebuilding it by doing ctrl shift b maps everything correctly this step is really important because once we actually start binding needs to be able to map correctly so heading into the main view model we want to create a full property so we'll do prop full tab tab gonna be of type object and it's gonna be underscore current view we can change this one as well to current view there we go within the setter we actually want to call on property changed here we go so that the view actually updates when we change it we're also going to create a or here a property of type home view model we're going to call it home vm oh we're going to call it home vm in the constructor we're actually going to assign it to a new instance there we go and we can actually set the current view actually let's bind it first so you can see the actual difference heading back into the main window we can go to the content control we can set content content combine that binding we actually got to set the data context as well so let's just keep that as is for now so heading up to the top we'll do window data context and now we need to add the name space just like we did in here for the view model you can actually just copy that paste it in here you can do view model and just choose the main view model now we've bound this but it's not actually binding properly binding current view there we go now the current view is empty it's null so it's not going to show anything however if we go into the main view model change the current view equals to home vm tab back build this real quick there we go now it's actually showing the uh the custom view that we created we run this we can see that it's looking absolutely beautiful i don't like the spacing in between most watched we need some more spacing in here so i'm actually just gonna head into the home view real quick go to the stack panel let's add margin 0 0 0 10 and that's looking way better actually change the height a little bit there we go all right now the final part of the puzzle when we click an item we want it to change views so let's go ahead and change let's create a quick view we're not actually going to customize it we're just going to set a custom background so we're going to view add user control we'll call this discovery view all we got to do here is change the background so let's do background let's do some one hashtag one b one b it's gonna have like a dark color yep and the view model let's not forget that a new class discovery view model again heading to app copy the data template paste that one in discovery view model discovery view here we go super simple heading back into the main view model we're going to create a new property it's going to be a discovery view model we'll call it discovery vm we'll do the same thing here discovery view model assigning it discovery view model perfect that's the view stuff done now we just got to create a two commands so we can switch between the two views we'll do prop this is where we start utilizing our relay command call this home view command same thing for the discovery view command there we go let's assign those real quick let's do uh home view command equals new relay command and chuck a lambda in there actually it's not an anonymous function we're actually passing in an object followed by curly braces for the function body and we can close that off we can actually add some spacing in between here so we can see it better and all we got to do is when we click that button is we got to change the current view to home vm you can guess what happens when we click the discovery view command so discovery view command instead of home view want to set it to the discovery vm and that's literally it all we got to do now is head over to the home view no the the main view the actual main window and bind the commands so i'm going to make this toggled by default it's toggled is checked is the one true that way it's you know it's on the home one by default we're also gonna do um command binding this is gonna be home view command and the final piece of the puzzle and the same thing here but instead it's gonna be discovery view command now if everything works as expected we can now switch between views and that ladies and gentlemen is how you create this awesome stunning piece of art and keep in mind you're not stuck with the design you can change this however you like if you don't like the colors if you don't like the structure that's totally fine you have a really good base of creating a very well managed app and you now know how to work with multiple views and various other things oh shoot i almost forgot to show you how to implement a custom font so the font that i used in the the example that i showed you in the beginning of the video is called poppins you can find it on fonts.google.com so you can go ahead and download this font you don't need to install it go ahead and right click your fonts folder open folder in file explorer you can go ahead and just add the font into here you can then go ahead and drag it into the fonts folder there we go it's a build action resource that's perfect all right and then all you got to do in order to actually change the font is to set the font not the font weight but the font family to slash fonts to point towards the correct directory slash hashtag poppins there we go and it updates now obviously you can just copy this over and change it wherever it needs to be changed so let's say you want to change it for the actual button we need to head into the menu button theme the actual text block and just set it right there and as you can see it looks way better and then you can just go ahead and change it for the discover title the actual text in here and wherever you feel like you need to thank you so much for watching i really do appreciate you sticking all the way to the end if you manage to do so i want to give a big shout out to all my patrons that i've had recently you can see their names on the screen right now if you haven't already make sure to leave a like and subscribe if this video helped you out and as always i'll see you in the next one

Channel: BinaryBunny

Views: 259,686

Keywords: C# Modern UI, c# modern ui windows forms, c# modern ui design, c# modern ui wpf, c# modern ui framework, c# winforms modern ui, c# modern flat ui, visual studio c# modern ui, c# wpf modern ui tutorial, login form in c#-modern ui designing, c# modern login ui, c# modern flat design guna. ui framework, C# wpf, wpf design, wpf tutorial, easy wpf tutorial, wpf flat ui, wpf design tutorial, how to wpf, csharp tutorial, csharp design, wpf, wpf modern, modern wpf, modern design

Id: PzP8mw7JUzI

Length: 36min 44sec (2204 seconds)

Published: Sat Apr 03 2021