WPF Menus - Creating Menu with Shortcut Keys

this video is about the wpf menus menus are very important and essential part of ui based uh or window based application so we will be developing something like this that if we have the file menu we have an icon and we have a shortcut keys and new and exit and we will see that how we can use the application level commands let's say control n and ctrl o and also we have some commands over here although we have not implemented this but you can follow the tutorial and you can implement on your own we also created a small application which is very close to notepad in which we have wrap text by default and we have a checkable and we also can use the shortcut key to unwrap and wrap so if i press ctrl w so it's not wrapping the text and you see that it's not happening over there so we can also do this wrap and unwrap and we'll see that how we can add the shortcut keys and we can use the commands which is a bit complicated in wpf uh when we are working with the menus and shortcut keys with our custom menu so let's see how we do this let's add a new window for menus so i will add new window and let's name it wf menus i will need this name for [Music] adding in xaml file over here and so this is my window so it's let's make it a bit smaller okay to add menu i can go into toolbar toolbox and then i will search for menu and i will add it over here this is our actually menu you see over here and i can actually adjust it according to this so uh the perfect height or the normal height of a menu is like 20. and even for the sub menus and i can right click on it and i can add a menu item or even i can write xaml for this so the height could be 20. and make it file and i can further add a menu item inside this so this menu item can be let's for example new and again height could be 20 and i can add another that is open and the width of this menu can be according to the text so that i can have it like this so i can actually repeat this and i can add further items so let's possibly make it edit and inside edit we have let's see cut copy and another one is let's say paste so that's how actually you can add menus you can actually directly right xaml as well and that's how you do that and let's say for example if i want to add a separator i can add a separator and that should be inside inside this main file menu so add a separator and again the height for the separator could be one one pixel is enough and i can actually repeat a menu item let's say for example exit like this so let's run this and see how it looks like it's file new open exit and these are our menu item and we can also add events for this let's say for example uh in this i can have a click event and i can create a new event so before that i can actually name it like let's name it as menu item exit so that we should have a proper naming convention should be used for the click event item even handler so we can go into the event handler and write application dot current and shutdown it has been changed in modern.net framework version before it was application dot exit that's it but now it's application.current.shutdown so so if i go and click exit and it actually closes that in that way and about adding uh shortcut keys it's a very common thing in different editors let's say for example you see a shortcut keys over here if we want to add some shortcut keys there is a bit different way as compared to winforms in wpef so to do that i can use [Music] command so new is actually new is actually a command that would be used at application level and that is a common commonly available command which i can use and you see a shortcut key has been added by default for exit it's not a command exit command is not available it's not a general command that we can use there are few commands that we can use such as [Music] such as open as well and you see uh automatic and a shortcut key combination has been added over here and for exit uh we don't have a command so if i want to show a command i can display uh through input gesture text which is ctrl for example x so but this will not work we will see that how we configure this but for the commands which are actually available for new and we also have commands available for [Music] cut and also for copy and also we have a command available for paste so like this and we can increase the width to let's follow 150 so that we can see the complete text and also for these one make it 150 width like this and also for this one so all the menu items should have equal width uh because when we create a child menu over here for example if i add a menu item over here you see an arrow over here otherwise you will not be seeing this arrow over here so let's say for example this is the height 20 and menu open has an option like this so we can also nest different menu items like this and all right so i was talking about the commands available for new and for open so let's run this and i will show you the problem the problem is for the commands we see these shortcut keys but these sorted keys will not work and these menu items are disabled this one is not disabled because these commands has no attachment with back and even handler we cannot use directly click event for this because it uses binding so to bind this i have to write window dot command bindings and i will be adding command binding and command binding i need to specify that which command should i bind with this event so let's say for example for new and there are few things that can execute even and we also need execute even so executed even so these are the events that will be used uh by this new command and you can see that these events are added over here so i can actually rename them so command binding can execute so i can say that this is for the new and this is for the new and i can actually copy this and just replace the default value or the default event which was added so just replace that now what you need to do is for the can execute i need to specify yes it can execute so i can execute this command and this is our business logic where i will write my all the functionality what i want to do when this command should be executed so let's see for example new menu item triggered or clicked like this and let's run this so if i see that now file and new is selectable and open is still not accessible because now this command has a binding over here so if you see that this command has a binding with with the help of command binding so i can if i click on this so new menu item click message has been shown if i press press ctrl n again this message will appear now i can use the shortcut key over here similarly similarly i can do this with the [Music] open command similar thing so let's say for example this is the open command and i can say that i need to have let's add them by themselves i can later rename that so i will call it open just to differentiate and i will just copy this portion and i will just replace this one over here so i can mention over here that e dot can execute is true and let's show again a message box that tells me that open menu item is clicked or triggered so if i run this so if i go file new and now it's selectable if i click on this nothing happens because it is a sub menu and normally when you have a sub menu it does not work like this so i will go and remove this submenu because normally parent menu does not trigger itself it actually provides you a kind of a navigation so let's say for example if we have just run this run itself does not do anything it it doesn't perform any function but it some menu does perform some functions so let's open this and see that if i press open or if i press ctrl o it will be triggered so that's how actually we can add shortcut keys uh with the pre-defined commands application level commands and we can do that similar things we can do with the cut copy and the paste commands and we can use that and for the other let's say for example for the exit we have a header and we have exit header and we can display this command but this will not trigger control x will not trigger this even handler to do that we need to implement i command interface in a class and we have to use that so i will demonstrate i will demonstrate it now all right to implement the control x shortcut key which is a custom shortcut key and it's it's not a command we need to create a binding and this time we don't have a window dot command binding this time we have we have input binding and input binding we will be doing key binding and in key binding we will specify the which key combination will bind with the with the with the command so we specify the key so that's the possible x is the key and the modifier is a combination with the control and the command is actually this time we have a binding so when we do the binding we need to specify or implement the i command a class we need to create a class which implements i command and we need to bind that with the data context so let's create a let's say class exit key let's name it exit key and i can implement the command interface and i need to implement all the uh functions of this interface so you see that can execute execute actually exist in this and can execute i will return true in this and this is the execution of the command so let's let's display a message box um let's say control x which tells me that this is triggered when control x is pressed now i need to create a class as well and that class can be let's say exit command class which returns actually we should have a property of type i command which means that this will return i command and let's say exit command and this property should have a getter and it will return the object of this exit key class new so it's a bit like confusing and complicated saying in wpf it's not like this so i will call it class or maybe i can call it exit exit command context so this is the command that we will actually bind in the binding section over here and i can just copy and paste and i can actually specify the the data context to new exit command context so this is the thing that i need to attach this class object with the data context and in this case it's returning the i command property and this is the binding so when we bind this with the with the exit command uh this one and we can only access this once it has this class has a binding with the data context of this this window wpf window all right so let's try that so if i [Music] now if i exit press exit it will trigger the function which is actually attached with that and if i press ctrl x it should actually trigger the command that we actually s associated or we just bind did the binding of that so you see that if i press ctrl x it's triggering that command so now the question is that how can i trigger the event handler that is already over there inside this because this is a separate class this is another class and this is another class an actual thing is happening over here so i can actually pass on things so i can actually modify this uh command and i can do and things like this with this one so in case of just exit function i can just reuse that over here like this so instead of having this one i can also exit my application so if i press ctrl x so it will exit so let's have a look at another similar example with the shortcut key in the menu so i will create a menu over here with the [Music] format another thing is that if i put an underscore of before any character i will see a shortcut [Music] alt key combination let's say for example if i press alt in visual studio you see that this for f it has an underscore and e has an underscore which means that i can control that with the alt key so if i press alt e it will open this menu to achieve that in our wpf application we can put underscore before any key or any letter so that it will be the combination of and like this so let's have a format and in format i want to use header for uh let's say wrap for the wrapping text and i can make it a bit uh different just like a notepad where it's it's checkable so is checkable is true and is checked is true so by default initially it will be checked and i want to have its input gesture text to be control ctrl plus w and i can increase the width a bit to let's see 160 now that's better now if i run this so if i press alt key you see that file is already by default selected just like we have this behavior in visual studio so if i press alt and alt alt and e it will open edit if i press alt f and alt f will actually confuse this because we have f alt f combination is assigned over here and f is assigned over here in this case i can actually change that to some other letter let's say for example oh so if i press alt f it will open alt it will open file menu and if i open if i press alt o it will open this so when once we have a duplicate we actually change the character just just like if i press alt over here so you see that for the team it's m and for the tools it's t for the test is its s and uh like that so so we have a wrap and if i click on it it's checkable and it's toggle so if i click again it will be unchecked so if i click it's checked so let's add a text box and i will anchor this because with the anchoring i can actually control that and by default it sticks is nothing and i can give it a a name it's a txt box and if i run this you see if i resize the box is over there and even the menus over there so i can actually put an anchor like this and for the box like this and like this okay so and by default text wrapping is wrap which means that when the application will be launched at the first time so it is saying that it's wrapped and actually it's wrapped so if i let's just paste this so it's wrapping and it's not moving forward so it's by default so let's add an event for this so to do that because this is a custom and this is not the command just like this and for this we need to add binding so i will just copy this one which we've used for the uh it's saying that it's sorry i just need to copy this one and i don't need this one because uh input binding tag cannot be repeated so ctrl w will actually bind with the command let's say call it wrap command and in my class over here we have exit key and we can actually create another key for i can i can also move them in a separate file so instead of exit key we have a wrap key and in the case of wrap key let's say for example show that wrap shortcut key pressed and over here it's returning an exit command so i can use another command which is is actually a wrap command so wrap command and that would be returning an object of wrap key so wrap key and i can say that this is a wrap command i'm going to use over here so if i run this if i press ctrl w it's saying that wrap shorter key pressed okay so and if i press this one nothing is happening but the shortcut key is actually has a binding and for this uh i can actually what i want is i want to change the wrapping of this text box so the problem over here is that i cannot access that text box inside this class because i'm actually modifying over here i want to modify the property over here and it's not accessible so let's see how we do this so in order to access the text box we have two approaches that i have in mind my mind right now one is that i access the all window uh windows objects and we iterate through and then we find out which window is is that running and then i actually access the text box and i do that before doing this one is that one thing is that how can i reuse the command for the wrap key so that whenever i press the menu item or the shortcut key the same function should be executed to do that it's quite easy we can actually do the command binding over here as well so binding and it was a wrap command and if i save and run now this menu item should also work with the click like this so work with the click like this so see if i press ctrl w it's working if i click it's working so now this command is also or the event is also attached uh with this one so now how do i access this text box so that i can change the text wrapping uh when i click on this so to do this i can actually one approach is that i can see the all the windows so it has a collection of uh window objects so i can actually use for each to i trade through from the application dot current dot windows so each object is of type window so let's call it let's say when and i can check g type if type matches so when dot get type and it should be equal or should be the same type as we have our window because we have a text box over here so so if it matches i then convert to typecast this into wpf menus so when like this so now i can confidently typecast and then i can access the exe box and i can choose text wrapping to enumerator which is because when user presses its initiative strap so i can choose no wrap and if i run this so let's add some some text so it's wrap so if i press or uncheck the wrap it should be no wrap like this see and if i click again to make it wrap it will not wrap because i have not handled this situation over here so i can actually do that with just a simple check that i can check the wrapping and i can decide that either it's already wrapped or not so i can actually do this so if it's wrapping is not wrapped then we have to do this otherwise otherwise we do wrap so it will first check if it's not wrapped then we perform the no wrap so i guess my logic is correct let's see so if i have a text it's wrapped so if i say no wrap so i cannot see the effect so if if it's not wrap sorry if it's wrap then i need to do no wrap so let's paste this if i [Music] no wrap so if i wrap it it should wrap it so like this and i can remove this uh annoying text box so that's how i i can access the uh the object from another window and some ways it's not safe it's not good approach we can also do another approach which is that we can pass the object of text box to this class and then we later on next pass to this class and then we access that object or change or modify that object inside this execute function of wrap text so let's see how we do this so to pass the object uh i can modify this class uh a bit so that i can forward the uh text box to wrap key so i can create a public property uh let's say i can make it of type object so that if i want to pass any object to any of the classes over there i can do that so let's let's call it [Music] obj for rap wrap key so get and set so and i need to pass this uh on wrap key so which means i need to go and modify this class and i add another property over here so let's say for example object a ui element i'm expecting a ui element and that can be anything so i'm just generalizing it and when i create an object over here i have an option to pass the ui element that i have received over here object that i need to forward and when i create this object i can actually do that so semicolon so when i create this object over here when i'm performing the data context association so i can say that this dot txt box should be associated with this so this text box would be forwarded over here and then this would be forwarded over here in ui element and it would be received over here which means that instead of this i can actually do that if i comment this one and i see that what do i receive over here so message box dot show and let's see what do i get in a message box i can also see that in a console but let's see what we get over here so if i press ctrl w i'm getting a text box if i go and click this i'm getting a text box which means that i can because in this case we have an object i cannot also check the type so ui element dot get type should be type of text box type of text box and now i can confidently convert that ui element into a text box text box ui element and now i can do that directly and same thing so text wrapping if it's a wrap then we do no wrap with the single equal operator like this else so in this way i'm just passing so let's see how it works so this is wrap if i say no wrap it's no wrap and if i say wrap it's wrap like this so what we have done over here how did we achieve that we are passing the object to our although it's exit command context it's not correct uh i can actually rename that so it should be just commands context let's see so apply we don't have comments yet so rename to commands context so we are passing the object over here to commands context and then we are passing this object over here for the wrap key and ui element and in this case i have created object because later on maybe we want to modify and want to do something else with this wrap command so then we need to change this from the text box i could have actually directly used text box over here as well so it's up to you but i'm using just the object and in this case i am actually checking the type that either it's a text box or not then i need to convert and then do the wrapping like this so in this way in the previous way we were just using the application and the window and then we are we were retrieving like this so in this case we are actually passing the reference of the text box and i guess that's the better way so the last thing i think that menu should have is the icon just like in any application we have some icon on the left so to add the icon we can first add the icon in our project so let's create an icons folder and i have some icons some of them are png and one is ico file so i just drag them and draw them like this and to add an icon over here we can actually create another chart element in this we have a menu item dot icon and inside that we create an image tag and we specify the source so in this case the source can be remote as well but we have some local icons so we have let's say for example uh exit dot png file this is our icon and you see over here it's a little bit cutting from there from the top so i can actually go and drag it down a little bit similarly we can add for the new we have a new as well so so these are our icons in our application you see that exit icon is a bit blur because uh i guess the size of this png i can see [Music] that the details so 512 is too big for a png and for an icon so you also need to see the size so that it looks good for there so that's all about the menus

Channel: Code Synergy

Views: 7,023

Keywords: Windows Presentation Foundation, WPF, Creating Menu, Working with Menu, Menu in WPF, Shortcut Key Menu, Adding Shortcut Key, Menu Shortcut Key, Key Combination in Menu, KeyBinding, Command Binding, ICommand, DataContext, WPF ICommand, Menu Command, Command, Binding, Application Command, Menu Icon, WPF Notepad, Wrap TextBox Text, WPF MenuItem

Id: bdmVWGjpA_8

Length: 44min 21sec (2661 seconds)

Published: Sat Apr 25 2020