Xamarin.Mac'te .storyboard/.xib-less kullanıcı arabirimi tasarımı

  • Makale

Bu makale, .storyboard dosyaları, .xib dosyaları veya Arabirim Oluşturucusu olmadan doğrudan C# kodundan Xamarin.Mac uygulamasının kullanıcı arabirimini oluşturmayı kapsar.

Genel bakış

Xamarin.Mac uygulamasında C# ve .NET ile çalışırken, ve Xcode'da Objective-C çalışan bir geliştiricinin sahip olduğu kullanıcı arabirimi öğelerine ve araçlarına erişebilirsiniz. Genellikle, bir Xamarin.Mac uygulaması oluştururken uygulamanızın kullanıcı arabirimini oluşturmak ve korumak için Xcode'un Arabirim Oluşturucusu'nu .storyboard veya .xib dosyalarıyla kullanırsınız.

Ayrıca Xamarin.Mac uygulamanızın kullanıcı arabiriminin bir kısmını veya tümünü doğrudan C# kodunda oluşturma seçeneğiniz de vardır. Bu makalede, C# kodunda kullanıcı arabirimleri ve kullanıcı arabirimi öğeleri oluşturmanın temellerini ele alacağız.

Mac için Visual Studio kod düzenleyicisi

Kod kullanmak için bir pencereyi değiştirme

Yeni bir Xamarin.Mac Cocoa uygulaması oluşturduğunuzda varsayılan olarak standart bir boş pencere alırsınız. Bu pencereler, projeye otomatik olarak eklenen bir Main.storyboard (veya geleneksel olarak MainWindow.xib) dosyasında tanımlanır. Bu, uygulamanın ana görünümünü (veya geleneksel olarak bir MainWindow.cs ve MainWindowController.cs dosyası) yöneten bir ViewController.cs dosyası da içerir.

Bir uygulamanın Xibless penceresine geçmek için aşağıdakileri yapın:

  1. Kullanıcı arabirimini Mac için Visual Studio tanımlamak için kullanmayı .storyboard durdurmak istediğiniz uygulamayı veya .xib dosyalarını açın.

  2. Çözüm Bölmesi'nde Main.storyboard veya MainWindow.xib dosyasına sağ tıklayın ve Kaldır'ı seçin:

    Ana görsel taslak veya pencereyi kaldırma

  3. Kaldır İletişim Kutusunda Sil düğmesine tıklayarak .storyboard veya .xib dosyasını projeden tamamen kaldırın:

    Silme işlemini onaylama

Şimdi pencerenin düzenini tanımlamak için MainWindow.cs dosyasını değiştirmemiz ve artık .storyboard veya .xib dosyasını kullanmadığımız için sınıfımızın MainWindow bir örneğini oluşturmak için ViewController.cs veya MainWindowController.cs dosyasını değiştirmemiz gerekir.

Kullanıcı arabirimi için Görsel Taslakları kullanan modern Xamarin.Mac uygulamaları otomatik olarak MainWindow.cs, ViewController.cs veya MainWindowController.cs dosyalarını içermeyebilir. Gerektiğinde, projeye yeni bir Boş C# Sınıfı eklemeniz yeterlidir (Yeni Dosya Ekle>...>Genel>Boş Sınıf) yazın ve eksik dosyayla aynı adı verin.

Kodda pencereyi tanımlama

Ardından, MainWindow.cs dosyasını düzenleyin ve aşağıdaki gibi görünmesini sağlayın:

using System;
using Foundation;
using AppKit;
using CoreGraphics;

namespace MacXibless
{
    public partial class MainWindow : NSWindow
    {
        #region Private Variables
        private int NumberOfTimesClicked = 0;
        #endregion

        #region Computed Properties
        public NSButton ClickMeButton { get; set;}
        public NSTextField ClickMeLabel { get ; set;}
        #endregion

        #region Constructors
        public MainWindow (IntPtr handle) : base (handle)
        {
        }

        [Export ("initWithCoder:")]
        public MainWindow (NSCoder coder) : base (coder)
        {
        }

        public MainWindow(CGRect contentRect, NSWindowStyle aStyle, NSBackingStore bufferingType, bool deferCreation): base (contentRect, aStyle,bufferingType,deferCreation) {
            // Define the user interface of the window here
            Title = "Window From Code";

            // Create the content view for the window and make it fill the window
            ContentView = new NSView (Frame);

            // Add UI elements to window
            ClickMeButton = new NSButton (new CGRect (10, Frame.Height-70, 100, 30)){
                AutoresizingMask = NSViewResizingMask.MinYMargin
            };
            ContentView.AddSubview (ClickMeButton);

            ClickMeLabel = new NSTextField (new CGRect (120, Frame.Height - 65, Frame.Width - 130, 20)) {
                BackgroundColor = NSColor.Clear,
                TextColor = NSColor.Black,
                Editable = false,
                Bezeled = false,
                AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.MinYMargin,
                StringValue = "Button has not been clicked yet."
            };
            ContentView.AddSubview (ClickMeLabel);
        }
        #endregion

        #region Override Methods
        public override void AwakeFromNib ()
        {
            base.AwakeFromNib ();

            // Wireup events
            ClickMeButton.Activated += (sender, e) => {
                // Update count
                ClickMeLabel.StringValue = (++NumberOfTimesClicked == 1) ? "Button clicked one time." : string.Format("Button clicked {0} times.",NumberOfTimesClicked);
            };
        }
        #endregion

    }
}

Temel öğelerden birkaçını ele alalım.

İlk olarak, çıkışlar gibi davranacak birkaç Hesaplanan Özellik ekledik (pencere bir .storyboard veya .xib dosyasında oluşturulmuş gibi):

public NSButton ClickMeButton { get; set;}
public NSTextField ClickMeLabel { get ; set;}

Bunlar, pencerede görüntüleyecek olduğumuz kullanıcı arabirimi öğelerine erişmemizi sağlar. Pencere bir .storyboard veya .xib dosyasından şişirilmediğinden, örneğini oluşturmanın bir yolunu bulmalıyız (sınıfta daha sonra MainWindowController göreceğiz). Bu yeni oluşturucu yöntemi bunu yapar:

public MainWindow(CGRect contentRect, NSWindowStyle aStyle, NSBackingStore bufferingType, bool deferCreation): base (contentRect, aStyle,bufferingType,deferCreation) {
    ...
}

Burada pencerenin düzenini tasarlayacak ve gerekli kullanıcı arabirimini oluşturmak için gereken kullanıcı arabirimi öğelerini yerleştireceğiz. Pencereye kullanıcı arabirimi öğeleri ekleyebilmek için önce öğeleri içermesi için bir İçerik Görünümü gerekir:

ContentView = new NSView (Frame);

Bu, pencereyi dolduracak bir İçerik Görünümü oluşturur. Şimdi pencereye ilk kullanıcı arabirimi öğemizi (bir NSButton) ekleyeceğiz:

ClickMeButton = new NSButton (new CGRect (10, Frame.Height-70, 100, 30)){
    AutoresizingMask = NSViewResizingMask.MinYMargin
};
ContentView.AddSubview (ClickMeButton);

Burada dikkat edilmesi gereken ilk şey, iOS'un aksine macOS'un pencere koordinat sistemini tanımlamak için matematiksel gösterimi kullanmasıdır. Dolayısıyla çıkış noktası pencerenin sol alt köşesindedir ve değerler pencerenin sağ üst köşesine doğru artmaktadır. Yeni NSButtonöğesini oluşturduğumuz zaman, ekrandaki konumunu ve boyutunu tanımlarken bunu dikkate alacağız.

özelliği, AutoresizingMask = NSViewResizingMask.MinYMargin pencere dikey olarak yeniden boyutlandırıldığında düğmenin pencerenin en üstünden aynı konumda kalmasını istediğimizi bildirir. (0,0) pencerenin sol alt kısmında olduğundan bu da gereklidir.

Son olarak yöntemi, ContentView.AddSubview (ClickMeButton) uygulama çalıştırıldığında ve pencere görüntülendiğinde ekranda görüntülenmesi için öğesini İçerik Görünümü'ne ekler NSButton .

Daha sonra pencereye tıklandığında kaç kez NSButton tıklandığını gösteren bir etiket eklenir:

ClickMeLabel = new NSTextField (new CGRect (120, Frame.Height - 65, Frame.Width - 130, 20)) {
    BackgroundColor = NSColor.Clear,
    TextColor = NSColor.Black,
    Editable = false,
    Bezeled = false,
    AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.MinYMargin,
    StringValue = "Button has not been clicked yet."
};
ContentView.AddSubview (ClickMeLabel);

macOS'un belirli bir Etiket kullanıcı arabirimi öğesi olmadığından, Etiket işlevi görmesi için özel stile sahip, düzenlenemez NSTextField bir öğe ekledik. Önceki düğmede olduğu gibi boyut ve konum, pencerenin sol alt kısmında (0,0) olduğunu dikkate alır. AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.MinYMargin özelliği, iki NSViewResizingMask özelliği birleştirmek için or işlecini kullanıyor. Bu, pencere dikey olarak yeniden boyutlandırıldığında etiketin pencerenin en üstünde aynı konumda kalmasını ve pencere yatay olarak yeniden boyutlandırıldığından daraltılıp genişliğe doğru büyümesini sağlar.

Yöntem, ContentView.AddSubview (ClickMeLabel) uygulama çalıştırıldığında ve pencere açıldığında ekranda görüntülenmesi için öğesini İçerik Görünümü'ne ekler NSTextField .

Pencere denetleyicisini ayarlama

öğesinin MainWindow tasarımı artık bir .storyboard veya .xib dosyasından yüklenmediğinden, pencere denetleyicisinde bazı ayarlamalar yapmamız gerekir. MainWindowController.cs dosyasını düzenleyin ve aşağıdaki gibi görünmesini sağlayın:

using System;

using Foundation;
using AppKit;
using CoreGraphics;

namespace MacXibless
{
    public partial class MainWindowController : NSWindowController
    {
        public MainWindowController (IntPtr handle) : base (handle)
        {
        }

        [Export ("initWithCoder:")]
        public MainWindowController (NSCoder coder) : base (coder)
        {
        }

        public MainWindowController () : base ("MainWindow")
        {
            // Construct the window from code here
            CGRect contentRect = new CGRect (0, 0, 1000, 500);
            base.Window = new MainWindow(contentRect, (NSWindowStyle.Titled | NSWindowStyle.Closable | NSWindowStyle.Miniaturizable | NSWindowStyle.Resizable), NSBackingStore.Buffered, false);

            // Simulate Awaking from Nib
            Window.AwakeFromNib ();
        }

        public override void AwakeFromNib ()
        {
            base.AwakeFromNib ();
        }

        public new MainWindow Window {
            get { return (MainWindow)base.Window; }
        }
    }
}

Bu değişikliğin temel öğelerini tartışalım.

İlk olarak, sınıfın MainWindow yeni bir örneğini tanımlayacak ve bunu temel pencere denetleyicisinin Window özelliğine atayacağız:

CGRect contentRect = new CGRect (0, 0, 1000, 500);
base.Window = new MainWindow(contentRect, (NSWindowStyle.Titled | NSWindowStyle.Closable | NSWindowStyle.Miniaturizable | NSWindowStyle.Resizable), NSBackingStore.Buffered, false);

Ekran penceresinin konumunu ile CGRecttanımlarız. Pencerenin koordinat sistemi gibi, ekran da sol alt köşe olarak (0,0) tanımlar. Ardından, iki veya daha fazla NSWindowStyle özelliği birleştirmek için Or işlecini kullanarak pencerenin stilini tanımlayacağız:

... (NSWindowStyle.Titled | NSWindowStyle.Closable | NSWindowStyle.Miniaturizable | NSWindowStyle.Resizable) ...

Aşağıdaki NSWindowStyle özellikler kullanılabilir:

  • Kenarlıksız - Pencerede kenarlık olmaz.
  • Başlıklı - Pencerede başlık çubuğu bulunur.
  • Kopyalanabilir - Pencerede Kapat Düğmesi vardır ve kapatılabilir.
  • Simge durumuna küçültülebilir - Pencerede Simge Durumuna Küçült Düğmesi vardır ve simge durumuna küçültülebilir.
  • Yeniden boyutlandırılabilir - Pencerede Yeniden Boyutlandır Düğmesi bulunur ve yeniden boyutlandırılabilir.
  • Yardımcı Program - Pencere bir Yardımcı Program stili penceresidir (panel).
  • DocModal - Pencere bir Panel ise, Sistem Kalıcı yerine Belge Kalıcı olur.
  • NonactivatingPanel - Pencere bir Panel ise, ana pencere yapılmaz.
  • TexturedBackground - Pencerede dokulu bir arka plan bulunur.
  • Ölçeklendirilmemiş - Pencere ölçeklendirilmeyecek.
  • UnifiedTitleAndToolbar - Pencerenin başlık ve araç çubuğu alanları birleştirilir.
  • Hud - Pencere, uyarı ekranı Paneli olarak görüntülenir.
  • FullScreenWindow - Pencere tam ekran moduna girebilir.
  • FullSizeContentView - Pencerenin içerik görünümü başlık ve araç çubuğu Alanının arkasındadır.

Son iki özellik pencere için Arabelleğe Alma Türünü tanımlar ve pencerenin çizimi ertelenecekse. hakkında NSWindowsdaha fazla bilgi için lütfen Apple'ın Windows'a Giriş belgelerine bakın.

Son olarak, pencere bir .storyboard veya .xib dosyasından şişirilmediğinden, windows AwakeFromNib yöntemini çağırarak MainWindowController.cs simülasyonunu yapmamız gerekir:

Window.AwakeFromNib ();

Bu, .storyboard veya .xib dosyasından yüklenen standart bir pencere gibi pencereye karşı kod oluşturmanıza olanak sağlar.

Pencereyi görüntüleme

.storyboard veya .xib dosyası kaldırıldıktan ve MainWindow.cs ve MainWindowController.cs dosyaları değiştirildiğinde, aynı Xcode'un Arabirim Oluşturucusu'nda .xib dosyasıyla oluşturulmuş normal pencerelerde olduğu gibi pencereyi kullanıyor olacaksınız.

Aşağıdakiler pencerenin ve denetleyicisinin yeni bir örneğini oluşturur ve pencereyi ekranda görüntüler:

private MainWindowController mainWindowController;
...

mainWindowController = new MainWindowController ();
mainWindowController.Window.MakeKeyAndOrderFront (this);

Bu noktada, uygulama çalıştırılırsa ve düğme birkaç kez tıklanırsa, aşağıdakiler görüntülenir:

Örnek bir uygulama çalıştırması

Yalnızca kod ekleme penceresi

Mevcut bir Xamarin.Mac uygulamasına yalnızca xibless penceresi eklemek istiyorsak Çözüm Bölmesi'nde projeye sağ tıklayın ve Yeni Dosya Ekle>... seçeneğini belirleyin. Yeni Dosya iletişim kutusunda, aşağıda gösterildiği gibi Denetleyicili Xamarin.Mac>Cocoa Penceresi'ni seçin:

Yeni pencere denetleyicisi ekleme

Daha önce olduğu gibi, varsayılan .storyboard veya .xib dosyasını projeden silecek (bu örnekte SecondWindow.xib) ve pencerenin kod tanımını kapsayacak şekilde yukarıdaki Kod kullanmak için Pencere Değiştirme bölümündeki adımları uygulayacağız.

Koddaki bir pencereye kullanıcı arabirimi öğesi ekleme

İster kodda bir pencere oluşturuldu, ister bir .storyboard veya .xib dosyasından yüklendi, bazen koddan bir pencereye kullanıcı arabirimi öğesi eklemek isteyebiliriz. Örneğin:

var ClickMeButton = new NSButton (new CGRect (10, 10, 100, 30)){
    AutoresizingMask = NSViewResizingMask.MinYMargin
};
MyWindow.ContentView.AddSubview (ClickMeButton);

Yukarıdaki kod yeni NSButton bir oluşturur ve görüntülemek üzere pencere örneğine MyWindow ekler. Temel olarak Xcode'un Arabirim Oluşturucusu'nda bir .storyboard veya .xib dosyasında tanımlanabilen tüm ui öğeleri kodda oluşturulabilir ve bir pencerede görüntülenebilir.

Kodda menü çubuğunu tanımlama

Xamarin.Mac'teki geçerli sınırlamalar nedeniyle, Xamarin.Mac uygulamanızın Menü Çubuğu–NSMenuBarin kodunu oluşturmanız ancak tanımlamak için Main.storyboard veya MainMenu.xib dosyasını kullanmaya devam ettiğiniz önerilmez. Bu, C# kodunda Menüler ve Menü Öğeleri ekleyip kaldırabilirsiniz.

Örneğin, AppDelegate.cs dosyasını düzenleyin ve yönteminin aşağıdaki gibi görünmesini sağlayınDidFinishLaunching:

public override void DidFinishLaunching (NSNotification notification)
{
    mainWindowController = new MainWindowController ();
    mainWindowController.Window.MakeKeyAndOrderFront (this);

    // Create a Status Bar Menu
    NSStatusBar statusBar = NSStatusBar.SystemStatusBar;

    var item = statusBar.CreateStatusItem (NSStatusItemLength.Variable);
    item.Title = "Phrases";
    item.HighlightMode = true;
    item.Menu = new NSMenu ("Phrases");

    var address = new NSMenuItem ("Address");
    address.Activated += (sender, e) => {
        Console.WriteLine("Address Selected");
    };
    item.Menu.AddItem (address);

    var date = new NSMenuItem ("Date");
    date.Activated += (sender, e) => {
        Console.WriteLine("Date Selected");
    };
    item.Menu.AddItem (date);

    var greeting = new NSMenuItem ("Greeting");
    greeting.Activated += (sender, e) => {
        Console.WriteLine("Greetings Selected");
    };
    item.Menu.AddItem (greeting);

    var signature = new NSMenuItem ("Signature");
    signature.Activated += (sender, e) => {
        Console.WriteLine("Signature Selected");
    };
    item.Menu.AddItem (signature);
}

Yukarıdaki koddan bir Durum Çubuğu menüsü oluşturur ve uygulama başlatıldığında bu menüyü görüntüler. Menülerle çalışma hakkında daha fazla bilgi için lütfen Menüler belgelerimize bakın.

Özet

Bu makalede, Xcode'un Arabirim Oluşturucusu'nu .storyboard veya .xib dosyalarıyla kullanmanın aksine, C# kodunda Xamarin.Mac uygulamasının kullanıcı arabirimini oluşturma işlemi ayrıntılı olarak ele alınmıştır.