Menyesuaikan ViewCell

Artikel
12/07/2016

Xamarin.Forms ViewCell adalah sel yang dapat ditambahkan ke ListView atau TableView, yang berisi tampilan yang ditentukan pengembang. Artikel ini menunjukkan cara membuat perender kustom untuk ViewCell yang dihosting di dalam Xamarin.Forms kontrol ListView. Ini menghentikan Xamarin.Forms perhitungan tata letak agar tidak berulang kali dipanggil selama pengguliran ListView.

Setiap Xamarin.Forms sel memiliki perender yang menyertainya untuk setiap platform yang membuat instans kontrol asli. ViewCell Ketika dirender oleh Xamarin.Forms aplikasi, di iOS ViewCellRenderer kelas dibuat, yang pada gilirannya membuat instans kontrol asliUITableViewCell. Pada platform Android, ViewCellRenderer kelas membuat instans kontrol asli View . Pada Platform Windows Universal (UWP), ViewCellRenderer kelas membuat instans native DataTemplate. Untuk informasi selengkapnya tentang kelas perender dan kontrol asli yang Xamarin.Forms mengontrol peta ke, lihat Kelas Dasar Perender dan Kontrol Asli.

Diagram berikut mengilustrasikan hubungan antara ViewCell kontrol asli terkait dan yang mengimplementasikannya:

Hubungan Antara Kontrol ViewCell dan Implementasi Kontrol Asli

Proses penyajian dapat dimanfaatkan untuk menerapkan penyesuaian khusus platform dengan membuat perender kustom untuk ViewCell di setiap platform. Proses untuk melakukan ini adalah sebagai berikut:

MembuatXamarin.Forms sel kustom.
Gunakan sel kustom dari Xamarin.Forms.
Buat perender kustom untuk sel di setiap platform.

Setiap item sekarang akan dibahas secara bergantian, untuk mengimplementasikan perender NativeCell yang memanfaatkan tata letak khusus platform untuk setiap sel yang Xamarin.FormsListView dihosting di dalam kontrol. Ini menghentikan Xamarin.Forms perhitungan tata letak agar tidak dipanggil berulang kali selama ListView pengguliran.

Membuat Sel Kustom

Kontrol sel kustom dapat dibuat dengan subkelas kelas, seperti yang ViewCell ditunjukkan dalam contoh kode berikut:

public class NativeCell : ViewCell
{
  public static readonly BindableProperty NameProperty =
    BindableProperty.Create ("Name", typeof(string), typeof(NativeCell), "");

  public string Name {
    get { return (string)GetValue (NameProperty); }
    set { SetValue (NameProperty, value); }
  }

  public static readonly BindableProperty CategoryProperty =
    BindableProperty.Create ("Category", typeof(string), typeof(NativeCell), "");

  public string Category {
    get { return (string)GetValue (CategoryProperty); }
    set { SetValue (CategoryProperty, value); }
  }

  public static readonly BindableProperty ImageFilenameProperty =
    BindableProperty.Create ("ImageFilename", typeof(string), typeof(NativeCell), "");

  public string ImageFilename {
    get { return (string)GetValue (ImageFilenameProperty); }
    set { SetValue (ImageFilenameProperty, value); }
  }
}

Kelas NativeCell dibuat dalam proyek pustaka .NET Standard dan menentukan API untuk sel kustom. Sel kustom mengekspos Nameproperti , Category, dan ImageFilename yang dapat ditampilkan melalui pengikatan data. Untuk informasi selengkapnya tentang pengikatan data, lihat Dasar-Dasar Pengikatan Data.

Mengkonsumsi Sel Kustom

Sel NativeCell kustom dapat direferensikan dalam Xaml di proyek pustaka Standar .NET dengan mendeklarasikan namespace untuk lokasinya dan menggunakan awalan namespace pada elemen sel kustom. Contoh kode berikut menunjukkan bagaimana NativeCell sel kustom dapat dikonsumsi oleh halaman XAML:

<ContentPage ...
    xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
    ...>
    ...
    <ContentPage.Content>
          <StackLayout>
              <Label Text="Xamarin.Forms native cell" HorizontalTextAlignment="Center" />
              <ListView x:Name="listView" CachingStrategy="RecycleElement" ItemSelected="OnItemSelected">
                  <ListView.ItemTemplate>
                      <DataTemplate>
                          <local:NativeCell Name="{Binding Name}" Category="{Binding Category}" ImageFilename="{Binding ImageFilename}" />
                      </DataTemplate>
                  </ListView.ItemTemplate>
              </ListView>
          </StackLayout>
      </ContentPage.Content>
</ContentPage>

local Awalan namespace dapat diberi nama apa pun. Namun, clr-namespace nilai dan assembly harus cocok dengan detail kontrol kustom. Setelah namespace dinyatakan, awalan digunakan untuk mereferensikan sel kustom.

Contoh kode berikut menunjukkan bagaimana NativeCell sel kustom dapat dikonsumsi oleh halaman C#:

public class NativeCellPageCS : ContentPage
{
    ListView listView;

    public NativeCellPageCS()
    {
        listView = new ListView(ListViewCachingStrategy.RecycleElement)
        {
            ItemsSource = DataSource.GetList(),
            ItemTemplate = new DataTemplate(() =>
            {
                var nativeCell = new NativeCell();
                nativeCell.SetBinding(NativeCell.NameProperty, "Name");
                nativeCell.SetBinding(NativeCell.CategoryProperty, "Category");
                nativeCell.SetBinding(NativeCell.ImageFilenameProperty, "ImageFilename");

                return nativeCell;
            })
        };

        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
                Padding = new Thickness(0, 20, 0, 0);
                break;
            case Device.Android:
            case Device.UWP:
                Padding = new Thickness(0);
                break;
        }

        Content = new StackLayout
        {
            Children = {
                new Label { Text = "Xamarin.Forms native cell", HorizontalTextAlignment = TextAlignment.Center },
                listView
            }
        };
        listView.ItemSelected += OnItemSelected;
    }
    ...
}

Xamarin.FormsListView Kontrol digunakan untuk menampilkan daftar data, yang diisi melalui ItemSource properti . Strategi RecycleElement penembolokan mencoba meminimalkan ListView jejak memori dan kecepatan eksekusi dengan mendaur ulang sel daftar. Untuk informasi selengkapnya, lihat Strategi Penembolokan.

Setiap baris dalam daftar berisi tiga item data – nama, kategori, dan nama file gambar. Tata letak setiap baris dalam daftar ditentukan oleh DataTemplate yang dirujuk melalui ListView.ItemTemplate properti yang dapat diikat. DataTemplate menentukan bahwa setiap baris data dalam daftar akan menjadi yang NativeCell menampilkan Nameproperti , , Categorydan ImageFilename melalui pengikatan data. Untuk informasi selengkapnya tentang kontrol, ListView lihat ListView.

Perender kustom sekarang dapat ditambahkan ke setiap proyek aplikasi untuk menyesuaikan tata letak khusus platform untuk setiap sel.

Membuat Perender Kustom di setiap Platform

Proses untuk membuat kelas perender kustom adalah sebagai berikut:

Buat subkelas ViewCellRenderer kelas yang merender sel kustom.
Ambil alih metode khusus platform yang merender sel kustom dan menulis logika untuk menyesuaikannya.
ExportRenderer Tambahkan atribut ke kelas perender kustom untuk menentukan bahwa atribut tersebut akan digunakan untuk merender Xamarin.Forms sel kustom. Atribut ini digunakan untuk mendaftarkan perender kustom dengan Xamarin.Forms.

Catatan

Untuk sebagian besar Xamarin.Forms elemen, adalah opsional untuk menyediakan perender kustom di setiap proyek platform. Jika perender kustom tidak terdaftar, maka perender default untuk kelas dasar kontrol akan digunakan. Namun, perender kustom diperlukan di setiap proyek platform saat merender elemen ViewCell .

Diagram berikut mengilustrasikan tanggung jawab setiap proyek dalam aplikasi sampel, bersama dengan hubungan di antara mereka:

Tanggung Jawab Proyek Perender Kustom NativeCell

Sel NativeCell kustom dirender oleh kelas perender khusus platform, yang semuanya berasal dari ViewCellRenderer kelas untuk setiap platform. Ini menghasilkan setiap NativeCell sel kustom yang dirender dengan tata letak khusus platform, seperti yang ditunjukkan pada cuplikan layar berikut:

NativeCell di setiap Platform

Kelas ViewCellRenderer mengekspos metode khusus platform untuk merender sel kustom. Ini adalah GetCell metode pada platform iOS, GetCellCore metode pada platform Android, dan GetTemplate metode pada UWP.

Setiap kelas perender kustom dihiasi dengan ExportRenderer atribut yang mendaftarkan perender dengan Xamarin.Forms. Atribut mengambil dua parameter – nama jenis sel yang Xamarin.Forms dirender, dan nama jenis perender kustom. assembly Awalan ke atribut menentukan bahwa atribut berlaku untuk seluruh rakitan.

Bagian berikut membahas implementasi setiap kelas perender kustom khusus platform.

Membuat Perender Kustom di iOS

Contoh kode berikut menunjukkan perender kustom untuk platform iOS:

[assembly: ExportRenderer(typeof(NativeCell), typeof(NativeiOSCellRenderer))]
namespace CustomRenderer.iOS
{
    public class NativeiOSCellRenderer : ViewCellRenderer
    {
        NativeiOSCell cell;

        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var nativeCell = (NativeCell)item;

            cell = reusableCell as NativeiOSCell;
            if (cell == null)
                cell = new NativeiOSCell(item.GetType().FullName, nativeCell);
            else
                cell.NativeCell.PropertyChanged -= OnNativeCellPropertyChanged;

            nativeCell.PropertyChanged += OnNativeCellPropertyChanged;
            cell.UpdateCell(nativeCell);
            return cell;
        }
        ...
    }
}

Metode GetCell ini dipanggil untuk membangun setiap sel yang akan ditampilkan. Setiap sel adalah NativeiOSCell instans, yang menentukan tata letak sel dan datanya. Pengoperasian GetCell metode tergantung pada ListView strategi penembolokan:

ListView Ketika strategi penembolokan adalah RetainElement, GetCell metode akan dipanggil untuk setiap sel. NativeiOSCell Instans akan dibuat untuk setiap NativeCell instans yang awalnya ditampilkan di layar. Saat pengguna menggulir melalui ListView, NativeiOSCell instans akan digunakan kembali. Untuk informasi selengkapnya tentang penggunaan kembali sel iOS, lihat Penggunaan Kembali Sel.

Catatan

Kode perender kustom ini akan melakukan beberapa sel yang digunakan kembali bahkan ketika ListView diatur untuk mempertahankan sel.

Data yang ditampilkan oleh setiap NativeiOSCell instans, baik yang baru dibuat atau digunakan kembali, akan diperbarui dengan data dari setiap NativeCell instans dengan UpdateCell metode .

Catatan

Metode tidak OnNativeCellPropertyChanged akan pernah dipanggil ketika ListView strategi penembolokan diatur untuk mempertahankan sel.
ListView Ketika strategi penembolokan adalah RecycleElement, GetCell metode akan dipanggil untuk setiap sel yang awalnya ditampilkan di layar. NativeiOSCell Instans akan dibuat untuk setiap NativeCell instans yang awalnya ditampilkan di layar. Data yang ditampilkan oleh setiap NativeiOSCell instans akan diperbarui dengan data dari NativeCell instans dengan UpdateCell metode . Namun, GetCell metode ini tidak akan dipanggil saat pengguna menggulir melalui ListView. Sebagai gantinya NativeiOSCell , instans akan digunakan kembali. PropertyChanged peristiwa akan dinaikkan pada NativeCell instans ketika datanya berubah, dan OnNativeCellPropertyChanged penanganan aktivitas akan memperbarui data di setiap instans yang digunakan NativeiOSCell kembali.

Contoh kode berikut menunjukkan OnNativeCellPropertyChanged metode yang dipanggil saat PropertyChanged peristiwa dinaikkan:

namespace CustomRenderer.iOS
{
    public class NativeiOSCellRenderer : ViewCellRenderer
    {
        ...

        void OnNativeCellPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            var nativeCell = (NativeCell)sender;
            if (e.PropertyName == NativeCell.NameProperty.PropertyName)
            {
                cell.HeadingLabel.Text = nativeCell.Name;
            }
            else if (e.PropertyName == NativeCell.CategoryProperty.PropertyName)
            {
                cell.SubheadingLabel.Text = nativeCell.Category;
            }
            else if (e.PropertyName == NativeCell.ImageFilenameProperty.PropertyName)
            {
                cell.CellImageView.Image = cell.GetImage(nativeCell.ImageFilename);
            }
        }
    }
}

Metode ini memperbarui data yang ditampilkan oleh instans yang digunakan NativeiOSCell kembali. Pemeriksaan properti yang diubah dibuat, karena metode dapat dipanggil beberapa kali.

Kelas NativeiOSCell menentukan tata letak untuk setiap sel, dan diperlihatkan dalam contoh kode berikut:

internal class NativeiOSCell : UITableViewCell, INativeElementView
{
  public UILabel HeadingLabel { get; set; }
  public UILabel SubheadingLabel { get; set; }
  public UIImageView CellImageView { get; set; }

  public NativeCell NativeCell { get; private set; }
  public Element Element => NativeCell;

  public NativeiOSCell(string cellId, NativeCell cell) : base(UITableViewCellStyle.Default, cellId)
  {
    NativeCell = cell;

    SelectionStyle = UITableViewCellSelectionStyle.Gray;
    ContentView.BackgroundColor = UIColor.FromRGB(255, 255, 224);
    CellImageView = new UIImageView();

    HeadingLabel = new UILabel()
    {
      Font = UIFont.FromName("Cochin-BoldItalic", 22f),
      TextColor = UIColor.FromRGB(127, 51, 0),
      BackgroundColor = UIColor.Clear
    };

    SubheadingLabel = new UILabel()
    {
      Font = UIFont.FromName("AmericanTypewriter", 12f),
      TextColor = UIColor.FromRGB(38, 127, 0),
      TextAlignment = UITextAlignment.Center,
      BackgroundColor = UIColor.Clear
    };

    ContentView.Add(HeadingLabel);
    ContentView.Add(SubheadingLabel);
    ContentView.Add(CellImageView);
  }

  public void UpdateCell(NativeCell cell)
  {
    HeadingLabel.Text = cell.Name;
    SubheadingLabel.Text = cell.Category;
    CellImageView.Image = GetImage(cell.ImageFilename);
  }

  public UIImage GetImage(string filename)
  {
    return (!string.IsNullOrWhiteSpace(filename)) ? UIImage.FromFile("Images/" + filename + ".jpg") : null;
  }

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

    HeadingLabel.Frame = new CGRect(5, 4, ContentView.Bounds.Width - 63, 25);
    SubheadingLabel.Frame = new CGRect(100, 18, 100, 20);
    CellImageView.Frame = new CGRect(ContentView.Bounds.Width - 63, 5, 33, 33);
  }
}

Kelas ini mendefinisikan kontrol yang digunakan untuk merender konten sel, dan tata letaknya. Kelas mengimplementasikan INativeElementView antarmuka, yang diperlukan saat ListView menggunakan RecycleElement strategi penembolokan. Antarmuka ini menentukan bahwa kelas harus mengimplementasikan Element properti , yang harus mengembalikan data sel kustom untuk sel yang didaur ulang.

NativeiOSCell Konstruktor menginisialisasi tampilan HeadingLabelproperti , , SubheadingLabeldan CellImageView . Properti ini digunakan untuk menampilkan data yang disimpan dalam NativeCell instans, dengan metode yang UpdateCell dipanggil untuk mengatur nilai setiap properti. Selain itu, ketika ListView menggunakan RecycleElement strategi penembolokan, data yang ditampilkan oleh HeadingLabelproperti , , SubheadingLabeldan CellImageView dapat diperbarui dengan OnNativeCellPropertyChanged metode di perender kustom.

Tata letak sel dilakukan oleh penimpaan LayoutSubviews , yang mengatur koordinat HeadingLabel, SubheadingLabel, dan CellImageView di dalam sel.

Membuat Custom Renderer di Android

Contoh kode berikut menunjukkan perender kustom untuk platform Android:

[assembly: ExportRenderer(typeof(NativeCell), typeof(NativeAndroidCellRenderer))]
namespace CustomRenderer.Droid
{
    public class NativeAndroidCellRenderer : ViewCellRenderer
    {
        NativeAndroidCell cell;

        protected override Android.Views.View GetCellCore(Cell item, Android.Views.View convertView, ViewGroup parent, Context context)
        {
            var nativeCell = (NativeCell)item;
            Console.WriteLine("\t\t" + nativeCell.Name);

            cell = convertView as NativeAndroidCell;
            if (cell == null)
            {
                cell = new NativeAndroidCell(context, nativeCell);
            }
            else
            {
                cell.NativeCell.PropertyChanged -= OnNativeCellPropertyChanged;
            }

            nativeCell.PropertyChanged += OnNativeCellPropertyChanged;

            cell.UpdateCell(nativeCell);
            return cell;
        }
        ...
    }
}

Metode GetCellCore ini dipanggil untuk membangun setiap sel yang akan ditampilkan. Setiap sel adalah NativeAndroidCell instans, yang menentukan tata letak sel dan datanya. Pengoperasian GetCellCore metode tergantung pada ListView strategi penembolokan:

ListView Ketika strategi penembolokan adalah RetainElement, GetCellCore metode akan dipanggil untuk setiap sel. NativeAndroidCell akan dibuat untuk setiap NativeCell instans yang awalnya ditampilkan di layar. Saat pengguna menggulir melalui ListView, NativeAndroidCell instans akan digunakan kembali. Untuk informasi selengkapnya tentang penggunaan kembali sel Android, lihat Penggunaan kembali Tampilan Baris.

Catatan

Perhatikan bahwa kode perender kustom ini akan melakukan beberapa penggunaan ulang sel bahkan ketika ListView diatur untuk mempertahankan sel.

Data yang ditampilkan oleh setiap NativeAndroidCell instans, baik yang baru dibuat atau digunakan kembali, akan diperbarui dengan data dari setiap NativeCell instans dengan UpdateCell metode .

Catatan

Perhatikan bahwa meskipun OnNativeCellPropertyChanged metode akan dipanggil ketika ListView diatur untuk mempertahankan sel, metode tidak akan memperbarui NativeAndroidCell nilai properti.
ListView Ketika strategi penembolokan adalah RecycleElement, GetCellCore metode akan dipanggil untuk setiap sel yang awalnya ditampilkan di layar. NativeAndroidCell Instans akan dibuat untuk setiap NativeCell instans yang awalnya ditampilkan di layar. Data yang ditampilkan oleh setiap NativeAndroidCell instans akan diperbarui dengan data dari NativeCell instans dengan UpdateCell metode . Namun, GetCellCore metode ini tidak akan dipanggil saat pengguna menggulir melalui ListView. Sebagai gantinya NativeAndroidCell , instans akan digunakan kembali. PropertyChanged peristiwa akan dinaikkan pada NativeCell instans ketika datanya berubah, dan OnNativeCellPropertyChanged penanganan aktivitas akan memperbarui data di setiap instans yang digunakan NativeAndroidCell kembali.

Contoh kode berikut menunjukkan OnNativeCellPropertyChanged metode yang dipanggil saat PropertyChanged peristiwa dinaikkan:

namespace CustomRenderer.Droid
{
    public class NativeAndroidCellRenderer : ViewCellRenderer
    {
        ...

        void OnNativeCellPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            var nativeCell = (NativeCell)sender;
            if (e.PropertyName == NativeCell.NameProperty.PropertyName)
            {
                cell.HeadingTextView.Text = nativeCell.Name;
            }
            else if (e.PropertyName == NativeCell.CategoryProperty.PropertyName)
            {
                cell.SubheadingTextView.Text = nativeCell.Category;
            }
            else if (e.PropertyName == NativeCell.ImageFilenameProperty.PropertyName)
            {
                cell.SetImage(nativeCell.ImageFilename);
            }
        }
    }
}

Metode ini memperbarui data yang ditampilkan oleh instans yang digunakan NativeAndroidCell kembali. Pemeriksaan properti yang diubah dibuat, karena metode dapat dipanggil beberapa kali.

Kelas NativeAndroidCell menentukan tata letak untuk setiap sel, dan diperlihatkan dalam contoh kode berikut:

internal class NativeAndroidCell : LinearLayout, INativeElementView
{
  public TextView HeadingTextView { get; set; }
  public TextView SubheadingTextView { get; set; }
  public ImageView ImageView { get; set; }

  public NativeCell NativeCell { get; private set; }
  public Element Element => NativeCell;

  public NativeAndroidCell(Context context, NativeCell cell) : base(context)
  {
    NativeCell = cell;

    var view = (context as Activity).LayoutInflater.Inflate(Resource.Layout.NativeAndroidCell, null);
    HeadingTextView = view.FindViewById<TextView>(Resource.Id.HeadingText);
    SubheadingTextView = view.FindViewById<TextView>(Resource.Id.SubheadingText);
    ImageView = view.FindViewById<ImageView>(Resource.Id.Image);

    AddView(view);
  }

  public void UpdateCell(NativeCell cell)
  {
    HeadingTextView.Text = cell.Name;
    SubheadingTextView.Text = cell.Category;

    // Dispose of the old image
    if (ImageView.Drawable != null)
    {
      using (var image = ImageView.Drawable as BitmapDrawable)
      {
        if (image != null)
        {
          if (image.Bitmap != null)
          {
            image.Bitmap.Dispose();
          }
        }
      }
    }

    SetImage(cell.ImageFilename);
  }

  public void SetImage(string filename)
  {
    if (!string.IsNullOrWhiteSpace(filename))
    {
      // Display new image
      Context.Resources.GetBitmapAsync(filename).ContinueWith((t) =>
      {
        var bitmap = t.Result;
        if (bitmap != null)
        {
          ImageView.SetImageBitmap(bitmap);
          bitmap.Dispose();
        }
      }, TaskScheduler.FromCurrentSynchronizationContext());
    }
    else
    {
      // Clear the image
      ImageView.SetImageBitmap(null);
    }
  }
}

NativeAndroidCell Konstruktor mengembang NativeAndroidCell tata letak, dan menginisialisasi HeadingTextViewproperti , , SubheadingTextViewdan ImageView ke kontrol dalam tata letak yang dilambungkan. Properti ini digunakan untuk menampilkan data yang disimpan dalam NativeCell instans, dengan metode yang UpdateCell dipanggil untuk mengatur nilai setiap properti. Selain itu, ketika ListView menggunakan RecycleElement strategi penembolokan, data yang ditampilkan oleh HeadingTextViewproperti , , SubheadingTextViewdan ImageView dapat diperbarui dengan OnNativeCellPropertyChanged metode di perender kustom.

Contoh kode berikut menunjukkan definisi tata letak untuk NativeAndroidCell.axml file tata letak:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:background="@drawable/CustomSelector">
    <LinearLayout
        android:id="@+id/Text"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dip">
        <TextView
            android:id="@+id/HeadingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FF7F3300"
            android:textSize="20dip"
            android:textStyle="italic" />
        <TextView
            android:id="@+id/SubheadingText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14dip"
            android:textColor="#FF267F00"
            android:paddingLeft="100dip" />
    </LinearLayout>
    <ImageView
        android:id="@+id/Image"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:padding="5dp"
        android:src="@drawable/icon"
        android:layout_alignParentRight="true" />
</RelativeLayout>

Tata letak ini menentukan bahwa dua TextView kontrol dan ImageView kontrol digunakan untuk menampilkan konten sel. Kedua TextView kontrol berorientasi vertikal dalam LinearLayout kontrol, dengan semua kontrol terkandung dalam RelativeLayout.

Membuat Perender Kustom di UWP

Contoh kode berikut menunjukkan perender kustom untuk UWP:

[assembly: ExportRenderer(typeof(NativeCell), typeof(NativeUWPCellRenderer))]
namespace CustomRenderer.UWP
{
    public class NativeUWPCellRenderer : ViewCellRenderer
    {
        public override Windows.UI.Xaml.DataTemplate GetTemplate(Cell cell)
        {
            return App.Current.Resources["ListViewItemTemplate"] as Windows.UI.Xaml.DataTemplate;
        }
    }
}

Metode GetTemplate ini dipanggil untuk mengembalikan sel yang akan dirender untuk setiap baris data dalam daftar. Ini membuat untuk setiap NativeCell instans DataTemplate yang akan ditampilkan di layar, dengan DataTemplate menentukan tampilan dan konten sel.

DataTemplate disimpan dalam kamus sumber daya tingkat aplikasi, dan ditampilkan dalam contoh kode berikut:

<DataTemplate x:Key="ListViewItemTemplate">
    <Grid Background="LightYellow">
        <Grid.Resources>
            <local:ConcatImageExtensionConverter x:Name="ConcatImageExtensionConverter" />
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.40*" />
            <ColumnDefinition Width="0.40*"/>
            <ColumnDefinition Width="0.20*" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.ColumnSpan="2" Foreground="#7F3300" FontStyle="Italic" FontSize="22" VerticalAlignment="Top" Text="{Binding Name}" />
        <TextBlock Grid.RowSpan="2" Grid.Column="1" Foreground="#267F00" FontWeight="Bold" FontSize="12" VerticalAlignment="Bottom" Text="{Binding Category}" />
        <Image Grid.RowSpan="2" Grid.Column="2" HorizontalAlignment="Left" VerticalAlignment="Center" Source="{Binding ImageFilename, Converter={StaticResource ConcatImageExtensionConverter}}" Width="50" Height="50" />
        <Line Grid.Row="1" Grid.ColumnSpan="3" X1="0" X2="1" Margin="30,20,0,0" StrokeThickness="1" Stroke="LightGray" Stretch="Fill" VerticalAlignment="Bottom" />
    </Grid>
</DataTemplate>

DataTemplate menentukan kontrol yang digunakan untuk menampilkan konten sel, serta tata letak dan tampilannya. Dua TextBlock kontrol dan Image kontrol digunakan untuk menampilkan konten sel melalui pengikatan data. Selain itu, instans digunakan ConcatImageExtensionConverter untuk menggabungkan .jpg ekstensi file ke setiap nama file gambar. Ini memastikan bahwa Image kontrol dapat memuat dan merender gambar saat Source properti diatur.

Ringkasan

Artikel ini telah menunjukkan cara membuat perender kustom untuk yang ViewCell dihosting di dalam Xamarin.FormsListView kontrol. Ini menghentikan Xamarin.Forms perhitungan tata letak agar tidak dipanggil berulang kali selama ListView pengguliran.

Performa ListView

Bagikan melalui

Menyesuaikan ViewCell

Membuat Sel Kustom

Mengkonsumsi Sel Kustom

Membuat Perender Kustom di setiap Platform

Membuat Perender Kustom di iOS

Membuat Custom Renderer di Android

Membuat Perender Kustom di UWP

Ringkasan

Sumber Daya Tambahan:

Bagikan melalui

Menyesuaikan ViewCell

Membuat Sel Kustom

Mengkonsumsi Sel Kustom

Membuat Perender Kustom di setiap Platform

Membuat Perender Kustom di iOS

Membuat Custom Renderer di Android

Membuat Perender Kustom di UWP

Ringkasan

Link Terkait

Sumber Daya Tambahan: