Xamarin.Forms CollectionView Düzeni

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

CollectionView düzeni kontrol eden aşağıdaki özellikleri tanımlar:

ItemsLayouttüründe, IItemsLayout kullanılacak düzeni belirtir.
_StructuredItemsView_ItemSizingStrategy" data-linktype="absolute-path">, türünde , kullanılacak öğe ItemSizingStrategyItemSizingStrategy ölçü stratejisini belirtir.

Bu özellikler nesnelerle BindableProperty desteklene, bu da özelliklerin veri bağlamalarının hedefi olduğu anlamına gelir.

Varsayılan olarak , CollectionView öğelerini dikey listede görüntüler. Ancak, aşağıdaki düzenlerden herhangi biri kullanılabilir:

Dikey liste: Yeni öğeler eklendikçe dikey olarak büyüyen tek sütunlu bir listedir.
Yatay liste: Yeni öğeler eklendikçe yatay olarak büyüyen tek bir satır listesidir.
Dikey kılavuz: Yeni öğeler eklendikçe dikey olarak büyüyen çok sütunlu bir kılavuz.
Yatay kılavuz: Yeni öğeler eklendikçe yatay olarak büyüyen çok satırlı bir kılavuz.

Bu düzenler, Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">özelliğini sınıfından türetilen sınıfa ItemsLayout ayararak ItemsLayout belirtilebilir. Bu sınıf aşağıdaki özellikleri tanımlar:

Xamarin_Forms _ItemsLayout_Orientation" data-linktype="absolute-path">, türünde, öğelerin eklendiklerine Orientation genişlettikleri yönü ItemsLayoutOrientationCollectionView belirtir.
Xamarin_Forms _ItemsLayout_SnapPointsAlignment" data-linktype="absolute-path">, türünde SnapPointsAlignment , yasla noktaların öğelerle nasıl SnapPointsAlignment hizalı olduğunu belirtir.
Xamarin_Forms _ItemsLayout_SnapPointsType" data-linktype="absolute-path">, türünde , kaydırmada SnapPointsTypeSnapPointsType yaslama noktalarının davranışını belirtir.

Bu özellikler nesnelerle BindableProperty desteklene, bu da özelliklerin veri bağlamalarının hedefi olduğu anlamına gelir. Yas noktaları hakkında daha fazla bilgi için kılavuzda yer alan Yas noktaları'ya bakın.

Numaralama ItemsLayoutOrientation aşağıdaki üyeleri tanımlar:

Vertical , öğeleri CollectionView eklendiklerine göre dikey olarak genişleteceklerini gösterir.
Horizontal öğeleri CollectionView eklendiklerine göre yatay olarak genişleteceklerini gösterir.

sınıfı LinearItemsLayout sınıfından devralınır ve her öğenin çevresindeki boş alanı temsil eden türünde ItemsLayout bir özelliği ItemSpacingdouble tanımlar. Bu özelliğin varsayılan değeri 0'dır ve değeri her zaman 0'dan büyük veya 0'a eşit olması gerekir. sınıfı LinearItemsLayout ayrıca statik ve üyeleri VerticalHorizontal tanımlar. Bu üyeler sırasıyla dikey veya yatay listeler oluşturmak için kullanılabilir. Alternatif olarak, LinearItemsLayout bağımsız değişken olarak bir numaralama üyesi ItemsLayoutOrientation belirterek bir nesnesi oluşturulabilir.

sınıfı GridItemsLayout sınıfından ItemsLayout devralınır ve aşağıdaki özellikleri tanımlar:

VerticalItemSpacingher öğenin double çevresindeki dikey boş alanı temsil eden türünde . Bu özelliğin varsayılan değeri 0'dır ve değeri her zaman 0'dan büyük veya 0'a eşit olması gerekir.
HorizontalItemSpacingher öğenin double çevresindeki yatay boş alanı temsil eden türünde . Bu özelliğin varsayılan değeri 0'dır ve değeri her zaman 0'dan büyük veya 0'a eşit olması gerekir.
Span, int türü, kılavuzda görüntülenmek için sütun veya satır sayısını temsil eder. Bu özelliğin varsayılan değeri 1'tir ve değeri her zaman 1'den büyük veya 1'e eşit olması gerekir.

Bu özellikler nesnelerle BindableProperty desteklene, bu da özelliklerin veri bağlamalarının hedefi olduğu anlamına gelir.

Not

CollectionView , düzeni gerçekleştirmek için yerel düzen altyapılarını kullanır.

Dikey liste

Varsayılan CollectionView olarak, öğelerini dikey liste düzeninde görüntüler. Bu nedenle, bu düzeni kullanmak için Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">özelliğini ayarlamak ItemsLayout gerekli değildir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Ancak, bütünlük için XAML'de bir , CollectionView öğelerini Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">özelliği olarak ayarlandıktan sonra dikey listede görüntüleniyor olarak ItemsLayoutVerticalList ayarlanır:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalList">
    ...
</CollectionView>

Alternatif olarak bu, Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">özelliğini bir nesne olarak ayarlayarak ve özellik değeri olarak numaralama üyesini belirterek de ItemsLayoutLinearItemsLayoutVerticalItemsLayoutOrientation gerçek Orientation olabilir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Eşdeğer C# kodu şöyledir:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Vertical
};

Bu, yeni öğeler eklendikçe dikey olarak büyüyen tek bir sütun listesiyle sonuç verir:

Yatay liste

XAML'de , CollectionViewCollectionView "data-linktype="absolute-path"Xamarin_Forms _StructuredItemsView_ItemsLayout özelliğini olarak ayarerek öğelerini yatay bir >listede ItemsLayout ekleyebilirsiniz: HorizontalList

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalList">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Alternatif olarak, bu düzen Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">özelliğini bir nesne olarak ayarlayarak ve özellik değeri olarak numaralama üyesini belirterek de ItemsLayoutLinearItemsLayoutHorizontalItemsLayoutOrientation gerçek Orientation olabilir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Horizontal" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Eşdeğer C# kodu şöyledir:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = LinearItemsLayout.Horizontal
};

Bu, yeni öğeler eklendikçe yatay olarak büyüyen tek bir satır listesiyle sonuç verir:

Dikey kılavuz

XAML'de , CollectionViewCollectionView "data-linktype="absolute-path"Xamarin_Forms _StructuredItemsView_ItemsLayout özelliğini olarak ayarerek öğelerini dikey kılavuzda >ItemsLayoutVerticalGrid gösterir:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="VerticalGrid, 2">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="80" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Alternatif olarak, bu düzen Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">özelliğini ItemsLayoutGridItemsLayout Xamarin_Forms ItemsLayout _ItemsLayout_Orientation" data-linktype="absolute-path">OrientationVertical özelliği olarak ayarlanmış bir nesneye ayarlayarak da gerçek olabilir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Eşdeğer C# kodu şöyledir:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
};

Varsayılan olarak dikey GridItemsLayout sütunda öğeler tek bir sütunda görüntülenir. Ancak, bu örnek özelliği GridItemsLayout.Span 2 olarak ayarlar. Bu, yeni öğeler eklendikçe dikey olarak büyüyen iki sütunlu bir kılavuza neden olur:

Yatay kılavuz

XAML'de , CollectionViewCollectionView "data-linktype="absolute-path">özelliğini olarak ayar Xamarin_Forms _StructuredItemsView_ItemsLayout yatay kılavuzda öğelerini ItemsLayoutHorizontalGrid gösterebilirsiniz:

<CollectionView ItemsSource="{Binding Monkeys}"
                ItemsLayout="HorizontalGrid, 4">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="35" />
                    <RowDefinition Height="35" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="140" />
                </Grid.ColumnDefinitions>
                <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold"
                       LineBreakMode="TailTruncation" />
                <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       LineBreakMode="TailTruncation"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Alternatif olarak, bu düzen Xamarin_Forms _StructuredItemsView_ItemsLayout" data-linktype="absolute-path">özelliğini ItemsLayoutGridItemsLayout Xamarin_Forms ItemsLayout _ItemsLayout_Orientation" data-linktype="absolute-path">OrientationHorizontal özelliği olarak ayarlanmış bir nesneye ayarlayarak da gerçek olabilir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Horizontal"
                        Span="4" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Eşdeğer C# kodu şöyledir:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(4, ItemsLayoutOrientation.Horizontal)
};

Varsayılan olarak, yatay GridItemsLayout bir öğe tek bir satırda görüntülenir. Ancak, bu örnek özelliği GridItemsLayout.Span 4 olarak ayarlar. Bu, yeni öğeler eklendikçe yatay olarak büyüyen dört satırlık bir kılavuza neden olur:

Üstbilgiler ve altbilgiler

CollectionView , listede öğelerle birlikte kaydıran bir üst bilgi ve alt bilgi sunabilirsiniz. Üst bilgi ve alt bilgi dizeler, görünümler veya nesneler DataTemplate olabilir.

CollectionView üst bilgi ve alt bilgi belirtmek için aşağıdaki özellikleri tanımlar:

Headertüründe, object listenin başında görüntülenecek dizeyi, bağlamayı veya görünümü belirtir.
HeaderTemplatetüründe, DataTemplate biçimlendirmek DataTemplate için kullanmak üzere Header belirtir.
Footertüründe, object listenin sonunda görüntülenecek dizeyi, bağlamayı veya görünümü belirtir.
FooterTemplatetüründe, DataTemplate biçimlendirmek DataTemplate için kullanmak üzere Footer belirtir.

Bu özellikler nesnelerle BindableProperty desteklene, bu da özelliklerin veri bağlamalarının hedefi olduğu anlamına gelir.

Yatay olarak büyüyen bir düzene bir üst bilgi eklendiğinde, listenin sol tarafından üst bilgi görüntülenir. Benzer şekilde, yatay olarak büyüyen bir düzene alt bilgi eklendiğinde, listenin sağ tarafından alt bilgi görüntülenir.

Üst bilgi ve alt bilgide dizeleri görüntüleme

Ve HeaderFooter özellikleri, aşağıdaki örnekte string gösterildiği gibi değerlere ayarlanmış olabilir:

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="Monkeys"
                Footer="2019">
    ...
</CollectionView>

Eşdeğer C# kodu şöyledir:

CollectionView collectionView = new CollectionView
{
    Header = "Monkeys",
    Footer = "2019"
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Bu kod, iOS ekran görüntüsünde üst bilgi ve Android ekran görüntüsünde gösterilen alt bilgi ile aşağıdaki ekran görüntüleriyle sonuçlanır:

Android'de CollectionView dize üst bilgisi ve alt bilgisidizesi üst bilgisi ve alt bilgisi ekran görüntüsü

Üst bilgi ve alt bilgide görünümleri görüntüleme

ve HeaderFooter özelliklerinin her biri bir görünüme ayarlanmış olabilir. Bu tek bir görünüm veya birden çok alt görünüm içeren bir görünüm olabilir. Aşağıdaki örnek, her Header biri bir nesnesi içeren bir nesneye ayarlanmış ve özelliklerini FooterStackLayoutLabel gösterir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.Header>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Monkeys"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Header>
    <CollectionView.Footer>
        <StackLayout BackgroundColor="LightGray">
            <Label Margin="10,0,0,0"
                   Text="Friends of Xamarin Monkey"
                   FontSize="Small"
                   FontAttributes="Bold" />
        </StackLayout>
    </CollectionView.Footer>
    ...
</CollectionView>

Eşdeğer C# kodu şöyledir:

CollectionView collectionView = new CollectionView
{
    Header = new StackLayout
    {
        Children =
        {
            new Label { Text = "Monkeys", ... }
        }
    },
    Footer = new StackLayout
    {
        Children =
        {
            new Label { Text = "Friends of Xamarin Monkey", ... }
        }
    }
};
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Bu kod, iOS ekran görüntüsünde üst bilgi ve Android ekran görüntüsünde gösterilen alt bilgi ile aşağıdaki ekran görüntüleriyle sonuçlanır:

iOS ve Android'de görünümleri kullanan CollectionView üst bilgisi ve alt bilgisi ekran görüntüsü görünüm üst bilgisi ve alt bilgisi

Şablona sahip üst bilgi ve alt bilgi görüntüleme

ve HeaderTemplateFooterTemplate özellikleri, üst bilgi DataTemplate ve alt bilgi biçimlendirmek için kullanılan nesnelere ayarlanır. Bu senaryoda, ve özelliklerinin, aşağıdaki örnekte gösterildiği gibi, şablonların uygulanması için HeaderFooter geçerli kaynağı bağlaması gerekir:

<CollectionView ItemsSource="{Binding Monkeys}"
                Header="{Binding .}"
                Footer="{Binding .}">
    <CollectionView.HeaderTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Monkeys"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.HeaderTemplate>
    <CollectionView.FooterTemplate>
        <DataTemplate>
            <StackLayout BackgroundColor="LightGray">
                <Label Margin="10,0,0,0"
                       Text="Friends of Xamarin Monkey"
                       FontSize="Small"
                       FontAttributes="Bold" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.FooterTemplate>
    ...
</CollectionView>

Eşdeğer C# kodu şöyledir:

CollectionView collectionView = new CollectionView
{
    HeaderTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    }),
    FooterTemplate = new DataTemplate(() =>
    {
        return new StackLayout { };
    })
};
collectionView.SetBinding(ItemsView.HeaderProperty, ".");
collectionView.SetBinding(ItemsView.FooterProperty, ".");
collectionView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");

Bu kod, iOS ekran görüntüsünde üst bilgi ve Android ekran görüntüsünde gösterilen alt bilgi ile aşağıdaki ekran görüntüleriyle sonuçlanır:

iOS ve Android'de şablonları kullanan CollectionView üst bilgisi ve alt bilgisi ekran görüntüsü şablon üst bilgisi ve alt bilgisi

Öğe aralığı

Varsayılan olarak, içindeki her öğe arasında boşluk yoktur CollectionView . Bu davranış, tarafından kullanılan öğeler düzeninde Özellikler ayarlanarak değiştirilebilir CollectionView .

Bir CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout "Data-LinkType =" Absolute-path ">ItemsLayout özelliğini bir nesneye ayarlarsa LinearItemsLayout , LinearItemsLayout.ItemSpacing özellik double öğeler arasındaki boşluğu temsil eden bir değere ayarlanabilir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout Orientation="Vertical"
                           ItemSpacing="20" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Not

LinearItemsLayout.ItemSpacingÖzelliğin değerinin her zaman 0 ' dan büyük veya buna eşit olmasını sağlayan bir doğrulama geri çağırma kümesi vardır.

Eşdeğer C# kodu:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
    {
        ItemSpacing = 20
    }
};

Bu kod, öğeler arasında 20 aralığı bulunan dikey tek sütunlu bir liste ile sonuçlanır:

Bir CollectionView Xamarin_Forms CollectionView _StructuredItemsView_ItemsLayout "Data-LinkType =" Absolute-path ">ItemsLayout özelliğini bir nesneye ayarlarsa GridItemsLayout , GridItemsLayout.VerticalItemSpacing ve GridItemsLayout.HorizontalItemSpacing özellikleri double boş alanı dikey ve öğeler arasında yatay olarak temsil eden değerlere ayarlanabilir:

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
       <GridItemsLayout Orientation="Vertical"
                        Span="2"
                        VerticalItemSpacing="20"
                        HorizontalItemSpacing="30" />
    </CollectionView.ItemsLayout>
    ...
</CollectionView>

Not

GridItemsLayout.VerticalItemSpacingVe GridItemsLayout.HorizontalItemSpacing özellikleri doğrulama geri çağırmaları kümesine sahiptir, bu da özelliklerin değerlerinin her zaman 0 ' dan büyük veya sıfıra eşit olmasını sağlar.

Eşdeğer C# kodu:

CollectionView collectionView = new CollectionView
{
    ...
    ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
    {
        VerticalItemSpacing = 20,
        HorizontalItemSpacing = 30
    }
};

Bu kod, iki sütunlu dikey bir ızgara ile oluşur ve öğeler arasında 20 dikey aralığa ve öğeler arasında 30 yatay aralığa sahiptir:

Öğe boyutlandırma

Varsayılan olarak, içindeki her öğe, CollectionView sabit boyutlar belirtmediğinde, içindeki her öğe ayrı ayrı ölçülür ve boyutlandırılır DataTemplate . Değiştirilebilecek bu davranış, Xamarin_Forms _StructuredItemsView_ItemSizingStrategy "Data-LinkType =" Absolute-path ">CollectionView.ItemSizingStrategy özellik değeri tarafından belirtilir. Bu özellik değeri, ItemSizingStrategy numaralandırma üyelerinden birine ayarlanabilir:

MeasureAllItems – her öğe ayrı olarak ölçülür. Varsayılan değer budur.
MeasureFirstItem – yalnızca ilk öğe ölçülür, sonraki tüm öğeler ilk öğeyle aynı boyutta olur.

Önemli

MeasureFirstItemBoyutlandırma stratejisi, öğe boyutunun tüm öğeler arasında Tekdüzen olması amaçlanan durumlarda kullanıldığında performansı artmasıyla sonuçlanır.

Aşağıdaki kod örneği, "Data-LinkType =" Absolute-path ">özelliğinin _StructuredItemsView_ItemSizingStrategy Xamarin_Forms ayarlamayı gösterir ItemSizingStrategy :

<CollectionView ...
                ItemSizingStrategy="MeasureFirstItem">
    ...
</CollectionView>

Eşdeğer C# kodu:

CollectionView collectionView = new CollectionView
{
    ...
    ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem
};

Öğelerin dinamik olarak yeniden boyutlandırılması

CollectionViewİçindeki öğeler, içindeki öğelerin düzeniyle ilgili özelliklerini değiştirerek çalışma zamanında dinamik olarak yeniden boyutlandırılabilir DataTemplate . Örneğin, aşağıdaki kod örneği, "Data-LinkType =" Absolute-path ">_VisualElement_HeightRequest HeightRequest ve HeightRequest bir nesnenin _VisualElement_WidthRequest" Data-LinkType = "absolute-path" >Xamarin_Forms WidthRequestImage Xamarin_Forms değiştirir:

void OnImageTapped(object sender, EventArgs e)
{
    Image image = sender as Image;
    image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(60) ? 100 : 60;
}

OnImageTappedOlay işleyicisi, Image dokunmakta olan bir nesneye yanıt olarak yürütülür ve görüntünün boyutlarını daha kolay görüntülenecek şekilde değiştirir:

dinamik öğe boyutlandırma bir CollectionView 'ın, iOS ve Android sahip bir CollectionView ekran görüntüsü

Sağdan sola düzen

CollectionView, Xamarin_Forms CollectionView _VisualElement_FlowDirection "Data-LinkType =" Absolute-path ">FlowDirection özelliğini Xamarin_Forms _FlowDirection_RightToLeft" Data-LinkType = "Absolute-path" >olarak RightToLeft ayarlayarak içeriğini sağdan sola akış yönünde düzenleyebilir. Ancak, FlowDirection özellik ideal bir sayfada veya kök düzeninde ayarlanmalıdır. Bu, sayfadaki tüm öğelerin veya kök düzenin akış yönüne yanıt vermesini sağlar:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewDemos.Views.VerticalListFlowDirectionPage"
             Title="Vertical list (RTL FlowDirection)"
             FlowDirection="RightToLeft">
    <StackLayout Margin="20">
        <CollectionView ItemsSource="{Binding Monkeys}">
            ...
        </CollectionView>
    </StackLayout>
</ContentPage>

Varsayılan Xamarin_Forms "Data-LinkType =" Absolute-path ">FlowDirection üst öğesi olan bir öğe için _VisualElement_FlowDirection, Xamarin_Forms FlowDirection _FlowDirection_MatchParent" Data-LinkType = "Absolute-path" >MatchParent . Bu nedenle, özellik değerini öğesinden devralır, bu, ' CollectionViewFlowDirectionStackLayoutFlowDirection den özellik değerini devralır ContentPage . Bu, aşağıdaki ekran görüntülerinde gösterilen sağdan sola düzenine neden olur:

sağdan sola dikey liste düzeni bir CollectionView sağdan sola dikey liste düzeninin ekran görüntüsü, iOS ve Android liste düzeni

Akış yönü hakkında daha fazla bilgi için bkz. sağdan sola yerelleştirme.

Xamarin.Forms CollectionView Düzeni

Lütfen deneyiminizi değerlendirin

Dikey liste

Yatay liste

Dikey kılavuz

Yatay kılavuz

Üstbilgiler ve altbilgiler

Üst bilgi ve alt bilgide dizeleri görüntüleme

Üst bilgi ve alt bilgide görünümleri görüntüleme

Şablona sahip üst bilgi ve alt bilgi görüntüleme

Öğe aralığı

Öğe boyutlandırma

Öğelerin dinamik olarak yeniden boyutlandırılması

Sağdan sola düzen

İlgili bağlantılar