{"id":1401,"date":"2022-09-29T18:56:21","date_gmt":"2022-09-30T00:56:21","guid":{"rendered":"https:\/\/www.great-white-software.com\/blog\/?p=1401"},"modified":"2022-09-29T18:56:21","modified_gmt":"2022-09-30T00:56:21","slug":"adding-menubar-controls-in-c","status":"publish","type":"post","link":"https:\/\/www.great-white-software.com\/blog\/2022\/09\/29\/adding-menubar-controls-in-c\/","title":{"rendered":"Adding menubar & controls in C#"},"content":{"rendered":"\n

For all of you following along YEAH its about damned time !<\/strong> \ud83d\ude42
I agree

I’ve been proceeding slowly to make it so you can follow and not try to cram 10000 items in one post (we ARE trying to keep it manageable)

First Lets remove the last bits of “cruft” left in our getting starting project
Since we’re not actually using a normal macOS document application we can delete the ViewController.cs<\/em> and ViewController.designer.cs<\/em>
Simply right click on ViewController.cs <\/em>and select delete.
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

You’ll get a dialog asking if you want to delete the view controller and its “code behind children” <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Select Delete<\/em> and both will be removed. Your should still be able to run your application.

Now on to the fun stuff !<\/p>\n\n\n\n

First lets add a menu bar so we have a normal Quit menu Item in it \ud83d\ude1b<\/p>\n\n\n\n

Start by adding a new class (almost everything in our C# world is an actual class)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We end up with an empty class that we need to edit to set up properly.<\/p>\n\n\n\n

We’re using an actual macOS NSMenu here – so we need to add the AppKit using clause so the IDE & compiler know about this in our class. And we’ll make our AppMenu class a subclass of NSMenu<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We’ll want to add & retain references to certain menu items – note this doesnt mean you cant handle dynamic menus. Just that there are some, like the Quit menu item, that we dont need to deal with dynamically. So we can add a property to our class to hold this reference when we create it<\/p>\n\n\n\n

    public class AppMenu : NSMenu\n    {\n        public static MenuItem QuitMenuItem;\n<\/code><\/pre>\n\n\n\n
And we’ll want to alter the Constructor (the method named the same as the class) so it takes one parameter – the menus TITLE<\/p>\n\n\n\n
public class AppMenu : NSMenu\n{\n        public static MenuItem QuitMenuItem;\n\n        public AppMenu(string title) : base(title)\n        { }\n<\/code><\/pre>\n\n\n\n
The AppMenu method is new so requires some explanation. The first portion public AppMenu(string title)<\/code> is just like any other method you’ve ever seen. It has a scope public<\/strong><\/em>, a name AppMenu<\/strong><\/em>, and a list of parameters string title<\/strong><\/em>. But then there is <\/em>: base(title)<\/em> <\/strong>which in C# is shorthand for “call the super class constructor method that takes a string parameter”<\/p>\n\n\n\n
So just by declaring the method this way you have created the constructor and call the super class constructor. But so far it doesnt do anything – the empty {} is the give away.<\/p>\n\n\n\n
When an app start we need to create the “Application Menu” and add whatever items to it we want. On macOS the OS may add some of its own.<\/p>\n\n\n\n
So we’ll create that menu and make it have a Quit item in it.<\/p>\n\n\n\n
public AppMenu(string title) : base(title)\n{\n  \/\/ Application top level Menu\n  var appMenu = new NSMenuItem(); \/\/ create the top item for Application\n  appMenu.Submenu = new NSMenu(); \/\/ add a sub menu\n\n  QuitMenuItem = new MenuItem(\"Quit\", \"q\"); \/\/ create the QUIT item\n\n  \/\/ create and set the ARRAY of items to a NEW ARRAY containing\n  \/\/ our newly created QuitMenuItem\n  appMenu.Submenu.Items = new[]\n  {\n    QuitMenuItem\n  };\n\n  \/\/ THIS is like ME or SELF\n  \/\/ here this means the app menu itself\n  this.Items = new[] { appMenu };\n}<\/code><\/pre>\n\n\n\n
This will create the menu – but doesnt “attach” it to our application yet. So if you run right now you wont see this code get run. <\/p>\n\n\n\n
You can test this by setting a breakpoint in the code. There are several ways to achieve this. By default pressing CMD+\\ will toggle a break point on the line containing the insertion point. Or you can click in the break point gutter <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
When you run you will see that break point is NEVER reached.
So lets fix that.

Open up the AppDelegate.cs<\/em><\/p>\n\n\n\n
When an applications starts up, just like in Xojo, you will see the constructor get called, followed by the app “Opening”. In this case we’re going to set up the menu, and “menu handlers” in the Opening event (its not really an event in this framework but thats what it would be in Xojo)<\/p>\n\n\n\n
So – how to know what the method we need to implement might be named ?
We could guess. That might take a long time. 
I could tell you but I might not be around all the time \ud83d\ude42
Or we can just go look<\/p>\n\n\n\n
In AppDelegate right click on “Application” in the line<\/p>\n\n\n\n
\tpublic class App : Application\n<\/code><\/pre>\n\n\n\n
and select “Goto definition”<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
There s a lot of stuff in here. But what we want so see is which methods are declared PUBLIC VIRTUAL<\/em><\/strong>. Why ? thee are ones that are defined to be implemented in a subclass. They are quite literally meant to be overridden.<\/p>\n\n\n\n
And there are several of interest to us right now<\/p>\n\n\n\n
protected virtual void Opened ()\n\nprotected virtual void Opening ()\n\nprotected virtual void Closing ()<\/code><\/pre>\n\n\n\n
There are others but these are the ones we care about right now<\/p>\n\n\n\n
Opening is called right after the application instance is created. This is usually before anything else is seen.
Opened is called when the application has successfully started.
Closing is called before the app closes.
<\/p>\n\n\n\n
So since we want to attach out menu when the app is about to show its first window we’ll implement Opening. Copy the declaration and paste it into AppDelegate.cs<\/em> after the existing App method. And yes type in a {} following it to indicate the method has no code yet.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
One thing we need to do is alter the signature of the method to lets the compiler know that our application subclass has overridden the super class Opening event. To do that we need to change the VIRTUAL to OVERRIDE in the method signature.
<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n

To add the menu to our application its one line of code<\/p>\n\n\n\n
      NSApplication.SharedApplication.MainMenu = new AppMenu(\"Test\");<\/code><\/pre>\n\n\n\n
Note there are STILL no attached menu handlers ; but if you run and select the application menu you should see there IS a Quit menu item there<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For the Quit menu item we’re going to add that one to the Application – unlike others which might need to be attached to a specific window or control.<\/p>\n\n\n\n
To do this we write whatever method we want to be called when the quit menu item is selected. And then we tell the application what menu item should call this method when we select it.<\/p>\n\n\n\n
First lets write the method to call when the menu item is selected.<\/p>\n\n\n\n
We can, quite literally, name it just about ANYTHING we want. But, picking good names is useful so we’ll create a method in the AppDelegate.cs<\/em> named QuitMenuitem_Action<\/em> which I hope is indicative of what this will do \ud83d\ude1b 
This method doesnt return anything, so its return type should be void<\/em>.
It DOES get called with two parameters – one, the sender<\/em>, which is of type object, and the event arguments, of type EventArgs<\/em>.

So our method signature should look like
<\/p>\n\n\n\n
  void QuitMenuItem_Action(object sender, EventArgs e)<\/code><\/pre>\n\n\n\n
followed by a pair of empty { }<\/p>\n\n\n\n
And the ONLY code that needs to be in here is a call to, you guessed it, Quit<\/p>\n\n\n\n
void QuitMenuItem_Action(object sender, EventArgs e)\n{\n      Quit();\n}<\/code><\/pre>\n\n\n\n
To make it so the App menu item, Quit, runs this code when the item is selected we ned to attach the two. It makes sense to do this in the same spot we created the menu.<\/p>\n\n\n\n
If you want you can look in the definition of Application again. 
There you will see that Application has a dictionary of menu handlers.
The key<\/em> is the menu item, and the value<\/em> is the method to call.
So we can set the Application.MenuHandlers using code like
<\/p>\n\n\n\n
 MenuHandlers = new Dictionary<MenuItem, EventHandler<MenuEventArgs>>()\n {\n   { AppMenu.QuitMenuItem,  QuitMenuItem_Action}\n };<\/code><\/pre>\n\n\n\n
This few lines is VERY dense but we can make sense of it<\/p>\n\n\n\n
MenuHandlers<\/em> is a property on Application we’re going to set to
a new<\/em> Dictionary<\/em>
But what’s all the rest of <MenuItem, EventHandler<MenuEventArgs>><\/strong><\/em> ?
The difference here, unlike Xojo, is that we can EXPLICITLY TYPE what the key<\/em> and value<\/em> MUST be. Xojo’s dictionary only uses variants so strong typing of dictionaries isn’t possible. C# directly supports strong typing of the keys & values.
So this Dictionary<MenuItem, EventHandler<MenuEventArgs>><\/strong><\/em> says we are creating a dictionary that uses MenuItem<\/strong><\/em> for keys and the values are  EventHandler <\/strong><\/em>that get  MenuEventArgs<\/strong><\/em> as their parameters. Absolutely unambiguous what can go in there.

And the following <\/p>\n\n\n\n
 { AppMenu.QuitMenuItem,  QuitMenuItem_Action}<\/code><\/pre>\n\n\n\n
adds one item to that dictionary with the Quit menu item as the key and our brand new method we just wrote as the menu item handler.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Now if you run and select Quit from the application menu your app should now quit.
Simple stuff to do in Xojo – and it is here as well but the explanation of how this all works takes time & images \ud83d\ude42<\/p>\n\n\n\n
And now as promised<\/p>\n\n\n\n
ADDING CONTROLS !!!!!!<\/strong><\/p>\n\n\n\n
We can close the AppDeletage now as we dont need to make any more changes there for now.<\/p>\n\n\n\n
Adding controls & event handlers is all done in the MainWindow.cs we created before. Open that now.<\/p>\n\n\n\n
Just like with Application where we perused the framework class to see how things worked we’ll go look at the Window<\/em> class. This class is MUCH more complex than the last we looked at. But again we are looking for protected virtual methods that are ones we can override to add functionality to our Window subclass.<\/p>\n\n\n\n
The one we will override is<\/p>\n\n\n\n
protected virtual IEnumerable<Control> SetupControls ()\n{\n    return new Control[0];\n}<\/code><\/pre>\n\n\n\n
The implementation in place creates an empty array of controls. Copy the declaration and we’ll paste that into our Window subclass.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Again we need to change virtual<\/em> to override<\/em> so the compiler knows we’re stating this method overrides the one in the baes class.<\/p>\n\n\n\n
In our Window we will usually, but not always, want to declare a variable to hold a reference to a control. If we want to refer to that control in other code, event handlers, etc it’s easier to keep a reference to the control than it is to dynamically find it on the layout all the time.<\/p>\n\n\n\n
So we’ll add a property to our subclass<\/p>\n\n\n\n
 TextField textfield;<\/code><\/pre>\n\n\n\n
I’d put this declaration right after the declaration of the subclass<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Note that we CAN also alter the visibility of this by prefacing it with private ( or any of the many others that exist in C# https:\/\/learn.microsoft.com\/en-us\/dotnet\/csharp\/language-reference\/keywords\/accessibility-levels) Public, protected and private are all very similar to how Xojo uses them. <\/p>\n\n\n\n
The code in SetupControls then has to create the control with its initial set up and add it to the window.<\/p>\n\n\n\n
Creating a new control is about what you would expect. You use the NEW keyword and the classname. You can browse the framework to see what constructors are available. Some controls have several. Most however have a nice easy one that takes 4 coordinates for the left, top, width and height. We’ll use that one :<\/p>\n\n\n\n
   textfield = new TextField( 10, 23, 80,  23);<\/code><\/pre>\n\n\n\n
And we can also fill the field with some text<\/p>\n\n\n\n
   textfield.Text = \"not edit no select\";<\/code><\/pre>\n\n\n\n
And now we just have to return the right kind of item. 
IEnumerable is an INTERFACE – exactly like in Xojo.
And it just so happens that an array implements that interface !
So we can return a new array of controls like<\/p>\n\n\n\n
  return new Control[] { textfield };<\/code><\/pre>\n\n\n\n
Now if you run you will find you can edit the text in the textfield.
Cut copy and paste wont work just yet as there is no EDIT menu and the OS relies on that existing to make the textfield work as expected. 
<\/p>\n\n\n\n
I’ll leave adding that as an exercise \ud83d\ude42

Tinker around and see what other control you can work with and test things out.
Note theres lot there but not all are 100% complete <\/p>\n\n\n\n
The project so far<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
For all of you following along YEAH its about damned time ! \ud83d\ude42I agree I’ve been proceeding slowly to make it so you can follow and not try to cram 10000 items in one post (we ARE trying to keep it manageable) First Lets remove the last bits of “cruft” left in our getting starting … <\/p>\n
Continue reading “Adding menubar & controls in C#”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[34],"class_list":["post-1401","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-csharp"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/posts\/1401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/comments?post=1401"}],"version-history":[{"count":1,"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/posts\/1401\/revisions"}],"predecessor-version":[{"id":1418,"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/posts\/1401\/revisions\/1418"}],"wp:attachment":[{"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/media?parent=1401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/categories?post=1401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.great-white-software.com\/blog\/wp-json\/wp\/v2\/tags?post=1401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}