C# WPF UI Tutorials: 20 - Creating Vertical Popup Menu

[Music] in the last video we made this bubble content control that acts like a little pop up and we just placed some placeholder text in there called test for now so now we're going to fill this out with actual menu and bind it to some the view model for the attachment button and then do the clicks to do things so I'll get started with that I think the first thing we want to do is we might as well just make the view model or you know part of the view model for the menu so this is going to be one of many menus in the application so we'll create a new folder in view model specific for menus so we've got a pop up menu but that's more related to the actual double check the the bubble pop up on alignment and things eyes more about the visual of the menu so we don't want it in there this is just purely about natural menu like some menu item and the text anything left the click back and things like that so let's get started with that we'll make a new view model and we'll call this one menu item view model and get rid of the namespaces it's a base view model I think this is got the wrong hmm why is this given me the wrong default oh did I just delete the wrong default namespace oh yeah I just deleted too many I thought it was giving me a four second awkward namespace then lock or but how is it deleting too much does it probably class it and how it's the base view model and a view model for a menu item so for each menu item like a menu here we're going to want an icon and some text so I'll public string name or names are little things so say text and then our menu we want potentially to have like headers within the menu which I don't think they're in conventional menus but like you've got a horizontal rule here we probably want certain types maybe and one can be a header so let's actually do an enum for that that's not going to be a view model for that part it's going to be a data model so it's just add one called menu item type this is going to be public enum menu item tag and we will have I guess capstan icon which will be the standard one won't be a horizontal rule necessarily because it could be any such call of divider and then header from the in the lawn and we'll leave it at that for now then we want to use this menu item type here call it ty I think by default it's going to work out to zero anyway so we could set this to default text and I can monitor all of them so that's going to actually happen anyway by default visit zero so there's no need for that at the moment I think that's that's just got the text and we'll have the icon for a one that does display text and icon so again we'll need a and enum for that so we will make another class this is really this icon type in general this is an enum in call because have you say you want let's say a folder icon wall in core in your application that doesn't have anything to do with UI it's not going to have specific images right now or specific ways to show what we need to the application would like to say that I expect a folder icon to be displayed so for that reason we're making enon of all the icon types and then we'll make some kind of converters or ways to convert this into something that could then be used as an icon like the font or some icon for example I so will do I don't even know I can't think of one right now will do I guess pitch cure what else is there that'll be for say selecting a picture your file file icon probably look at that for now we'll come back and keep expanding on this got picture and file so icon time we also want non I guess if you don't want an icon so by default will be no icon and I think that's the menu item view model when you click commands from the menu items clicked but we'll come back to that after we'll just get the basic structure done for now so we have a menu where my view model is not some reason it's here thought I put it inside the menu menu item view model and now we want a just copy and paste that and I didn't notice the other day when I was doing something different when I did this file rename here he actually completely deleted my file so I don't know that was a real one-off Bagh let me just see if this happens again so it's okay this time so it really took me by surprise but written a class which is quite large few hundred lines and I just click the rename file and it literally deleted the whole file that was it the whole file was done so maybe be cautious if you've got any kind of big file or do this file rename at the start of your file or just simply mine really rename the class and use this but I did experience a bug once it's just something to think about if you got a large file potentially don't use this you know rename file to the same name as classes manually do it in case it ends up deleting your file so we've got menu view model have your model for a menu itself so this will have our list of menu item view models call that items that's going to be the items in the menu I think that's it for now just got the item simple enough so we've got the two view models next thing will be shall we do next and then we'll make the actual items control now so we'll want a new controlling here again we'll do menus and we'll make a new user control and we'll just call this a vegetable menu and get rid of the surplus controls menu namespaces out of all the unused namespaces that's just build to make sure everything still builds there we go and what is next okay let's start with we don't want a grid we want an item of control here which is going to be the menu itself so an item's control now I want to style this so items controlled template and I'm not as a data template to think okay maybe not other items template test I'll with the items within it then you date the template so this is item template so in here this is going to be per item so actually what we want to do is let's just do something really simple for the moments to catch what effect the test and now it's buying this too it's where we need to design model so we go back to the menu add another folder called design and then another class and this would be menu item design model design menu design model I'm just going to go over the menu item review model now let's just make sure we do the same kind of comment that we've done for the others so copy that paste that the design time data for and then left and we could do in the constructor what do we have in the text equals our world I can't equals the file and we don't want the head up enough so that's where the single menu item has we come to design or if we even do design the menu item as a mini control and then we want the copy and paste this class rename the menu design model rename the file will be the menu view model and then in here we're going to have items equals new array a new menu item remodel we're going to have say I had a first the text of touch of file what's wrong with this this one's a little list so a new list of these and then we have one then the other types are which we shouldn't need to specify but we'll just do it for clarity or in fact if I just prove it doesn't need to be done let's just do normal text this will be from computer with an icon of file and we'll do another one from pictures and that will do for their some design dates which we'll be able to bind to we need to make this natural design model though nearly forgot about that bit so we just want to copy and paste the singleton part of the class paste the N and just make it a instant so itself copy that to the menu item one as well and that's the design models onto notion to be able to buy into this menu design model let's go back to this items control and let's do a date to contact them for now I'm just going to run we can do let's just do the data context so not the design time data context only we'll just buy any to the full data context at the moment so we can actually open up the application and see it until we get to the point of of creating the real data anyway so we're just going to bind the data contacts directly to the design time model which would usually be only for design time so I think that's how we do that again I was no it doesn't we have some call there don't we and we have to then specify that it's in core I think that's it so probably is compiling there we go so can't see anything there but let me just make the background so that's apparently the date okay so we've got the data context of the menu and we know on menu item menu design model and then we need the item source from that to be bound to the items value and there we go so now we have three items so we know we're at least bound to the the data now background for now just in white for the moment just so we can see what's happening so now we're down to each item so we want basically something very similar to this and icon and some text and then we'll make it nice and visual so start with a grid the background with the foreground light brush which is why then inside here I think we'll do because we have we have to support the header style that divided the style the menu item style so what I'm going to do is use this grid to have all three elements in and each options visibility is bound to the menu type enum so only ones displayed at a time and then we can basically create one now and then make sure it works then create the other style and how to start hiding them so you'll see as it goes so this one I'm going to make is going to be the the text and icon style so for that we'll start with a border with a background of the foreground light brush so in fact we're leveling that on the whole griffix that's going to contain all the different styles so this specific one is going to have the background and white I think we want probably on rounded corners on each menu item because we've got it turns out of rounded bubble as well to keep it similar so we'll do a corner radius of I guess about maybe eight for now something like that this is also a menu item so it's like when you hover over the menu I don't know whether you want it a clicky arrow style like when you click a link try to think where we get that in here but if you want these are like that so if you want it showing like a hand of the link you could just have like a cursor here of hand like that so I'm going to leave that out for now low and then the text inside this I'll do for the moment we'll come back and see all the films about this so we'll go inside the border and then we'll do I think just text maybe so I think a textblock is probably going to be and not enough only the great because we need the icon as well so still a grid only two columns so the column definitions wit two the first one where the icon is going to be it's going to be auto and then the other one's going to take up the remaining space and this is going to be the menu item which container for EPS and icon some we can do the text block for the icon because we're going to use font awesome and we're going to give this a name of icon because we're going to do some triggers on top to change colors of the text and the icon and the background so probably need to name this button it will pull the trigger on the actual border itself so text block of the name of icon and [Music] font family is from a static resource font awesome then I think once you give tax for the moment shot I can let's just get something appealing so we can try and visualize this so they look like an icon that will want some padding by the looks of it let's give a nice little bit of padding around the item let's just remove this width and height from the design as well so it's just scales to size zoom in here a little bit so there's our current acting so that's fine for now because we were going to bind you're going to bind this text to a value conversion things the blacks a bit harsh let's just change that foreground for the moment we'll do now foreground Rob we need to name these nice about foreground dark or so ago so just a nice gentle call that's not too harsh this is the icon and on the main text it's just going to be a text block again full of text and click up column one and the text and be honest eyes easy enough to just fine straight to the caps so we get the actual text and there we go there's there protect and these are misaligned so we need to vertically align these so they always stay in alignment I guess this needs a bit of margin on the left and right that looks a bit better so we have a vertical menu appears certainly not ideal yet and then with any kind of hover effect or any click or anything but let's try now at least put this vertical menu into the actual shop page so in there we had as a touch mum pop-up which is a bubble content with a data context of attachment menu so I didn't want to do that started the applications going to wait lot to build and close it down again so we need to change this attachment menu which of course we can't navigate to so this is a chart attachment popup menu view model that we've bound to beige pop-up menu view model and this is where we need to get to how do we boil this down to the content inside so got bubble content it's a big part of this attachment menu that was what we're going to do we're going to make this bubble content aware of specific types and then we'll inject a vertical menu as a type so kind of think of the best way to do this will do a completely separate and touch menu this is a pop-up menu so in here realistically we want to have the menu itself a vertical menu but we don't want to be limited to or rather not vertical menu lol that's why we bind it to the menu design model because that's the base view model so we want to add this view menu view model here so we will have and then we can always make different types of menu view model you eyes like this vertical menu book in essence so we're going to be a menu so we'll always make it conform to this menu view model so let's do that as the menu menu for this oh and actually let's go into the base popup menu menu for this type of menu that's going to go so now we can bind to the menu in chat attachment we shouldn't split that in here we get them actually only property in the constructor again this could be this will be loaded from anywhere I guess now this is the time where you'd say the menu is a new menu and the items are new Westall items that's a new array new menu item view model x equals 25 this is where the real date would come in what's wrong with this there we go so this is the point where this is the actual specific chat attachment popup menu view model and this is where we did you know create the real info whereas right now we have the design time menu for any kind of menu we've got the exact same things let's just convert this to design time header and menu item one menu item two and then we can easily distinguish between a design model and the real data and then when we change where everyone to change what the attachment menu does and where it goes then we've got access to it here this will be from computer from pictures and then we can also quickly jump back to vertical menu and we can do a design time data to that and the real data that we compile malla should change a little bit although map in the middle of code that doesn't build the moment I actually got design time header and then the actual data context will need to come from let's see this will then be this is just a vertical menu so yeah we'll build up to attach him back to this real view model afterwards so there's the view model for chart attachment by default is having these things for now and I'll try and get back to where we were what family member where even was and we were doing control - and step back try and remember where I was and what I was doing before we started this bit and we're trying to bind oh I know where we were we were in the come on visual studio there we go we're in the actual here let's bubble content and try and figure out how to bind the inner content so now the bubble content is got a data context of attachment menu so in our attachment menu it's actually this correct type already but this is a base type of this so we can now get access to the menu because we're bound to effectively the menu or the bubble content control here is going to have instead of just this here we need to have a almost a gin there we could have like a generic user content I think or content control where's the content going to a value converter that find specific content I'm going to do that so we're going to have a Content control for the content being bound to the attachment Massey yeah well um this case attachment menu that's not very good now we're bound to the attachment menu already so it's there the actual thing itself so we should just go to bind to whatever we were actually bound to as a whole but that's going to be bubble background that's actually always going to be the bubble content view model I think let's have a look again attachment menu no it isn't how are we not using this let me not use this football content whether they'll say that verbal content was it in base pop-up-menu yes oh we're going to always be bound to a base popup menu view model yeah that's right so please popup menu view model and that's always going to have menu I believe so Wow yeah so at the moment yeah that's correct so really we've named this base popup menu view model then we're using this bubble content as a effectively only ever but we call the pop-up menu which is there the confusing part let's just rename this to base pop-up view model because it's not necessarily going to be a menu contained in there there's no need for it to be specifically a menu and that's why I'm getting confused because of the naming convention so a base pop or view model but then we're bound here to a menu view model so I think this needs to just be this menu needs to be content and to be honest this just wants three updates for your model the further content inside of this pop-up menu so now we have a completely generic it's going to be a view model because it's that's how it's working and it says of any kind so it's called content then when we make the specific chat attachment one we set the content to this menu view model so what we're going to do then is this pop-up content now is bound to always bound to a pop-up menu view model and we're going to bind it to the content so now we're banning the content to there we want the converter to be a new convertor and then this is going to as you guys are going to be really powerful on how it will work if it works the same as it doesn't me hat but let's just copy and paste this and this is going to be the including name for this so this is specific to the top there's going to be a pop-up content converter that's a really simple and pop-up content converter professor that takes in a base view model and returns the specific part me thing is through more actually do we need a converter at this point oh yeah we need a and we turns a specific UI control that should find to that part of your model so what we're going to do here is switch between or rather not switch so somebody if value is and then a shaft attack from top of view model so it's a type of a chat attachment we know in that UI and then this content we want to return a new vertical vertical menu with the data context set to the value I think otherwise just return multiple now I think this is right to pop up content converter then content controls here the converter is then content converter and you're going to complain that now pop-up content converter does not yes it does each means building right so that was a big rabbit altar to go down so I guess maybe I'll start at the top again so we have a bubble content which has a data context of attachment menu and that attachment menu is set here to a new attachment menus that's going to have a chat attachment menu which is what we want and that's also going to have the content so we're going to have the data so the data context of the bubble content is definitely bound as weaning in this class as well earlier this data context of bubble content is definitely going to have the derived information so in the bubble content we have all this we have a content control that should be bound to what will then be the chat attachment popup menu and it's content which in here is there so the names write the contents also Secchia so now we should have a user content control that's going to get set to this content so a menu view model which is actually where we've done something wrong here in a way so the content is content as a menu view model not the parent so I don't know we want to bind to the we don't want to bind to the content we want the overall type so we know which type it is like chat attachment and then in the value converter we want to check if the type is this as content and not ask just a name so if the value is a chat attachment popup menu we'll call it content and then we'll bind the vertical menu to the content content that makes sense so we've found to the master pop-up view model and check if it's this type and if it is and we bind to this types content so we should call it base pop-up really so if that is a base pop-up of this time then bind to this content so that should fix that and so then we have a Content control that's bound to the correct thing which is all of it and it should have to actively return vertical menu and the vertical menu then will be bound to a a menu view model so we should be able to then bind to items in the vertical menu which we do and then we should at least find the texture all that put together because we're really impressive every just builds and works right so if we click this I think it actually does so it's bound to the date that we've also got some UI issues here then we set the height and width specifically and got no hover but that's actually bound completely to our menu view mother's complete view model binding of a generic pop-up which can now contain anything at all so we can literally make new content new styles we could have a picture in here and simply bind to a base pop-up and now we've got a completely Universal pop-up control that can be of any content type so let's just fix the width and height thing from football content which I think we must assess explicitly yeah just get rid of those now and we'll also get rid of designer width and height afterwards so there we go so now we've got this menu Magellan looks nice we need to do the multiple styles for the attach a file we also need to do some hover effects and then some click effects to do things and then some clicking away to close so there's a bit to go but that's that's already really nice now we've got a menu that you know it's all from view model binding let's just remove that hi all right what's next so vertical menu shows design time bubble content shows TV shows there so actually everything is working at design time as well so back to the actual vertical menu now let's add some let's add a header and bind the visibility so this we have a header then we'll finish off all the styles after so we'll get these we do for the header we'll just want another grid I'm thinking so this will be added only one of these will be best visible at the same time and we'll just do a grid just text block for the content and that's just bound to the text which we won't see if I just make this invisible for the moment so there's now this is the header showing so our text box with the text there on that to be smaller for the header and stuff that we saw not fun family time yes you have to be fun fun let's go thicker but smaller small I seem to be changing anything feel that sir that should be smaller because by default its regular I think it's visually not showing that so I'm going to leave that as small for the moment so I'm sure that we'll go smaller need a little bit of padding so we're going on technically on the left but I had I want to keep that away we'll have a look but on the top the right we want one padding at the right padding at the bottom because what we're going to do is have like a line that extends across to fill you know the remaining space so you'll see that in a moment that ground again will want to be the foreground white color then we will want the only reason we using a grid here is to do two things in the same so you can do like an underline that or rather than line to the middle that just carries on after the fact so we want to align this to the left and do the moment we'll finish that afterwards this would be the as a text and then we'll have head aligned just going to be a border with a heart of four four units and a background of let's sing dog brush now you can see we have the line through we also want to make this foreground the same dog brush and then now we want simply to port that's why we give this a background the text white all's I need to do now is shift is that you can either do that index or simply remove this the headline above whichever so I like to avoid that index as much as possible and just simply place that first and now you can see that that whichever if this was the largest text in the whole menu then you wouldn't see any but then if you've got you know menu contain multiple titles and these are small we just add the flow of wine just as an effect just so it looks visually nice so I think that will do for this we now just need to make sure the whole thing is visible only at the right time and flop it in these two things so we need another converse or so visibility is bound to and we are bound to a menu design miles or a menu view model and it is the menu item type and it's called type wrong keyboard shortcut them so this is going to be Thai and we want a converter again and this will be menu item type the visibility converter and the parameter I think we will use as the the thing if you will the matching name so we're going to take the parameter as if there's no parameter for one then we will simply return collapsed completely invisible otherwise or rather sort of it as know if parameter is menu and it's not going to be that's going to be a string yeah so actually leave it as not if we have no parameter turn invisible alright and convert parameter string to you know so enum not try pass the parameter are strangling and the out menu unfit menu item type sorry so if we fail to convert and again we can visibility got collapsed otherwise we have a menu type based on the parameter and then we are oh yes the type to say yes so that we check the type with the value so then basically if the the value as menu item side so that the actual value of bound to equals can we not do as oh no dogs is a non knowable okay simple after do this so the value is equal to the type we just created or in that case we actually simply return that so return every equals the then visibility dot there's a ball otherwise it's completely collapsed and out of the way return visible as the parameter much is the type so all that's going to do is we've bound to the type which is the menu view model I'll keep doing a menu item view model type this is whatever we set which here we set the type so it's going to be bound to this so that's what the value is going to come in at header or by default it should be texted icon and then in the converter we pass in so let's do the converter first and then convert we then pass in a converted parameter and this is going to match like there's header so it's going to take the string of the parameter it's going to try and convert that string into a menu item type enum which you should succeed because we've typed header and the words header there and then we simply check if the value that will come at the setup is the same we're visible so that means now if we set one to header and the other two this taps an icon so we set that to there and that's complaining us probably needs building again saying it can't find it header to that and this one to text on icon then I think once it's built we should have the header showing for the header icon specific cast is not valid boolean to visibility converted where we used why's that failed all of a sudden oh hang on I know why we forgot to replace this part so that's the type it is a converter takes in a am between the visibility based based on the given parameter P same and your a tintype no we need to be name this file as well so a lots actually worked things have a bit lot owner the board was about the same top and bottom of this mmm yeah it's alright just to stay off I don't know just remove that line to be honest bowl keep it in for now I just think that's got slightly too much of a border around this bubble content with unit last ones just reduce the UM hard enough so can i let's see what that looks like a little bit more so not as much as 1510 too much so 12 is okay there there we go I think that looks okay now we're now we just need to add the actual hover effects and click effects and the other thing I mentioned before about this pop-up we've made this pop-up so we've placed this exactly where we want and it gives us more control of position and what we want to do we can also now move around and do things without this just instantly closing like a context menu would I give you right-click you can't do anything that menu closing whereas if we've got say this pop-up we might want to hover around here or look around or you know do something else like click here and carry on typing without that just instantly closing so we made this pop-up ourselves it's not it's not based on any kind of pop-up class that exists in WPF we simply made it but what you might want is because this is popping up inside this area the chaffed users might expect the experience of that pops off they go off get this a natural responses to click you know around it so not necessarily here but in this area they might want to close this menu so I'll just go and quickly add that ability to show you and that's something else's then out the way and done so what we're going to do is in the chat page where the menu is so we've got the attachment pop-up and it's in this it's in this grid you know the top two areas where it's all blue when it's in the actual page we're going to add an overlay inside there that's only visible when the menus visible and buying a click to it that then hides the menu so here and we can use this for the universal overlay for any pop-ups inside the grid so we'll just call this pop overlay and just wants to be on border background of Trumper well make the background red so you can see at this time and then we'll hide it afterwards but you need to specify a background for the click event to work so we're going to have a row spam it's going to spam over - and then you can see that's where the red is and I think we just want a lot of actually to do we obviously sort the visibility out of the moment welcome to the visibility now actually so the visibility will be found to the same one as this real move bound to the attach menu visible attachment menu as well again if this was to be used for more than one pop-up the visibility would then be bound to another property you specify which actually let's just specify that now might as well and then it's ready for future use so we have attachment menu visible what's made to a any pop-up visible and that is right now attachment menu visible so basically exactly the same so through if any pop-up menus are visible and then we can just change this to attachment menu visible or you know some other menu visible and you can have them this bound so if any pop-up menus visible this flat one will be visible so we called that any pop-up visible so bind to that and convert it is simple boolean to visibility converter might be back to front but let's just quickly run that and see which way around it is that's the wrong way around so let's just pass in the parameter to flip that around so go the opposite way now that will only be visible when at the pop-up visible we don't want to do border dot import binding which is a new thing we haven't done but these are really useful you combine two keys you can bind two mice and this is a way to bind commands you know actions in your view models with any kind of events will do a mouse binding with a mouse action I've left these left button or left foot everything is left click and then the command just like a button then we want to load by into a specific command so we will want to make another command which we have command already there attachment button command so we want pop up call it pop up click away command the command for where the area outside of any topic is clicked and we possibly want to on that we won't know what yeah that's it just ah we don't need any parameters then we'll make the pop-up click away command go to top click away call it pop-up click away copy and paste that one one when the pop-up flexaway area is clicked highs any pop-ups so for now we simply set the attachment menu and then as we have more menus we can obviously you know it add to this and just simply set the rest it hidden so now we've bind to this command and now when we click in that background which will be read at the moment just so it's really obvious to us we should be able to hide the menu and it won't it'll actually do yet all do ad works is going to pop up but see you can click away to hide the menu now the other issue we're going to have is notice when we click here it's not hiding when you're clicking on existing content only when you click away where there's no content so to change that behavior and that's why it's helpful to make the background read initially so you can see it really easily now this is sitting on the same row as these two things so we simply want to then use the z-index to push that above everything else so it sits on top off and it won't be read absolutely transparent so it just means nothing's clickable while the menus are up there that's what you want so you click up like that effectively everything disappears including though you notice our menu so we need to also then make sure our attachment popup menu is that in the two so it's above the background cover so there's now like three three forced layers so all this content some layers email when you click the Reds on layer one and the pop up somewhere to so it's a bubble you can also see it's become higher than this menu when you get you actually getting a little bit of a shadow over lane so we don't want bar which you don't want then you won't make this layer three because the other issue now as well as this menu is above this so when we now hide it and the menu just slowed down its effectively down here and now you can see I can't click anywhere because I can click over here but here is basically where this attachment menu now is what it's happened as it slid down with the margin go - place now it's sitting above here invisibly but above and it's stopping this clicking through so we now also want to jump this grid which is on Row two is that index 2 3 so we're just setting all that you know the Zed index the debt players correctly which is something that is one of the reasons why I don't like using that an expert in this instance that's that's what you do so now we have you can click anywhere so finally let's just remove that red and you can see the final result of where's the red gun pop-up overlay now becomes transparent and now we should have this sort of click away hide type feature and then you can simply to delete that overlay we don't want that that feature but now we've got a pop-up menu that acts a bit more like you'd expect or you can do what you like but I just shows how you can use something completely different to be able to click away and you can click over here fine because we haven't told it to do anything there you can also maximize and minimize and you know doesn't disappear like a normal context menu or like if we right click there now we try and maximize no matter what you do context menus instantly disappear so that is more robust for what we need but also has you know the expected behavior I think the last thing we'll do now it just get some hover effects on these menu items and then we'll see what times like because you don't want the video to drag too long but then we'll add the the click events to do things or will potentially move that off to you know the next video so let's get started and see how long it takes so we have closed the app closed the converter to vertical menu we need to rename this file still and we want to be in the vertical menu and that will be this specific not the headers it will be the menu items that we want to now add the hover effects to on the border so we want to do in the main menu item border doc triggers and then we'll start the event trigger because we're going to do a storyboard for the mouse enter I'm going to begin a storyboard I'm going to do color animation to balloon on the hover and we want it to be duration of no hours no minutes and seconds of I'm very short you want too much of slow delay on men you don't typically have any kind of animation that instant so we'll give it a tiny tiny duration for now four point zero five seconds and see if we want an animation but we'll leave it in a storyboard so you can choose and then every gun want animation Rajasekhar to zero as in fact we'll move these down so the storyboard target property is going to be the background roller and the that will be over on the border itself so that's like setting I was like setting this background to blue like that and then on that's a mouse and there this is Arthur over blue copy and paste the whole thing all that out just reverted back to what it was basically which will be foreground light on menu leave I think that's enough just to get the hover effect going then we'll also have to change the text which doesn't look the right but let's still that's like so you can see there and you can't even see the animation so you could slow it down and add animation also that's fun that's fonts about right but we need padding there more so one thing we need is probably a bit of padding there of five maybe and then we obviously want to style the color of this that's better so now let's change this to both of these to white I think and let's just add the animation in but I've got a feeling we'll simply not do the animation but let's see the 0.2 seconds that's a color animation there when we want the same again [Music] two more lots dollars one more this will be for gram line so it's the white color it's going to be the foreground color and this time we're going to have storyboard target name and that's why we named these eye contacts before so as one like icon and then the same again for the text and then all that again for when you're leaving to revert back to the original colors which different so the original for the icon is foreground dark and the original for the text is just the default which will be in fact imma just remove that then now or maybe you can maybe just do from I think as well we said we could do this just from whatever it was nothing be able to do stairs loft is from Port Orange lie to simply reverse the animation Oh No the issue with that was if you force a I do this every single time review for so from that's fine it'll revert back to what it was but it'll start the animation from dark even if it's never fully faded to the original color sort of things so you want to use it to explicitly and starts going to go foreground dark and this is for zones very dark I guess is the black which we should really then explicitly set the color here so for run very dark so I think that should give us the animation or after that's nice this font wants to be probably bolder and so that was a bit thin and the hover I think I said a little bit overkill something that's where you can start trying to do too many things in animation like everything's animating I don't think the menu items need animation myself I think we'll just remove the animation for now so we'll just set those to zero everywhere and then finally we want to set this font family to write a regular now it's nothing like so I think regulars fine I think this it doesn't really display the fonts correctly I don't think in the design time to see there you go the fonts now bold so I noticed that with this cell this text is small as well so the some there's some issue with design time displaying fonts because that's clearly not displaying the correct font so kind of take this little bit with a pinch of salt and just run the application to see the actual result so I think that's that's okay for the hover of the menu now the last thing we wanted to do actually was noticed is the icons on anything to do with the specific icons so right now we have a where did we put it in styles would be certain styles we have fonts and then we've done this inside of this zamel style this is something we eventually want to move out to core same with all these styles and sizes these don't really want to be in in this application these want to be in the actual the core inside of a view model so we'll make a little mini start on moving these out for now just so you get the feel for what's going to happen so in core we've got the data model of icon tab and we still want to convert that to you're not necessarily always going to use font awesome both it's certainly going to be potentially used in more than one place so we're going to put it in core and we're going to do a converter that simply converts the icon type to the font or some string value this exact string value as I'm just trying to think where we'll put that we'll probably put that in almost like a value converter in core but it's not a natural value converter like you know in WPF it's not the same concept so I think this is more along the lines of a larger project you'd move this out to its own module and have it as like a a media roller a kind of you know a converter project book for in here I'll put it in then we'll put them from specifically or probably overthinking that's just the name in a folder but it's going to be a converter for data type so that ideally just call it value converters now let's call it so I'll just call it icons now we can always rename it later I can't really think of a name and then in here we will do icon tie to font awesome when this will be a public static class and let's see icon tie to a font or some string public static string we can have we can do a overloaded within an extension method here to overload a icon type which is what we'll do and I'll call it to fun awesome on this icon tie tie another basically the same as with that for statement for this one keep hitting the wrong keys on this keyboard and this is the overall class so are purple things for icon type so actually this class committee names - icon type extensions which is now more accurate I will rename the file and now - font awesome so now we simply do a switch on the time the default we can know otherwise the case of file we turn a certain string face our picture put in the string so turn upon or some string based on me icon type and you can change this default behavior to return something different but for now file and picture do we have anything for file on picture we've got a picture there I'll do for that and the file we don't have what the thing is I think I remember that it's this is quite something you remember codes as well I think it's just f6 I think there's a few other user as it f 6 I think it f 6 1 1 6 remember rightly there are there's a lot of different file icons let's try that for for now anyway he just like a font or some cheat sheet and anyway have you want to find that icon but I'm being lazy today so now we want to make use of this - font awesome so we going back to the icon the text is now set there instead that I want to binding to icon with a converter that we now need to make and in value converters copy and paste that one icon Kai - font awesome converter make sure that goes in there because that takes in a icon type and returns the font awesome string for that icon so we have type equals icon type of value and that we are significant that we can simply say return icon type value dot to fajn to awesome and that will return the font or some string and the converter becomes that converter and that's it so if all that works we should now have we here yeah that didn't quite work nearly I mean we can try that but we might have to return that as Unicode specifically yeah so even though we can set it specifically there what's happening now is it's returning the actual string like it a true string value as opposed luckily in the Styles here specifying a string this way was a way to specify this hexadecimal so we just need to specify that differently in the c-sharp string and I think we just do that with this all this is doing is this is an XML specific flag for a Unicode value and I think the thing the seed shell porn is just backslash you for Unicode thing let's see if that works could you just seen that in the design about them right and there we kind of go and then we will move their semicolon so it's the same value which the value is this part here but in XML you have to do and hash or and pound for the Americans and then end with the semicolon and the value sits in the middle really declaring it in c-sharp then it's just that you use this escape backslash U and then you can specify the Unicode value so now we have a converter that converts icon types to specific icons and then we can expand on that and move everything out of zamel eventually and then we have the Harper effect which I think looks nice and cool so the last step there really is to now add when you click this something actually happens and then the menu potentially closes as well so I think I'll leave that for another video because that won't take long and then what I'm going to do next is I think maybe a pop-up the one thing this application is missing right now is when you click and do something say there's just a not necessarily for this because you're going to click this and it's going to browse for the computer which is easy to do but say you clicked it and it was there was an error or you wanted to just display a message we need like a general pop-up box and we don't want to use the normal windows you know the nasty looking message box it doesn't blend with this application this is all nice and modern and clean we don't want a horrible looking gray square message box so we might do a message box that pops up in the application next including you know clicking this and then maybe just popping up that message box to show and then a few of you want to see the settings page done as well and because this is going to take so long to keep going through and doing so much of because we've got this menu to do we've got the search to do we've got the emojis which is going to be huge we've got picture messages inside that you know this is going to be focus as I keep mentioning of most of the videos because there's so much to do here some of you want to you know do your own applications and get going in the settings page is like a big part of that so I might move on to settings pages in a few videos that's going to involve entity framework so I figured we might as well jump into entity framework now and that will be a new video series and if we do the settings page where you're actually storing information we're going to then end up using entity framework and SQL Server compact probably for storing the information so that would even though we'll be working on this application and break the videos up so the parts focusing on the database are in a new series for entity framework which will be nice to you know for other people enter to get like in new series started than just WPF so I'll probably move on to this settings page shortly after a few more videos on on this menu but again any feedback any comments anything you'd like to see just leave leave a comment in the video and I'll get back to you [Music]

Channel: AngelSix

Views: 20,993

Keywords: wpf, popup menu, popup, menu, custom, style, animation, chat, bubble, message, custom control, user control, template ui, view model, mvvm

Id: HCJtu2oSlGk

Length: 81min 47sec (4907 seconds)

Published: Fri Jun 09 2017