Xamarin.Forms CollectionView Düzeni
CollectionView
düzeni denetleen aşağıdaki özellikleri tanımlar:
ItemsLayout
türündeIItemsLayout
, kullanılacak düzeni belirtir.ItemSizingStrategy
türündeItemSizingStrategy
, kullanılacak öğe ölçü stratejisini belirtir.
Bu özellikler nesneler tarafından BindableProperty
desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği anlamına gelir.
Varsayılan olarak, öğesinin CollectionView
öğeleri dikey bir listede görüntülenir. Ancak, aşağıdaki düzenlerden herhangi biri kullanılabilir:
- Dikey liste – yeni öğeler eklendikçe dikey olarak büyüyen tek bir sütun listesi.
- Yatay liste: Yeni öğeler eklendikçe yatay olarak büyüyen tek satırlı liste.
- 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, özelliği sınıfından ItemsLayout
türetilen ItemsLayout
sınıfa ayarlanarak belirtilebilir. Bu sınıf aşağıdaki özellikleri tanımlar:
Orientation
, türündekiItemsLayoutOrientation
öğesinin genişletildiğiCollectionView
yönü, öğeler eklendikçe belirtir.SnapPointsAlignment
SnapPointsAlignment
türünde, tutturma noktalarının öğelerle nasıl hizalı olduğunu belirtir.SnapPointsType
türündeSnapPointsType
, kaydırma sırasında tutturma noktalarının davranışını belirtir.
Bu özellikler nesneler tarafından BindableProperty
desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği anlamına gelir. Tutturma noktaları hakkında daha fazla bilgi için Bkz. CollectionView Kaydırma kılavuzundaki Xamarin.Forms Tutturma noktaları.
Numaralandırma ItemsLayoutOrientation
aşağıdaki üyeleri tanımlar:
Vertical
öğeleri eklendikçe öğesininCollectionView
dikey olarak genişletileceğini gösterir.Horizontal
öğeleri eklendikçe öğesininCollectionView
yatay olarak genişletileceğini gösterir.
LinearItemsLayout
sınıfı sınıfından ItemsLayout
devralır ve her öğenin etrafındaki boş alanı temsil eden türünde double
bir ItemSpacing
özellik tanımlar. Bu özelliğin varsayılan değeri 0'dır ve değeri her zaman 0'dan büyük veya buna eşit olmalıdır. LinearItemsLayout
sınıfı ayrıca statik Vertical
ve Horizontal
üyeleri tanımlar. Bu üyeler sırasıyla dikey veya yatay listeler oluşturmak için kullanılabilir. Alternatif olarak, bir LinearItemsLayout
sabit listesi üyesi bağımsız değişken olarak belirterek ItemsLayoutOrientation
bir nesne oluşturulabilir.
sınıfı GridItemsLayout
sınıfından ItemsLayout
devralır ve aşağıdaki özellikleri tanımlar:
VerticalItemSpacing
, türünedouble
göre, her öğenin etrafındaki dikey boş alanı temsil eder. Bu özelliğin varsayılan değeri 0'dır ve değeri her zaman 0'dan büyük veya buna eşit olmalıdır.HorizontalItemSpacing
, türündedirdouble
ve her öğenin etrafındaki yatay boş alanı temsil eder. Bu özelliğin varsayılan değeri 0'dır ve değeri her zaman 0'dan büyük veya buna eşit olmalıdır.Span
, türündeint
, kılavuzda görüntülenecek sütun veya satır sayısını temsil eder. Bu özelliğin varsayılan değeri 1'dir ve değeri her zaman 1'den büyük veya buna eşit olmalıdır.
Bu özellikler nesneler tarafından BindableProperty
desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği anlamına gelir.
Not
CollectionView
düzeni gerçekleştirmek için yerel düzen altyapılarını kullanır.
Dikey liste
Varsayılan olarak, CollectionView
öğelerini dikey liste düzeninde görüntüler. Bu nedenle, özelliğinin bu düzeni kullanacak şekilde ayarlanması ItemsLayout
gerekmez:
<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, tamlık için, XAML'de özelliğini CollectionView
olarak ayarlayarak ItemsLayout
öğelerini dikey bir listede görüntüleyecek şekilde VerticalList
ayarlanabilir:
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="VerticalList">
...
</CollectionView>
Alternatif olarak, bu özellik bir nesne olarak LinearItemsLayout
ayarlanarak ItemsLayout
ve numaralandırma üyesi özellik değeri olarak Orientation
belirtilerek Vertical
ItemsLayoutOrientation
de gerçekleştirilebilir:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Eşdeğer C# kodu:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = LinearItemsLayout.Vertical
};
Bu, yeni öğeler eklendikçe dikey olarak büyüyen tek bir sütun listesiyle sonuçlanıyor:
Yatay liste
XAML'de , CollectionView
özelliğini HorizontalList
olarak ayarlayarak ItemsLayout
öğelerini yatay bir listede görüntüleyebilir:
<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 özelliği bir LinearItemsLayout
nesne olarak ayarlanarak ItemsLayout
ve numaralandırma üyesi özellik değeri olarak Orientation
belirtilerek Horizontal
ItemsLayoutOrientation
de gerçekleştirilebilir:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Eşdeğer C# kodu:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = LinearItemsLayout.Horizontal
};
Bu, yeni öğeler eklendikçe yatay olarak büyüyen tek bir satır listesiyle sonuçlanıyor:
Dikey kılavuz
XAML'de , CollectionView
özelliğini VerticalGrid
olarak ayarlayarak ItemsLayout
öğelerini dikey bir kılavuzda görüntüleyebilir:
<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 özelliği olarak ayarlanmış bir nesneye Orientation
ayarlanarak ItemsLayout
Vertical
da gerçekleştirilebilir:GridItemsLayout
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Eşdeğer C# kodu:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
};
Varsayılan olarak, dikey GridItemsLayout
öğe öğeleri tek bir sütunda görüntüler. Ancak, bu örnek özelliğini 2 olarak ayarlar GridItemsLayout.Span
. Bu, yeni öğeler eklendikçe dikey olarak büyüyen iki sütunlu bir kılavuza neden olur:
Yatay kılavuz
XAML'de , CollectionView
özelliğini HorizontalGrid
olarak ayarlayarak ItemsLayout
öğelerini yatay bir kılavuzda görüntüleyebilir:
<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 özelliği olarak ayarlanmış bir nesneye Orientation
ayarlanarak ItemsLayout
Horizontal
da gerçekleştirilebilir:GridItemsLayout
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal"
Span="4" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Eşdeğer C# kodu:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(4, ItemsLayoutOrientation.Horizontal)
};
Varsayılan olarak, yatay GridItemsLayout
öğe öğeleri tek bir satırda görüntüler. Ancak, bu örnek özelliğini 4 olarak ayarlar GridItemsLayout.Span
. Bu, yeni öğeler eklendikçe yatay olarak büyüyen dört satırlı bir kılavuza neden olur:
Üstbilgiler ve altbilgiler
CollectionView
listedeki öğelerle birlikte kaydıran bir üst bilgi ve alt bilgi sunabilir. Üst bilgi ve alt bilgi dizeler, görünümler veya DataTemplate
nesneler olabilir.
CollectionView
üst bilgi ve alt bilgiyi belirtmek için aşağıdaki özellikleri tanımlar:
Header
türündeobject
, listenin başında görüntülenecek dizeyi, bağlamayı veya görünümü belirtir.HeaderTemplate
türündeDataTemplate
, biçimlendirmek için kullanılacak öğesiniHeader
belirtirDataTemplate
.Footer
türündeobject
, listenin sonunda görüntülenecek dizeyi, bağlamayı veya görünümü belirtir.FooterTemplate
türündeDataTemplate
, biçimlendirmek için kullanılacak öğesiniFooter
belirtirDataTemplate
.
Bu özellikler nesneler tarafından BindableProperty
desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği anlamına gelir.
Soldan sağa yatay olarak büyüyen bir düzene üst bilgi eklendiğinde, üst bilgi listenin solunda görüntülenir. Benzer şekilde, soldan sağa yatay olarak büyüyen bir düzene alt bilgi eklendiğinde, alt bilgi listenin sağ kısmında görüntülenir.
Üst bilgi ve alt bilgide dizeleri görüntüleme
Header
ve Footer
özellikleri, aşağıdaki örnekte gösterildiği gibi değerlere ayarlanabilirstring
:
<CollectionView ItemsSource="{Binding Monkeys}"
Header="Monkeys"
Footer="2019">
...
</CollectionView>
Eşdeğer C# kodu:
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:
Üst bilgi ve alt bilgide görünümleri görüntüleme
Header
ve Footer
özellikleri bir görünüme ayarlanabilir. 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 örnekte, her birinin Header
nesne içeren Label
bir StackLayout
nesneye ayarlandığı ve Footer
özellikleri gösterilmektedir:
<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:
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:
Şablonlu üst bilgi ve alt bilgi görüntüleme
HeaderTemplate
ve FooterTemplate
özellikleri, üst bilgi ve alt bilgiyi biçimlendirmek DataTemplate
için kullanılan nesnelere ayarlanabilir. Bu senaryoda, Header
Footer
ve özellikleri, aşağıdaki örnekte gösterildiği gibi şablonların uygulanması için geçerli kaynağa bağlanmalıdır:
<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:
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:
Öğe aralığı
Varsayılan olarak, içindeki CollectionView
her öğe arasında boşluk yoktur. Bu davranış, tarafından CollectionView
kullanılan öğe düzeninde özellikler ayarlanarak değiştirilebilir.
özelliği CollectionView
bir LinearItemsLayout
nesne olarak ayarlandığındaItemsLayout
, LinearItemsLayout.ItemSpacing
özelliği öğeler arasındaki boşluğu temsil eden bir double
değere ayarlanabilir:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Not
Özelliğin LinearItemsLayout.ItemSpacing
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ığı olan dikey bir tek sütun listesiyle sonuçlandı:
bir CollectionView
özelliği bir GridItemsLayout
nesne olarak ayarlandığındaItemsLayout
, GridItemsLayout.VerticalItemSpacing
ve GridItemsLayout.HorizontalItemSpacing
özellikleri boş alanı öğeler arasında dikey ve yatay olarak temsil eden değerlere ayarlanabilirdouble
:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="2"
VerticalItemSpacing="20"
HorizontalItemSpacing="30" />
</CollectionView.ItemsLayout>
...
</CollectionView>
Not
GridItemsLayout.VerticalItemSpacing
ve GridItemsLayout.HorizontalItemSpacing
özelliklerinde, özelliklerin değerlerinin her zaman 0'dan büyük veya buna eşit olmasını sağlayan doğrulama geri çağırmaları ayarlanmıştır.
Eşdeğer C# kodu:
CollectionView collectionView = new CollectionView
{
...
ItemsLayout = new GridItemsLayout(2, ItemsLayoutOrientation.Vertical)
{
VerticalItemSpacing = 20,
HorizontalItemSpacing = 30
}
};
Bu kod, öğeler arasında dikey aralığı 20, öğeler arasında yatay aralığı 30 olan dikey iki sütunlu bir kılavuza neden olur:
Öğe boyutlandırma
Varsayılan olarak, içindeki CollectionView
kullanıcı arabirimi öğelerinin sabit boyutları belirtmediği durumlarda, içindeki DataTemplate
her öğe ayrı ayrı ölçülür ve boyutlandırılır. Değiştirilebilen bu davranış, özellik değeri tarafından CollectionView.ItemSizingStrategy
belirtilir. Bu özellik değeri, numaralandırma üyelerinden ItemSizingStrategy
birine ayarlanabilir:
MeasureAllItems
– her öğe ayrı ayrı ölçülür. Bu varsayılan değerdir.MeasureFirstItem
– yalnızca ilk öğe ölçülür ve sonraki tüm öğelere ilk öğeyle aynı boyut verilir.
Önemli
Boyutlandırma MeasureFirstItem
stratejisi, öğe boyutunun tüm öğeler arasında tekdüzen olarak tasarlandığı durumlarda kullanıldığında performansın artmasına neden olur.
Aşağıdaki kod örneğinde özelliğin ayarlanması gösterilmektedir ItemSizingStrategy
:
<CollectionView ...
ItemSizingStrategy="MeasureFirstItem">
...
</CollectionView>
Eşdeğer C# kodu:
CollectionView collectionView = new CollectionView
{
...
ItemSizingStrategy = ItemSizingStrategy.MeasureFirstItem
};
Öğeleri dinamik olarak yeniden boyutlandırma
içindeki CollectionView
öğelerin düzen ile ilgili özellikleri değiştirilerek çalışma zamanında içindeki öğeler DataTemplate
dinamik olarak yeniden boyutlandırılabilir. Örneğin, aşağıdaki kod örneği bir Image
nesnenin HeightRequest
ve WidthRequest
özelliklerini değiştirir:
void OnImageTapped(object sender, EventArgs e)
{
Image image = sender as Image;
image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(60) ? 100 : 60;
}
Olay OnImageTapped
işleyicisi, dokunmakta olan bir Image
nesneye yanıt olarak yürütülür ve görüntünün boyutlarını değiştirerek daha kolay görüntülenmesini sağlar:
Sağdan sola düzen
CollectionView
özelliğini RightToLeft
olarak ayarlayarak FlowDirection
içeriğini sağdan sola akış yönünde düzenleyebilir. Ancak, FlowDirection
özellik ideal olarak bir sayfa veya kök düzende ayarlanmalıdır; bu da sayfadaki tüm öğelerin veya kök düzenin akış yönüne yanıt vermesine neden olur:
<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>
Üst öğeye sahip bir öğe için varsayılan FlowDirection
değerdir MatchParent
. Bu nedenle, CollectionView
özellik değerini öğesinden StackLayout
devralır FlowDirection
ve bu da özellik değerini öğesinden ContentPage
devralırFlowDirection
. Bu, aşağıdaki ekran görüntülerinde gösterilen sağdan sola düzenin gösterilmesine neden olur:
Akış yönü hakkında daha fazla bilgi için bkz . Sağdan sola yerelleştirme.