NSTabView in Xamarin.Mac

abhishekm

I am trying to implement tab control in Xamarin.Mac, programmatically(i.e. without the interface builder). Would like to show 2 NSViews in 2 tabs inside the window. Looked at different documentations but could not find a proper solution on this. Can someone help with a sample implementation of NSTabView/NSTabViewcontroller using Xamarin.Mac ? Or point to a sample implementation if available?

ColeX

Sorry i misunderstood, here is sample for NSTabView .

  this.View.TranslatesAutoresizingMaskIntoConstraints = false;

        NSTabView tabView = new NSTabView();
        this.View.AddSubview(tabView);


        //add tab
        NSTabViewItem item1 = new NSTabViewItem();
        item1.Identifier = new NSString("Tab1");
        item1.Label = "Tab1";
        tabView.Add(item1);

        NSTabViewItem item2 = new NSTabViewItem();
        item2.Identifier = new NSString("Tab2");
        item2.Label = "Tab2";
        tabView.Add(item2);

         tabView.DidSelect += (sender, e)=> {

            if(e.Item.Identifier.ToString() == "Tab1")
            {

            }
            else if (e.Item.Identifier.ToString() == "Tab2")
            {

            }
        };


        tabView.TranslatesAutoresizingMaskIntoConstraints = false;
        this.View.AddConstraint(NSLayoutConstraint.Create(tabView, NSLayoutAttribute.Left, NSLayoutRelation.Equal, this.View,NSLayoutAttribute.Left, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(tabView, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Top, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(tabView, NSLayoutAttribute.Right, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Right, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(tabView, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Bottom, 1, 0));

ColeX

which is recommended to use - NSTabView or NSTabViewController ?

It depends on the scenarios you met , NSTabViewController is more Convenient, it has a in-built TabView , you do not have to initialize it at first ,but i prefer to use NSTabView in NSViewContoller , it is more flexible .

ColeX

Refer to https://gist.github.com/wozuo/53a475e67dd11c60cfb1e4f62ea91d32, i convert it from swift to c# .

public class MyDelegate: NSTableViewDelegate
{

    [Export("tableView:rowViewForRow:")]
    public NSTableRowView CoreGetRowView(NSTableView tableView, nint row)
    {

        var rowView = new NSTableRowView();
        rowView.Emphasized = false;

        return rowView;
    }

    [Export("tableView:viewForTableColumn:row:")]
    public NSView GetViewForItem(NSTableView tableView, NSTableColumn tableColumn, nint row)
    {
        NSTableCellView cell = new NSTableCellView();

        NSTextField text = new NSTextField() { StringValue = "Hello" };

        text.DrawsBackground = false;
        text.Bordered = false;
        text.TranslatesAutoresizingMaskIntoConstraints = false;
        text.TextColor = NSColor.Black;

        cell.AddSubview(text );


        cell.AddConstraint(NSLayoutConstraint.Create(text, NSLayoutAttribute.CenterY, NSLayoutRelation.Equal, cell, NSLayoutAttribute.CenterY, 1, 0));
        cell.AddConstraint(NSLayoutConstraint.Create(text, NSLayoutAttribute.Left, NSLayoutRelation.Equal, cell, NSLayoutAttribute.Left, 1, 13));
        cell.AddConstraint(NSLayoutConstraint.Create(text, NSLayoutAttribute.Right, NSLayoutRelation.Equal, cell, NSLayoutAttribute.Right, 1, -13));

        return cell;

    }



    [Export("tableView:heightOfRow:")]
    public nfloat GetRowHeight(NSTableView tableView, nint row)
    {
        return 100;
    }

}


public class MyDataSource : NSTableViewDataSource
{

    [Export("numberOfRowsInTableView:")]
    public nint GetRowCount(NSTableView tableView)
    {
        return 100;
    }


}

public partial class ViewController : NSViewController 
{
    public ViewController(IntPtr handle) : base(handle)
    {
    }



    NSScrollView scrollView = new NSScrollView();
    NSTableView tableView = new NSTableView();

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        // Do any additional setup after loading the view.


        this.View.TranslatesAutoresizingMaskIntoConstraints = false;
        //this.View.AddConstraint( NSLayoutConstraint.Create(this.View,NSLayoutAttribute.Width,NSLayoutRelation.Equal,1,200));

        this.View.AddSubview(scrollView);

        this.scrollView.TranslatesAutoresizingMaskIntoConstraints = false;
        this.View.AddConstraint(NSLayoutConstraint.Create(scrollView, NSLayoutAttribute.Left, NSLayoutRelation.Equal, this.View,NSLayoutAttribute.Left, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(scrollView, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Top, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(scrollView, NSLayoutAttribute.Right, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Right, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(scrollView, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Bottom, 1, 0));


        tableView.Frame = scrollView.Bounds;

        tableView.DataSource = new MyDataSource();
        tableView.Delegate = new MyDelegate();

        tableView.HeaderView = null;
        scrollView.BackgroundColor = NSColor.Clear;
        scrollView.DrawsBackground = false;
        tableView.BackgroundColor = NSColor.Clear;


        var col =  new NSTableColumn(identifier:"col");
        col.MinWidth = 200;
        tableView.AddColumn(col);
        tableView.ReloadData();


        scrollView.DocumentView = tableView;
        scrollView.HasHorizontalScroller = false;
        scrollView.HasVerticalScroller = true;
    }




    public override NSObject RepresentedObject
    {
        get
        {
            return base.RepresentedObject;
        }
        set
        {
            base.RepresentedObject = value;
            // Update the view, if already loaded.
        }
    }
}

abhishekm

@ColeX : Thanks for the prompt response. However, I was looking for "tab" control(using NSTabView or NSTabViewController). The code you shared is for table view. Could you share a sample for NSTabView/NSTabViewController ? Also, which is recommended to use - NSTabView or NSTabViewController ?

ColeX

Sorry i misunderstood, here is sample for NSTabView .

  this.View.TranslatesAutoresizingMaskIntoConstraints = false;

        NSTabView tabView = new NSTabView();
        this.View.AddSubview(tabView);


        //add tab
        NSTabViewItem item1 = new NSTabViewItem();
        item1.Identifier = new NSString("Tab1");
        item1.Label = "Tab1";
        tabView.Add(item1);

        NSTabViewItem item2 = new NSTabViewItem();
        item2.Identifier = new NSString("Tab2");
        item2.Label = "Tab2";
        tabView.Add(item2);

         tabView.DidSelect += (sender, e)=> {

            if(e.Item.Identifier.ToString() == "Tab1")
            {

            }
            else if (e.Item.Identifier.ToString() == "Tab2")
            {

            }
        };


        tabView.TranslatesAutoresizingMaskIntoConstraints = false;
        this.View.AddConstraint(NSLayoutConstraint.Create(tabView, NSLayoutAttribute.Left, NSLayoutRelation.Equal, this.View,NSLayoutAttribute.Left, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(tabView, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Top, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(tabView, NSLayoutAttribute.Right, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Right, 1, 0));
        this.View.AddConstraint(NSLayoutConstraint.Create(tabView, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, this.View, NSLayoutAttribute.Bottom, 1, 0));

ColeX

which is recommended to use - NSTabView or NSTabViewController ?

It depends on the scenarios you met , NSTabViewController is more Convenient, it has a in-built TabView , you do not have to initialize it at first ,but i prefer to use NSTabView in NSViewContoller , it is more flexible .

abhishekm

@ColeX : Thank you ! This helps :-)