Xamarin. Mac 'te. Storyboard/. XIB-Less Kullanıcı arabirimi tasarımı

Makale
12/02/2021
Okumak için 8 dakika

Bu makalede, bir Xamarin. Mac uygulamasının Kullanıcı arabirimini doğrudan C# kodundan,. görsel taslak dosyaları,. XIB dosyaları veya Interface Builder olmadan oluşturma konuları ele alınmaktadır.

Genel Bakış

Xamarin. Mac uygulamasında C# ve .NET ile çalışırken, Objective-C ve Objective-C üzerinde çalışan bir geliştiricinin kullandığı aynı 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 bakımını yapmak için Xcode 'un. Storyboard veya. XIB dosyaları ile birlikte Interface Builder kullanırsınız.

Ayrıca, Xamarin. Mac uygulamanızın kullanıcı arabirimini C# kodunda doğrudan oluşturma seçeneğiniz de vardır. Bu makalede, C# kodunda Kullanıcı arabirimleri ve UI öğeleri oluşturmaya ilişkin temel bilgiler ele alınacaktır.

Kodu kullanmak için bir pencere değiştirme

Yeni bir Xamarin. Mac Cocoa uygulaması oluşturduğunuzda, varsayılan olarak standart bir boş pencere alırsınız. Bu pencere, projeye otomatik olarak eklenen bir ana. görsel taslak (veya geleneksel olarak bir MainWindow. XIB) dosyasında tanımlanmıştır. Bu Ayrıca, uygulamanın ana görünümünü (veya geleneksel olarak bir MainWindow. cs ve bir mainwindowcontroller. cs dosyası) yöneten bir ViewController. cs dosyası içerir.

Bir uygulama için bir Xibless penceresine geçiş yapmak için aşağıdakileri yapın:

.storyboardMac için Visual Studio ' de kullanıcı arabirimini tanımlamak için veya. xıb dosyalarını kullanmayı durdurmak istediğiniz uygulamayı açın.
Çözüm bölmesiana. görsel taslağa veya MainWindow. XIB dosyasına sağ tıklayın ve Kaldır' ı seçin:

Ana görsel taslağı veya görsel
Kaldır Iletişim kutusundaSil düğmesine tıklayarak. görsel taslağı veya. XIB 'yi projeden tamamen kaldırın:

Silmeyi

Şimdi, artık. Storyboard veya. XIB dosyasını kullandığımızdan, bu, pencerenin yerleşimini tanımlamak ve ViewController. cs ya da mainwindowcontroller. cs dosyasını, sınıfınızın bir örneğini oluşturmak için değiştirmek üzere bir. CS dosyasını değiştirmemiz gerekir .

Kullanıcı arabirimi için görsel taslak kullanan modern Xamarin. Mac uygulamaları, MainWindow. cs, ViewController. cs veya mainwindowcontroller. cs dosyalarını otomatik olarak içermeyebilir. Gerektiğinde, projeye yeni bir boş C# sınıfı eklemeniz yeterlidir (yeni dosya Ekle...GenelBoş sınıf) ve bunu eksik dosyayla aynı şekilde adlandırın.

Kod içinde 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

    }
}

Anahtar öğelerinden birkaçını tartışalım.

İlk olarak, dış izin (pencere bir film şeridi veya. XIB dosyasında oluşturulmuş gibi) gibi davranan birkaç hesaplanan özellik ekledik:

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

Bunlar, pencerede görüntülenecek Kullanıcı Arabirimi öğelerine erişim sağlayacaktır. Pencere bir. Storyboard veya. XIB dosyasından çıkarlanmakta olmadığından, örneğini oluşturmak için bir yol gerekir (sınıfında daha sonra göreceğiniz gibi MainWindowController ). Bu yeni Oluşturucu yöntemi şu şekilde yapılır:

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

Bu, pencerenin yerleşimini tasarlayacağız ve gerekli Kullanıcı arabirimini oluşturmak için gereken herhangi bir kullanıcı arabirimi öğesini yerleştirtireceğiz. Bir pencereye herhangi bir UI öğesi ekleyebilmek için önce öğeleri içermesi için bir Içerik görünümüne ihtiyacı vardır:

ContentView = new NSView (Frame);

Bu işlem, pencereyi dolduracak bir Içerik görünümü oluşturur. Şimdi, pencereye bir olan ilk UI öğesi ekliyoruz NSButton :

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

Buradaki ilk şey, iOS 'un, macOS 'un pencere koordinat sistemini tanımlamak için matematik gösterimi kullanmasını sağlar. Bu nedenle, kaynak noktası pencerenin sol alt köşesinde bulunur ve sağ üst köşede ve pencerenin sağ üst köşesine doğru değerlerdir. Yeni bir oluşturduğumuz zaman NSButton ekranda konumunu ve boyutunu tanımladığımızda bunu hesaba sunuyoruz.

AutoresizingMask = NSViewResizingMask.MinYMarginÖzelliği, pencereyi dikey olarak yeniden boyutlandırılırken pencerenin üst kısmından aynı konumda kalmasını istediğimiz düğmeye söyler. Bu, (0, 0) pencerenin sol alt tarafında olduğundan bu gereklidir.

Son olarak, ContentView.AddSubview (ClickMeButton) yöntemi NSButton Içeriği içerik görünümüne ekler ve böylece uygulama çalıştırıldığında ve pencere görüntülenirken ekranda görüntülenir.

Ardından, pencereye tıklandığı sürelerin sayısını görüntüleyen bir etiket eklenir NSButton :

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 etiketi UI öğesi olmadığından, etiket olarak davranacak şekilde özel olarak stillendirilmiş, düzenlenemeyen bir öğe ekledik. Önceki düğme gibi, boyut ve konum pencerenin sol alt tarafında yer alan (0, 0) hesaba girer. AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.MinYMarginÖzelliği, iki özelliği birleştirmek için AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.MinYMargin işlecini kullanıyor NSViewResizingMask . Bu, pencerenin dikey olarak yeniden boyutlandırıldığı ve pencere yatay olarak yeniden boyutlandırıldığından, etiketin pencerenin üst kısmından aynı konumda kalmasını sağlayacak.

Yine, ContentView.AddSubview (ClickMeLabel) yöntemi, NSTextField uygulama çalıştırıldığında ve pencere açıldığında ekranda görüntülenmek üzere Içeriği içerik görünümüne ekler.

Pencere denetleyicisini ayarlama

Tasarımını MainWindow artık bir. Storyboard veya. XIB dosyasından yüklenmekte olmadığından, pencere denetleyicisinde bazı ayarlamalar yapmanı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 anahtar öğelerinin tartışılmasına izin verin.

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

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 tanımlarsınız CGRect . Pencerenin koordinat sisteminde olduğu gibi, ekran, sol alt köşe olarak (0, 0) tanımlar. Daha sonra, iki veya daha fazla özelliği birleştirmek için veya işlecini kullanarak pencerenin stilini tanımlayacağız :

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

Aşağıdaki NSWindowStyle Özellikler mevcuttur:

Kenarlıksız -pencerenin kenarlığı olmayacaktır.
Başlıklı -pencere bir başlık çubuğuna sahip olur.
Giyilmez -pencere bir kapatma düğmesine sahiptir ve kapatılabilir.
Mini korumalı-pencere, Mini simge haline getirilmiş bir düğmeye sahiptir ve simge durumuna küçültülmüş olabilir.
Yeniden boyutlandırılabilir -pencerede yeniden boyutlandırma düğmesi görüntülenir ve yeniden boyutlandırılabilir.
Yardımcı program -pencere bir yardımcı program stil penceresidir (panel).
Docmodal -pencere bir paneldir, sistem kalıcı yerine belge kalıcı olur.
NonactivatingPanel -pencere bir panel ise, ana pencere yapılmaz.
Texturedbackground -pencere, dokulu bir arka plana sahip olur.
Ölçeklendirilmemiş -pencere ölçeklendirilmeyecektir.
UnifiedTitleAndToolbar -pencerenin başlığı ve araç çubuğu alanı birleştirilir.
HUD -pencere, bir başlık görünümü paneli olarak görüntülenecektir.
Fullscreenwindow -pencere tam ekran moduna girebilirler.
Fullsizecontentview -pencerenin içerik görünümü başlık ve araç çubuğu alanının arkasında.

Son iki özellik pencerenin arabelleğe alma türünü tanımlar ve pencere çizimi ertelenir. hakkında daha fazla bilgi için NSWindows lütfen Apple 'ın NSWindows belgelerine bakın.

Son olarak, pencere bir. film şeridi veya. XIB dosyasından örneklanmakta olmadığından, Windows metodunu çağırarak Mainwindowcontroller. cs dosyasında bu hizmetin benzetimini yapmanız gerekir :

Window.AwakeFromNib ();

Bu, bir. Storyboard veya. XIB dosyasından yüklenen standart bir pencere gibi pencereye karşı kod eklemenize olanak tanır.

Pencereyi görüntüleme

. Storyboard veya. XIB dosyası kaldırılarak ve MainWindow. cs ve mainwindowcontroller. cs dosyaları değiştirildiğinde, bu pencereyi, XIB dosyası ile birlikte Xcode 'un Interface Builder oluşturulan normal bir pencereyle yaptığınız gibi kullanırsınız.

Aşağıda pencerenin ve denetleyicinin yeni bir örneği oluşturulur ve pencere ekranda görüntülenir:

private MainWindowController mainWindowController;
...

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

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

Örnek uygulama çalıştırılan

Yalnızca kod penceresi ekleme

Mevcut bir Xamarin. Mac uygulamasına yalnızca bir kod eklemek istiyoruz, çözüm bölmesi projeye sağ tıklayıp yeni dosya Ekle... seçeneğini belirleyin. Yeni dosya iletişim kutusunda aşağıdaki gösterildiği gibi, denetleyici ile Xamarin. MacCocoa penceresiniseçin:

Adding a new window controller Yeni bir pencere ekleniyor

Daha önce olduğu gibi, varsayılan. Storyboard veya. XIB dosyasını projeden sileceğiz (Bu durumda secondwindow. XIB) ve pencerenin koda yönelik tanımını kapsamak Için Yukarıdaki kodu kullanmak Için bir pencereyi değiştirme bölümündeki adımları izleyin.

Koddaki pencereye bir UI öğesi ekleme

Bir pencerenin kodda oluşturulmuş veya bir. Storyboard veya. XIB dosyasından yüklenmiş olup olmadığı, koddan bir pencereye bir UI öğesi eklemek istediğimiz zamanlar olabilir. Örnek:

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

Yukarıdaki kod yeni bir oluşturur NSButton ve bunu MyWindow görüntülenecek pencere örneğine ekler. Temel olarak, bir. Storyboard veya. XIB dosyasında Xcode Interface Builder tanımlanmış olabilecek herhangi bir UI öğesi kodda oluşturulabilir ve bir pencerede görüntülenebilir.

Xamarin. Mac ' deki geçerli sınırlamalar nedeniyle, Xamarin. Mac uygulamanızın menü çubuğunu oluşturmanız önerilir – NSMenuBar kod içinde, ancak NSMenuBar veya MainMenu. XIB dosyasını tanımlamak için kullanmaya devam edersiniz. Bu şekilde C# kodunda menüler ve menü öğeleri ekleyebilir ve kaldırabilirsiniz.

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

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 kod, koddan bir durum çubuğu menüsü oluşturur ve uygulama başlatıldığında görüntüler. Menülerle çalışma hakkında daha fazla bilgi için lütfen menüler belgelerimize bakın.

Özet

Bu makale, Xcode 'un. görsel taslak veya. XIB dosyaları ile Interface Builder C# kodunda bir Xamarin. Mac uygulamasının Kullanıcı arabirimini oluşturmaya ilişkin ayrıntılı bir bakış gerçekleştirmiştir.