Xamarin.Forms Döngü Sayfası

CarouselPage Xamarin.Forms , kullanıcıların galeri gibi içerik sayfalarında gezinmek için yan yana çekebileceği bir sayfadır. Bu makalede, bir sayfa koleksiyonunda gezinmek için CarouselPage'in nasıl kullanılacağı gösterilmektedir.

Önemli

CarouselPage öğesinin CarouselViewyerini, kullanıcıların bir öğe koleksiyonunda hareket etmek için çekebileceği kaydırılabilir bir düzen sağlayan ile almıştır. hakkında CarouselViewdaha fazla bilgi için bkz Xamarin.Forms . CarouselView.

Aşağıdaki ekran görüntüleri her platformda bir CarouselPage gösterir:

CarouselPage Düzeni her platformda aynıdır. Sayfalar arasında gezinmek için sağdan sola doğru çekerek koleksiyonda ileriye doğru gidebilir ve koleksiyonda geriye doğru gitmek için soldan sağa doğru çekebilirsiniz. Aşağıdaki ekran görüntüleri bir örnekteki ilk sayfayı CarouselPage gösterir:

Aşağıdaki ekran görüntülerinde gösterildiği gibi sağdan sola çekme ikinci sayfaya taşınır:

Sağdan sola doğru çekme yeniden üçüncü sayfaya taşınırken, soldan sağa doğru çekme önceki sayfaya döner.

Not

kullanıcı CarouselPage arabirimi sanallaştırmayı desteklemez. Bu nedenle, çok fazla alt öğe içeriyorsa performans etkilenebilir CarouselPage .

bir CarouselPage öğesinin Detail FlyoutPagesayfasına eklenmişse ve FlyoutPage.IsGestureEnabled arasında CarouselPage FlyoutPagehareket çakışmalarını önlemek için özelliği olarak ayarlanmalıdırfalse.

hakkında CarouselPagedaha fazla bilgi için bkz. Charles Petzold'un Xamarin.Forms kitabının 25. bölümü.

Döngü Sayfası Oluşturma

oluşturmak CarouselPageiçin iki yaklaşım kullanılabilir:

• öğesini CarouselPage bir alt ContentPage örnek koleksiyonuyla doldurun.
• özelliğine bir koleksiyon atayın ItemsSource ve koleksiyondaki ItemTemplate nesnelerin örneklerini döndürmek ContentPage için özelliğine bir DataTemplate atayın.

Her iki yaklaşımda CarouselPage da her sayfa sırayla görüntülenir ve bir çekme etkileşimi görüntülenecek bir sonraki sayfaya taşınır.

Not

A CarouselPage yalnızca örnekler veya ContentPage türevleriyle ContentPage doldurulabilir.

CarouselPage'i Sayfa koleksiyonuyla doldurma

Aşağıdaki XAML kod örneği, üç ContentPage örneği görüntüleyen bir CarouselPage örneği gösterir:

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="CarouselPageNavigation.MainPage">
    <ContentPage>
        <ContentPage.Padding>
          <OnPlatform x:TypeArguments="Thickness">
              <On Platform="iOS, Android" Value="0,40,0,0" />
          </OnPlatform>
        </ContentPage.Padding>
        <StackLayout>
            <Label Text="Red" FontSize="Medium" HorizontalOptions="Center" />
            <BoxView Color="Red" WidthRequest="200" HeightRequest="200" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage>
    <ContentPage>
        ...
    </ContentPage>
    <ContentPage>
        ...
    </ContentPage>
</CarouselPage>

Aşağıdaki kod örneği C# dilinde eşdeğer kullanıcı arabirimini gösterir:

public class MainPageCS : CarouselPage
{
    public MainPageCS ()
    {
        Thickness padding;
        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
            case Device.Android:
                padding = new Thickness(0, 40, 0, 0);
                break;
            default:
                padding = new Thickness();
                break;
        }

        var redContentPage = new ContentPage {
            Padding = padding,
            Content = new StackLayout {
                Children = {
                    new Label {
                        Text = "Red",
                        FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
                        HorizontalOptions = LayoutOptions.Center
                    },
                    new BoxView {
                        Color = Color.Red,
                        WidthRequest = 200,
                        HeightRequest = 200,
                        HorizontalOptions = LayoutOptions.Center,
                        VerticalOptions = LayoutOptions.CenterAndExpand
                    }
                }
            }
        };
        var greenContentPage = new ContentPage {
            Padding = padding,
            Content = new StackLayout {
                ...
            }
        };
        var blueContentPage = new ContentPage {
            Padding = padding,
            Content = new StackLayout {
                ...
            }
        };

        Children.Add (redContentPage);
        Children.Add (greenContentPage);
        Children.Add (blueContentPage);
    }
}

Her ContentPage biri yalnızca belirli bir renk için ve bu rengin bir BoxView değerini görüntülerLabel.

CarouselPage'i şablonla doldurma

Aşağıdaki XAML kodu örneği, koleksiyondaki nesnelerin sayfalarını döndürmek için özelliğine ItemTemplate atanarak DataTemplate oluşturulan bir CarouselPage öğesini gösterir:

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="CarouselPageNavigation.MainPage">
    <CarouselPage.ItemTemplate>
        <DataTemplate>
            <ContentPage>
                <ContentPage.Padding>
                  <OnPlatform x:TypeArguments="Thickness">
                    <On Platform="iOS, Android" Value="0,40,0,0" />
                  </OnPlatform>
                </ContentPage.Padding>
                <StackLayout>
                    <Label Text="{Binding Name}" FontSize="Medium" HorizontalOptions="Center" />
                    <BoxView Color="{Binding Color}" WidthRequest="200" HeightRequest="200" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </CarouselPage.ItemTemplate>
</CarouselPage>

CarouselPage, arka planda kod dosyasının ItemsSource oluşturucusunda özelliği ayarlanarak verilerle doldurulur:

public MainPage ()
{
    ...
    ItemsSource = ColorsDataModel.All;
}

Aşağıdaki kod örneği C# dilinde oluşturulan eşdeğeri CarouselPage gösterir:

public class MainPageCS : CarouselPage
{
    public MainPageCS ()
    {
        Thickness padding;
        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
            case Device.Android:
                padding = new Thickness(0, 40, 0, 0);
                break;
            default:
                padding = new Thickness();
                break;
        }

        ItemTemplate = new DataTemplate (() => {
            var nameLabel = new Label {
                FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
                HorizontalOptions = LayoutOptions.Center
            };
            nameLabel.SetBinding (Label.TextProperty, "Name");

            var colorBoxView = new BoxView {
                WidthRequest = 200,
                HeightRequest = 200,
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.CenterAndExpand
            };
            colorBoxView.SetBinding (BoxView.ColorProperty, "Color");

            return new ContentPage {
                Padding = padding,
                Content = new StackLayout {
                    Children = {
                        nameLabel,
                        colorBoxView
                    }
                }
            };
        });

        ItemsSource = ColorsDataModel.All;
    }
}

Her ContentPage biri yalnızca belirli bir renk için ve bu rengin bir BoxView değerini görüntülerLabel.

İlgili bağlantılar

• Sayfa Çeşitleri
• CarouselPage