C# WPF UI Tutorials: 09 - User Controls Side Menu Content

[Music] in the last few videos we've been doing the view model and code-behind stuff so non-ui a lot of you have started really wanting to do some more UI so instead of carrying on with the view model stuff and doing the navigation and everything else I thought we'd just jump back onto some you know some nice UI so a model desktop in Photoshop it's also when they get repository if you want to take a look at the Photoshop file and this is our visualizer kind of chat screen so once you've logged in the login slides away will have this menu slide out and probably this slide in or fade in in some way that'll be the chest these are going to be buttons this would be the main chat list of people you're talking to and then this is where the chester's will be a selected shaft in blue and it'll show here the red will indicate like a new message and this will be the profile pictures and by default if you don't have a profile picture which most people won't by the start will sort of also generate these random colors with the names of the initials I've thought this through because actually I've already made this application before for Fassett oh the older version so I'm used to making chat applications so we've got things like when somebody's typing out Lapeer here have there's multiple people typing in a good message settled fade between whose type in every say half a second as you hover or click or whatever we decide we can show things like times and when it was red and then by default they'd just be invisible like this now you can search message layer search this specific message and the more actions here like I don't know delete things or add more users to the group to start a new just you would click here go to effectively your contacts list or basically anyone you have a message before any of your new to this and you share say your Outlook calendar then the people would appear there otherwise you can manually add them by phone number or email and just start a conversation and then I thought we'd have this feature of if you click here you'd have say all the attachments you'd ever sent in any messages and then that's searchable as well and we feel like a nice list here of pictures so if you know you just sent somebody an image you can collect this and in date order you can take a look through all the pictures and then we'd have a second icon to go to your settings page and I think that's enough to get us go it will start building this often and then we'll think about it you know more as we go but I thought at least this is nice to get back to some nice-looking modern UI so we're going to start this video see how far we get I'm guessing wall will start on the side menu probably get all this done I'd say then the next video we'll do this list and then the third video we'll do say these chat bubbles but we'll see how far we go so this is what we're trying to make so we just make sure the current app still runs and you can see what it is and then we've got the sign-in so we're going to first just remove the signing for now and we'll need a new page this page this is the page and then this is going to be a side menu that's throughout their application so this is going to be in the window that comes over the top and this is the page form we'll call this one chat page so we just copy and paste the login page so leak chat page so open it up going to leave the login view model for now trick we're just using this as a blank page call the chat model there give the title of the shot again just delete all this lock save that press f7 to go to the code-behind change here to the chat page that chat page that page don't need that don't need that and there's our blank chat page and if we go to the remember we set the current page inside the view model of window view model so we have someone here current page here as login that's the only one we've got right now so just press f12 on application page as chefs the main shaft age will change the default page to check and then in the value converter for the application page is where we then spin up new instances so here we'll just add a new one where it's a chat page and press f5 and that should now open the application we effectively have just a blank page there we go so this is the chat page loudly but there's nothing in it so we've wiped that out and then we can always up the chat page afterwards that's tough so now we want to go to the main window so we'll go to main with everyone in the main window and then before I go much further before I forget let's make sure this text with large there we go there we go so we're going to add this side menu here so we want to we scroll down to main content here right now we've got the blue background and we got a frame which is a page which takes up everything and we're already in a grid so that's fine what we're going to do is it will have a grid of about say two-fifths for the menu and the rest for the page so just do grid column definitions go on definition width is two star which just means to Unix copy and paste flat and have a five units well two sevenths in this case then we'll do and then we'll move the frame the content to the second column on this case one which is over here and then in the first column we will now want to put the first column the way we're down here this is where we'll start making the side menu will turn into a user control after but let's just start working directly in here for now so first one the background so we'll give it a static resource of not stuff it well now we just want it work in the reason for static resource here unless we have a color and we actually have a color of white already styles colors oh yeah so foreground light make sure we carry on using our stylesheet Oh for where I might brush and then just press that 12 F plus f5 let's check that that's a decent size that looks alright and then you can resize and we'll probably add some well we definitely will when you get down to this side 0 on this squash that much but we'll do that in future videos we'll we'll do like a drop shadow and animate in just mainly want to get the UI built and humble will do all the little tweaks but that looks like a generally good size in fact what we could do are then what's better than that let's get rid of this and let's just put a fixed fixed size and say something like 300 let's take a look what that looks like that's better and then again we could adjust adjust that size when you get down to minimum really you want the minimum size to be this anyway so let's eyes we just tweak the minimum page size to be about here which I just do a screenshot it's about 1,300 is not yes it's about 1,300 pixels across and this one is set to 300 right now and it's 500 so it's about just on the two times as big so I thought let's make about 800 should be a rough guess so scroll to the top of the window actually we're bound to minimum width to the view model so we go to the window view model minimum width is 400 let's double up for now 800 run it again and make sure it's a decent minimum so that's like the minimum size you could get their application which i think is realistic probably again minimum high it's a little bit more so let's just tweak that to 500 so I think the minimum 800 by 5 and is fine this is now a fixed size for now so that will do us we've got the background plus common trick and this wants to be the main background and we need it content so we've got here's the side menu so we would need a stack panel so this can be one thing going across after but then the content below actually no we don't want to stack pattern we want to grid because we want this to be the first thing and then this content of you all wants to fill the rest of the the height so we actually want a grid we need row definitions in this case the first one will be also take whatever height we decided in there the second one wants to be the remaining height and then the first thing in the grid is this menu here so that will then be this would be a grit because we've got a lot of grid as the main overall because this needs to be on the right these need to be on the left so we'd have a grid on the outside we'd then do these three buttons inside a stack panel so they're just as long you know is why does it need to be and then they stuck against each other and then this can be in a column that's pushed over to the right so we want top menu on the grid to start with we want background of the blue-collar we've got the wood glue and then we want the column definitions and the first column wants to be also we want to just put this all the buttons in a line and fill up whatever basically needs the next column is going to be this space in between that can just expand all the way out so it's going to be a width of auto and now with the borders a width of a Asterix and then the final one of the right-hand side now is going to be yours over there settings cog serves the three columns now we want the these main three buttons in so they want to be a stackpanel inside the first column so start panel oriented horizontally main buttons we need a height as well because right now it's nothing so let's make the top menu right about 50 now you can see the background so the main buttons now okay I still a button content just close letter X for now or three buttons so you see these are default style buttons so we want to make a new style for the button so let's go to button styles we'll use the regular bottom of the main one just use the regular button just copy that entire style taste a new style down the bottom I'll call this one icon button this is going to be an icon within the button give it a name of icon button copy that style these buttons so first thing we want to do background wants to be the blue so I want it to be a by default this the same color so if you do the blue foreground is fine being the Y large font we want to now be font awesome so we're going to use the font or some icons here so we're changing the font to the bottom to be the font awesome cutting then I what wheel with padding say about 30 still arms any margin don't need that don't need the placeholder episode a loading spinner that can go we don't need the visibility now on there corner radius we don't need any just with the focusable forces fine font family as that looks like basically just the control now the animation when you hover we want it to be this lighter blue that we don't have yet so we go to colors we're blue we need a light blue and that color which I've got the Photoshop file is full 5 e 6 e 5 and then we'll also need this darker color here so not as I'll just add that now so that's going to be dark blue and that color is OC 6 9 9 1 so we've now got the dark and the light blues so on a hover we want this to be light blue and when you remove your on to go back to the blue itself we can keep the disabled color that's fine so that it should be the button styled and you just need to compiling to show and then we now need are the looks of it we can see the buttons we want these buttons to be square as well so what we'll do is because we're making the top menu height the buttons got a set height will simply bind the width to be the same as the hike so property width value is binding actual high relative source is relative source of self see bind to yourself and I think that will make it square there we go so it's hard to see here but there's the three squares in fact we can run this and you should see on hovering obviously fades to the light blue so there's three buttons and now we just need to add the font or some icons so to add the icons we did this somewhere already in the application I think was it crash XPath yeah honey we did it somewhere oh yeah for the login button spinner we added the font or some text and that's what we're going to do with these buttons so instead of having this nasty looking string here in the buttons which we could paste into the button so instead of doing content rather we're going to define we'll put in the fonts class you know define some strings down here so system string give it a key of a what shall we call this want it to be font or some shaft icon say and a value of less and then let's just use that that's not the chat icon but let's just make sure this is belittling font awesome chat icon it's got some kind of issue here because it's not it's not explain how did I change the font then like a change of style in there oh yeah I don't want awesome the padding is too much so in fact the padding should be fine but I think what we want to do is we want to put this on do me yeah because if we change the padding to say 10 and then we resize the buttons which you could do see the text disappears because you can't fit in we never want that to happen so instead of just putting the text box there let's just wrap this in a view box so that it will always scale to text inside and steadily beam font size of a specific size like this size and I won't matter because it's inside a new box so doesn't know what you put now if we reduce the size it's just scaling and it's also keeping the proportions so let's now change that back to a bigger one let's try 2030 yeah howling I like that so you can now see the icon is showing here in the font and what we've done is made a static string here for it so we will just then we want use a picture and card say for now so use a picture we will bind them to these use a picture and then we need the cog one as well which will be out here and [Music] it will be in the druid column to shift over to the right and then it will be the COG so now all we need to do we just press f5 we're going to make sure we're happy with that size and layout so that's looking quite nice we now want to get these texts done the button style you want to get these values so the quickest way to get those values you just spin up a browser go to fun awesome dark IO forward slash cheat sheet and this will bring up all of the icons with the valuing in here the text value so we want one for the chat first and I believe that comments is called they are so it's this one here so eighty six and that's the icon so paste that into there right we just need to change the number there then we've got user here which i think is restored user yeah user must go seven so now we've got the picture which i think is called photo or picture yeah so that's one c5 and then the COG is hardly call it gear yeah it's thirteen so I've become thirteen now we look back whereas all the icons [Music] there's another three buttons for the main part and this icon now the card we just wanted to be was that down I wanted to be this darker core and we could do that with the same attached property and calling it a you know it does highlight you do a dark button but it's just as simple to simply set their color here foreground static to be blue we made and there we are so that's the quickest and simplest way of doing that just a small appearance tweak and that's the menu so that's now got everything we need and we've got this area here now to fill with something we need to do the drop shadow but I'll just leave that for now M thought through I will wait until we get the chat screen in before I see if we want this drop shadow I don't really like drop shadows this is nice and clean and we've got no real drop shadows anywhere so I don't really want to add the drop shadow at everything but when I was doing the Photoshop file it didn't quite look right this right message just going straight into this thing here so we might just do a single line I'm not sure yet but we'll wait till this screen then before we do that so now we've got all the let's just compare so there's the image and there's our actual window which I think's pretty close so it could make the icons slightly bigger or you know this slightly in but again the Photoshop file I just mock up for a general idea so you might want to make these bigger just reduce the padding to make those icons bigger but I'm I'm quite happy with that as a style so we want to now move this into a user control because right now we've just made it directly inside the window so this is the entire side menu here so let's just go to a solution make a folder called controls ah 31 matter and then add a new item and plop right here side user and he should filter use a control WPF we'll call this a side menu control then one thing I want to do is put in a controls namespace by default get rid of that change the local to not be that as well press f7 remove it there as well so what it does by default when you create a new control or new anything if you add it to a folder by default Visual Studio changes your default namespace and append the folder name as well and I don't write that there's no no need to pick your govern all your name spaces for such a small thing so I've got the side menu control it's a user control that's all fine and then in here also we need to do now is go to the window cut all this border taste it in here gaming mouses company there we go paste the end zoom out a bit you can see there's the user controller simple as that and then if we want to use this user control side menu control go back to here now do local Cole on side menu control that's all the ways to a user control so we've got that five you should still see this does exactly the same thing just now we've moved all that UI into a single control and now the next thing we want to do is once you do a side menu control like this you want really the content inside it to become this content here so if we just did say a button test again I see it's just completely overridden everything about our user control so turned into a button so to fix that instead of just defining a user control and putting content here because this is currently the content of the user control this becomes the content so when we've set the content explicitly it's over in our content so what you want to do instead is you want to wrap this in a user control can blake and that wants to be a control template of a tie user control and then we want to cut this into here and now the template for the user control is this we go back now you'll notice that we've got our control back but we now don't have the content so in order to get that content that we specify the side all we have to do is modify our what is now the template and after we've done the top menu grid we don't want to cook in a content presenter which basically then injects the the content that the user selects into this location which is basically this area here because it's a in fact it needs to be the second row so let's rip that row is one if we go back you can now see it's put the button in the second the second area there so press f5 we're now going to use a control where we can set content that then becomes the content of this grid here so now we can inject our well we're going to get we can make our lesson out of this chat list here so that will be in the next video we'll go ahead and make this scrollable Chaston again I think these will become user controls each individual part there and then we'll just put it in a list that each one is in a list and then we'll do some few models today to bind some dummy data into here so we can get this a list actually spinning often having some fake data that we would get from the server eventually and then we'll move on to the screen so hopefully this has been a bit more enjoyable than the last few videos we're back to doing some nice UI you've seen how to do a user controller again there's nothing to it yet basically right click add new user control and then it's just like a page you just get you know your normal zamel put whatever zamel you want in and then if you want to use a control that can have sub content then you just wrap your content in a user control template or the control template of the tides that matches you know your applicate your control type in this case user control and then everything inside here stays exactly the same and you just put this content presenter anywhere inside your design where you want the users content to get injected so we wanted this content to be say here instead in there and in between the two columns it gives dump it here and change the column to one which would be here and then if we went back to the window and we put a button in there you'll see then it gets injected there so again it's nice and simple it's nothing complicated about a user control move that back to where we want it simply was here and the row is 1 so that's stuff any questions let me know next video will be on the the chat list hope you enjoyed it [Music]

Channel: AngelSix

Views: 109,013

Keywords: wpf, user control, custom control, content, control, advanced, menu, list, mvvm, tutorial, example

Id: 9wYhpZ2oHkw

Length: 31min 33sec (1893 seconds)

Published: Sun Mar 26 2017