Xamarin.Forms Página Carrossel
Baixar o exemploO Xamarin.Forms CarouselPage é uma página que os usuários podem deslizar de um lado para o outro para navegar por páginas de conteúdo, como uma galeria. Este artigo demonstra como usar uma CarouselPage para navegar por uma coleção de páginas.
Importante
O CarouselPage foi substituído pelo CarouselView, que fornece um layout rolável onde os usuários podem deslizar o dedo para percorrer uma coleção de itens. Para obter mais informações sobre o CarouselView, consulte Xamarin.Forms CarouselView.
As seguintes capturas de tela mostram uma CarouselPage em cada plataforma:
O layout de uma CarouselPage é idêntico em todas as plataformas. As páginas podem ser navegadas passando o dedo da direita para a esquerda para navegar para frente na coleção e passando o dedo da esquerda para a direita para navegar para trás. As capturas de tela a seguir mostram a primeira página em uma instância de uma CarouselPage:
Passar o dedo da direita para a esquerda leva para a segunda página, conforme mostrado nas capturas de tela seguir:
Passar o dedo da direita para a esquerda novamente leva para a terceira página, enquanto passar o dedo da esquerda para a direita retorna à página anterior.
Observação
A CarouselPage não dá suporte à virtualização de interface do usuário. Portanto, o desempenho poderá ser afetado se a CarouselPage contiver muitos elementos filho.
Se uma CarouselPage for inserida na página Detail de um FlyoutPage, a propriedade FlyoutPage.IsGestureEnabled deverá ser definida como false para evitar conflitos de gesto entre o CarouselPage e o FlyoutPage.
Para obter mais informações sobre o , consulte o CarouselPageCapítulo 25 do livro de Xamarin.Forms Charles Petzold.
Criar uma CarouselPage
Duas abordagens podem ser usadas para criar uma CarouselPage:
- Popular uma
CarouselPagecom uma coleção de instancias filhas deContentPage. - Atribuir uma coleção à propriedade
ItemsSourcee atribuir umDataTemplateà propriedadeItemTemplatepara retornar instâncias deContentPagepara objetos na coleção.
Com as duas abordagens, a CarouselPage exibirá uma página por vez, com uma interação de passar o dedo levando para a próxima página a ser exibida.
Observação
Uma CarouselPage pode ser populada apenas com instâncias de ContentPage ou derivados de ContentPage.
Popular uma CarouselPage com uma coleção de páginas
O exemplo de código XAML a seguir mostra um CarouselPage que exibe três instâncias de ContentPage:
<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>
O exemplo de código a seguir mostra a interface do usuário equivalente em C#:
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);
}
}
Cada ContentPage simplesmente exibe um Label para uma cor específica e um BoxView dessa cor.
Popular uma CarouselPage com um modelo
O exemplo de código XAML a seguir mostra uma CarouselPage construída pela atribuição de um DataTemplate à propriedade ItemTemplate para retornar páginas para objetos na coleção:
<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>
A CarouselPage é populada com os dados, definindo a propriedade ItemsSource no construtor para o arquivo code-behind:
public MainPage ()
{
...
ItemsSource = ColorsDataModel.All;
}
O seguinte exemplo de código mostra a CarouselPage equivalente criada em C#:
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;
}
}
Cada ContentPage simplesmente exibe um Label para uma cor específica e um BoxView dessa cor.