Xamarin.Forms CarouselView Düzeni

Makale
09/24/2020

CarouselView düzeni denetleen aşağıdaki özellikleri tanımlar:

ItemsLayouttüründe LinearItemsLayout, kullanılacak düzeni belirtir.
PeekAreaInsetstüründe Thickness, 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ündeki ItemsLayoutOrientationöğesinin genişletildiği CarouselView yönü, öğeler eklendikçe belirtir.
SnapPointsAlignmentSnapPointsAlignmenttüründe, tutturma noktalarının öğelerle nasıl hizalı olduğunu belirtir.
SnapPointsTypetüründe SnapPointsType, 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 öğesinin CarouselView dikey olarak genişletileceğini gösterir.
Horizontal öğeleri eklendikçe öğesinin CarouselView 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 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 HorizontalItemsLayoutOrientation 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 VerticalItemsLayoutOrientation öğ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.

Aracılığıyla paylaş

Xamarin.Forms CarouselView Düzeni

Yatay düzen

Dikey düzen

Kısmen görünür bitişik öğeler

Öğe aralığı

Öğeleri dinamik olarak yeniden boyutlandırma

Sağdan sola düzen

Ek kaynaklar

Aracılığıyla paylaş

Xamarin.Forms CarouselView Düzeni

Yatay düzen

Dikey düzen

Kısmen görünür bitişik öğeler

Öğe aralığı

Öğeleri dinamik olarak yeniden boyutlandırma

Sağdan sola düzen

İlgili bağlantılar

Ek kaynaklar