İçinde özel düzen oluşturma Xamarin.Forms

Örnek indir Örneği indirin

Xamarin.Forms Beş düzen sınıfını tanımlar – StackLayout, AbsoluteLayout, RelativeLayout, Grid ve FlexLayout, her biri alt öğelerini farklı bir şekilde düzenler. Ancak, bazen tarafından sağlanmayan bir düzeni kullanarak sayfa içeriğini düzenlemek gereklidir Xamarin.FormsXamarin.Forms . Bu makalede, özel bir düzen sınıfının nasıl yazılacağı ve alt öğelerini sayfada yatay olarak düzenler ve sonra sonraki alt öğelerin görüntülenmesini ek satırlara sarmalayan bir yönlendirmeye duyarlı WrapLayout sınıfı gösterilmektedir.

Xamarin.Forms' De, tüm düzen sınıfları sınıfından türetilir Layout<T> ve genel türü View ile türetilmiş türlerini kısıtlar. Sırasıyla Layout<T> sınıfı, Layout alt öğeleri konumlandırmak ve boyutlandırmak için mekanizma sağlayan sınıfından türetilir.

Her görsel öğe, istenen boyut olarak bilinen kendi tercih edilen boyutunu belirlemekten sorumludur. Page, Layout , ve Layout<View> türetilmiş türler, kendi alt öğelerinin konumunu ve boyutunu belirlemekten sorumludur. Bu nedenle, düzen üst-alt ilişkisi içerir. burada üst öğe, alt öğelerinin boyutunun ne olması gerektiğini, ancak alt öğenin istenen boyutuna uydurmasını dener.

Xamarin.FormsÖzel bir düzen oluşturmak için düzen ve ınvalidation döngülerini kapsamlı bir şekilde anlamak gerekir. Bu döngüler artık ele alınacaktır.

Layout

Düzen bir sayfayla görsel ağacın en üstünde başlar ve bir sayfadaki her görsel öğeyi kapsayacak şekilde görsel ağacın tüm dallarından geçer. Diğer öğelere üst öğe olan öğeler, alt öğelerine göre Boyutlandırılması ve konumlandırmaktan sorumludur.

VisualElementSınıfı, VisualElementXamarin_Forms Düzen işlemlerine yönelik bir öğeyi ölçen bir Xamarin_Forms _VisualElement_Measure_System_Double_System_Double_ _MeasureFlags_ "Data-LinkType =" absolute-path ">Measure yöntemini ve Xamarin_FormsLayout öğe içinde işlenecek dikdörtgen alanı belirten bir Xamarin_Forms _VisualElement_Layout_ _rectangle_" Data-LinkType = "Absolute-path" >yöntemini tanımlar. Bir uygulama başlatıldığında ve ilk sayfa görüntülendiğinde, ilk çağrının yer aldığı bir Düzen çevrimi ve sonra Layout çağrısı nesnesi üzerinde başlar Page :

  1. Düzen çevrimi sırasında her üst öğe, alt öğelerinde yöntemi çağırmadan sorumludur Measure .
  2. Alt öğeler ölçülerek her üst öğe, alt öğelerinde yöntemi çağırmadan sorumludur Layout .

Bu geçiş, sayfadaki her görsel öğenin ve yöntemlerine çağrı almasını sağlar MeasureLayout . İşlem aşağıdaki diyagramda gösterilmiştir:

<Span sınıfı = Xamarin. Forms  Düzen çevrimi

Not

Düzeni etkileyen bir değişiklik olursa görsel ağacın bir alt kümesinde de düzen döngüleri meydana gelebilir. Bu, içindeki gibi bir koleksiyondan eklenen veya kaldırılan öğeleri StackLayout , _VisualElement_IsVisible Xamarin_Forms bir StackLayout öğenin "Data-LinkType =" Absolute-path ">IsVisible özelliğini veya bir öğenin boyutunda bir değişikliği içerir.

Xamarin.FormsContent Ya da özelliği olan her sınıfta, ChildrenXamarin.Forms "Data-LinkType =" Absolute-path ">yöntemi _Layout_LayoutChildren_System_Double_System_Double_System_Double_System_Double_ geçersiz kılınabilir Xamarin_Forms vardır LayoutChildren . Öğesinden türetilen özel düzen sınıfları Layout<View> Bu yöntemi geçersiz kılmalı ve Layout<View>Xamarin_Forms istenen özel düzeni sağlamak için Xamarin_Forms _VisualElement_Measure_System_Double_System_Double_ "Data-LinkType =" absolute-path ">Measure ve Xamarin_Forms _VisualElement_Layout_ Xamarin_Forms _rectangle_" data-LinkType = "Absolute-path" >Layout yöntemlerinin her öğenin alt öğelerinde çağrıldığından emin olmalıdır.

Ayrıca, ' den türetilen Layout veya Layout<View> Xamarin_Forms Layout _VisualElement_OnMeasure_System_Double_System_Double_ "Data-LinkType =" absolute-path ">yöntemi geçersiz kılmalıdır. Bu, OnMeasure bir düzen sınıfının Xamarin_Forms Layout<View> _VisualElement_Measure_System_Double_System_Double_ Xamarin_Forms " data-LinkType = "Absolute-path" >Measure yöntemlerine çağrı yaparak olması gereken boyutu belirler .

Not

Öğeleri, öğelerin üst öğesi içindeki bir öğe için ne kadar alan olduğunu gösteren kısıtlamalaragöre boyutlarını belirtir. _VisualElement_Measure_System_Double_System_Double_ Xamarin_Forms _MeasureFlags_ "Data-LinkType =" Absolute-path ">Measure ve Xamarin_Forms Xamarin_Forms _VisualElement_OnMeasure_System_Double_System_Double_" Data-linktype = "Absolute-path" >metotları Xamarin_Forms geçirilen kısıtlamalar OnMeasure 0 ile arasında değişebilir Double.PositiveInfinity . Sınırsız bağımsız değişkenlerle bir Xamarin_Forms _VisualElement_Measure_System_Double_System_Double_ yöntemi için bir çağrı aldığında bir öğe kısıtlanıyor ya da tam kısıtlanıyor; öğe belirli bir boyutla kısıtlanıyor. Bir öğe kısıtlıveya kısmen kısıtlanmış, en az bir bağımsız değişkeni olan yöntemine bir çağrı aldığında, sınırsız kısıtlama otomatik boyutlandırmayı gösterecek şekilde düşünülebilir.

Geçersiz kılma

Invalidation, sayfadaki bir öğede bulunan bir değişikliğin yeni bir düzen döngüsünü tetiklediği işlemdir. Öğeler artık doğru boyut veya konuma sahip olmadıkları zaman geçersiz sayılır. Örneğin, Xamarin_Forms bir değişikliğin "Data-LinkType =" Absolute-path ">özelliği _Button_FontSize FontSizeButton , Button artık doğru boyuta sahip olmadığı için geçersiz olarak kabul edilir. Daha sonra yeniden boyutlandırılması, Button sayfanın geri kalanı ile mizanpajda bir değişiklikler üzerinde bir etkisi olabilir.

Öğe, InvalidateMeasure genellikle öğenin yeni boyutuyla sonuçlanmasına neden olabilecek bir özellik olan "Data-LinkType =" absolute-path ">yöntemini _VisualElement_InvalidateMeasure Xamarin_Forms çağırarak kendisini geçersiz kılar. Bu yöntem MeasureInvalidated , öğenin üst öğesinin yeni bir düzen döngüsünü tetiklemek için işlediği olayı tetikler.

LayoutSınıfı, MeasureInvalidated özelliği veya koleksiyonuna eklenen her alt öğe için bir işleyici ayarlar ContentChildren ve alt öğe kaldırıldığında işleyiciyi ayırır. Bu nedenle, alt öğeleri olan görsel ağaçtaki her öğe, alt öğelerinden birinin boyutu değiştiğinde uyarı gönderilir. Aşağıdaki diyagramda, görsel ağaçtaki bir öğenin boyutundaki bir değişikliğin, ağacı etkileyen değişikliklere neden olabileceği gösterilmektedir:

Görsel ağaçta geçersiz kılma

Ancak, Layout sınıfı bir sayfanın düzeninde bir çocuğun boyutunun bir değişikliğin etkisini kısıtlamaya çalışır. Düzen sınırlandırılsa, bir alt boyut değişikliği, görsel ağaçtaki üst düzenden daha yüksek bir şeyi etkilemez. Ancak, genellikle bir düzenin boyutunun bir değişikliği düzenin alt öğelerini nasıl yerleşeceğine göre etkiler. Bu nedenle, düzen boyutunun herhangi bir değişikliği düzen için bir düzen döngüsünü başlatır ve düzen Xamarin_Forms _VisualElement_OnMeasure_System_Double_System_Double_ "Data-LinkType =" Absolute-path ">OnMeasure ve Xamarin_Forms OnMeasure _Layout_LayoutChildren_System_Double_System_Double_System_Double_System_Double_" Data-LinkType = "Absolute-path" >LayoutChildren yöntemlerine çağrı alır.

LayoutSınıf Ayrıca, LayoutInvalidateLayout Xamarin_Forms _VisualElement_InvalidateMeasure "Data-linktype =" Absolute-path ">InvalidateMeasure yöntemine benzer bir amaca sahip bir Xamarin_Forms _Layout_InvalidateLayout" Data-LinkType = "mutlak yol" >yöntemini tanımlar. InvalidateLayoutDüzenin, alt öğelerini nasıl konumlandırdığı ve boyutlarının boyutlarını etkileyen bir değişiklik yapıldığında yöntem çağrılmalıdır. Örneğin, sınıfı, LayoutInvalidateLayout bir mizanpaja her alt öğe eklendiğinde veya bir düzene kaldırıldığında yöntemi çağırır.

Xamarin_Forms _Layout_InvalidateLayout "Data-LinkType =" Absolute-path ">, InvalidateLayout Xamarin_Forms yinelenen çağırmaları en aza indirmek için bir önbellek uygulamak üzere geçersiz kılınabilir _VisualElement_Measure_System_Double_System_Double_ InvalidateLayoutXamarin_Forms _MeasureFlags_" Data-linktype = "Absolute-path" >Measure . Yöntemi geçersiz kılmak, InvalidateLayout alt öğelerin düzene eklendiği veya düzenden kaldırıldığı zaman hakkında bir bildirim sağlar. Benzer şekilde Xamarin_Forms, _Layout_OnChildMeasureInvalidated "Data-LinkType =" Absolute-path ">OnChildMeasureInvalidated metodu, düzenin alt öğelerinden birinin boyutu değiştiğinde bildirim sağlamak için geçersiz kılınabilir. Her iki yöntem de geçersiz kılındığında, bir özel düzen, önbelleği temizleyerek yanıt vermelidir. Daha fazla bilgi için bkz. düzen verilerini hesaplama ve önbelleğe alma.

Özel düzen oluşturma

Özel düzen oluşturma işlemi aşağıdaki gibidir:

  1. Sınıfından türeten bir sınıf oluşturun Layout<View> . Daha fazla bilgi için bkz. Create a WrapLayout.

  2. [isteğe bağlı] Düzen sınıfında ayarlanması gereken herhangi bir parametre için, bağlanabilir Özellikler tarafından desteklenen özellikleri ekleyin. Daha fazla bilgi için bkz. bağlanabilir Özellikler tarafından desteklenen özellikler ekleme.

  3. Xamarin_Forms _VisualElement_OnMeasure_System_Double_System_Double_ "Data-LinkType =" Absolute-path ">metodunu geçersiz kılarak OnMeasure Xamarin_Forms OnMeasure _VisualElement_Measure_System_Double_System_Double_ Xamarin_Forms " Data-linktype = "Absolute-path" >Measure yöntemini çağırın ve düzen için istenen bir boyut döndürün. Daha fazla bilgi için bkz. OnMeasure metodunu geçersiz kılma.

  4. LayoutChildrenLayoutChildrenXamarin_FormsLayout Tüm düzen alt öğelerinde _VisualElement_Layout_ _rectangle_ "Data-LinkType =" Absolute-path "> yöntemini Xamarin_Forms çağırmak için Xamarin_Forms _Layout_LayoutChildren_System_Double_System_Double_System_Double_System_Double_" data-LinkType = "Absolute-path" >metodunu geçersiz kılın. Xamarin_Forms _VisualElement_Layout_ Xamarin_Forms _rectangle_ "Data-LinkType =" Absolute-path ">Layout yöntemi bir düzendeki her bir alt öğeye çağrılamaz, alt öğe hiçbir şekilde doğru bir boyut veya konum almamaya neden olur ve bu nedenle alt öğe sayfada görünür olmaz. Daha fazla bilgi için bkz. LayoutChildren metodunu geçersiz kılma.

    Not

    Xamarin_Forms alt öğeleri Numaralandırırken , "Data-LinkType =" Absolute-path ">OnMeasure ve Xamarin_Forms OnMeasure _Layout_LayoutChildren_System_Double_System_Double_System_Double_System_Double_" Data-LinkType = "Absolute-path" >LayoutChildren geçersiz kılmalar _VisualElement_OnMeasure_System_Double_System_Double_, Xamarin_Forms _VisualElement_IsVisible "Data-LinkType =" Absolute-path ">IsVisible özelliği olarak ayarlanmış olan tüm alt öğeleri atlayın false . Bu, özel düzenin görünmez alt öğeler için boşluk bırakmayacak şekilde emin olur.

  5. [isteğe bağlı] yöntemine alt öğe eklendiğinde veya düzenden kaldırıldığında bildirim almak için Xamarin_Forms _Layout_InvalidateLayout geçersiz kılın. Daha fazla bilgi için bkz. ınvalidatelayout metodunu geçersiz kılma.

  6. [isteğe bağlı] Düzenin alt öğelerinden birinin boyutu değiştiğinde bildirim almak için "Data-LinkType =" absolute-path ">yöntemi _Layout_OnChildMeasureInvalidated Xamarin_Forms geçersiz kılın. Daha fazla bilgi için bkz. Onchildmeasureoverride metodunu geçersiz kılma.

Not

Xamarin_Forms _VisualElement_OnMeasure_System_Double_System_Double_ "Data-LinkType =" Absolute-path ">OnMeasure geçersiz kılma, düzen boyutu alt öğesi yerine üst öğesi tarafından yönetilecektir çağırılmaz. Ancak, kısıtlamaların bir veya her ikisi sınırsız ise veya Düzen sınıfında varsayılan olmayan Xamarin_Forms _View_HorizontalOptions "Data-LinkType =" Absolute-path ">HorizontalOptions veya Xamarin_Forms HorizontalOptions _View_VerticalOptions" Data-LinkType = "Absolute-path" >VerticalOptions özellik değerlerini içeren geçersiz kılma işlemi çağrılır. Bu nedenle, "Data-LinkType =" mutlak yol ">geçersiz kılma _Layout_LayoutChildren_System_Double_System_Double_System_Double_System_Double_ Xamarin_Forms, LayoutChildren Xamarin_Forms LayoutChildren _VisualElement_OnMeasure_System_Double_System_Double_" Data-LinkType = "Absolute-path" >OnMeasure Yöntem çağrısı sırasında elde edilen alt boyutlara bağımlı olamaz. Bunun yerine, LayoutChildrenLayoutChildrenXamarin_FormsMeasure Xamarin_Forms _VisualElement_Layout_ Xamarin_Forms _rectangle_ "data-LinkType =" Absolute-path ">Layout yöntemini çağırmadan önce düzenin alt öğelerinde _VisualElement_Measure_System_Double_System_Double_ _MeasureFlags_" data-LinkType = "Absolute-path" >metodunu Xamarin_Forms çağırmanız gerekir. Alternatif olarak, geçersiz kılmada elde edilen alt öğelerin boyutu OnMeasure önbellekte daha sonra önlemeyi önlemek için önbelleğe alınabilir MeasureLayoutChildren , ancak boyutları yeniden elde etmek gerektiğinde düzen sınıfının bilmeleri gerekir. Daha fazla bilgi için bkz. düzen verilerini hesaplama ve önbelleğe alma.

Düzen sınıfı daha sonra bir öğesine eklenerek Page ve düzene alt öğe ekleyerek tüketilebilir. Daha fazla bilgi için bkz. WrapLayoutkullanma.

WrapLayout oluşturma

Örnek uygulama, WrapLayout alt öğelerini sayfada yatay olarak düzenler ve ardından sonraki alt öğelerin görüntülenmesini ek satırlara sarmalayan bir yön duyarlı sınıfı gösterir.

Sınıfı, alt WrapLayout öğelerin en büyük boyutuna bağlı olarak, WrapLayoutolarak bilinen her alt öğe için aynı miktarda alanı ayırır. Hücre boyutundan küçük olan alt öğeler, Xamarin_Forms _View_HorizontalOptions "Data-LinkType =" Absolute-path ">HorizontalOptions ve Xamarin_Forms HorizontalOptions _View_VerticalOptions" Data-LinkType = "Absolute-path" >VerticalOptions özellik değerlerini temel alarak hücre içinde konumlandırılmış olabilir.

WrapLayoutSınıf tanımı, aşağıdaki kod örneğinde gösterilmektedir:

public class WrapLayout : Layout<View>
{
  Dictionary<Size, LayoutData> layoutDataCache = new Dictionary<Size, LayoutData>();
  ...
}

Düzen verilerini hesaplama ve önbelleğe alma

LayoutDataYapı, bir dizi özellik içinde bir alt öğe koleksiyonu hakkındaki verileri depolar:

  • VisibleChildCount – düzende görülebilen alt öğelerin sayısı.
  • CellSize – Düzen boyutuna ayarlanmış olan tüm alt öğelerin en büyük boyutu.
  • Rows – satır sayısı.
  • Columns – sütun sayısı.

layoutDataCacheAlanı birden çok değeri depolamak için kullanılır LayoutData . Uygulama başlatıldığında, iki LayoutData nesne layoutDataCache geçerli yönlendirme için sözlükte önbelleğe alınır: bir tane, geçersiz kılma için kısıtlama bağımsız değişkenleri için, diğeri ise OnMeasurewidth ve height geçersiz kılma için bağımsız değişkenler LayoutChildren . Cihazı yatay yöne döndürürken, OnMeasure geçersiz kılma ve LayoutChildren geçersiz kılma yeniden çağrılır. Bu, başka iki LayoutData nesnenin sözlükte önbelleğe alınması ile sonuçlanır. Ancak, cihazı dikey yöne döndürürken, layoutDataCache zaten gerekli verilere sahip olduğundan başka hesaplamalar gerekmez.

Aşağıdaki kod örneği, belirli bir boyuta göre yapılandırılmış özelliklerini GetLayoutDataLayoutData hesapleyen yöntemini gösterir:

LayoutData GetLayoutData(double width, double height)
{
  Size size = new Size(width, height);

  // Check if cached information is available.
  if (layoutDataCache.ContainsKey(size))
  {
    return layoutDataCache[size];
  }

  int visibleChildCount = 0;
  Size maxChildSize = new Size();
  int rows = 0;
  int columns = 0;
  LayoutData layoutData = new LayoutData();

  // Enumerate through all the children.
  foreach (View child in Children)
  {
    // Skip invisible children.
    if (!child.IsVisible)
      continue;

    // Count the visible children.
    visibleChildCount++;

    // Get the child's requested size.
    SizeRequest childSizeRequest = child.Measure(Double.PositiveInfinity, Double.PositiveInfinity);

    // Accumulate the maximum child size.
    maxChildSize.Width = Math.Max(maxChildSize.Width, childSizeRequest.Request.Width);
    maxChildSize.Height = Math.Max(maxChildSize.Height, childSizeRequest.Request.Height);
  }

  if (visibleChildCount != 0)
  {
    // Calculate the number of rows and columns.
    if (Double.IsPositiveInfinity(width))
    {
      columns = visibleChildCount;
      rows = 1;
    }
    else
    {
      columns = (int)((width + ColumnSpacing) / (maxChildSize.Width + ColumnSpacing));
      columns = Math.Max(1, columns);
      rows = (visibleChildCount + columns - 1) / columns;
    }

    // Now maximize the cell size based on the layout size.
    Size cellSize = new Size();

    if (Double.IsPositiveInfinity(width))
      cellSize.Width = maxChildSize.Width;
    else
      cellSize.Width = (width - ColumnSpacing * (columns - 1)) / columns;

    if (Double.IsPositiveInfinity(height))
      cellSize.Height = maxChildSize.Height;
    else
      cellSize.Height = (height - RowSpacing * (rows - 1)) / rows;

    layoutData = new LayoutData(visibleChildCount, cellSize, rows, columns);
  }

  layoutDataCache.Add(size, layoutData);
  return layoutData;
}

yöntemi GetLayoutData aşağıdaki işlemleri gerçekleştirir:

  • Hesaplanmış değerin zaten LayoutData önbellekte olup olmadığını belirler ve varsa döndürür.
  • Aksi takdirde, tüm altları numaralandırarak her altta sonsuz genişlik ve yükseklik ile yönteminin bir numaralandırarak en büyük alt Measure boyutu belirler.
  • En az bir görünür alt değer olması şartıyla, gerekli satır ve sütun sayısını hesaplar ve ardından altlar için boyutlarına göre bir hücre boyutu WrapLayout hesaplar. Hücre boyutunun genellikle en büyük alt boyuttan biraz daha geniş olduğunu, ancak en geniş alt boyut için yeterince geniş değilse veya en uzun alt için yeterince uzun değilse de daha küçük olduğunu WrapLayout unutmayın.
  • Yeni değeri LayoutData önbellekte depolar.

Bağlanabilir Özelliklere Göre ArkaLı Özellikler Ekleme

sınıfı, değerleri düzende satırları ve sütunları ayırmak için kullanılan ve bağlanabilir özelliklerle birlikte kullanılan WrapLayoutColumnSpacing ve özelliklerini RowSpacing tanımlar. Bağlanabilir özellikler aşağıdaki kod örneğinde gösterilmiştir:

public static readonly BindableProperty ColumnSpacingProperty = BindableProperty.Create(
  "ColumnSpacing",
  typeof(double),
  typeof(WrapLayout),
  5.0,
  propertyChanged: (bindable, oldvalue, newvalue) =>
  {
    ((WrapLayout)bindable).InvalidateLayout();
  });

public static readonly BindableProperty RowSpacingProperty = BindableProperty.Create(
  "RowSpacing",
  typeof(double),
  typeof(WrapLayout),
  5.0,
  propertyChanged: (bindable, oldvalue, newvalue) =>
  {
    ((WrapLayout)bindable).InvalidateLayout();
  });

Her bir bağlanabilir özelliğin özellik değiştirme işleyicisi, üzerinde yeni bir düzen geçişi InvalidateLayout tetiklemek için yöntemi geçersiz kılmayı WrapLayout çağırır. Daha fazla bilgi için bkz. InvalidateLayout Yöntemini Geçersiz Kılma ve OnChildMeasureInvalidatedYöntemini Geçersiz Kılma.

OnMeasure Yöntemini Geçersiz Kılma

Geçersiz OnMeasure kılma aşağıdaki kod örneğinde gösterilmiştir:

protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
{
  LayoutData layoutData = GetLayoutData(widthConstraint, heightConstraint);
  if (layoutData.VisibleChildCount == 0)
  {
    return new SizeRequest();
  }

  Size totalSize = new Size(layoutData.CellSize.Width * layoutData.Columns + ColumnSpacing * (layoutData.Columns - 1),
                layoutData.CellSize.Height * layoutData.Rows + RowSpacing * (layoutData.Rows - 1));
  return new SizeRequest(totalSize);
}

Geçersiz kılma yöntemi çağırır ve döndürülen verilerden bir nesnesi oluşturur, ayrıca ve özellik değerlerini de GetLayoutDataSizeRequest dikkate RowSpacingColumnSpacing alarak. yöntemi hakkında daha fazla bilgi GetLayoutData için bkz. GetLayoutData.

Önemli

Xamarin_Forms _VisualElement_Measure_System_Double_System_Double_ Xamarin_Forms _MeasureFlags_" data-linktype="absolute-path">ve Xamarin_Forms MeasureXamarin_Forms _VisualElement_OnMeasure_System_Double_System_Double_" data-linktype="absolute-path">OnMeasure yöntemleri SizeRequestDouble.PositiveInfinity hiçbir zaman özelliği olarak ayarlanmış bir değer döndürerek sonsuz boyut isteğinde >. Ancak, kısıtlama bağımsız değişkenlerinden en az biri OnMeasureDouble.PositiveInfinity olabilir.

LayoutChildren Yöntemini Geçersiz Kılma

Geçersiz LayoutChildren kılma aşağıdaki kod örneğinde gösterilmiştir:

protected override void LayoutChildren(double x, double y, double width, double height)
{
  LayoutData layoutData = GetLayoutData(width, height);

  if (layoutData.VisibleChildCount == 0)
  {
    return;
  }

  double xChild = x;
  double yChild = y;
  int row = 0;
  int column = 0;

  foreach (View child in Children)
  {
    if (!child.IsVisible)
    {
      continue;
    }

    LayoutChildIntoBoundingRegion(child, new Rectangle(new Point(xChild, yChild), layoutData.CellSize));
    if (++column == layoutData.Columns)
    {
      column = 0;
      row++;
      xChild = x;
      yChild += RowSpacing + layoutData.CellSize.Height;
    }
    else
    {
      xChild += ColumnSpacing + layoutData.CellSize.Width;
    }
  }
}

Geçersiz kılma yöntemine yapılan bir çağrıyla başlar ve ardından tüm altları boyuta ve her alt hücreye konum olarak GetLayoutData numaralar. Bunun için Xamarin_Forms _Layout_LayoutChildIntoBoundingRegion_ Xamarin_Forms _VisualElement_ _Rectangle_" data-linktype="absolute-path">yöntemi, bir dikdörtgenin içindeki bir alt öğeyi Xamarin_Forms Xamarin_Forms LayoutChildIntoBoundingRegionXamarin_Forms _View_HorizontalOptions" data-linktype="absolute-path">ve HorizontalOptions Xamarin_Forms Xamarin_Forms _View_VerticalOptions" data-linktype="absolute-path">VerticalOptions özellik değerlerine göre konumlandırmak için kullanılır. Bu, alt öğenin _Rectangle_" Xamarin_Forms _VisualElement_Layout_ Xamarin_Forms data-linktype="absolute-path">yöntemine çağrı yapmaya Layout eşdeğerdir.

Not

Yöntemine geçirilen LayoutChildIntoBoundingRegion dikdörtgenin, alt öğenin içinde bulunduğu tüm alanı içerir.

yöntemi hakkında daha fazla bilgi GetLayoutData için bkz. GetLayoutData.

InvalidateLayout Yöntemini Geçersiz Kılma

Xamarin_Forms _Layout_InvalidateLayout" data-linktype="absolute-path">geçersiz kılma, alt bilgiler düzene ekli veya düzenden kaldırılmış olduğunda veya aşağıdaki kod örneğinde gösterildiği gibi özelliklerden biri değer değiştirse InvalidateLayoutWrapLayout çağrılır:

protected override void InvalidateLayout()
{
  base.InvalidateLayout();
  layoutInfoCache.Clear();
}

Geçersiz kılma düzeni geçersiz kılar ve önbelleğe alınan tüm düzen bilgilerini atar.

Not

Xamarin_Forms _Layout_InvalidateLayout" data-linktype="absolute-path">yöntemine bir düzenden bir alt dosya ekleniyor veya düzenden kaldırılıyorsa sınıfı durdurmak LayoutLayout için Xamarin_Forms InvalidateLayout _Layout_ShouldInvalidateOnChildAdded_ Xamarin_Forms _View_" data-linktype="absolute-path">ve ShouldInvalidateOnChildAdded Xamarin_Forms InvalidateLayout _Layout_ShouldInvalidateOnChildRemoved_ Xamarin_Forms _View_" data-linktype="absolute-path">ShouldInvalidateOnChildRemovedfalse yöntemlerini geçersiz kılın ve değerini geri yazın. Ardından düzen sınıfı, çocuklar ekleniyor veya kaldırılıyorsa özel bir işlem gerçekleştirebilirsiniz.

OnChildMeasureInvalidated Yöntemini Geçersiz Kılma

Xamarin_Forms _Layout_OnChildMeasureInvalidated" data-linktype="absolute-path">geçersiz kılma, düzenin alt bilgilerinden biri boyut değiştirse çağrılır ve aşağıdaki kod örneğinde OnChildMeasureInvalidated gösterilmiştir:

protected override void OnChildMeasureInvalidated()
{
  base.OnChildMeasureInvalidated();
  layoutInfoCache.Clear();
}

Geçersiz kılma, alt düzeni geçersiz kılar ve önbelleğe alınan tüm düzen bilgilerini atar.

WrapLayout'ı tüketme

Sınıfı, WrapLayout aşağıdaki XAML kod örneğinde olduğu gibi Page türetilmiş bir türe yerleştirerek kullanabilirsiniz:

<ContentPage ... xmlns:local="clr-namespace:ImageWrapLayout">
    <ScrollView Margin="0,20,0,20">
        <local:WrapLayout x:Name="wrapLayout" />
    </ScrollView>
</ContentPage>

Eşdeğer C# kodu aşağıda gösterilmiştir:

public class ImageWrapLayoutPageCS : ContentPage
{
  WrapLayout wrapLayout;

  public ImageWrapLayoutPageCS()
  {
    wrapLayout = new WrapLayout();

    Content = new ScrollView
    {
      Margin = new Thickness(0, 20, 0, 20),
      Content = wrapLayout
    };
  }
  ...
}

Daha sonra, gerektiğinde'ye WrapLayout çocuk eklenebilir. Aşağıdaki kod örneğine Image eklenen öğeleri WrapLayout gösterir:

protected override async void OnAppearing()
{
    base.OnAppearing();

    var images = await GetImageListAsync();
    if (images != null)
    {
        foreach (var photo in images.Photos)
        {
            var image = new Image
            {
                Source = ImageSource.FromUri(new Uri(photo))
            };
            wrapLayout.Children.Add(image);
        }
    }
}

async Task<ImageList> GetImageListAsync()
{
    try
    {
        string requestUri = "https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json";
        string result = await _client.GetStringAsync(requestUri);
        return JsonConvert.DeserializeObject<ImageList>(result);
    }
    catch (Exception ex)
    {
        Debug.WriteLine($"\tERROR: {ex.Message}");
    }

    return null;
}

öğesini içeren sayfa görüntülendiğinde, örnek uygulama fotoğraf listesini içeren uzak bir JSON dosyasına zaman uyumsuz olarak erişer, her fotoğraf için bir öğe oluşturur ve öğesine WrapLayoutImageWrapLayout ekler. Bu, aşağıdaki ekran görüntüsinde gösterilen görünümle sonuç verir:

Örnek Uygulama Dikey Ekran Görüntüleri

Aşağıdaki ekran görüntüleri yatay WrapLayout yönlendirmeye döndürüldikten sonra aşağıdaki ekran görüntülerini gösterir:

Örnek iOS Uygulama Yatay Ekran Görüntüsü ÖrnekAndroid Uygulaması Yatay Ekran GörüntüsüÖrnekUWP Uygulaması Yatay Ekran Görüntüsü

Her satırdaki sütun sayısı fotoğraf boyutuna, ekran genişliğine ve cihazdan bağımsız birim başına piksel sayısına bağlıdır. Öğelerin fotoğrafları zaman uyumsuz olarak yüklemesi ve bu nedenle her öğe yüklenen fotoğrafa göre yeni bir boyut aldığından sınıfı ImageWrapLayout Xamarin_Forms Image _Layout_LayoutChildren_System_Double_System_Double_System_Double_System_Double_" data-linktype="absolute-path">LayoutChildren yöntemine sık sık çağrılar Image alır.