Xamarin. Mac içindeki tablo görünümleri

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

Bu makalede bir Xamarin. Mac uygulamasındaki tablo görünümleriyle çalışma ele alınmaktadır. Xcode 'da tablo görünümleri oluşturmayı ve Interface Builder kod içinde bunlarla etkileşim kurmayı açıklar.

Bir Xamarin. Mac uygulamasında C# ve .NET ile çalışırken, Objective-C ve Objective-C üzerinde çalışan bir geliştiricinin kullandığı Tablo görünümlerine erişebilirsiniz. Xamarin. Mac doğrudan Xcode ile tümleştiğinden tablo görünümlerinizi oluşturmak ve bakımını yapmak için Xcode 'un Interface Builder kullanabilirsiniz (veya isteğe bağlı olarak bunları doğrudan C# kodunda oluşturabilirsiniz).

Tablo görünümü, verileri birden çok satırda bir veya daha fazla bilgi sütunu içeren tablosal biçimde görüntüler. Kullanıcı, oluşturulmakta olan tablo görünümü türüne göre sütuna göre sıralama yapabilir, sütunları yeniden düzenleyebilir, sütun ekleyebilir, sütunları kaldırabilir veya tablo içinde yer alan verileri düzenleyebilir.

Bu makalede, bir Xamarin. Mac uygulamasındaki tablo görünümleriyle çalışmanın temelleri ele alınacaktır. Bu makalede kullanacağımız temel kavramları ve teknikleri kapsadığından, ilk olarak Hello, Mac makalesi, özellikle de xcode ve Interface Builder ve diğer ve eylemler bölümlerine giriş yapmanız önerilir.

Exposing C# classes / methods to Objective-C Exposing C# classes / methods to Objective-C belgesinin bölümüne de göz atmak Isteyebilirsiniz, RegisterExport C# sınıflarınızı Objective-C nesneler ve Kullanıcı Arabirimi öğelerine bağlamak için kullanılan ve komutlarını açıklamaktadır.

Tablo görünümlerine giriş

Tablo görünümü, verileri birden çok satırda bir veya daha fazla bilgi sütunu içeren tablosal biçimde görüntüler. Tablo görünümleri, kaydırma görünümleri () içinde görüntülenir NSScrollView ve macOS 10,7 ile başlayarak, NSViewNSCell her iki satırı ve sütunu da göstermek Için herhangi bir hücresini () kullanabilirsiniz. Bununla birlikte, yine de kullanmaya devam edebilirsiniz NSCell , genellikle NSTableCellView özel satırlarınızı ve sütunlarınızı oluşturabilirsiniz.

Bir tablo görünümü, bir veri kaynağını () temel alarak, NSTableViewDataSource gerekli olan satırları ve sütunları gereken şekilde sağlamak için kendi verilerini depolamaz.

Tablo sütunu yönetimini desteklemek için tablo görünümü temsilcisinin () bir alt sınıfı sağlayarak Tablo görünümünün davranışı özelleştirilebilir ve NSTableViewDelegate tek tek sütunlar ve satırlar için işlevselliği, satır seçimini ve düzenlemeyi, özel izlemeyi ve özel görünümleri seçin.

Apple, tablo görünümleri oluştururken aşağıdakileri önerir:

Kullanıcının tabloyu sütun başlıklarına tıklayarak sıralamasına izin verin.
Bu sütunda gösterilen verileri tanımlayan isimler veya kısa ad tümceleri olan sütun üstbilgileri oluşturun.

Daha fazla bilgi için lütfen Apple 'ın OS X ınsan arabirimi yönergelerinin içerik görünümleri bölümüne bakın.

Xcode 'da tablo görünümleri oluşturma ve sürdürme

Yeni bir Xamarin. Mac Cocoa uygulaması oluşturduğunuzda, varsayılan olarak standart bir boş pencere alırsınız. Bu pencereler .storyboard projeye otomatik olarak dahil edilen bir dosyada tanımlanmıştır. Windows tasarımınızı düzenlemek için, Çözüm Gezginidosyasına çift tıklayın :

Bu, Xcode 'un Interface Builder pencere tasarımını açar:

tableTablo görünümü denetimlerini bulmayı kolaylaştırmak Için table arama kutusuna yazın:

Arabirim düzenleyicisindegörünüm denetleyicisine bir tablo görünümü sürükleyin, görünüm denetleyicisinin içerik alanını doldurup, kısıtlama Düzenleyicisi'ndeki pencereyle birlikte küçülüp büyüdüğü yere ayarlayın:

Arabirim hiyerarşisinde tablo görünümünü seçin ve öznitelik denetçisindeaşağıdaki özellikler mevcuttur:

Içerik modu - NSCell verileri satırlarda ve sütunlarda göstermek için görünümler () veya hücreler () kullanmanıza izin verir. MacOS 10,7 ile başlayarak, görünümleri kullanmanız gerekir.
Kayan nokta grubu satırları - Tablo görünümü, kaydırılan hücreleri kayan hücreler olarak çizecek.
Sütunlar -gösterilecek sütun sayısını tanımlar.
Üst bilgiler -varsa sütunlarda üstbilgiler olur.
Yeniden sıralama - Bu durumda, Kullanıcı tablodaki sütunları yeniden sıralamayı sürükleyebilirsiniz.
Yeniden boyutlandırma - Kullanıcı sütun üst bilgilerini sütunları yeniden boyutlandırmak üzere sürükleyebilecektir.
Sütun boyutlandırma -tablonun sütunları otomatik olarak nasıl boyutlandıracağı denetler.
Vurgula -tablonun bir hücre seçildiğinde kullandığı vurgulama türünü denetler.
Diğer Satırlar -varsa , başka herhangi bir satır arka plan rengine sahip olur.
Yatay kılavuz -hücreler arasında yatay olarak çizilen kenarlık türünü seçer.
Dikey kılavuz -hücreler arasında dikey olarak çizilen kenarlık türünü seçer.
Kılavuz rengi -hücre kenarlık rengini ayarlar.
Arka plan -hücre arka plan rengini ayarlar.
Seçim -kullanıcının tabloda tablodaki hücreleri nasıl seçkullanılabileceğini denetlemenize izin verir:
- Birden çok ise , Kullanıcı birden çok satır ve sütun seçebilir.
- Sütun -varsa , Kullanıcı sütun seçebilir.
- Seç -IF , Kullanıcı bir satırı seçmek için bir karakter yazabilir.
- Boş : Kullanıcı bir satır veya sütun seçmek için gerekli değilse, tablo hiçbir seçim yapılmasına izin vermez.
Otomatik kaydetme -tablolar biçiminin altında otomatik olarak kaydedileceği ad.
Sütun bilgileri - sütunların sırası ve genişliği otomatik olarak kaydedilir.
Satır sonları -hücrenin satır sonlarını nasıl işleyeceğini seçin.
Son görünen satırı keser -Eğer hücre, verilerin sınırları içine uyamayacak şekilde kesilir.

Önemli

Eski bir Xamarin. Mac uygulamasını korumadığınız müddetçe, temel tablo NSView görünümleri NSCell temel tablo görünümlerinde kullanılmalıdır. NSCell Eski olarak değerlendirilir ve ileri doğru şekilde desteklenmiyor olabilir.

Arabirim hiyerarşisinde bir tablo sütunu seçin ve öznitelik denetçisindeaşağıdaki özellikler mevcuttur:

Title -sütunun başlığını ayarlar.
Hizalama -hücrelerin içindeki metnin hizalamasını ayarlayın.
Başlık yazı tipi -hücrenin başlık metninin yazı tipini seçer.
Anahtar Sırala -sütundaki verileri sıralamak için kullanılan anahtardır. Kullanıcı bu sütunu sıralamıyorsa boş bırakın.
Seçici -sıralamayı gerçekleştirmek Için kullanılan eylemdir . Kullanıcı bu sütunu sıralamıyorsa boş bırakın.
Order -sütun verileri için sıralama sıralarıdır.
Yeniden boyutlandırma -sütun için yeniden boyutlandırma türünü seçer.
Düzenlenebilir - Kullanıcı hücre tabanlı tablodaki hücreleri düzenleyebilir.
Gizli -ise , sütun gizlidir.

Ayrıca, (sütunun sağ tarafında dikey olarak ortalanmış) sola veya sağa sürükleyerek sütunu yeniden boyutlandırabilirsiniz.

Tablo görünümümüzde her bir sütunu seçemm ve birinci sütuna bir başlık ve ikincisini verlim Details .

Arabirim hiyerarşisinde bir tablo hücresi görünümü ( NSTableViewCell ) seçin NSTableViewCell ve öznitelik denetçisindeaşağıdaki özellikler mevcuttur:

Bunlar standart bir görünümün tüm özellikleridir. Ayrıca, bu sütun için satırları yeniden boyutlandırma seçeneğiniz de vardır.

Arabirim hiyerarşisinde bir tablo görünümü hücresi seçin (varsayılan olarak, bu bir ' dir NSTextField ) ve öznitelik denetçisindeaşağıdaki özellikler mevcuttur: NSTextField

Burada ayarlanacak standart metin alanının tüm özelliklerine sahip olacaksınız. Varsayılan olarak, bir sütundaki bir hücrenin verilerini göstermek için standart bir metin alanı kullanılır.

Arabirim hiyerarşisinde bir tablo hücresi görünümü ( NSTableFieldCell ) seçin NSTableFieldCell ve öznitelik denetçisindeaşağıdaki özellikler mevcuttur:

Buradaki en önemli ayarlar şunlardır:

Düzen -bu sütundaki hücrelerin nasıl düzenlendiğini seçin.
Tek satır modunu kullanır - hücre tek bir satırla sınırlıdır.
Ilk çalışma zamanı düzen genişliği -Eğer , hücre, uygulama ilk çalıştırıldığında görüntülenecek şekilde (el ile veya otomatik olarak) Genişlik kümesini tercih eder.
Eylem -hücre Için düzenleme eyleminin ne zaman gönderildiğini denetler.
Davranış -bir hücrenin seçilebilir mi yoksa düzenlenebilir mi olduğunu tanımlar.
Zengin metin -Eğer hücrede biçimlendirilmiş ve stillendirilmiş metin görüntülenebilir.
Geri al -ise hücre, geri alma davranışının sorumluluğunu kabul eder.

NSTableFieldCellNSTableFieldCelltablo sütununun altındaki tablo hücresi görünümünü () seçin:

Bu, verilen sütun için oluşturulan tüm hücreler için temel Düzen olarak kullanılan tablo hücresi görünümünü düzenlemenizi sağlar.

Eylemler ve aykırı ekler ekleme

Diğer Cocoa kullanıcı arabirimi denetimlerinde olduğu gibi Tablo Görünümü'mizi ve sütunlarını ve hücrelerini Actions ve Outlets kullanarak C# koduna (gereken işlevlere göre) ortaya çıkarmamız gerekir.

İşlem, ortaya çıkarmak istediğiniz herhangi bir Tablo Görünümü öğesi için aynıdır:

Yardımcı Düzenleyici'ye geçişin ve dosyanın seçili olduğundan emin olun:
Arabirim Hiyerarşisi'nin Tablo Görünümü'ne tıklayınve dosyaya sürükleyin.
Tablo Görünümü için adlı bir Çıkış oluşturun:
ve olarak da adlandırılan tablo sütunları için Çıkışlar DetailsColumn oluşturun:
Değişikliklerinizi kaydedin ve Xcode ile Mac için Visual Studio geri dönüp geri dönersiniz.

Ardından, uygulama çalıştırıldık zaman kodu yazarak tablonun bazı verilerini gösterebilirsiniz.

Tablo Görünümünü Doldurmak

Tablo Görünümü'miz Interface Builder bir Çıkış aracılığıyla ortaya çıkararak, bunu doldurmak için C# kodunu oluşturmamız gerekir.

İlk olarak, tek tek Product satırların bilgilerini tutmak için yeni bir sınıf oluşturuz. Dosya Çözüm Gezginisağ tıklayın ve yeni Project Ekle... öğesini seçin. Genel BoşSınıf'ıseçin, Ad alanına girin ve Yeni düğmesine tıklayın:

Dosyayı Product.cs aşağıdaki gibi yapın:

using System;

namespace MacTables
{
  public class Product
  {
    #region Computed Properties
    public string Title { get; set;} = "";
    public string Description { get; set;} = "";
    #endregion

    #region Constructors
    public Product ()
    {
    }

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

Ardından, istenen şekilde tablomuza NSTableDataSource veri sağlamak için bir alt sınıfı oluşturmamız gerekir. Dosya Çözüm Gezginisağ tıklayın ve yeni Project Ekle... öğesiniseçin. Genel BoşSınıf'ıseçin, Ad alanına girin ve Yeni düğmesine tıklayın.

Dosyasını ProductTableDataSource.cs düzenleyin ve aşağıdakine benzer şekilde düzenleyin:

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

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

    #region Constructors
    public ProductTableDataSource ()
    {
    }
    #endregion

    #region Override Methods
    public override nint GetRowCount (NSTableView tableView)
    {
      return Products.Count;
    }
    #endregion
  }
}

Bu sınıf, Tablo Görünümü'mizin öğeleri için depolama alanına sahiptir ve tablodaki satır sayısını iade etmek GetRowCount için 'i geçersiz kılar.

Son olarak, tablomuz için davranışı sağlamak NSTableDelegate için bir alt sınıfı oluşturmamız gerekir. Dosya Çözüm Gezginisağ tıklayın ve yeni Project Ekle... öğesiniseçin. Genel BoşSınıf'ıseçin, Ad alanına girin ve Yeni düğmesine tıklayın.

Dosyasını ProductTableDelegate.cs düzenleyin ve aşağıdakine benzer şekilde düzenleyin:

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

namespace MacTables
{
  public class ProductTableDelegate: NSTableViewDelegate
  {
    #region Constants 
    private const string CellIdentifier = "ProdCell";
    #endregion

    #region Private Variables
    private ProductTableDataSource DataSource;
    #endregion

    #region Constructors
    public ProductTableDelegate (ProductTableDataSource datasource)
    {
      this.DataSource = datasource;
    }
    #endregion

    #region Override Methods
    public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
    {
      // 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)tableView.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;
      }

      // Setup view based on the column selected
      switch (tableColumn.Title) {
      case "Product":
        view.StringValue = DataSource.Products [(int)row].Title;
        break;
      case "Details":
        view.StringValue = DataSource.Products [(int)row].Description;
        break;
      }

      return view;
    }
    #endregion
  }
}

bir örneği ProductTableDelegate oluşturduklarında, tablo için veri sağlayan bir örneğini de ProductTableDataSource iletiriz. yöntemi, GetViewForItem bir ver sütunu ve satırı için hücreyi görüntülemek için bir görünüm (veri) döndürerek sorumludur. Mümkünse, hücreyi görüntülemek için mevcut bir görünüm yeniden kullanılır, görüntülenmezse yeni bir görünüm oluşturulmalıdır.

Tabloyu doldurmak için dosyasını düzenleyemez ViewController.cs ve yöntemini aşağıdaki gibi bir hale AwakeFromNib koyabilirsiniz:

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#"));

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

Uygulamayı çalıştıracaksanız aşağıdakiler görüntülenir:

Sütuna Göre Sıralama

Kullanıcının sütun üst bilgisine tıklayarak tablodaki verileri sıralamasına izin ver. İlk olarak dosyaya çift Main.storyboard tıklar ve dosyayı dosyada düzenlemek Interface Builder. sütununu Product seçin, Title Sıralama Anahtarı için Productcompare: Seçici için girin Title Sipariş için Ascending öğesini compare:

sütununu Details seçin, Description Sıralama Anahtarı için Detailscompare: Seçici için girin Description Sipariş için Ascending öğesini compare:

Değişikliklerinizi kaydedin ve Xcode ile Mac için Visual Studio geri dönmek.

Şimdi dosyayı düzenleyemez ProductTableDataSource.cs ve aşağıdaki yöntemleri ekleyemezsiniz:

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;
  case "Description":
    if (ascending) {
      Products.Sort ((x, y) => x.Description.CompareTo (y.Description));
    } else {
      Products.Sort ((x, y) => -1 * x.Description.CompareTo (y.Description));
    }
    break;
  }

}

public override void SortDescriptorsChanged (NSTableView tableView, NSSortDescriptor[] oldDescriptors)
{
  // Sort the data
  if (oldDescriptors.Length > 0) {
    // Update sort
    Sort (oldDescriptors [0].Key, oldDescriptors [0].Ascending);
  } else {
    // Grab current descriptors and update sort
    NSSortDescriptor[] tbSort = tableView.SortDescriptors; 
    Sort (tbSort[0].Key, tbSort[0].Ascending); 
  }
      
  // Refresh table
  tableView.ReloadData ();
}

yöntemi, Veri Kaynağı'daki verileri belirli bir sınıf alanına göre artan veya SortProduct azalan düzende sıralamamıza olanak sağlar. Geçersiz kılınan SortDescriptorsChanged yöntem, kullanım sütun başlığına her tıkladığında çağrılır. Bu değer, Interface Builder için ayar Interface Builder sıralama düzenine geçiri.

Uygulamayı çalıştırarak Sütun Üst Bilgileri'ne tıklarsanız satırlar o sütuna göre sıralanır:

Satır Seçimi

Kullanıcının tek bir satır seçmesine izin vermek için dosyaya çift tıklar ve bu satırda düzenleme Main.storyboard için Interface Builder. Arabirim Hiyerarşisinde Tablo Görünümü'ne tıklayın ve Öznitelik Denetçisi'nin Birden Çok onay kutusunun işaretini kaldırın:

Değişikliklerinizi kaydedin ve Xcode ile Mac için Visual Studio geri dönmek.

Ardından dosyasını düzenleyin ProductTableDelegate.cs ve aşağıdaki yöntemi ekleyin:

public override bool ShouldSelectRow (NSTableView tableView, nint row)
{
  return true;
}

Bu, kullanıcının Tablo Görünümü'ne tek bir satır seçmesine olanak sağlar. Kullanıcının seçesin istemey istediğiniz herhangi bir satır için veya herhangi bir satırı seçesin istemiyorsanız her satır falseShouldSelectRow için öğesini false kullanın.

Tablo Görünümü ( NSTableView ) satır seçimiyle çalışmak için aşağıdaki yöntemleri içerir:

DeselectRow(nint) - Tablodaki verilen satırın seçimini kaldırın.
SelectRow(nint,bool) - Verilen satırı seçer. Aynı false anda yalnızca bir satır seçmek için ikinci parametreye geçiş.
SelectedRow - Tabloda seçilen geçerli satırı döndürür.
IsRowSelected(nint) - true Verilen satır seçiliyse döndürür.

Birden Çok Satır Seçimi

Kullanıcının birden çok satır seçmesine izin vermek için dosyaya çift tıklar ve dosyayı dosyada düzenlemek Main.storyboard Interface Builder. Arabirim Hiyerarşisinde Tablo Görünümünü seçin ve ÖznitelikDenetçisi'nin Birden Çok onay kutusunu işaretleyin:

Değişikliklerinizi kaydedin ve Xcode ile Mac için Visual Studio geri dönmek.

Ardından dosyasını düzenleyin ProductTableDelegate.cs ve aşağıdaki yöntemi ekleyin:

public override bool ShouldSelectRow (NSTableView tableView, nint row)
{
  return true;
}

Tablo Görünümü ( NSTableView ) satır seçimiyle çalışmak için aşağıdaki yöntemleri içerir:

DeselectAll(NSObject) - Tablodaki tüm satırların seçimini kaldırın. seçmeyi this yapan nesnesinde göndermek üzere ilk parametre için kullanın.
DeselectRow(nint) - Tablodaki verilen satırın seçimini kaldırın.
SelectAll(NSobject) - Tablodaki tüm satırları seçer. seçmeyi this yapan nesnesinde göndermek üzere ilk parametre için kullanın.
SelectRow(nint,bool) - Verilen satırı seçer. İkinci parametre için pass seçimi temizle ve yalnızca tek bir satır seçin, seçimi genişletmek ve false bu satırı eklemek için geçiş true yapın.
SelectRows(NSIndexSet,bool) - Verilen satır kümelerini seçer. İkinci parametre için pass seçimi temizle ve yalnızca bu satırları seçin, seçimi genişletmek ve bu false satırları dahil etmek için geçiş true yapın.
SelectedRow - Tabloda seçilen geçerli satırı döndürür.
SelectedRows - Seçili NSIndexSet satırların dizinlerini içeren bir döndürür.
SelectedRowCount - Seçilen satır sayısını döndürür.
IsRowSelected(nint) - true Verilen satır seçiliyse döndürür.

Satır Seçmek için Yazın

Kullanıcının Tablo Görünümü seçiliyken bir karakter yazmasına ve bu karaktere sahip olan ilk satırı seçmesine izin vermek için dosyaya çift tıklar ve dosyada düzenleme için Main.storyboard Interface Builder. Arabirim Hiyerarşisinde Tablo Görünümünü seçin ve Öznitelik Denetçisi'nin Tür Seçimi onay kutusunu işaretleyin:

Değişikliklerinizi kaydedin ve Xcode ile Mac için Visual Studio geri dönmek.

Şimdi dosyayı düzenleyemez ProductTableDelegate.cs ve aşağıdaki yöntemi ekleriz:

public override nint GetNextTypeSelectMatch (NSTableView tableView, nint startRow, nint endRow, string searchString)
{
  nint row = 0;
  foreach(Product product in DataSource.Products) {
    if (product.Title.Contains(searchString)) return row;

    // Increment row counter
    ++row;
  }

  // If not found select the first row
  return 0;
}

yöntemi GetNextTypeSelectMatch verileni alır searchString ve içinde bu dizeyi içeren ilk satırı ProductTitle döndürür.

Uygulamayı çalıştırarak bir karakter yazacak olursa bir satır seçilir:

Sütunları Yeniden Sıralama

Kullanıcının Tablo Görünümü'ne sütunları yeniden sıralamasını sürüklemesine izin vermek için dosyaya çift tıklar ve dosyayı düzenleme için Main.storyboard Interface Builder. Arabirim Hiyerarşisinde Tablo Görünümünü seçin ve Öznitelik Denetçisi'nin Yeniden Sıralama onay kutusunu işaretleyin:

Otomatik Kaydetme özelliği için bir değer verir ve Sütun Bilgileri alanını kontrol ederse, tablonun düzeninde yapılan tüm değişiklikler bizim için otomatik olarak kaydedilir ve uygulama bir sonraki çalıştırılırken geri yüklenir.

Değişikliklerinizi kaydedin ve Xcode ile Mac için Visual Studio geri dönmek.

Şimdi dosyayı düzenleyemez ProductTableDelegate.cs ve aşağıdaki yöntemi ekleriz:

public override bool ShouldReorder (NSTableView tableView, nint columnIndex, nint newColumnIndex)
{
  return true;
}

yöntemi, ShouldReorder yeniden true sıralandırarak içine sürüklemesine izin vermek istediğiniz herhangi bir sütun için , else newColumnIndex return ; false

Uygulamayı çalıştıracak olursanız sütunlarımızı yeniden sıralamak için Sütun Üst Bilgilerini sürükleyebilirsiniz:

Hücreleri Düzenleme

Kullanıcının belirli bir hücrenin değerlerini düzenlemesine izin vermek istiyorsanız, ProductTableDelegate.cs dosyayı düzenleyin ve GetViewForItem yöntemi aşağıdaki gibi değiştirin:

public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
{
  // 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)tableView.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 = true;

    view.EditingEnded += (sender, e) => {
          
      // Take action based on type
      switch(view.Identifier) {
      case "Product":
        DataSource.Products [(int)view.Tag].Title = view.StringValue;
        break;
      case "Details":
        DataSource.Products [(int)view.Tag].Description = view.StringValue;
        break; 
      }
    };
  }

  // Tag view
  view.Tag = row;

  // Setup view based on the column selected
  switch (tableColumn.Title) {
  case "Product":
    view.StringValue = DataSource.Products [(int)row].Title;
    break;
  case "Details":
    view.StringValue = DataSource.Products [(int)row].Description;
    break;
  }

  return view;
}

Artık uygulamayı çalıştırdığımızda, Kullanıcı tablo görünümündeki hücreleri düzenleyebilir:

Tablo görünümlerinde görüntü kullanma

Bir görüntüyü içindeki hücrenin bir parçası olarak eklemek için NSTableView , verilerin Tablo görünümünün NSTableViewDelegate'sGetViewForItem yöntemi tarafından, normal yerine bir kullanmak için nasıl döndürüleceğini değiştirmeniz gerekir NSTableCellViewNSTextField . Örnek:

public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
{

  // 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)tableView.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 = true;

    view.TextField.EditingEnded += (sender, e) => {

      // Take action based on type
      switch(view.Identifier) {
      case "Product":
        DataSource.Products [(int)view.TextField.Tag].Title = view.TextField.StringValue;
        break;
      case "Details":
        DataSource.Products [(int)view.TextField.Tag].Description = view.TextField.StringValue;
        break; 
      }
    };
  }

  // Tag view
  view.TextField.Tag = row;

  // Setup view based on the column selected
  switch (tableColumn.Title) {
  case "Product":
    view.ImageView.Image = NSImage.ImageNamed ("tags.png");
    view.TextField.StringValue = DataSource.Products [(int)row].Title;
    break;
  case "Details":
    view.TextField.StringValue = DataSource.Products [(int)row].Description;
    break;
  }

  return view;
}

Daha fazla bilgi için bkz. görüntü Ile çalışma Belgeimizin tablo görünümleri ile görüntüleri kullanma bölümü.

Bir satıra silme düğmesi ekleme

Uygulamanızın gereksinimlerine bağlı olarak, tablodaki her satır için bir eylem düğmesi sağlamanız gereken durumlar olabilir. Buna örnek olarak, yukarıda oluşturulan tablo görünümü örneğini genişleterek her satıra bir Delete düğmesi ekleyin.

İlk olarak, Main.storyboard Xcode Interface Builder içinde öğesini düzenleyin, tablo görünümünü seçin ve sütun sayısını üç (3) olarak arttırın. Sonra, yeni sütunun başlığını şu şekilde değiştirin :

değişiklikleri film şeridine kaydedin ve değişiklikleri eşitlemek için Mac için Visual Studio geri dönün.

Sonra, dosyayı düzenleyin ViewController.cs ve aşağıdaki ortak yöntemi ekleyin:

public void ReloadTable ()
{
  ProductTable.ReloadData ();
}

Aynı dosyada, aşağıdaki gibi, yöntemi içinde yeni tablo görünümü temsilcisinin oluşturulmasını değiştirin ViewDidLoad :

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

Şimdi, ProductTableDelegate.cs dosyayı görünüm denetleyicisine özel bir bağlantı içerecek şekilde düzenleyin ve temsilcinin yeni bir örneğini oluştururken denetleyiciyi bir parametre olarak alın:

#region Private Variables
private ProductTableDataSource DataSource;
private ViewController Controller;
#endregion

#region Constructors
public ProductTableDelegate (ViewController controller, ProductTableDataSource datasource)
{
  this.Controller = controller;
  this.DataSource = datasource;
}
#endregion

Ardından, aşağıdaki yeni özel yöntemi sınıfına ekleyin:

private void ConfigureTextField (NSTableCellView view, nint row)
{
  // Add to view
  view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;
  view.AddSubview (view.TextField);

  // Configure
  view.TextField.BackgroundColor = NSColor.Clear;
  view.TextField.Bordered = false;
  view.TextField.Selectable = false;
  view.TextField.Editable = true;

  // Wireup events
  view.TextField.EditingEnded += (sender, e) => {

    // Take action based on type
    switch (view.Identifier) {
    case "Product":
      DataSource.Products [(int)view.TextField.Tag].Title = view.TextField.StringValue;
      break;
    case "Details":
      DataSource.Products [(int)view.TextField.Tag].Description = view.TextField.StringValue;
      break;
    }
  };

  // Tag view
  view.TextField.Tag = row;
}

Bu, daha önce yönteminde gerçekleştirilen metin görünümü yapılandırmalarının tümünü alır GetViewForItem ve bunları tek ve çağrılabilir bir konuma koyar (tablonun son sütunu bir metin görünümü, ancak bir düğme içermiyor).

Son olarak, GetViewForItem yöntemini düzenleyin ve aşağıdaki gibi görünmesini sağlayın:

public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
{

  // 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)tableView.MakeView (tableColumn.Title, this);
  if (view == null) {
    view = new NSTableCellView ();

    // Configure the view
    view.Identifier = tableColumn.Title;

    // Take action based on title
    switch (tableColumn.Title) {
    case "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));
      ConfigureTextField (view, row);
      break;
    case "Details":
      view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
      ConfigureTextField (view, row);
      break;
    case "Action":
      // Create new button
      var button = new NSButton (new CGRect (0, 0, 81, 16));
      button.SetButtonType (NSButtonType.MomentaryPushIn);
      button.Title = "Delete";
      button.Tag = row;

      // Wireup events
      button.Activated += (sender, e) => {
        // Get button and product
        var btn = sender as NSButton;
        var product = DataSource.Products [(int)btn.Tag];

        // Configure alert
        var alert = new NSAlert () {
          AlertStyle = NSAlertStyle.Informational,
          InformativeText = $"Are you sure you want to delete {product.Title}? This operation cannot be undone.",
          MessageText = $"Delete {product.Title}?",
        };
        alert.AddButton ("Cancel");
        alert.AddButton ("Delete");
        alert.BeginSheetForResponse (Controller.View.Window, (result) => {
          // Should we delete the requested row?
          if (result == 1001) {
            // Remove the given row from the dataset
            DataSource.Products.RemoveAt((int)btn.Tag);
            Controller.ReloadTable ();
          }
        });
      };

      // Add to view
      view.AddSubview (button);
      break;
    }

  }

  // Setup view based on the column selected
  switch (tableColumn.Title) {
  case "Product":
    view.ImageView.Image = NSImage.ImageNamed ("tag.png");
    view.TextField.StringValue = DataSource.Products [(int)row].Title;
    view.TextField.Tag = row;
    break;
  case "Details":
    view.TextField.StringValue = DataSource.Products [(int)row].Description;
    view.TextField.Tag = row;
    break;
  case "Action":
    foreach (NSView subview in view.Subviews) {
      var btn = subview as NSButton;
      if (btn != null) {
        btn.Tag = row;
      }
    }
    break;
  }

  return view;
}

Daha ayrıntılı bilgi için bu kodun birkaç bölümüne bakalım. İlk olarak, yeni bir NSTableViewCell oluşturulduysa, sütunun adına göre eylem yapılır. İlk iki sütun için (ürün ve Ayrıntılar), yeni yöntem çağrılır.

Eylem sütunu için yeni oluşturulur ve alt görünüm olarak hücreye eklenir:

// Create new button
var button = new NSButton (new CGRect (0, 0, 81, 16));
button.SetButtonType (NSButtonType.MomentaryPushIn);
button.Title = "Delete";
button.Tag = row;
...

// Add to view
view.AddSubview (button);

Düğme özelliği, Tag işlenmekte olan satırın numarasını tutmak için kullanılır. Bu sayı, kullanıcı düğme olayında silinecek bir satır istediğinde daha sonra kullanılacaktır Activated :

// Wireup events
button.Activated += (sender, e) => {
  // Get button and product
  var btn = sender as NSButton;
  var product = DataSource.Products [(int)btn.Tag];

  // Configure alert
  var alert = new NSAlert () {
    AlertStyle = NSAlertStyle.Informational,
    InformativeText = $"Are you sure you want to delete {product.Title}? This operation cannot be undone.",
    MessageText = $"Delete {product.Title}?",
  };
  alert.AddButton ("Cancel");
  alert.AddButton ("Delete");
  alert.BeginSheetForResponse (Controller.View.Window, (result) => {
    // Should we delete the requested row?
    if (result == 1001) {
      // Remove the given row from the dataset
      DataSource.Products.RemoveAt((int)btn.Tag);
      Controller.ReloadTable ();
    }
  });
};

Olay işleyicisinin başlangıcında, belirtilen tablo satırındaki düğmesini ve ürünü alırız. Ardından, kullanıcıya satır silmeyi onaylayan bir uyarı gösterilir. Kullanıcı satırı silmeyi seçerse, verilen satır veri kaynağından kaldırılır ve tablo yeniden yüklenir:

// Remove the given row from the dataset
DataSource.Products.RemoveAt((int)btn.Tag);
Controller.ReloadTable ();

Son olarak, tablo görünümü hücresi yeni oluşturulması yerine yeniden kullanılırsa aşağıdaki kod, işlenen sütuna göre onu yapılandırır:

// Setup view based on the column selected
switch (tableColumn.Title) {
case "Product":
  view.ImageView.Image = NSImage.ImageNamed ("tag.png");
  view.TextField.StringValue = DataSource.Products [(int)row].Title;
  view.TextField.Tag = row;
  break;
case "Details":
  view.TextField.StringValue = DataSource.Products [(int)row].Description;
  view.TextField.Tag = row;
  break;
case "Action":
  foreach (NSView subview in view.Subviews) {
    var btn = subview as NSButton;
    if (btn != null) {
      btn.Tag = row;
    }
  }
  break;
}

Eylem sütunu Için tüm alt görünümler, bulunana kadar taranır , bu da Tag özelliği geçerli satıra işaret etmek üzere güncelleştirilir.

Bu değişikliklerle birlikte, uygulamanın her satırda çalıştırıldığı zaman bir Sil düğmesine sahip olur:

Kullanıcı bir Sil düğmesine tıkladığında, belirtilen satırı silmesini isteyen bir uyarı görüntülenir:

Kullanıcı Sil ' i seçerse, satır kaldırılır ve tablo yeniden çizilir:

Veri bağlama tablo görünümleri

Xamarin. Mac uygulamanızda Key-Value kodlama ve veri bağlama tekniklerini kullanarak, doldurmanız ve Kullanıcı arabirimi öğeleriyle çalışmak için yazmanız gereken kod miktarını büyük ölçüde azaltabilirsiniz. Ayrıca, ön uç Kullanıcı arabiriminizden (Model-View-Controller) yedekleme verilerinizi (veri modeli) daha fazla ayırma avantajına sahip olursunuz. böylece, daha esnek uygulama tasarımı daha kolay hale getirir.

Key-Value kodlama (KVC), anahtar değişkenleri veya erişimci yöntemleri () aracılığıyla bunlara erişmek yerine özellikleri belirlemek için anahtarlar (özel olarak biçimlendirilmiş dizeler) kullanılarak nesnenin özelliklerine dolaylı olarak erişmenin bir mekanizmadır get/set . Xamarin. Mac uygulamanızda Key-Value kodlama uyumlu erişimciler uygulayarak, Key-Value gözlemleme (KVO), veri bağlama, çekirdek verileri, Cocoa bağlamaları ve scriptability gibi diğer macOS özelliklerine erişebilirsiniz.

Daha fazla bilgi için lütfen veri bağlamamız ve Key-Value kodlama belgelerinin Tablo görünümü veri bağlama bölümüne bakın.

Özet

Bu makale, Xamarin. Mac uygulamasındaki tablo görünümleriyle çalışmaya ilişkin ayrıntılı bir bakış gerçekleştirmiştir. Tablo görünümlerinin farklı türlerini ve kullanımlarını, Xcode 'un Interface Builder tablo görünümleri oluşturmayı ve bakımını ve C# kodunda tablo görünümleriyle çalışmayı gördük.

Xamarin. Mac içindeki tablo görünümleri

Lütfen deneyiminizi değerlendirin

Tablo görünümlerine giriş

Xcode 'da tablo görünümleri oluşturma ve sürdürme

Eylemler ve aykırı ekler ekleme

Tablo Görünümünü Doldurmak

Sütuna Göre Sıralama

Satır Seçimi

Birden Çok Satır Seçimi

Satır Seçmek için Yazın

Sütunları Yeniden Sıralama

Hücreleri Düzenleme

Tablo görünümlerinde görüntü kullanma

Bir satıra silme düğmesi ekleme

Veri bağlama tablo görünümleri

Özet

İlişkili Bağlantılar