Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
CarouselView düzeni denetleen aşağıdaki özellikleri tanımlar:
ItemsLayouttüründeLinearItemsLayout, kullanılacak düzeni belirtir.PeekAreaInsetstüründeThickness, bitişik öğelerin ne kadarının tarafından kısmen görünür hale getirilerek yapılacağını 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, bir CarouselView öğelerini yatay yönde görüntüler. Ekranda tek bir öğe görüntülenir ve çekme hareketleri öğelerin koleksiyonunda ileri ve geri gezintiye neden olur. Ancak dikey yönlendirme de mümkündür. Bunun nedeni, özelliğin ItemsLayout sınıfından ItemsLayout devralan türünde LinearItemsLayoutolmasıdır. ItemsLayout sınıfı aşağıdaki özellikleri tanımlar:
Orientation, türündekiItemsLayoutOrientationöğesinin genişletildiğiCarouselViewyö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 öğesininCarouselViewdikey olarak genişletileceğini gösterir.Horizontalöğeleri eklendikçe öğesininCarouselViewyatay 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.
Not
CarouselView düzeni gerçekleştirmek için yerel düzen altyapılarını kullanır.
Yatay düzen
Varsayılan olarak, CarouselView öğelerini yatay olarak görüntüler. Bu nedenle, özelliğinin bu düzeni kullanacak şekilde ayarlanması ItemsLayout gerekmez:
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
<Label Text="{Binding Location}"
HorizontalOptions="Center" />
<Label Text="{Binding Details}"
FontAttributes="Italic"
HorizontalOptions="Center"
MaxLines="5"
LineBreakMode="TailTruncation" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
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:
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CarouselView.ItemsLayout>
...
</CarouselView>
Eşdeğer C# kodu:
CarouselView carouselView = new CarouselView
{
...
ItemsLayout = LinearItemsLayout.Horizontal
};
Bu, yeni öğeler eklendikçe yatay olarak büyüyen bir düzen elde edilir:
Dikey düzen
CarouselViewözelliğini bir LinearItemsLayout nesne olarak ayarlayarak ItemsLayout ve numaralandırma üyesini özellik değeri olarak belirterek Vertical ItemsLayoutOrientation öğelerini dikey olarak Orientation görüntüleyebilir:
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" />
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Image Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="150"
WidthRequest="150"
HorizontalOptions="Center" />
<Label Text="{Binding Location}"
HorizontalOptions="Center" />
<Label Text="{Binding Details}"
FontAttributes="Italic"
HorizontalOptions="Center"
MaxLines="5"
LineBreakMode="TailTruncation" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Eşdeğer C# kodu:
CarouselView carouselView = new CarouselView
{
...
ItemsLayout = LinearItemsLayout.Vertical
};
Bu, yeni öğeler eklendikçe dikey olarak büyüyen bir düzen elde edilir:
Kısmen görünür bitişik öğeler
Varsayılan olarak, CarouselView tam öğeleri aynı anda görüntüler. Ancak bu davranış, özelliği bitişik öğelerin ne kadarı tarafından kısmen görünür hale getirilebileceğini belirten bir Thickness değere ayarlanarak PeekAreaInsets değiştirilebilir. Bu, kullanıcılara görüntülenecek ek öğeler olduğunu göstermek için yararlı olabilir. Aşağıdaki XAML'de bu özelliği ayarlama örneği gösterilmektedir:
<CarouselView ItemsSource="{Binding Monkeys}"
PeekAreaInsets="100">
...
</CarouselView>
Eşdeğer C# kodu:
CarouselView carouselView = new CarouselView
{
...
PeekAreaInsets = new Thickness(100)
};
Sonuç olarak, bitişik öğeler ekranda kısmen gösterilir:
Öğe aralığı
Varsayılan olarak, içindeki CarouselViewher öğe arasında boşluk yoktur. Bu davranış, tarafından CarouselViewkullanılan öğe düzeninde özelliği ayarlanarak ItemSpacing değiştirilebilir.
özelliği CarouselView bir LinearItemsLayout nesne olarak ayarlandığındaItemsLayout, LinearItemsLayout.ItemSpacing özelliği öğeler arasındaki boşluğu temsil eden bir double değere ayarlanabilir:
<CarouselView ItemsSource="{Binding Monkeys}">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical"
ItemSpacing="20" />
</CarouselView.ItemsLayout>
...
</CarouselView>
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:
CarouselView carouselView = new CarouselView
{
...
ItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
{
ItemSpacing = 20
}
};
Bu kod, öğeler arasında 20 aralığı olan dikey bir düzen oluşturur.
Öğeleri dinamik olarak yeniden boyutlandırma
içindeki CarouselView öğ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 ve HeightRequest üst Frameöğesinin özelliğini değiştirir:
void OnImageTapped(object sender, EventArgs e)
{
Image image = sender as Image;
image.HeightRequest = image.WidthRequest = image.HeightRequest.Equals(150) ? 200 : 150;
Frame frame = ((Frame)image.Parent.Parent);
frame.HeightRequest = frame.HeightRequest.Equals(300) ? 350 : 300;
}
Olay OnImageTapped işleyicisi, dokunmakta olan bir Image nesneye yanıt olarak yürütülür ve görüntünün (ve üst Frameöğesinin) boyutlarını değiştirerek daha kolay görüntülenmesini sağlar:
Sağdan sola düzen
CarouselViewö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="CarouselViewDemos.Views.HorizontalTemplateLayoutRTLPage"
Title="Horizontal layout (RTL FlowDirection)"
FlowDirection="RightToLeft">
<CarouselView ItemsSource="{Binding Monkeys}">
...
</CarouselView>
</ContentPage>
Üst öğeye sahip bir öğe için varsayılan FlowDirection değerdir MatchParent. Bu nedenle, CarouselView özelliği değerini öğesinden ContentPagedevralırFlowDirection.
Akış yönü hakkında daha fazla bilgi için bkz . Sağdan sola yerelleştirme.