Bir ViewCell’i Özelleştirme

Xamarin.Forms ViewCell, geliştirici tanımlı bir görünüm içeren ListView veya TableView'a eklenebilen bir hücredir. Bu makalede, ListView denetiminde Xamarin.Forms barındırılan bir ViewCell için özel işleyicinin nasıl oluşturulacağı gösterilmektedir. Bu, ListView kaydırma sırasında düzen hesaplamalarının tekrar tekrar çağrılmasını durdurur Xamarin.Forms .

Her Xamarin.Forms hücre, her platform için yerel denetimin bir örneğini oluşturan bir eşlik eden işleyiciye sahiptir. bir ViewCell uygulama tarafından Xamarin.Forms işlendiğinde, iOS'ta ViewCellRenderer sınıfın örneği oluşturulur ve bu da yerel UITableViewCell bir denetimin örneğini oluşturur. Android platformunda ViewCellRenderer , sınıfı yerel View bir denetim örneği oluşturur. sınıfı Evrensel Windows Platformu (UWP) ViewCellRenderer üzerinde yerel DataTemplatebir örneği oluşturur. Eşlenmeyi denetleen Xamarin.Forms işleyici ve yerel denetim sınıfları hakkında daha fazla bilgi için bkz . oluşturucu Temel Sınıfları ve Yerel Denetimler.

Aşağıdaki diyagramda, bunu uygulayan ve buna karşılık gelen yerel denetimler arasındaki ViewCell ilişki gösterilmektedir:

ViewCell Denetimi ile Yerel Denetimleri Uygulama Arasındaki İlişki

İşleme işlemi, her platformda bir için özel işleyici oluşturarak platforma özgü özelleştirmeler uygulamak için ViewCell kullanılabilir. Bunu yapma işlemi aşağıdaki gibidir:

Özel bir Xamarin.Forms hücre oluşturun.
'den Xamarin.Formsözel hücreyi kullanma.
Her platformda hücre için özel işleyici oluşturun .

Artık her öğe, bir denetimin içinde Xamarin.FormsListView barındırılan her hücre için platforma özgü bir düzenden yararlanan bir işleyici uygulamak NativeCell üzere sırayla ele alınacaktır. Bu, kaydırma sırasında ListView düzen hesaplamalarının tekrar tekrar çağrılmasını durdururXamarin.Forms.

Özel Hücre Oluşturma

Özel hücre denetimi, aşağıdaki kod örneğinde gösterildiği gibi sınıfın alt sınıfı ViewCell oluşturularak oluşturulabilir:

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); }
  }
}

NativeCell sınıfı .NET Standard kitaplık projesinde oluşturulur ve özel hücre için API'yi tanımlar. Özel hücre, veri bağlama aracılığıyla görüntülenebilen , Categoryve ImageFilename özelliklerini kullanıma sunarName. Veri bağlama hakkında daha fazla bilgi için bkz . Veri Bağlama Temelleri.

Özel Hücreyi Kullanma

Özel NativeCell hücreye konumu için bir ad alanı bildirilerek ve özel hücre öğesinde ad alanı ön eki kullanılarak .NET Standart kitaplık projesindeki Xaml'de başvurulabilir. Aşağıdaki kod örneği, özel hücrenin NativeCell bir XAML sayfası tarafından nasıl tüketilebileceğini gösterir:

<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>

Ad local alanı ön eki herhangi bir adla adlandırılabilir. Ancak ve clr-namespace assembly değerleri özel denetimin ayrıntılarıyla eşleşmelidir. Ad alanı bildirildikten sonra, özel hücreye başvurmak için ön ek kullanılır.

Aşağıdaki kod örneği, özel hücrenin NativeCell bir C# sayfası tarafından nasıl kullanılıp kullanılamayabileceğini gösterir:

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 Denetim, özelliği aracılığıyla ItemSource doldurulan bir veri listesini görüntülemek için kullanılır. RecycleElement Önbelleğe alma stratejisi, liste hücrelerini geri dönüştürerek bellek ayak izini ve yürütme hızını en aza indirmeyi ListView dener. Daha fazla bilgi için bkz . Önbelleğe Alma Stratejisi.

Listedeki her satır üç veri öğesi içerir: ad, kategori ve görüntü dosya adı. Listedeki her satırın düzeni, bağlanabilir özelliği aracılığıyla ListView.ItemTemplate başvurulan tarafından tanımlanırDataTemplate. , DataTemplate listedeki her veri satırının, veri bağlama aracılığıyla , NameCategoryve ImageFilename özelliklerini görüntüleyen bir NativeCell veri satırı olacağını tanımlar. Denetim hakkında ListView daha fazla bilgi için bkz . ListView.

Artık her hücre için platforma özgü düzeni özelleştirmek için her uygulama projesine özel işleyici eklenebilir.

Her Platformda Özel oluşturucu oluşturma

Özel işleyici sınıfını oluşturma işlemi aşağıdaki gibidir:

Özel hücreyi ViewCellRenderer işleyen sınıfın bir alt sınıfını oluşturun.
Özel hücreyi işleyen platforma özgü yöntemi geçersiz kılın ve özelleştirmek için mantık yazın.
Özel hücreyi işlemek için kullanılacağını belirtmek için özel işleyici sınıfına Xamarin.Forms bir ExportRenderer öznitelik ekleyin. Bu öznitelik, özel işleyiciyi ile Xamarin.Formskaydetmek için kullanılır.

Not

Çoğu Xamarin.Forms öğe için, her platform projesinde özel işleyici sağlamak isteğe bağlıdır. Özel işleyici kaydedilmemişse, denetimin temel sınıfı için varsayılan işleyici kullanılır. Ancak, bir ViewCell öğesi işlenirken her platform projesinde özel işleyiciler gerekir.

Aşağıdaki diyagramda, örnek uygulamadaki her projenin sorumlulukları ve aralarındaki ilişkiler gösterilmektedir:

NativeCell Özel oluşturucu proje sorumlulukları

Özel NativeCell hücre, her platform için sınıfından ViewCellRenderer türetilen platforma özgü işleyici sınıfları tarafından işlenir. Bu, aşağıdaki ekran görüntülerinde gösterildiği gibi her NativeCell özel hücrenin platforma özgü düzende işlenmesine neden olur:

Her Platformda NativeCell

sınıfı, ViewCellRenderer özel hücreyi işlemek için platforma özgü yöntemleri kullanıma sunar. Bu, GetCell iOS platformundaki yöntem, GetCellCore Android platformundaki yöntem ve UWP'de yöntemidir GetTemplate .

Her özel işleyici sınıfı, işleyiciyi ile kaydeden bir ExportRenderer öznitelikle Xamarin.Formsdekore edilmiştir. özniteliği iki parametre alır: işlenen hücrenin Xamarin.Forms tür adı ve özel işleyicinin tür adı. assembly özniteliğinin ön eki, özniteliğin tüm derleme için geçerli olduğunu belirtir.

Aşağıdaki bölümlerde platforma özgü özel işleyici sınıflarının uygulanması açıklanmıştır.

iOS'ta Özel oluşturucu oluşturma

Aşağıdaki kod örneği, iOS platformu için özel işleyiciyi gösterir:

[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;
        }
        ...
    }
}

GetCell Görüntülenecek her hücreyi derlemek için yöntemi çağrılır. Her hücre, hücrenin düzenini ve verilerini tanımlayan bir NativeiOSCell örnektir. yönteminin GetCell işlemi önbelleğe alma stratejisine ListView bağlıdır:

ListView Önbelleğe alma stratejisi olduğundaRetainElementGetCell, yöntemi her hücre için çağrılır. NativeiOSCell Başlangıçta ekranda görüntülenen her NativeCell örnek için bir örnek oluşturulur. Kullanıcı ekranı ListViewNativeiOSCell kaydırdıkça örnekler yeniden kullanılır. iOS hücre yeniden kullanımı hakkında daha fazla bilgi için bkz . Hücre Yeniden Kullanımı.

Not

Bu özel işleyici kodu, hücreleri korumak için ayarlandığında bile ListView bazı hücre yeniden kullanımını gerçekleştirir.

Yeni oluşturulan veya yeniden kullanılan her NativeiOSCell örnek tarafından görüntülenen veriler, yöntemi tarafından UpdateCell her NativeCell örnekteki verilerle güncelleştirilir.

Not

OnNativeCellPropertyChanged Önbelleğe alma stratejisi hücreleri koruyacak şekilde ayarlandığında yöntemi hiçbir zaman çağrılamazListView.
ListView Önbelleğe alma stratejisi olduğundaRecycleElementGetCell, başlangıçta ekranda görüntülenen her hücre için yöntemi çağrılır. NativeiOSCell Başlangıçta ekranda görüntülenen her NativeCell örnek için bir örnek oluşturulur. Her NativeiOSCell örnek tarafından görüntülenen veriler yöntemiyle örnekteki NativeCell UpdateCell verilerle güncelleştirilir. Ancak, GetCell kullanıcı kaydırıldığında ListViewyöntemi çağrılmayacak. Bunun yerine örnekler NativeiOSCell yeniden kullanılır. PropertyChanged olayları, verileri değiştiğinde NativeCell örnekte oluşturulur ve OnNativeCellPropertyChanged olay işleyicisi yeniden kullanılan NativeiOSCell her örnekteki verileri güncelleştirir.

Aşağıdaki kod örneği, bir PropertyChanged olay tetiklendiğinde çağrılan yöntemi gösterirOnNativeCellPropertyChanged:

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);
            }
        }
    }
}

Bu yöntem, yeniden kullanılan NativeiOSCell örnekler tarafından görüntülenen verileri güncelleştirir. Yöntemin birden çok kez çağrılabilmesinden, değiştirilen özellik için bir denetim yapılır.

NativeiOSCell sınıfı her hücrenin düzenini tanımlar ve aşağıdaki kod örneğinde gösterilir:

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);
  }
}

Bu sınıf, hücrenin içeriğini ve bunların düzenini işlemek için kullanılan denetimleri tanımlar. sınıfı, önbelleğe alma stratejisini kullandığında ListView gerekli olan arabirimini RecycleElement uygularINativeElementView. Bu arabirim, sınıfın geri dönüştürülen hücreler için özel hücre verilerini döndürmesi gereken özelliğini uygulaması Element gerektiğini belirtir.

NativeiOSCell Oluşturucu, , SubheadingLabelve CellImageView özelliklerinin görünümünü HeadingLabelbaşlatır. Bu özellikler, örnekte depolanan NativeCell verileri görüntülemek için kullanılır ve her özelliğin UpdateCell değerini ayarlamak için yöntemi çağrılır. Ayrıca, ListView RecycleElement önbelleğe alma stratejisi kullanıldığında, , SubheadingLabelve CellImageView özellikleri tarafından HeadingLabelgörüntülenen veriler özel işleyicideki yöntemiyle OnNativeCellPropertyChanged güncelleştirilebilir.

Hücre düzeni, hücre içinde LayoutSubviews , SubheadingLabelve CellImageView koordinatlarını HeadingLabelayarlayan geçersiz kılma tarafından gerçekleştirilir.

Android'de Özel oluşturucu oluşturma

Aşağıdaki kod örneği, Android platformu için özel işleyiciyi gösterir:

[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;
        }
        ...
    }
}

GetCellCore Görüntülenecek her hücreyi derlemek için yöntemi çağrılır. Her hücre, hücrenin düzenini ve verilerini tanımlayan bir NativeAndroidCell örnektir. yönteminin GetCellCore işlemi önbelleğe alma stratejisine ListView bağlıdır:

ListView Önbelleğe alma stratejisi olduğundaRetainElementGetCellCore, yöntemi her hücre için çağrılır. NativeAndroidCell Başlangıçta ekranda görüntülenen her NativeCell örnek için bir oluşturulur. Kullanıcı ekranı ListViewNativeAndroidCell kaydırdıkça örnekler yeniden kullanılır. Android hücre yeniden kullanımı hakkında daha fazla bilgi için bkz . Satır Görünümü Yeniden Kullanma.

Not

Bu özel işleyici kodunun, hücreleri korumak için ayarlandığında bile ListView bazı hücre yeniden kullanımları gerçekleştireceğini unutmayın.

Yeni oluşturulan veya yeniden kullanılan her NativeAndroidCell örnek tarafından görüntülenen veriler, yöntemi tarafından UpdateCell her NativeCell örnekteki verilerle güncelleştirilir.

Not

OnNativeCellPropertyChanged yöntemi hücreleri korumak için ayarlandığında çağrılsa ListView da özellik değerlerini güncelleştirmezNativeAndroidCell.
ListView Önbelleğe alma stratejisi olduğundaRecycleElementGetCellCore, başlangıçta ekranda görüntülenen her hücre için yöntemi çağrılır. NativeAndroidCell Başlangıçta ekranda görüntülenen her NativeCell örnek için bir örnek oluşturulur. Her NativeAndroidCell örnek tarafından görüntülenen veriler yöntemiyle örnekteki NativeCell UpdateCell verilerle güncelleştirilir. Ancak, GetCellCore kullanıcı kaydırıldığında ListViewyöntemi çağrılmayacak. Bunun yerine örnekler NativeAndroidCell yeniden kullanılır. PropertyChanged olayları, verileri değiştiğinde NativeCell örnekte oluşturulur ve OnNativeCellPropertyChanged olay işleyicisi yeniden kullanılan NativeAndroidCell her örnekteki verileri güncelleştirir.

Aşağıdaki kod örneği, bir PropertyChanged olay tetiklendiğinde çağrılan yöntemi gösterirOnNativeCellPropertyChanged:

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);
            }
        }
    }
}

Bu yöntem, yeniden kullanılan NativeAndroidCell örnekler tarafından görüntülenen verileri güncelleştirir. Yöntemin birden çok kez çağrılabilmesinden, değiştirilen özellik için bir denetim yapılır.

NativeAndroidCell sınıfı her hücrenin düzenini tanımlar ve aşağıdaki kod örneğinde gösterilir:

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);
    }
  }
}

Oluşturucu NativeAndroidCell düzeni şişirir NativeAndroidCell ve , ve ImageView özelliklerini şişirilmiş düzendeki denetimler için başlatırHeadingTextViewSubheadingTextView. Bu özellikler, örnekte depolanan NativeCell verileri görüntülemek için kullanılır ve her özelliğin UpdateCell değerini ayarlamak için yöntemi çağrılır. Ayrıca, ListView RecycleElement önbelleğe alma stratejisi kullanıldığında, , SubheadingTextViewve ImageView özellikleri tarafından HeadingTextViewgörüntülenen veriler özel işleyicideki yöntemiyle OnNativeCellPropertyChanged güncelleştirilebilir.

Aşağıdaki kod örneği, düzen dosyasının NativeAndroidCell.axml düzen tanımını gösterir:

<?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>

Bu düzen, hücrenin içeriğini görüntülemek için iki TextView denetimin ve bir ImageView denetimin kullanıldığını belirtir. İki TextView denetim bir denetim içinde LinearLayout dikey olarak yönlendirilir ve tüm denetimler içinde RelativeLayoutyer alır.

UWP üzerinde Özel oluşturucu oluşturma

Aşağıdaki kod örneği, UWP için özel işleyiciyi gösterir:

[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;
        }
    }
}

GetTemplate yöntemi, listedeki her veri satırı için işlenecek hücreyi döndürmek için çağrılır. Hücrenin görünümünü ve içeriğini tanımlayarak ekranda DataTemplate görüntülenecek her NativeCell örnek için bir DataTemplate oluşturur.

DataTemplate, uygulama düzeyi kaynak sözlüğünde depolanır ve aşağıdaki kod örneğinde gösterilir:

<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>

hücrenin DataTemplate içeriğini ve bunların düzenini ve görünümünü görüntülemek için kullanılan denetimleri belirtir. Hücrenin içeriğini veri bağlama aracılığıyla görüntülemek için iki TextBlock denetim ve bir Image denetim kullanılır. Ayrıca, dosya uzantısını ConcatImageExtensionConverter her resim dosya adıyla birleştirmek .jpg için bir örneği kullanılır. Bu, denetimin Image özelliği ayarlandığında görüntüyü Source yükleyebilmesini ve işleyebilmesini sağlar.

Özet

Bu makalede, denetimin içinde Xamarin.FormsListView barındırılan bir ViewCell için özel işleyicinin nasıl oluşturulacağı gösterilmiştir. Bu, kaydırma sırasında ListView düzen hesaplamalarının tekrar tekrar çağrılmasını durdururXamarin.Forms.

ListView Performansı

Last updated on 2016-12-07

Aracılığıyla paylaş