O Xamarin.Forms Tabbed Page consiste em uma barra de guias e área para o conteúdo do app, que ao clicar na guia você navega para a página relacionada à guia. Este artigo demonstra como usar uma página com guias para navegar através de uma coleção de páginas.

Visão geral

As seguintes imagens mostram uma página com guias em cada plataforma:

Veja o detalhe do componente em cada plataforma:

 

O layout da página tabulada, e suas guias dependente da plataforma:

No iOS, a lista de guias aparece na parte inferior da tela.

Cada guia também tem um ícone que deve ser um PNG 30×30 com transparência para a resolução normal, 60×60 em alta resolução, e 90×90 para a resolução do iPhone 6 Plus.

Se houver mais de cinco guias, uma guia “mais” irá aparecer, que pode ser usado para acessar as guias adicionais.

Para mais informações sobre o carregamento de imagens em um aplicativo Xamarin.Forms, consulte Trabalhando com imagens.

No Android, a lista de guias aparece na parte superior da tela. Os nomes das guias são automaticamente convertido para letras maiúsculos, o usuário pode deslizar as guias caso haja uma quantidade superior que caiba na tela.

No Windows Phone, a lista de guias aparece na parte superior da tela. Os nomes das guias são automaticamente convertidos em letras minúsculas, o usuário pode deslizar as guias, se houver muitas guias que não caibam na tela.

Criando uma página com guias

Podemos fazer isso de duas maneiras:

• Popular o TabbedPage com uma coleção de objetos que herdam de Page, no caso uma coleção de instâncias ContentPage.
• Setar uma coleção de objetos na propriedade ItemsSource, definir um DataTemplate na propriedade ItemTemplate, dessa forma as páginas serão cradas através da coleção de objetos que foi setado na propriedade ItemsSource.

Nas duas abordagens, o TabbedPage irá exibir a página de acordo com cada guia que o usuário seleciona.

Recomenda-se que o TabbedPagedeve ser preenchido apenas com instâncias de NavigationPage e ContentPage. Isso vai ajudar a garantir que funcione corretamente em todas as plataformas.

Preenchendo o TabbedPage com uma coleção de Page

O seguinte exemplo de código XAML mostra uma página com guias construído por preenchê-lo com uma coleção de objetos de criança Página:

[xml] <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage" x:Class="TabbedPageWithNavigationPage.MainPage">
<local:TodayPage />
<NavigationPage Title="Schedule" Icon="schedule.png">
<x:Arguments>
<local:SchedulePage />
</x:Arguments>
</NavigationPage>
</TabbedPage>
[/xml]

O exemplo a seguir mostra o mesmo TabbedPage em C#:

[csharp] public class MainPageCS : TabbedPage
{
public MainPageCS()
{
var navigationPage = new NavigationPage(new SchedulePageCS());
navigationPage.Icon = "schedule.png";
navigationPage.Title = "Schedule";

Children.Add (new TodayPageCS());
Children.Add (navigationPage);
}
}
[/csharp]

A página com guias é preenchida com duas Páginas. O primeiro item é uma instância de ContentPage, e o segundo guia é um NavigationPage que recebe uma instância de um objeto ContentPage.

O TabbedPage não suporta virtualização de UI. Portanto, o desempenho pode ser afetado se houver muitas abas.

As seguintes imagens mostram o TodayPage ContentPage, que é mostrado na guia Today:

 

Selecionando a guia Schedule é exibido a instância de Schedule ContentPage, que é está envolto em uma instância de NavigationPage, veja na imagem abaixo:

Para obter informações sobre o layout de um NavigationPage, consulte Performing Navigation.

Embora seja aceitável colocar um NavigationPage em uma TabbedPage, não é recomendado para colocar um TabbedPage em um NavigationPage. Isto porque, no iOS, um UITabBarController sempre atua como um wrapper para o UINavigationController. Para mais informações, consulte Combined View Controller Interfacesna Biblioteca de desenvolvedor iOS.

Navegando de dentro da Aba

A navegação pode ser realizada através de uma ação de um botão qualquer chamando o método PushAsync que se encontra na propriedade Navigation da instância de ContentPage, conforme demonstrado no seguinte exemplo de código:

[csharp]

async void OnUpcomingAppointmentsButtonClicked (object sender, EventArgs e)
{
await Navigation.PushAsync (new UpcomingAppointmentsPage ());
}

[/csharp]

O código acima faz com que a pagina UpcomingAppointmentsPage se torna a página ativa. Veja nas imagens abaixo:

Para mais informações sobre a execução de navegação usando a classe NavigationPage, consulte Hierarchical Navigation.

Populando o TabbedPage com Template

O seguinte exemplo de código XAML abaixo mostra um TabbedPage construída através da atribuição de um DataTemplate à propriedade DataTemplate para retornar páginas através de uma coleção de objetos:

[xml]

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
x:Class="TabbedPageDemo.TabbedPageDemoPage">
<TabbedPage.Resources>
<ResourceDictionary>
<local:NonNullToBooleanConverter x:Key="booleanConverter" />
</ResourceDictionary>
</TabbedPage.Resources>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" Icon="monkeyicon.png">
<StackLayout Padding="5, 25">
<Label Text="{Binding Name}" Font="Bold,Large" HorizontalOptions="Center" />
<Image Source="{Binding PhotoUrl}" WidthRequest="200" HeightRequest="200" />
<StackLayout Padding="50, 10">
<StackLayout Orientation="Horizontal">
<Label Text="Family:" HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Family}" Font="Bold,Medium" />
</StackLayout>
…
</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>

[/xml]

No código abaixo o TabbedPage será preenchido com dados, definindo a propriedade ItemsSource no construtor do code-behind da página:

[csharp]

public TabbedPageDemoPage ()
{
…
ItemsSource = MonkeyDataModel.All;
}

[/csharp]

O exemplo de código a seguir mostra o equivalente criado em códido C#:

[csharp] public class TabbedPageDemoPageCS : TabbedPage
{
public TabbedPageDemoPageCS ()
{
var booleanConverter = new NonNullToBooleanConverter ();

ItemTemplate = new DataTemplate (() =&amp;amp;gt; {
var nameLabel = new Label {
FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
FontAttributes = FontAttributes.Bold,
HorizontalOptions = LayoutOptions.Center
};
nameLabel.SetBinding (Label.TextProperty, "Name");

var image = new Image { WidthRequest = 200, HeightRequest = 200 };
image.SetBinding (Image.SourceProperty, "PhotoUrl");

var familyLabel = new Label {
FontSize = Device.GetNamedSize (NamedSize.Medium, typeof(Label)),
FontAttributes = FontAttributes.Bold
};
familyLabel.SetBinding (Label.TextProperty, "Family");
…

var contentPage = new ContentPage {
Icon = "monkeyicon.png",
Content = new StackLayout {
Padding = new Thickness (5, 25),
Children = {
nameLabel,
image,
new StackLayout {
Padding = new Thickness (50, 10),
Children = {
new StackLayout {
Orientation = StackOrientation.Horizontal,
Children = {
new Label { Text = "Family:", HorizontalOptions = LayoutOptions.FillAndExpand },
familyLabel
}
},
…
}
}
}
}
};
contentPage.SetBinding (TitleProperty, "Name");
return contentPage;
});
ItemsSource = MonkeyDataModel.All;
}
}
[/csharp]

Cada aba exibirá um ContentPage com um StackLayout e um label para exibir dados. As imagens abaixo mostram o conteúdo do aba Tamarin:

O TabbedPage não suporta UI Virtualização. Portanto, o desempenho pode ser afetado se a TabbebPage contém muitos elementos filhos.

Para mais informações sobre TabbedPage, consulte o Capítulo 25 do Xamarin.Forms livro de Charles Petzold.

Resumo

Este artigo demonstrou como usar uma página com abas para navegar através de uma coleção de páginas. O Xamarin.Forms TabbedPage consiste em uma lista de abas que carrega o conteúdo específico para cada aba

 

Artigo Original:  https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/tabbed-page/