xamarin-forms-carouselpage

Xamarin.Forms – CarouselPage

Fala galera, tudo bem ?

Vamos continuar falando das nossas Pages?

Satisfação estar aqui postando um novo assunto pra vocês…

Continuando a nossa série de tipos de páginas, hoje vou falar um pouco da CarouselPage.

A CarouselPage é um List de ContentPage (que foi falado pelo nosso amigo Albert há algum tempo), tanto é que a definição da CarouselPage é (CarouselPage : List), ou seja como já aprendemos a trabalhar com a ContentPage nosso trabalho ficará muito mais simples, pois iremos trabalhar com várias ContentPage.

Então quando criarmos a nossa CarouselPage, teremos uma list de ContentPage.

Como já dito anteriormente, o atributo Content é o mais importante na nossa ContentPage, pois ela irá definir o conteúdo da página.

Observer o código abaixo:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
 
using Xamarin.Forms;
 
namespace DemoCarouselPage
{
    public class App : Application
    {
        public App()
        {
 
            StackLayout sLFirst = new StackLayout()
            {
                Orientation = StackOrientation.Vertical,
                BackgroundColor = Color.Blue,
                Children =
                {
                    new Label{Text = "Primeira Página", FontSize=15, TextColor = Color.White, VerticalOptions = LayoutOptions.CenterAndExpand, XAlign = TextAlignment.Center},
                    new Label{Text = @"Você pode realizar formulários/guias informando passo a passo utilizando a CarouselPage", FontSize=13, TextColor= Color.White, XAlign = TextAlignment.Center},
                    new Label{Text = "Página 1 de 3", VerticalOptions = LayoutOptions.EndAndExpand,
                    FontSize = 12, TextColor = Color.White, XAlign = TextAlignment.Center}
 
                }
            };
 
            StackLayout sLSecond = new StackLayout()
            {
                Orientation = StackOrientation.Vertical,
                BackgroundColor = Color.Red,
                Children =
                {
                    new Label{Text = "Segunda Página", FontSize=15, TextColor = Color.White, VerticalOptions = LayoutOptions.CenterAndExpand, XAlign = TextAlignment.Center},
                    new Label{Text = "Segundo passo do guia! Veja como é facil utilizar a CarouselPage", FontSize=13, TextColor= Color.White, XAlign = TextAlignment.Center},
                    new Label{Text = "Página 2 de 3", VerticalOptions = LayoutOptions.EndAndExpand,
                    FontSize = 12, TextColor = Color.White, XAlign = TextAlignment.Center}
 
                }
            };
 
            StackLayout sLThird = new StackLayout()
            {
                Orientation = StackOrientation.Vertical,
                BackgroundColor = Color.Black,
                Children =
                {
                    new Label{Text = "Terceira Página", FontSize=15, TextColor = Color.White, VerticalOptions = LayoutOptions.CenterAndExpand, XAlign = TextAlignment.Center},
                    new Label{Text = "Fim do nosso guia/formulário", FontSize=13, TextColor= Color.White, VerticalOptions = LayoutOptions.CenterAndExpand, 
                        XAlign = TextAlignment.Center},
                    new Label{Text = "Página 3 de 3", VerticalOptions = LayoutOptions.EndAndExpand,
                    FontSize = 12, TextColor = Color.White, XAlign = TextAlignment.Center}
                }
            };
 
            // The root page of your application 
            MainPage = new CarouselPage
            {
                Children =
                {
                    new ContentPage{Content = sLFirst},
                    new ContentPage{Content = sLSecond},
                    new ContentPage{Content = sLThird}
                }
            };
 
            //MainPage = new CarouselMainPage();
        }
 
        protected override void OnStart()
        {
            // Handle when your app starts
        }
 
        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }
 
        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Podemos perceber que o código é o mesmo aprendido no post da ContentPage, ou seja, criamos um StackLayout que será o Content da nossa página.

E a nossa MainPage irá receber uma CarouselPage, que terá o seu componente Children, as nossas ContentPage.

Também podemos utilizar o modo XAML, criando a nossa CarouselPage com as tags em uma página separada, o código ficaria assim:

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoCarouselPage.CarouselMainPage">
	
        
            
    
    
        
            
    
    
        
            
    

Após criada, basta apontar para a MainPage a sua nova página.

Veja agora como ficou o nosso app com a CarouselPage:

Página 1:

Página 2:

Então galera, chegamos ao final de mais um post, hoje aprendemos sobre a CarouselPage e já podemos desenvolver alguns aplicativos de tutoriais, passo a passo, formulários que devem ser preenchidos em sequência, somente utilizando a CarouselPage…

Espero que tenham gostado, e esperem os próximos Posts

Abraço

Xamarin.Forms – CarouselPage
5 (100%) 2 votos

Leonardo

Xamarin Student Partner, apaixonado pela tecnologia .NET, Desenvolvedor na BRAE Biotecnologia, atua a mais de 4 anos no mercado com .NET

2 comentários em “Xamarin.Forms – CarouselPage

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

%d blogueiros gostam disto: