Help link to develop the wizard using NSView

[GanesanRengasamy]

Hi @mrward,

Thanks for your sample. Here you are using the NSView for wizard development with the example label and textbox. But for us we need to add button, checkbox, combo box and etc.. to customize our extension wizard. Could you please share any help document to understand and use the NSVIew to customize the wizard as per our need. It will very helpful.

Thanks,
Ganesan R.

[mrward]

I would take a look at the xamarin.mac samples:

https://github.com/xamarin/mac-samples

Although this is for classic xamarin.mac, whilst VS Mac uses Microsoft.macOS, the samples are still relevant.

I have some native macOS UI code in some of my extensions under my github account. One example is the Library Manager dialog.

https://github.com/mrward/LibraryManager/blob/3a4733d3cb008a8d51f91bad2a0b0b8cc5a7351b/src/MonoDevelop.LibraryManager/UI/InstallDialog.UI.cs

This dialog has a text field, radio buttons, and a combo box.

For a check box you can do something like:

    bool isChecked = false;
    var checkBox = new NSButton();
    checkBox.TranslatesAutoresizingMaskIntoConstraints = false;
    checkBox.SetButtonType(NSButtonType.Switch);
    checkBox.State = isChecked ? NSCellStateValue.On : NSCellStateValue.Off;

[GanesanRengasamy]

Hi @mrward

Thanks for the update. Could you please suggest me how to change the style like Font size, family, margin. Also, how to changes width and height of the every controls?

[mrward]

The UI control typically have a Font property.

checkBox.Font = NSFont.BoldSystemFontOfSize(NSFont.SystemFontSize);

For control widths you can use constraints if you set TranslatesAutoresizingMaskIntoConstraints to false on the control. Whilst the library manager uses leading/trailing constraints you can also set the width/heights.

(https://github.com/mrward/LibraryManager/blob/3a4733d3cb008a8d51f91bad2a0b0b8cc5a7351b/src/MonoDevelop.LibraryManager/UI/InstallDialog.UI.cs#L261

https://github.com/mono/monodevelop/blob/ba01d2d6d3c84e92a6b5f360dac76ee821547529/main/src/addins/MonoDevelop.Debugger/MonoDevelop.Debugger.VSTextView/QuickInfo/MacDebuggerTooltipWindow.cs#L73-L76

[GanesanRengasamy]

Thanks, Could you please share the suggestion for the below cases

I have used the popup button as combo box as you suggested, But how to give the custom selected index or value while loading UI. In this popup button it's shown the list of starting value, but I need to give some other value from the list as default selected value.

How to provide the custom size instead of provide the SystemFontSize?

How to add the vertical separator and tree view with the checkbox options?

How can we align the UI as per our need?

[mrward]

But how to give the custom selected index or value while loading UI. In this popup button it's shown the list of starting value, but I need to give some other value from the list as default selected value.

NSPopupButton has a SelectItem method that takes an index.

How to provide the custom size instead of provide the SystemFontSize?

NSFont.SystemFontOfSize takes an NFloat so you can provide any value you want.

How to add the vertical separator and tree view with the checkbox options?

Not sure what you mean by vertical separator? I would take a look at the NSSplitView if you want a separator you can reposition. I do not have any examples of that.

TreeView sample - https://learn.microsoft.com/en-us/samples/xamarin/mac-samples/nsoutlineviewandtableview/

How can we align the UI as per our need?
Not sure what is being asked here.

[GanesanRengasamy]

TreeView sample - https://learn.microsoft.com/en-us/samples/xamarin/mac-samples/nsoutlineviewandtableview/

Any sample available like you have already shared for other controls?

Not sure what you mean by vertical separator?
How can we align the UI as per our need?

Please check the below image (This is my overall UI). Here I have added the Horizontal separator line with the use of the NSBox. But I can't convert this as Vertical separator line. Also, here label and checkboxes is not aligned properly even I have set the EdgeInsets for every stackview. Any suggestions on this?

Any way to implement the listview since I want to create the UI like below for my ItemTemplate extension?

[mrward]

Without seeing the code I can only guess.

The difference between a horizontal and vertical separator is based on position and height vs width. You should try different constraints. From the screenshot I can only guess that you added it to the stack view which is not going to work.

For the check box and label alignments you will probably have to try different constraints until things align how you want.

For a list view, like in the New File dialog, you can take a look at the xamarin.mac NSOutlineView sample - https://learn.microsoft.com/en-us/samples/xamarin/mac-samples/nsoutlineviewandtableview/ - to understand how a list view works.

[Kesavaraman123]

Hi @mrward ,

Could you please share the suggestion for the below cases:

1. I have collection of CheckBoxes in Treeview that is added to stackview and I need to create a Scroll Bar for those
   checkboxes using NSView. Could you please provide suggestion on this to create Scroll Bar using NSView?

2. I have created a ComboBox using NsPopUpButton() and created a CheckBox using NSButton(), I need to write a
   function for ComboBox and CheckBox. Could you please provide suggestion on this?

[mrward]

1. You should be able to create an NSScrollView. Example here - https://learn.microsoft.com/en-us/samples/xamarin/mac-samples/nsscrollexample/
2. Can you provide more information here? I am not really sure what the problem is.

[Kesavaraman123]

Hi @mrward,

Could you please share the suggestion for the below case?

I have created a checkbox using NSButton() and created a comboBox using NSPopupButton(). I need to write a function for the comboBox that determines the selected value, and for the checkbox, I need to write a function that determines whether it is in the checked or unchecked state. Could you please provide suggestion on this?

Regards,
V.Kesavaraman

[mrward]

• nspopupButton.IndexOfSelectedItem returns the index of the selected item
• nspopupButton.TitleOfSelectedItem returns the string for the selected item
• nsButton.State determines if the button is checked or not. The value is NSCellStateValue.On or NSCellStateValue.Off.

[Kesavaraman123]

Hi @mrward ,

In the provided sample you have handled the event for ProjectNameTextField as in below image. You gave like 'projectNameTextField.Changed' same like that I tried to write a event for ComboBox and CheckBox but it not works. Could you please provide suggestion for this?

Thanks,
V.Kesavaraman

[mrward]

NSPopupButton and NSButton both have an Activated event that will be raised when they are clicked.

[Kesavaraman123]

Hi @mrward ,

Thanks! Event handling works fine by using 'Activated'. Now, I have tried to create a ScrollBar using NSScrollBar() but I not able to create within collection of checkbox. Can you able to give sample or sample code with collection of 5 or more CheckBoxes in TreeView with Scroller? It will be helpful to us.

Thanks,
V.Kesavaraman

[Kesavaraman123]

@mrward - Any update on the above query? Please provide us a suggestion for this, it will be very helpful to us.