Xamarin.Forms CollectionView Düzeni
Örneği indirmeCollectionView düzeni denetleen aşağıdaki özellikleri tanımlar:
ItemsLayouttüründeIItemsLayout, kullanılacak düzeni belirtir.ItemSizingStrategytü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ğiCollectionViewyönü, öğeler eklendikçe belirtir.SnapPointsAlignmentSnapPointsAlignmenttüründe, tutturma noktalarının öğelerle nasıl hizalı olduğunu belirtir.SnapPointsTypetü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 öğesininCollectionViewdikey olarak genişletileceğini gösterir.Horizontalöğeleri eklendikçe öğesininCollectionViewyatay 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 doublebir 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ünedoublegö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ündedirdoubleve 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 VerticalListayarlanabilir:
<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 VerticalItemsLayoutOrientation 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 HorizontalListolarak 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 HorizontalItemsLayoutOrientation 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 VerticalGridolarak 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 ItemsLayoutVerticalda 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 HorizontalGridolarak 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 ItemsLayoutHorizontalda 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:
Headertüründeobject, listenin başında görüntülenecek dizeyi, bağlamayı veya görünümü belirtir.HeaderTemplatetüründeDataTemplate, biçimlendirmek için kullanılacak öğesiniHeaderbelirtirDataTemplate.Footertüründeobject, listenin sonunda görüntülenecek dizeyi, bağlamayı veya görünümü belirtir.FooterTemplatetüründeDataTemplate, biçimlendirmek için kullanılacak öğesiniFooterbelirtirDataTemplate.
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, HeaderFooter 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 CollectionViewher öğe arasında boşluk yoktur. Bu davranış, tarafından CollectionViewkullanı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 DataTemplatedinamik 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 RightToLeftolarak 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 StackLayoutdevralır FlowDirection ve bu da özellik değerini öğesinden ContentPagedevralı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.