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 DetailFlyoutPagesayfasına eklenmişse ve FlyoutPage.IsGestureEnabled arasında CarouselPageFlyoutPagehareket ç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
CarouselPagebir altContentPageörnek koleksiyonuyla doldurun. - özelliğine bir koleksiyon atayın
ItemsSourceve koleksiyondakiItemTemplatenesnelerin örneklerini döndürmekContentPageiçin özelliğine birDataTemplateatayı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.