File .xib di Xamarin.Mac

Artikel ini membahas cara bekerja dengan file .xib yang dibuat di Penyusun Antarmuka Xcode untuk membuat dan memelihara antarmuka pengguna untuk aplikasi Xamarin.Mac.

Catatan

Cara yang disukai untuk membuat antarmuka pengguna untuk aplikasi Xamarin.Mac adalah dengan papan cerita. Dokumentasi ini telah dibiarkan karena alasan historis dan untuk bekerja dengan proyek Xamarin.Mac yang lebih lama. Untuk informasi selengkapnya, silakan lihat dokumentasi Pengenalan Storyboards kami.

Gambaran Umum

Saat bekerja dengan C# dan .NET dalam aplikasi Xamarin.Mac, Anda memiliki akses ke elemen dan alat antarmuka pengguna yang sama dengan yang digunakan Objective-C pengembang dan Xcode . Karena Xamarin.Mac terintegrasi langsung dengan Xcode, Anda dapat menggunakan Penyusun Antarmuka Xcode untuk membuat dan memelihara antarmuka pengguna Anda (atau secara opsional membuatnya langsung dalam kode C#).

File .xib digunakan oleh macOS untuk menentukan elemen antarmuka pengguna aplikasi Anda (seperti Menu, Windows, Tampilan, Label, Bidang Teks) yang dibuat dan dikelola secara grafis di Penyusun Antarmuka Xcode.

Dalam artikel ini, kita akan membahas dasar-dasar bekerja dengan file .xib dalam aplikasi Xamarin.Mac. Sangat disarankan agar Anda bekerja melalui artikel Hello, Mac terlebih dahulu, karena mencakup konsep dan teknik utama yang akan kami gunakan dalam artikel ini.

Anda mungkin ingin melihat kelas /metode Exposing C# keObjective-Cbagian dari dokumen Xamarin.Mac Internals juga, ini menjelaskan Register atribut dan Export yang digunakan untuk menghubungkan kelas C# Anda ke Objective-C objek dan elemen UI.

Pengantar Xcode dan Penyusun Antarmuka

Sebagai bagian dari Xcode, Apple telah membuat alat bernama Interface Builder, yang memungkinkan Anda membuat Antarmuka Pengguna secara visual dalam perancang. Xamarin.Mac terintegrasi secara lancar dengan Interface Builder, memungkinkan Anda membuat UI dengan alat yang sama seperti yang Objective-C dilakukan pengguna.

Komponen Xcode

Saat Anda membuka file .xib di Xcode dari Visual Studio untuk Mac, file tersebut terbuka dengan Navigator Proyek di sebelah kiri, Hierarki Antarmuka dan Editor Antarmuka di tengah, dan bagian Properti & Utilitas di sebelah kanan:

Mari kita lihat apa yang dilakukan masing-masing bagian Xcode ini dan bagaimana Anda akan menggunakannya untuk membuat antarmuka untuk aplikasi Xamarin.Mac Anda.

Navigasi proyek

Saat Anda membuka file .xib untuk diedit di Xcode, Visual Studio untuk Mac membuat file proyek Xcode di latar belakang untuk mengomunikasikan perubahan antara dirinya dan Xcode. Kemudian, saat Anda beralih kembali ke Visual Studio untuk Mac dari Xcode, setiap perubahan yang dilakukan pada proyek ini disinkronkan dengan proyek Xamarin.Mac Anda oleh Visual Studio untuk Mac.

Bagian Navigasi Proyek memungkinkan Anda menavigasi di antara semua file yang membentuk proyek Xcode shim ini. Biasanya, Anda hanya akan tertarik dengan file .xib dalam daftar ini seperti MainMenu.xib dan MainWindow.xib.

Hierarki antarmuka

Bagian Hierarki Antarmuka memungkinkan Anda untuk dengan mudah mengakses beberapa properti utama Antarmuka Pengguna seperti Tempat Penampung dan Jendela utamanya. Anda juga dapat menggunakan bagian ini untuk mengakses elemen individual (tampilan) yang membentuk antarmuka pengguna Anda dan menyesuaikan cara mereka bersarang dengan menyeretnya di dalam hierarki.

Editor antarmuka

Bagian Editor Antarmuka menyediakan permukaan tempat Anda membuat tata letak antarmuka pengguna secara grafis. Anda akan menyeret elemen dari bagian Pustaka di bagian Properti & Utilitas untuk membuat desain Anda. Saat Anda menambahkan elemen antarmuka pengguna (tampilan) ke permukaan desain, elemen tersebut akan ditambahkan ke bagian Hierarki Antarmuka dalam urutan muncul di Editor Antarmuka.

Properti & utilitas

Bagian Properti & Utilitas dibagi menjadi dua bagian utama yang akan kami kerjakan, Properti (juga disebut Pemeriksa) dan Pustaka:

Awalnya bagian ini hampir kosong, namun jika Anda memilih elemen di Editor Antarmuka atau Hierarki Antarmuka, bagian Properti akan diisi dengan informasi tentang elemen dan properti tertentu yang dapat Anda sesuaikan.

Di dalam bagian Properti, ada 8 Tab Pemeriksa yang berbeda, seperti yang diperlihatkan dalam ilustrasi berikut:

Dari kiri ke kanan, tab ini adalah:

• Pemeriksa File – Pemeriksa File menampilkan informasi file, seperti nama file dan lokasi file Xib yang sedang diedit.
• Bantuan Cepat – Tab Bantuan Cepat menyediakan bantuan kontekstual berdasarkan apa yang dipilih dalam Xcode.
• Pemeriksa Identitas – Inspektur Identitas menyediakan informasi tentang kontrol/tampilan yang dipilih.
• Pemeriksa Atribut – Pemeriksa Atribut memungkinkan Anda menyesuaikan berbagai atribut kontrol/tampilan yang dipilih.
• Pemeriksa Ukuran – Pemeriksa Ukuran memungkinkan Anda mengontrol ukuran dan mengubah ukuran perilaku kontrol/tampilan yang dipilih.
• Koneksi ions Inspector – Pemeriksa Koneksi ion menunjukkan koneksi outlet dan tindakan kontrol yang dipilih. Kami akan memeriksa Outlet dan Tindakan hanya dalam sekejap.
• Pemeriksa Pengikatan – Pemeriksa Pengikatan memungkinkan Anda mengonfigurasi kontrol sehingga nilainya secara otomatis terikat ke model data.
• Pemeriksa Efek Tampilan – Pemeriksa Efek Tampilan memungkinkan Anda menentukan efek pada kontrol, seperti animasi.

Di bagian Pustaka , Anda dapat menemukan kontrol dan objek untuk ditempatkan ke dalam perancang untuk membangun antarmuka pengguna Anda secara grafis:

Sekarang setelah Anda terbiasa dengan Xcode IDE dan Interface Builder, mari kita lihat menggunakannya untuk membuat antarmuka pengguna.

Membuat dan memelihara jendela di Xcode

Metode yang disukai untuk membuat Antarmuka Pengguna aplikasi Xamarin.Mac adalah dengan Storyboards (silakan lihat dokumentasi Pengenalan Storyboards kami untuk informasi lebih lanjut) dan, sebagai hasilnya, setiap proyek baru yang dimulai di Xamarin.Mac akan menggunakan Storyboards secara default.

Untuk beralih menggunakan UI berbasis .xib, lakukan hal berikut:

1. Buka Visual Studio untuk Mac dan mulai proyek Xamarin.Mac baru.

2. Di Pad Solusi, klik kanan pada proyek dan pilih Tambahkan>File Baru...

3. Pilih Pengontrol Windows Mac>:

   

4. Masukkan MainWindow untuk nama dan klik tombol Baru :

   

5. Klik kanan proyek lagi dan pilih Tambahkan>File Baru...

6. Pilih Menu Utama Mac>:

   

7. Biarkan nama sebagai MainMenu dan klik tombol Baru .

8. Di Pad Solusi pilih file Main.storyboard, klik kanan dan pilih Hapus:

   

9. Dalam Kotak Dialog Hapus, klik tombol Hapus :

   

10. Di Solution Pad, klik dua kali file Info.plist untuk membukanya untuk pengeditan.

11. Pilih MainMenu dari menu dropdown Antarmuka Utama:

    

12. Di Pad Solusi, klik dua kali file MainMenu.xib untuk membukanya untuk diedit di Penyusun Antarmuka Xcode.

13. Di Pemeriksa Pustaka, ketik object di bidang pencarian lalu seret Objek baru ke permukaan desain:

    

14. Di Inspektur Identitas, masukkan AppDelegate untuk Kelas:

    

15. Pilih Pemilik File dari Hierarki Antarmuka, beralihlah ke Pemeriksa Koneksi ion dan seret garis dari delegasi ke Objek yang AppDelegatebaru saja ditambahkan ke proyek:

    

16. Simpan perubahan dan kembali ke Visual Studio untuk Mac.

Dengan semua perubahan ini di tempat, edit file AppDelegate.cs dan buat terlihat seperti berikut ini:

using AppKit;
using Foundation;

namespace MacXib
{
    [Register ("AppDelegate")]
    public class AppDelegate : NSApplicationDelegate
    {
        public MainWindowController mainWindowController { get; set; }

        public AppDelegate ()
        {
        }

        public override void DidFinishLaunching (NSNotification notification)
        {
            // Insert code here to initialize your application
            mainWindowController = new MainWindowController ();
            mainWindowController.Window.MakeKeyAndOrderFront (this);
        }

        public override void WillTerminate (NSNotification notification)
        {
            // Insert code here to tear down your application
        }
    }
}

Sekarang Jendela Utama aplikasi didefinisikan dalam file .xib yang secara otomatis disertakan dalam proyek saat menambahkan Pengontrol Jendela. Untuk mengedit desain windows Anda, di Solution Pad, klik dua kali file MainWindow.xib :

Ini akan membuka desain jendela di Penyusun Antarmuka Xcode:

Alur kerja jendela standar

Untuk jendela apa pun yang Anda buat dan kerjakan di aplikasi Xamarin.Mac Anda, prosesnya pada dasarnya sama:

1. Untuk jendela baru yang bukan default yang ditambahkan secara otomatis ke proyek Anda, tambahkan definisi jendela baru ke proyek.
2. Klik dua kali file .xib untuk membuka desain jendela untuk pengeditan di Penyusun Antarmuka Xcode.
3. Atur properti jendela yang diperlukan di Pemeriksa Atribut dan Pemeriksa Ukuran.
4. Seret kontrol yang diperlukan untuk membangun antarmuka Anda dan konfigurasikan di Pemeriksa Atribut.
5. Gunakan Pemeriksa Ukuran untuk menangani perubahan ukuran untuk elemen UI Anda.
6. Mengekspos elemen UI jendela ke kode C# melalui outlet dan tindakan.
7. Simpan perubahan Anda dan beralih kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode.

Merancang tata letak jendela

Proses untuk menata Antarmuka Pengguna dalam penyusun Antarmuka pada dasarnya sama untuk setiap elemen yang Anda tambahkan:

1. Temukan kontrol yang diinginkan di Pemeriksa Pustaka dan seret ke Editor Antarmuka dan posisikan.
2. Atur properti jendela yang diperlukan di Pemeriksa Atribut.
3. Gunakan Pemeriksa Ukuran untuk menangani perubahan ukuran untuk elemen UI Anda.
4. Jika Anda menggunakan kelas kustom, atur di Pemeriksa Identitas.
5. Mengekspos elemen UI ke kode C# melalui outlet dan tindakan.
6. Simpan perubahan Anda dan beralih kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode.

Misalnya:

1. Di Xcode, seret Tombol Tekan dari Bagian Pustaka:

   

2. Letakkan tombol ke Jendela di Editor Antarmuka:

   

3. Klik properti Judul di Pemeriksa Atribut dan ubah judul tombol menjadi Click Me:

   

4. Seret Label dari Bagian Pustaka:

   

5. Letakkan label ke Jendela di samping tombol di Editor Antarmuka:

   

6. Ambil handel kanan pada label dan seret hingga berada di dekat tepi jendela:

   

7. Dengan label masih dipilih di Editor Antarmuka, beralihlah ke Pemeriksa Ukuran:

   

8. Di Kotak Ukuran Otomatis klik Kurung Siku Merah Redup di sebelah kanan dan Panah Horizontal Merah Redup di tengah:

   

9. Ini memastikan bahwa label akan membentang untuk tumbuh dan menyusut saat jendela diubah ukurannya dalam aplikasi yang sedang berjalan. Tanda Kurung Merah dan bagian atas dan kiri kotak Kotak Ukuran Otomatis memberi tahu label untuk terjebak ke lokasi X dan Y yang diberikan.

10. Simpan perubahan Anda ke Antarmuka Pengguna

Saat Mengubah ukuran dan memindahkan kontrol, Anda seharusnya memperhatikan bahwa Penyusun Antarmuka memberi Anda petunjuk snap bermanfaat yang didasarkan pada Pedoman Antarmuka Manusia OS X. Panduan ini akan membantu Anda membuat aplikasi berkualitas tinggi yang akan memiliki tampilan dan nuansa yang akrab bagi pengguna Mac.

Jika Anda melihat di bagian Hierarki Antarmuka, perhatikan bagaimana tata letak dan hierarki elemen yang membentuk Antarmuka pengguna kami ditampilkan:

Dari sini Anda dapat memilih item untuk diedit atau diseret untuk menyusun ulang elemen UI jika diperlukan. Misalnya, jika elemen UI sedang dicakup oleh elemen lain, Anda dapat menyeretnya ke bagian bawah daftar untuk menjadikannya item terbanyak di jendela.

Untuk informasi selengkapnya tentang bekerja dengan Windows dalam aplikasi Xamarin.Mac, silakan lihat dokumentasi Windows kami.

Mengekspos elemen UI ke kode C#

Setelah selesai meletakkan tampilan dan nuansa antarmuka pengguna Anda di Interface Builder, Anda harus mengekspos elemen UI sehingga dapat diakses dari kode C#. Untuk melakukan ini, Anda akan menggunakan tindakan dan outlet.

Mengatur pengontrol jendela utama kustom

Agar dapat membuat Outlet dan Tindakan untuk mengekspos elemen UI ke kode C#, aplikasi Xamarin.Mac harus menggunakan Pengontrol Jendela Kustom.

Lakukan:

1. Buka Storyboard aplikasi di Penyusun Antarmuka Xcode.

2. Pilih di NSWindowController Permukaan Desain.

3. Beralih ke tampilan Inspektur Identitas dan masukkan WindowController sebagai Nama Kelas:

   

4. Simpan perubahan Anda dan kembali ke Visual Studio untuk Mac untuk disinkronkan.

5. File WindowController.cs akan ditambahkan ke proyek Anda di Solution Pad di Visual Studio untuk Mac:

   

6. Buka kembali Storyboard di Penyusun Antarmuka Xcode.

7. File WindowController.h akan tersedia untuk digunakan:

   

Outlet dan tindakan

Jadi apa itu outlet dan tindakan? Dalam pemrograman Antarmuka Pengguna .NET tradisional, kontrol di Antarmuka Pengguna secara otomatis diekspos sebagai properti saat ditambahkan. Hal-hal bekerja secara berbeda di Mac, hanya menambahkan kontrol ke tampilan tidak membuatnya dapat diakses oleh kode. Pengembang harus secara eksplisit mengekspos elemen UI ke kode. Untuk melakukan ini, Apple memberi kami dua opsi:

• Outlet – Outlet dianalogikan dengan properti. Jika Anda menyambungkan kontrol ke Outlet, itu diekspos ke kode Anda melalui properti, sehingga Anda dapat melakukan hal-hal seperti melampirkan penanganan aktivitas, memanggil metode di atasnya, dll.
• Tindakan – Tindakan dianalogikan dengan pola perintah di WPF. Misalnya, saat Tindakan dilakukan pada kontrol, katakanlah klik tombol, kontrol akan secara otomatis memanggil metode dalam kode Anda. Tindakan kuat dan nyaman karena Anda dapat menghubungkan banyak kontrol ke Tindakan yang sama.

Di Xcode, outlet dan tindakan ditambahkan langsung dalam kode melalui Control-dragging. Lebih khusus lagi, ini berarti bahwa untuk membuat outlet atau tindakan, Anda memilih elemen kontrol mana yang ingin Anda tambahkan outlet atau tindakan, tahan tombol Kontrol pada keyboard, dan seret kontrol tersebut langsung ke dalam kode Anda.

Untuk pengembang Xamarin.Mac, ini berarti Anda menyeret ke file Objective-C stub yang sesuai dengan file C# tempat Anda ingin membuat outlet atau tindakan. Visual Studio untuk Mac membuat file yang disebut MainWindow.h sebagai bagian dari proyek shim Xcode yang dihasilkan untuk menggunakan Pembangun Antarmuka:

File .h stub ini mencerminkan MainWindow.designer.cs yang secara otomatis ditambahkan ke proyek Xamarin.Mac saat baru NSWindow dibuat. File ini akan digunakan untuk menyinkronkan perubahan yang dibuat oleh Interface Builder dan merupakan tempat kami akan membuat outlet dan tindakan Anda sehingga elemen UI terekspos ke kode C#.

Menambahkan outlet

Dengan pemahaman dasar tentang apa itu outlet dan tindakan, mari kita lihat membuat outlet untuk mengekspos elemen UI ke kode C# Anda.

Lakukan:

1. Di Xcode di ujung kanan sudut atas layar, klik tombol Lingkaran Ganda untuk membuka Editor Asisten:

   

2. Xcode akan beralih ke mode tampilan terpisah dengan Editor Antarmuka di satu sisi dan Editor Kode di sisi lain.

3. Perhatikan bahwa Xcode telah secara otomatis memilih file MainWindowController.m di Editor Kode, yang salah. Jika Anda ingat dari diskusi kami tentang outlet dan tindakan apa yang ada di atas, kita harus memilih MainWindow.h .

4. Di bagian atas Editor Kode klik Tautan Otomatis dan pilih file MainWindow.h :

   

5. Xcode sekarang harus memilih file yang benar:

   

6. Langkah terakhir sangat penting! Jika Anda tidak memilih file yang benar, Anda tidak akan dapat membuat outlet dan tindakan atau file tersebut akan diekspos ke kelas yang salah di C#!

7. Di Editor Antarmuka, tahan tombol Kontrol pada keyboard dan klik-seret label yang kami buat di atas ke editor kode tepat di bawah @interface MainWindow : NSWindow { } kode:

   

8. Kotak dialog akan ditampilkan. Biarkan Koneksi ion diatur ke outlet dan masukkan ClickedLabel untuk Nama:

   

9. Klik tombol Koneksi untuk membuat outlet:

   

10. Simpan perubahan pada file.

Menambahkan tindakan

Selanjutnya, mari kita lihat membuat tindakan untuk mengekspos interaksi pengguna dengan elemen UI ke kode C# Anda.

Lakukan:

1. Pastikan kami masih berada di Editor Asisten dan file MainWindow.h terlihat di Editor Kode.

2. Di Editor Antarmuka, tahan tombol Kontrol pada keyboard dan klik-seret tombol yang kami buat di atas ke editor kode tepat di bawah @property (assign) IBOutlet NSTextField *ClickedLabel; kode:

   

3. Ubah jenis Koneksi ion menjadi tindakan:

   

4. Masukkan ClickedButton sebagai Nama:

   

5. Klik tombol Koneksi untuk membuat tindakan:

   

6. Simpan perubahan pada file.

Dengan Antarmuka Pengguna Anda dikabeli dan diekspos ke kode C#, beralih kembali ke Visual Studio untuk Mac dan biarkan menyinkronkan perubahan dari Xcode dan Interface Builder.

Menulis kode

Dengan Antarmuka Pengguna Anda yang dibuat dan elemen UI-nya terekspos ke kode melalui outlet dan tindakan, Anda siap untuk menulis kode untuk menghidopsi program Anda. Misalnya, buka file MainWindow.cs untuk pengeditan dengan mengklik dua kali di Solution Pad:

Dan tambahkan kode berikut ke MainWindow kelas untuk bekerja dengan contoh outlet yang Anda buat di atas:

private int numberOfTimesClicked = 0;
...

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

    // Set the initial value for the label
    ClickedLabel.StringValue = "Button has not been clicked yet.";
}

Perhatikan bahwa NSLabel diakses di C# dengan nama langsung yang Anda tetapkan di Xcode ketika Anda membuat outletnya di Xcode, dalam hal ini, itu disebut ClickedLabel. Anda dapat mengakses metode atau properti apa pun dari objek yang diekspos dengan cara yang sama seperti kelas C# normal apa pun.

Penting

Anda perlu menggunakan AwakeFromNib, alih-alih metode lain seperti Initialize, karena AwakeFromNib dipanggil setelah OS dimuat dan membuat instans Antarmuka Pengguna dari file .xib. Jika Anda mencoba mengakses kontrol label sebelum file .xib telah dimuat dan diinisiasi sepenuhnya, Anda akan mendapatkan NullReferenceException kesalahan karena kontrol label belum akan dibuat.

Selanjutnya, tambahkan kelas parsial berikut ke MainWindow kelas :

partial void ClickedButton (Foundation.NSObject sender) {

    // Update counter and label
    ClickedLabel.StringValue = string.Format("The button has been clicked {0} time{1}.",++numberOfTimesClicked, (numberOfTimesClicked < 2) ? "" : "s");
}

Kode ini melampirkan ke tindakan yang Anda buat di Xcode dan Interface Builder dan akan dipanggil kapan saja pengguna mengklik tombol .

Beberapa elemen UI secara otomatis memiliki tindakan bawaan, misalnya, item di Bilah Menu default seperti item menu Buka... (openDocument:). Di Solution Pad, klik dua kali file AppDelegate.cs untuk membukanya untuk pengeditan dan tambahkan kode berikut di bawah DidFinishLaunching metode :

[Export ("openDocument:")]
void OpenDialog (NSObject sender)
{
    var dlg = NSOpenPanel.OpenPanel;
    dlg.CanChooseFiles = false;
    dlg.CanChooseDirectories = true;

    if (dlg.RunModal () == 1) {
        var alert = new NSAlert () {
            AlertStyle = NSAlertStyle.Informational,
            InformativeText = "At this point we should do something with the folder that the user just selected in the Open File Dialog box...",
            MessageText = "Folder Selected"
        };
        alert.RunModal ();
    }
}

Baris kunci di sini adalah [Export ("openDocument:")], ia memberi tahu NSMenu bahwa AppDelegate memiliki metode void OpenDialog (NSObject sender) yang merespons openDocument: tindakan.

Untuk informasi selengkapnya tentang bekerja dengan Menu, silakan lihat dokumentasi Menu kami.

Menyinkronkan perubahan dengan Xcode

Saat Anda beralih kembali ke Visual Studio untuk Mac dari Xcode, setiap perubahan yang telah Anda buat di Xcode akan secara otomatis disinkronkan dengan proyek Xamarin.Mac Anda.

Jika Anda memilih MainWindow.designer.cs di Solution Pad , Anda akan dapat melihat bagaimana outlet dan tindakan kami telah dikabeli dalam kode C#kami:

Perhatikan bagaimana dua definisi dalam file MainWindow.designer.cs :

[Outlet]
AppKit.NSTextField ClickedLabel { get; set; }

[Action ("ClickedButton:")]
partial void ClickedButton (Foundation.NSObject sender);

Sejalan dengan definisi dalam file MainWindow.h di Xcode:

@property (assign) IBOutlet NSTextField *ClickedLabel;
- (IBAction)ClickedButton:(id)sender;

Seperti yang Anda lihat, Visual Studio untuk Mac mendengarkan perubahan pada file .h, lalu secara otomatis menyinkronkan perubahan tersebut dalam file .designer.cs masing-masing untuk mengeksposnya ke aplikasi Anda. Anda mungkin juga melihat bahwa MainWindow.designer.cs adalah kelas parsial, sehingga Visual Studio untuk Mac tidak perlu memodifikasi MainWindow.cs yang akan menimpa perubahan apa pun yang telah kami buat pada kelas.

Anda biasanya tidak perlu membuka MainWindow.designer.cs diri Anda sendiri, itu disajikan di sini hanya untuk tujuan pendidikan.

Penting

Dalam kebanyakan situasi, Visual Studio untuk Mac akan secara otomatis melihat perubahan apa pun yang dibuat di Xcode dan menyinkronkannya ke proyek Xamarin.Mac Anda. Di luar kemunculan bahwa sinkronisasi tidak terjadi secara otomatis, beralih kembali ke Xcode dan kembali ke Visual Studio untuk Mac lagi. Ini biasanya akan memulai siklus sinkronisasi.

Menambahkan jendela baru ke proyek

Selain jendela dokumen utama, aplikasi Xamarin.Mac mungkin perlu menampilkan jenis jendela lain kepada pengguna, seperti Preferensi atau Panel Pemeriksa. Saat menambahkan Jendela baru ke proyek Anda, Anda harus selalu menggunakan opsi Jendela Kakao dengan Pengontrol , karena ini membuat proses memuat Jendela dari file .xib lebih mudah.

Untuk menambahkan jendela baru, lakukan hal berikut:

1. Di Pad Solusi, klik kanan pada proyek dan pilih Tambahkan>File Baru...

2. Dalam kotak dialog File Baru, pilih Jendela Kakao Xamarin.Mac>dengan Pengontrol:

   

3. Masukkan PreferencesWindow untuk Nama dan klik tombol Baru .

4. Klik dua kali file PreferencesWindow.xib untuk membukanya untuk diedit di Interface Builder:

   

5. Desain antarmuka Anda:

   

6. Simpan perubahan Anda dan kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode.

Tambahkan kode berikut ke AppDelegate.cs untuk menampilkan jendela baru Anda:

[Export("applicationPreferences:")]
void ShowPreferences (NSObject sender)
{
    var preferences = new PreferencesWindowController ();
    preferences.Window.MakeKeyAndOrderFront (this);
}

Baris var preferences = new PreferencesWindowController (); membuat instans baru Pengontrol Jendela yang memuat Jendela dari file .xib dan melambungkannya. Baris preferences.Window.MakeKeyAndOrderFront (this); menampilkan Jendela baru kepada pengguna.

Jika Anda menjalankan kode dan memilih Preferensi... dari Menu Aplikasi, jendela akan ditampilkan:

Untuk informasi selengkapnya tentang bekerja dengan Windows dalam aplikasi Xamarin.Mac, silakan lihat dokumentasi Windows kami.

Menambahkan tampilan baru ke proyek

Ada kalanya lebih mudah untuk memecah desain Jendela Anda menjadi beberapa file .xib yang lebih mudah dikelola. Misalnya, seperti mengalihkan konten Jendela utama saat memilih item Toolbar di Jendela Preferensi atau menukar konten sebagai respons terhadap pilihan Daftar Sumber.

Saat menambahkan Tampilan baru ke proyek Anda, Anda harus selalu menggunakan opsi Tampilan Kakao dengan Pengontrol , karena ini membuat proses pemuatan Tampilan dari file .xib lebih mudah.

Untuk menambahkan tampilan baru, lakukan hal berikut:

1. Di Pad Solusi, klik kanan pada proyek dan pilih Tambahkan>File Baru...

2. Dalam kotak dialog File Baru, pilih Tampilan Kakao Xamarin.Mac>dengan Pengontrol:

   

3. Masukkan SubviewTable untuk Nama dan klik tombol Baru .

4. Klik dua kali file SubviewTable.xib untuk membukanya untuk pengeditan di Penyusun Antarmuka dan Desain Antarmuka Pengguna:

   

5. Kawat tindakan dan outlet yang diperlukan.

6. Simpan perubahan Anda dan kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode.

Selanjutnya edit SubviewTable.cs dan tambahkan kode berikut ke file AwakeFromNib untuk mengisi Tampilan baru saat dimuat:

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

    // Create the Product Table Data Source and populate it
    var DataSource = new ProductTableDataSource ();
    DataSource.Products.Add (new Product ("Xamarin.iOS", "Allows you to develop native iOS Applications in C#"));
    DataSource.Products.Add (new Product ("Xamarin.Android", "Allows you to develop native Android Applications in C#"));
    DataSource.Products.Add (new Product ("Xamarin.Mac", "Allows you to develop Mac native Applications in C#"));
    DataSource.Sort ("Title", true);

    // Populate the Product Table
    ProductTable.DataSource = DataSource;
    ProductTable.Delegate = new ProductTableDelegate (DataSource);

    // Auto select the first row
    ProductTable.SelectRow (0, false);
}

Tambahkan enum ke proyek untuk melacak tampilan mana yang saat ini sedang ditampilkan. Misalnya, SubviewType.cs:

public enum SubviewType
{
    None,
    TableView,
    OutlineView,
    ImageView
}

Edit file .xib jendela yang akan menggunakan Tampilan dan menampilkannya. Tambahkan Tampilan Kustom yang akan bertindak sebagai kontainer untuk Tampilan setelah dimuat ke dalam memori oleh kode C# dan mengeksposnya ke outlet yang disebut ViewContainer:

Simpan perubahan Anda dan kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode.

Selanjutnya, edit file .cs Jendela yang akan menampilkan tampilan baru (misalnya, MainWindow.cs) dan tambahkan kode berikut:

private SubviewType ViewType = SubviewType.None;
private NSViewController SubviewController = null;
private NSView Subview = null;
...

private void DisplaySubview(NSViewController controller, SubviewType type) {

    // Is this view already displayed?
    if (ViewType == type) return;

    // Is there a view already being displayed?
    if (Subview != null) {
        // Yes, remove it from the view
        Subview.RemoveFromSuperview ();

        // Release memory
        Subview = null;
        SubviewController = null;
    }

    // Save values
    ViewType = type;
    SubviewController = controller;
    Subview = controller.View;

    // Define frame and display
    Subview.Frame = new CGRect (0, 0, ViewContainer.Frame.Width, ViewContainer.Frame.Height);
    ViewContainer.AddSubview (Subview);
}

Ketika kita perlu menampilkan Tampilan baru yang dimuat dari file .xib di Kontainer Jendela ( Tampilan Kustom ditambahkan di atas), kode ini menangani penghapusan tampilan yang ada dan menukarnya dengan yang baru. Sepertinya Anda sudah memiliki tampilan yang ditampilkan, jika demikian, tampilan akan menghapusnya dari layar. Selanjutnya dibutuhkan tampilan yang telah diteruskan (seperti yang dimuat dari Pengontrol Tampilan) mengubah ukurannya agar pas di Area Konten dan menambahkannya ke konten untuk ditampilkan.

Untuk menampilkan tampilan baru, gunakan kode berikut:

DisplaySubview(new SubviewTableController(), SubviewType.TableView);

Ini membuat instans baru Pengontrol Tampilan agar tampilan baru ditampilkan, mengatur jenisnya (seperti yang ditentukan oleh enum yang ditambahkan ke proyek) dan menggunakan metode yang DisplaySubview ditambahkan ke kelas Jendela untuk benar-benar menampilkan tampilan. Contohnya:

Untuk informasi selengkapnya tentang bekerja dengan Windows dalam aplikasi Xamarin.Mac, silakan lihat dokumentasi Windows dan Dialog kami.

Ringkasan

Artikel ini telah melihat secara rinci tentang bekerja dengan file .xib dalam aplikasi Xamarin.Mac. Kami melihat berbagai jenis dan penggunaan file .xib untuk membuat Antarmuka Pengguna aplikasi Anda, cara membuat dan memelihara file .xib di Penyusun Antarmuka Xcode dan cara bekerja dengan file .xib dalam kode C#.

Link Terkait

• Halo, Mac
• Windows
• Menu
• Dialog
• Bekerja dengan gambar
• Pedoman Antarmuka Manusia macOS