Tampilan kerangka di Xamarin.Mac

Artikel
03/14/2017

Artikel ini membahas cara bekerja dengan tampilan kerangka dalam aplikasi Xamarin.Mac. Ini menjelaskan pembuatan dan pemeliharaan tampilan kerangka di Xcode dan Interface Builder dan bekerja dengannya secara terprogram.

Saat bekerja dengan C# dan .NET dalam aplikasi Xamarin.Mac, Anda memiliki akses ke Tampilan Kerangka 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 Tampilan Kerangka Anda (atau secara opsional membuatnya langsung dalam kode C#).

Tampilan Kerangka adalah jenis Tabel yang memungkinkan pengguna memperluas atau menciutkan baris data hierarkis. Seperti Tampilan Tabel, Tampilan Kerangka menampilkan data untuk sekumpulan item terkait, dengan baris yang mewakili item dan kolom individual yang mewakili atribut item tersebut. Tidak seperti Tampilan Tabel, item dalam Tampilan Kerangka tidak berada dalam daftar datar, item tersebut diatur dalam hierarki, seperti file dan folder di hard drive.

Dalam artikel ini, kita akan membahas dasar-dasar bekerja dengan Tampilan Kerangka dalam aplikasi Xamarin.Mac. Sangat disarankan agar Anda bekerja melalui artikel Hello, Mac terlebih dahulu, khususnya bagian Pengenalan Xcode dan Penyusun Antarmuka dan Outlet dan Tindakan , karena mencakup konsep dan teknik utama yang akan kita gunakan dalam artikel ini.

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

Pengantar Tampilan Kerangka

Jika item dalam Tampilan Kerangka berisi item lain, item tersebut dapat diperluas atau diciutkan oleh pengguna. Item yang dapat diperluas menampilkan segitiga pengungkapan, yang menunjuk ke kanan saat item diciutkan dan menunjuk ke bawah saat item diperluas. Mengklik segitiga pengungkapan menyebabkan item diperluas atau diciutkan.

Tampilan Kerangka (NSOutlineView) adalah subkelas Tampilan Tabel (NSTableView) dan dengan demikian, mewarisi sebagian besar perilakunya dari kelas induknya. Akibatnya, banyak operasi yang didukung oleh Tampilan Tabel, seperti memilih baris atau kolom, memposisikan ulang kolom dengan menyeret Header Kolom, dll., juga didukung oleh Tampilan Kerangka. Aplikasi Xamarin.Mac memiliki kontrol atas fitur-fitur ini, dan dapat mengonfigurasi parameter Tampilan Kerangka (baik dalam kode atau Penyusun Antarmuka) untuk mengizinkan atau melarang operasi tertentu.

Tampilan Kerangka tidak menyimpan datanya sendiri, sebaliknya bergantung pada Sumber Data (NSOutlineViewDataSource) untuk menyediakan baris dan kolom yang diperlukan, sesuai kebutuhan.

Perilaku Tampilan Kerangka dapat dikustomisasi dengan menyediakan subkelas Delegasi Tampilan Kerangka (NSOutlineViewDelegate) untuk mendukung manajemen kolom Kerangka, ketik untuk memilih fungsionalitas, pemilihan dan pengeditan baris, pelacakan kustom, dan tampilan kustom untuk kolom dan baris individual.

Karena Tampilan Kerangka berbagi sebagian besar perilaku dan fungsionalitasnya dengan Tampilan Tabel, Anda mungkin ingin menelusuri dokumentasi Tampilan Tabel kami sebelum melanjutkan artikel ini.

Membuat dan Memelihara Tampilan Kerangka di Xcode

Saat Anda membuat aplikasi Xamarin.Mac Cocoa baru, Anda mendapatkan jendela kosong standar secara default. Jendela ini didefinisikan dalam file yang .storyboard secara otomatis disertakan dalam proyek. Untuk mengedit desain windows Anda, di Penjelajah Solusi, klik Main.storyboard dua kali file:

Ini akan membuka desain jendela di Penyusun Antarmuka Xcode:

Ketik outline ke dalam Kotak Pencarian Pemeriksa Pustaka untuk mempermudah menemukan kontrol Tampilan Kerangka:

Seret Tampilan Kerangka ke Pengontrol Tampilan di Editor Antarmuka, buatlah mengisi area konten Pengontrol Tampilan dan atur ke tempatnya menyusut dan bertambah dengan jendela di Editor Batasan:

Pilih Tampilan Kerangka di Hierarki Antarmuka dan properti berikut ini tersedia di Pemeriksa Atribut:

Kolom Kerangka - Kolom Tabel tempat data Hierarkis ditampilkan.
Simpan Otomatis Kolom Kerangka - Jika true, Kolom Kerangka akan disimpan dan dipulihkan secara otomatis di antara eksekusi aplikasi.
Indentasi - Jumlah untuk kolom inden di bawah item yang diperluas.
Indentasi Mengikuti Sel - Jika true, Tanda Indentasi akan diindentasi bersama dengan sel.
Simpan Otomatis Item yang Diperluas - Jika true, status item yang diperluas/diciutkan akan disimpan dan dipulihkan secara otomatis di antara eksekusi aplikasi.
Mode Konten - Memungkinkan Anda menggunakan Tampilan (NSView) atau Sel (NSCell) untuk menampilkan data dalam baris dan kolom. Dimulai dengan macOS 10.7, Anda harus menggunakan Tampilan.
Baris Grup Mengambang - Jika true, Tampilan Tabel akan menggambar sel yang dikelompokkan seolah-olah mengambang.
Kolom - Menentukan jumlah kolom yang ditampilkan.
Header - Jika true, kolom akan memiliki Header.
Menyusun ulang - Jika true, pengguna akan dapat menyeret menyusun ulang kolom dalam tabel.
Mengubah ukuran - Jika true, pengguna akan dapat menyeret Header kolom untuk mengubah ukuran kolom.
Ukuran Kolom - Mengontrol bagaimana tabel akan mengukur kolom secara otomatis.
Sorot - Mengontrol tipe penyorotan tabel yang digunakan saat sel dipilih.
Baris Alternatif - Jika true, pernah baris lain akan memiliki warna latar belakang yang berbeda.
Kisi Horizontal - Memilih tipe batas yang digambar di antara sel secara horizontal.
Kisi Vertikal - Memilih tipe batas yang digambar di antara sel secara vertikal.
Warna Kisi - Mengatur warna batas sel.
Latar Belakang - Mengatur warna latar belakang sel.
Pilihan - Memungkinkan Anda mengontrol bagaimana pengguna dapat memilih sel dalam tabel sebagai:
- Beberapa - Jika true, pengguna dapat memilih beberapa baris dan kolom.
- Kolom - Jika true,pengguna dapat memilih kolom.
- Ketik Pilih - Jika true, pengguna dapat mengetik karakter untuk memilih baris.
- Kosong - Jika true, pengguna tidak diperlukan untuk memilih baris atau kolom, tabel memungkinkan tidak ada pilihan sama sekali.
Simpan Otomatis - Nama yang disimpan dalam format tabel secara otomatis.
Informasi Kolom - Jika true, urutan dan lebar kolom akan disimpan secara otomatis.
Pemisah Baris - Pilih bagaimana sel menangani pemisah garis.
Memotong Baris Terakhir Terlihat - Jika true, sel akan dipotong dalam data tidak dapat pas di dalam batasnya.

Penting

Kecuali Anda mempertahankan aplikasi Xamarin.Mac warisan, NSView Tampilan Kerangka berbasis harus digunakan melalui NSCell Tampilan Tabel berbasis. NSCell dianggap warisan dan mungkin tidak didukung ke depannya.

Pilih Kolom Tabel di Hierarki Antarmuka dan properti berikut ini tersedia di Pemeriksa Atribut:

Judul - Mengatur judul kolom.
Perataan - Atur perataan teks dalam sel.
Font Judul - Memilih font untuk teks Header sel.
Urutkan Kunci - Apakah kunci digunakan untuk mengurutkan data dalam kolom. Biarkan kosong jika pengguna tidak dapat mengurutkan kolom ini.
Pemilih- Apakah Tindakan digunakan untuk melakukan pengurutan. Biarkan kosong jika pengguna tidak dapat mengurutkan kolom ini.
Urutan - Adalah urutan pengurutan untuk data kolom.
Mengubah ukuran - Memilih jenis perubahan ukuran untuk kolom.
Dapat diedit - Jika true, pengguna dapat mengedit sel dalam tabel berbasis sel.
Tersembunyi - Jika true, kolom disembunyikan.

Anda juga dapat mengubah ukuran kolom dengan menyeret handelnya (berpusat secara vertikal di sisi kanan kolom) kiri atau kanan.

Mari kita pilih setiap Kolom dalam Tampilan Tabel kita dan beri kolom pertama JudulProduct dan yang Detailskedua .

Pilih Tampilan Sel Tabel (NSTableViewCell) di Hierarki Antarmuka dan properti berikut ini tersedia di Pemeriksa Atribut:

Ini adalah semua properti tampilan standar. Anda juga memiliki opsi untuk mengubah ukuran baris untuk kolom ini di sini.

Pilih Sel Tampilan Tabel (secara default, ini adalah NSTextField) dalam Hierarki Antarmuka dan properti berikut ini tersedia di Pemeriksa Atribut:

Anda akan memiliki semua properti Bidang Teks standar untuk diatur di sini. Secara default, Bidang Teks standar digunakan untuk menampilkan data untuk sel dalam kolom.

Pilih Tampilan Sel Tabel (NSTableFieldCell) di Hierarki Antarmuka dan properti berikut ini tersedia di Pemeriksa Atribut:

Pengaturan yang paling penting di sini adalah:

Tata Letak - Pilih bagaimana sel dalam kolom ini ditata.
Menggunakan Mode Garis Tunggal - Jika true, sel dibatasi pada satu baris.
Lebar Tata Letak Runtime Pertama - Jika true, sel akan lebih memilih lebar yang diatur untuknya (baik secara manual atau otomatis) saat ditampilkan saat pertama kali aplikasi dijalankan.
Tindakan - Mengontrol kapan Tindakan Edit dikirim untuk sel.
Perilaku - Menentukan apakah sel dapat dipilih atau dapat diedit.
Teks Kaya - Jika true, sel dapat menampilkan teks yang diformat dan ditata.
Batalkan - Jika true, sel bertanggung jawab atas perilaku batalkan.

Pilih Tampilan Sel Tabel (NSTableFieldCell) di bagian bawah Kolom Tabel di Hierarki Antarmuka:

Ini memungkinkan Anda mengedit Tampilan Sel Tabel yang digunakan sebagai Pola dasar untuk semua sel yang dibuat untuk kolom tertentu.

Menambahkan Tindakan dan Outlet

Sama seperti kontrol Antarmuka Pengguna Kakao lainnya, kita perlu mengekspos Tampilan Kerangka dan kolom dan sel ke kode C# menggunakan Tindakan dan Outlet (berdasarkan fungsionalitas yang diperlukan).

Prosesnya sama untuk elemen Tampilan Kerangka apa pun yang ingin kami ekspos:

Beralih ke Editor Asisten dan pastikan bahwa ViewController.h file dipilih:
Pilih Tampilan Kerangka dari Hierarki Antarmuka, klik kontrol dan seret ke ViewController.h file.
Buat Outlet untuk Tampilan Kerangka yang disebut ProductOutline:
Buat Outlet untuk kolom tabel juga disebut ProductColumn dan DetailsColumn:
Simpan perubahan Anda dan kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode.

Selanjutnya, kita akan menulis kode yang menampilkan beberapa data untuk kerangka saat aplikasi dijalankan.

Mengisi Tampilan Kerangka

Dengan Tampilan Kerangka kami yang dirancang dalam Penyusun Antarmuka dan diekspos melalui Outlet, selanjutnya kita perlu membuat kode C# untuk mengisinya.

Pertama, mari kita buat kelas baru Product untuk menyimpan informasi untuk masing-masing baris dan grup sub produk. Di Penjelajah Solusi, klik kanan Proyek dan pilih Tambahkan>File Baru... Pilih Kelas Kosong Umum>, masukkan Product untuk Nama dan klik tombol Baru:

Product.cs Buat file terlihat seperti berikut ini:

using System;
using Foundation;
using System.Collections.Generic;

namespace MacOutlines
{
    public class Product : NSObject
    {
        #region Public Variables
        public List<Product> Products = new List<Product>();
        #endregion

        #region Computed Properties
        public string Title { get; set;} = "";
        public string Description { get; set;} = "";
        public bool IsProductGroup {
            get { return (Products.Count > 0); }
        }
        #endregion

        #region Constructors
        public Product ()
        {
        }

        public Product (string title, string description)
        {
            this.Title = title;
            this.Description = description;
        }
        #endregion
    }
}

Selanjutnya, kita perlu membuat subkelas NSOutlineDataSource untuk menyediakan data untuk kerangka kita seperti yang diminta. Di Penjelajah Solusi, klik kanan Proyek dan pilih Tambahkan>File Baru... Pilih Kelas Kosong Umum>, masukkan ProductOutlineDataSource untuk Nama dan klik tombol Baru.

ProductTableDataSource.cs Edit file dan buat terlihat seperti berikut ini:

using System;
using AppKit;
using CoreGraphics;
using Foundation;
using System.Collections;
using System.Collections.Generic;

namespace MacOutlines
{
    public class ProductOutlineDataSource : NSOutlineViewDataSource
    {
        #region Public Variables
        public List<Product> Products = new List<Product>();
        #endregion

        #region Constructors
        public ProductOutlineDataSource ()
        {
        }
        #endregion

        #region Override Methods
        public override nint GetChildrenCount (NSOutlineView outlineView, NSObject item)
        {
            if (item == null) {
                return Products.Count;
            } else {
                return ((Product)item).Products.Count;
            }

        }

        public override NSObject GetChild (NSOutlineView outlineView, nint childIndex, NSObject item)
        {
            if (item == null) {
                return Products [childIndex];
            } else {
                return ((Product)item).Products [childIndex];
            }

        }

        public override bool ItemExpandable (NSOutlineView outlineView, NSObject item)
        {
            if (item == null) {
                return Products [0].IsProductGroup;
            } else {
                return ((Product)item).IsProductGroup;
            }

        }
        #endregion
    }
}

Kelas ini memiliki penyimpanan untuk item Tampilan Kerangka kami dan mengambil alih GetChildrenCount untuk mengembalikan jumlah baris dalam tabel. mengembalikan GetChild item induk atau turunan tertentu (seperti yang diminta oleh Tampilan Kerangka) dan ItemExpandable menentukan item yang ditentukan sebagai induk atau anak.

Akhirnya, kita perlu membuat subkelas NSOutlineDelegate untuk memberikan perilaku untuk kerangka kita. Di Penjelajah Solusi, klik kanan Proyek dan pilih Tambahkan>File Baru... Pilih Kelas Kosong Umum>, masukkan ProductOutlineDelegate untuk Nama dan klik tombol Baru.

ProductOutlineDelegate.cs Edit file dan buat terlihat seperti berikut ini:

using System;
using AppKit;
using CoreGraphics;
using Foundation;
using System.Collections;
using System.Collections.Generic;

namespace MacOutlines
{
    public class ProductOutlineDelegate : NSOutlineViewDelegate
    {
        #region Constants
        private const string CellIdentifier = "ProdCell";
        #endregion

        #region Private Variables
        private ProductOutlineDataSource DataSource;
        #endregion

        #region Constructors
        public ProductOutlineDelegate (ProductOutlineDataSource datasource)
        {
            this.DataSource = datasource;
        }
        #endregion

        #region Override Methods

        public override NSView GetView (NSOutlineView outlineView, NSTableColumn tableColumn, NSObject item) {
            // This pattern allows you reuse existing views when they are no-longer in use.
            // If the returned view is null, you instance up a new view
            // If a non-null view is returned, you modify it enough to reflect the new data
            NSTextField view = (NSTextField)outlineView.MakeView (CellIdentifier, this);
            if (view == null) {
                view = new NSTextField ();
                view.Identifier = CellIdentifier;
                view.BackgroundColor = NSColor.Clear;
                view.Bordered = false;
                view.Selectable = false;
                view.Editable = false;
            }

            // Cast item
            var product = item as Product;

            // Setup view based on the column selected
            switch (tableColumn.Title) {
            case "Product":
                view.StringValue = product.Title;
                break;
            case "Details":
                view.StringValue = product.Description;
                break;
            }

            return view;
        }
        #endregion
    }
}

Ketika kita membuat instans , ProductOutlineDelegatekita juga meneruskan instans ProductOutlineDataSource yang menyediakan data untuk kerangka. Metode GetView ini bertanggung jawab untuk mengembalikan tampilan (data) untuk menampilkan sel untuk kolom dan baris beri. Jika memungkinkan, tampilan yang ada akan digunakan kembali untuk menampilkan sel, jika bukan tampilan baru harus dibuat.

Untuk mengisi kerangka, mari kita edit MainWindow.cs file dan buat AwakeFromNib metode terlihat seperti berikut ini:

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

    // Create data source and populate
    var DataSource = new ProductOutlineDataSource ();

    var Vegetables = new Product ("Vegetables", "Greens and Other Produce");
    Vegetables.Products.Add (new Product ("Cabbage", "Brassica oleracea - Leaves, axillary buds, stems, flowerheads"));
    Vegetables.Products.Add (new Product ("Turnip", "Brassica rapa - Tubers, leaves"));
    Vegetables.Products.Add (new Product ("Radish", "Raphanus sativus - Roots, leaves, seed pods, seed oil, sprouting"));
    Vegetables.Products.Add (new Product ("Carrot", "Daucus carota - Root tubers"));
    DataSource.Products.Add (Vegetables);

    var Fruits = new Product ("Fruits", "Fruit is a part of a flowering plant that derives from specific tissues of the flower");
    Fruits.Products.Add (new Product ("Grape", "True Berry"));
    Fruits.Products.Add (new Product ("Cucumber", "Pepo"));
    Fruits.Products.Add (new Product ("Orange", "Hesperidium"));
    Fruits.Products.Add (new Product ("Blackberry", "Aggregate fruit"));
    DataSource.Products.Add (Fruits);

    var Meats = new Product ("Meats", "Lean Cuts");
    Meats.Products.Add (new Product ("Beef", "Cow"));
    Meats.Products.Add (new Product ("Pork", "Pig"));
    Meats.Products.Add (new Product ("Veal", "Young Cow"));
    DataSource.Products.Add (Meats);

    // Populate the outline
    ProductOutline.DataSource = DataSource;
    ProductOutline.Delegate = new ProductOutlineDelegate (DataSource);

}

Jika kita menjalankan aplikasi, berikut ini ditampilkan:

Jika kita memperluas simpul dalam Tampilan Kerangka, itu akan terlihat seperti berikut ini:

Mengurutkan menurut Kolom

Mari kita izinkan pengguna untuk mengurutkan data dalam kerangka dengan mengklik Header Kolom. Pertama, klik Main.storyboard dua kali file untuk membukanya untuk pengeditan di Interface Builder. Product Pilih kolom, masukkan Title untuk Kunci Pengurutan, compare: untuk Pemilihdan pilih Ascending untuk Pesanan:

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

Sekarang mari kita edit ProductOutlineDataSource.cs file dan tambahkan metode berikut:

public void Sort(string key, bool ascending) {

    // Take action based on key
    switch (key) {
    case "Title":
        if (ascending) {
            Products.Sort ((x, y) => x.Title.CompareTo (y.Title));
        } else {
            Products.Sort ((x, y) => -1 * x.Title.CompareTo (y.Title));
        }
        break;
    }
}

public override void SortDescriptorsChanged (NSOutlineView outlineView, NSSortDescriptor[] oldDescriptors)
{
    // Sort the data
    Sort (oldDescriptors [0].Key, oldDescriptors [0].Ascending);
    outlineView.ReloadData ();
}

Metode ini Sort memungkinkan kita untuk mengurutkan data di Sumber Data berdasarkan bidang kelas tertentu Product dalam urutan naik atau turun. Metode yang ditimpa SortDescriptorsChanged akan dipanggil setiap kali penggunaan mengklik Judul Kolom. Ini akan diteruskan nilai Kunci yang kita tetapkan di Penyusun Antarmuka dan urutan pengurutan untuk kolom tersebut.

Jika kita menjalankan aplikasi dan mengklik Header Kolom, baris akan diurutkan menurut kolom tersebut:

Pilihan Baris

Jika Anda ingin mengizinkan pengguna memilih satu baris, klik Main.storyboard dua kali file untuk membukanya untuk pengeditan di Penyusun Antarmuka. Pilih Tampilan Kerangka di Hierarki Antarmuka dan kosongkan kotak centang Beberapa di Pemeriksa Atribut:

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

Selanjutnya, edit ProductOutlineDelegate.cs file dan tambahkan metode berikut:

public override bool ShouldSelectItem (NSOutlineView outlineView, NSObject item)
{
    // Don't select product groups
    return !((Product)item).IsProductGroup;
}

Ini akan memungkinkan pengguna untuk memilih satu baris di Tampilan Kerangka. Kembali false untuk ShouldSelectItem item apa pun yang tidak Anda inginkan agar pengguna dapat memilih atau false untuk setiap item jika Anda tidak ingin pengguna dapat memilih item apa pun.

Pilihan Beberapa Baris

Jika Anda ingin mengizinkan pengguna memilih beberapa baris, klik Main.storyboard dua kali file untuk membukanya untuk pengeditan di Penyusun Antarmuka. Pilih Tampilan Kerangka di Hierarki Antarmuka dan centang kotak Beberapa di Pemeriksa Atribut:

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

Selanjutnya, edit ProductOutlineDelegate.cs file dan tambahkan metode berikut:

public override bool ShouldSelectItem (NSOutlineView outlineView, NSObject item)
{
    // Don't select product groups
    return !((Product)item).IsProductGroup;
}

Ini akan memungkinkan pengguna untuk memilih satu baris di Tampilan Kerangka. Kembali false untuk ShouldSelectRow item apa pun yang tidak Anda inginkan agar pengguna dapat memilih atau false untuk setiap item jika Anda tidak ingin pengguna dapat memilih item apa pun.

Ketik untuk Memilih Baris

Jika Anda ingin mengizinkan pengguna mengetik karakter dengan Tampilan Kerangka dipilih dan memilih baris pertama yang memiliki karakter tersebut Main.storyboard , klik dua kali file untuk membukanya untuk pengeditan di Penyusun Antarmuka. Pilih Tampilan Kerangka di Hierarki Antarmuka dan centang kotak centang Pilih Jenis di Pemeriksa Atribut:

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

Sekarang mari kita edit ProductOutlineDelegate.cs file dan tambahkan metode berikut:

public override NSObject GetNextTypeSelectMatch (NSOutlineView outlineView, NSObject startItem, NSObject endItem, string searchString)
{
    foreach(Product product in DataSource.Products) {
        if (product.Title.Contains (searchString)) {
            return product;
        }
    }

    // Not found
    return null;
}

Metode GetNextTypeSelectMatch mengambil yang diberikan searchString dan mengembalikan item pertama Product yang memiliki string tersebut di dalamnya adalah Title.

Menyusun Ulang Kolom

Jika Anda ingin mengizinkan pengguna untuk menyeret urutkan ulang kolom dalam Tampilan Kerangka, klik Main.storyboard dua kali file untuk membukanya untuk pengeditan di Penyusun Antarmuka. Pilih Tampilan Kerangka di Hierarki Antarmuka dan centang kotak Susun Ulang di Pemeriksa Atribut:

Jika kita memberikan nilai untuk properti Simpan Otomatis dan memeriksa bidang Informasi Kolom, setiap perubahan yang kita buat pada tata letak tabel akan secara otomatis disimpan untuk kita dan dipulihkan saat aplikasi dijalankan berikutnya.

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

Sekarang mari kita edit ProductOutlineDelegate.cs file dan tambahkan metode berikut:

public override bool ShouldReorder (NSOutlineView outlineView, nint columnIndex, nint newColumnIndex)
{
    return true;
}

Metode ShouldReorder harus kembali true untuk kolom apa pun yang ingin diizinkan untuk diseret diurutkan ulang ke dalam newColumnIndex, yang lain mengembalikan false;

Jika kita menjalankan aplikasi, kita dapat menyeret Header Kolom untuk menyusun ulang kolom kita:

Mengedit Sel

Jika Anda ingin mengizinkan pengguna mengedit nilai untuk sel tertentu, edit ProductOutlineDelegate.cs file dan ubah GetViewForItem metode sebagai berikut:

public override NSView GetView (NSOutlineView outlineView, NSTableColumn tableColumn, NSObject item) {
    // Cast item
    var product = item as Product;

    // This pattern allows you reuse existing views when they are no-longer in use.
    // If the returned view is null, you instance up a new view
    // If a non-null view is returned, you modify it enough to reflect the new data
    NSTextField view = (NSTextField)outlineView.MakeView (tableColumn.Title, this);
    if (view == null) {
        view = new NSTextField ();
        view.Identifier = tableColumn.Title;
        view.BackgroundColor = NSColor.Clear;
        view.Bordered = false;
        view.Selectable = false;
        view.Editable = !product.IsProductGroup;
    }

    // Tag view
    view.Tag = outlineView.RowForItem (item);

    // Allow for edit
    view.EditingEnded += (sender, e) => {

        // Grab product
        var prod = outlineView.ItemAtRow(view.Tag) as Product;

        // Take action based on type
        switch(view.Identifier) {
        case "Product":
            prod.Title = view.StringValue;
            break;
        case "Details":
            prod.Description = view.StringValue;
            break;
        }
    };

    // Setup view based on the column selected
    switch (tableColumn.Title) {
    case "Product":
        view.StringValue = product.Title;
        break;
    case "Details":
        view.StringValue = product.Description;
        break;
    }

    return view;
}

Sekarang jika kita menjalankan aplikasi, pengguna dapat mengedit sel dalam Tampilan Tabel:

Menggunakan Gambar dalam Tampilan Kerangka

Untuk menyertakan gambar sebagai bagian dari sel dalam NSOutlineView, Anda harus mengubah cara data dikembalikan oleh metode Tampilan NSTableViewDelegate'sGetView Kerangka untuk menggunakan NSTableCellView alih-alih yang khas NSTextField. Contohnya:

public override NSView GetView (NSOutlineView outlineView, NSTableColumn tableColumn, NSObject item) {
    // Cast item
    var product = item as Product;

    // This pattern allows you reuse existing views when they are no-longer in use.
    // If the returned view is null, you instance up a new view
    // If a non-null view is returned, you modify it enough to reflect the new data
    NSTableCellView view = (NSTableCellView)outlineView.MakeView (tableColumn.Title, this);
    if (view == null) {
        view = new NSTableCellView ();
        if (tableColumn.Title == "Product") {
            view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
            view.AddSubview (view.ImageView);
            view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
        } else {
            view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
        }
        view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;
        view.AddSubview (view.TextField);
        view.Identifier = tableColumn.Title;
        view.TextField.BackgroundColor = NSColor.Clear;
        view.TextField.Bordered = false;
        view.TextField.Selectable = false;
        view.TextField.Editable = !product.IsProductGroup;
    }

    // Tag view
    view.TextField.Tag = outlineView.RowForItem (item);

    // Allow for edit
    view.TextField.EditingEnded += (sender, e) => {

        // Grab product
        var prod = outlineView.ItemAtRow(view.Tag) as Product;

        // Take action based on type
        switch(view.Identifier) {
        case "Product":
            prod.Title = view.TextField.StringValue;
            break;
        case "Details":
            prod.Description = view.TextField.StringValue;
            break;
        }
    };

    // Setup view based on the column selected
    switch (tableColumn.Title) {
    case "Product":
        view.ImageView.Image = NSImage.ImageNamed (product.IsProductGroup ? "tags.png" : "tag.png");
        view.TextField.StringValue = product.Title;
        break;
    case "Details":
        view.TextField.StringValue = product.Description;
        break;
    }

    return view;
}

Untuk informasi selengkapnya, silakan lihat bagian Menggunakan Gambar dengan Tampilan Kerangka dari dokumentasi Bekerja dengan Gambar kami.

Tampilan Kerangka Pengikatan Data

Dengan menggunakan teknik Key-Value Coding dan Data Binding di aplikasi Xamarin.Mac, Anda dapat sangat mengurangi jumlah kode yang harus Anda tulis dan pertahankan untuk mengisi dan bekerja dengan elemen UI. Anda juga memiliki manfaat untuk memisahkan lebih lanjut data cadangan Anda (Model Data) dari Antarmuka Pengguna ujung depan Anda (Model-View-Controller), yang mengarah ke desain aplikasi yang lebih mudah dipertahankan dan lebih fleksibel.

Key-Value Coding (KVC) adalah mekanisme untuk mengakses properti objek secara tidak langsung, menggunakan kunci (string yang diformat khusus) untuk mengidentifikasi properti alih-alih mengaksesnya melalui variabel instans atau metode aksesor (get/set). Dengan menerapkan aksesor yang sesuai dengan Key-Value Coding di aplikasi Xamarin.Mac Anda, Anda mendapatkan akses ke fitur macOS lain seperti Key-Value Observing (KVO), Pengikatan Data, Data Inti, Pengikatan kakao, dan kemampuan skrip.

Untuk informasi selengkapnya, silakan lihat bagian Pengikatan Data Tampilan Kerangka dari dokumentasi Pengikatan Data dan Pengkodian Nilai Kunci kami.

Ringkasan

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

Bagikan melalui

Tampilan kerangka di Xamarin.Mac

Pengantar Tampilan Kerangka

Membuat dan Memelihara Tampilan Kerangka di Xcode

Menambahkan Tindakan dan Outlet

Mengisi Tampilan Kerangka

Mengurutkan menurut Kolom

Pilihan Baris

Pilihan Beberapa Baris

Ketik untuk Memilih Baris

Menyusun Ulang Kolom

Mengedit Sel

Menggunakan Gambar dalam Tampilan Kerangka

Tampilan Kerangka Pengikatan Data

Ringkasan

Sumber Daya Tambahan:

Bagikan melalui

Tampilan kerangka di Xamarin.Mac

Pengantar Tampilan Kerangka

Membuat dan Memelihara Tampilan Kerangka di Xcode

Menambahkan Tindakan dan Outlet

Mengisi Tampilan Kerangka

Mengurutkan menurut Kolom

Pilihan Baris

Pilihan Beberapa Baris

Ketik untuk Memilih Baris

Menyusun Ulang Kolom

Mengedit Sel

Menggunakan Gambar dalam Tampilan Kerangka

Tampilan Kerangka Pengikatan Data

Ringkasan

Link Terkait

Sumber Daya Tambahan: