TabView

Podemos ter guias usando Shell. No entanto, o que acontece se quisermos ter guias aninhadas dentro de uma seção específica (exemplo: grade) ?, _ e se quisermos personalizar totalmente cada guia? _. Nestes casos, precisaríamos de um Renderizador Customizado até agora ...

O TabView é uma forma de exibir um conjunto de guias e seus respectivos conteúdos. TabView é útil para exibir diversos conteúdos, ao mesmo tempo que dá ao usuário a capacidade de personalizar quase tudo.

NOTA: TabView é uma visualização de plataforma cruzada que assume quando as guias nativas atingem seus limites, como posicionamento com layouts, estilo e estilo não uniforme como um botão em relevo.

API

A seguir, uma lista com as propriedades, eventos e estados visuais do TabView.

Propriedades

Propriedades de TabView

| Propriedade | Tipo | Descrição
| ---------- |: -------------: |: -------------: |
| TabItemsSource | IEnumerable | Uma coleção usada para gerar os itens da guia TabView. |
| TabViewItemDataTemplate | DataTemplate | o modelo que a Visualização da guia usa para gerar o cabeçalho dos itens da guia. |
| TabContentDataTemplate | DataTemplate | O modelo que a Visualização da guia usa para gerar o conteúdo dos itens da guia. |
| IsCyclical | Bool | Habilite ou desabilite a navegação cíclica das guias. |
| IsLazy | Bool | Habilite ou desabilite o carregamento de guias preguiçosos. |
| SelectedIndex | Int | Obtém ou define a guia atualmente selecionada. O padrão é 0. |
| TabStripPlacement | TabStripPlacement | O posicionamento TabStrip (superior ou inferior). |
| TabStripBackground | Escova | O plano de fundo TabStrip. |
| TabIndicatorBrush | Escova | O plano de fundo do TabIndicator. |
| TabIndicatorHeight | duplo | A altura do TabIndicator. |
| TabIndicatorWidth | duplo | A largura do TabIndicator. |
| TabIndicatorPlacement | TabIndicatorPlacement | |
| TabIndicatorView | Ver | O conteúdo do TabIndicator. |
| TabContentBackground | Escova | O fundo do conteúdo da guia. |
| TabContentHeight | Double | A altura do conteúdo da guia. |
| TabStripHeight | Double | A altura TabStrip. |
| TabContentHeight | Double | A altura do conteúdo da guia. |
| HasTabStripShadow | Bool | Mostre ou oculte o efeito de sombra TabStrip. |
| IsTabTransitionEnabled | Bool | Habilite ou desabilite a transição entre as guias. |
| IsSwipeEnabled | Bool | Ative ou desative o gesto de deslizar. |

Propriedades de TabViewItem

| Propriedade | Tipo | Descrição
| ---------- |: -------------: |: -------------: |
| Texto | String | O texto da guia. |
| TextColor | Cor | A cor do texto da guia. |
| TextColorSelected | Cor | A cor do texto da guia selecionada. |
| FontSize | FontSize | O tamanho da fonte usado no texto da guia. |
| FontSizeSelected | FontSize | O tamanho da fonte usado na guia selecionada. |
| FontFamily | String | A família da fonte usada na guia. |
| FontFamilySelected | String | A família da fonte usada na guia selecionada. |
| FontAttributes | FontAttributes | Os atributos de fonte usados ​​na guia. |
| FontAttributesSelected | FontAttributes | Os atributos de fonte usados ​​na guia selecionada. |
| Ícone | ImageSource | O ícone da guia. |
| IconSelected | ImageSource | O ImageSource usado como ícone na guia selecionada. |
| Conteúdo | Ver | O conteúdo da guia. Is View, pode usar qualquer coisa como conteúdo. |
| BadgeText | Bool | O texto do emblema usado na guia. |
| BadgeTextColor | Cor | A cor do texto do emblema usada na guia. |
| BadgeTextColorSelected | Cor | A cor do texto do emblema usada na guia selecionada. |
| BadgeBackgroundColor | Cor | A cor do emblema usada na guia. |
| BadgeBackgroundColorSelected | Cor | A cor do emblema usada na guia selecionada. |
| IsSelected | Bool | um bool que indica se a guia está selecionada ou não. |
| TapCommand | ICommand | Comando executado quando o usuário toca em uma guia. |
| TapCommandParameter | objeto | O parâmetro do comando tap. |

Eventos

Eventos TabView

| Evento | Descrição
| ---------- |: -------------: |
| SelectionChanged | Evento que é gerado quando a guia selecionada é alterada. |
| Rolado | Evento que é gerado ao deslizar entre as guias. |

Eventos TabViewItem

| Evento | Descrição
| ---------- |: -------------: |
| TabTapped | Evento que é gerado quando o usuário toca em uma guia. |

VisualStates

O Visual State Manager (VSM) fornece uma maneira estruturada de fazer alterações visuais na interface do usuário a partir do código.
O VSM apresenta o conceito de estados visuais. TabView pode ter várias aparências visuais diferentes, dependendo de seu estado subjacente.

TabView tem quatro VisualStates específicos:

• CurrentTabVisualState
• NextTabVisualState
• PreviousTabVisualState
• DefaultTabVisualState

Cenários

Vamos ver alguns exemplos que abrangem cenários comuns.

Guias básicas

Vejamos um exemplo básico:

<TabView 
    TabStripPlacement="Bottom"
    TabStripBackgroundColor="Blue">
    <TabViewItem
        Icon="triangle.png"
        Text="Tab 1">
        <Grid 
            BackgroundColor="Gray">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    <TabViewItem
        Icon="circle.png"
        Text="Tab 2">
        <Grid>
            <Label    
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent2" />
        </Grid>
    </TabViewItem>
</TabView>

TabItemsSource

Usando TabItemsSource (guias dinâmicas):

<TabView
    TabItemsSource="{Binding Monkeys}"
    TabViewItemDataTemplate="{StaticResource TabViewItemTemplate}"
    TabContentDataTemplate="{StaticResource TabContentTemplate}" />

Guias personalizadas

A aparência de cada guia pode ser personalizada:

<ControlTemplate
    x:Key="TabItemTemplate">
    <Grid>
    ...
    </Grid>
</ControlTemplate>

<TabView>
    <TabViewItem
        Text="Tab 1"
        ControlTemplate="{StaticResource TabItemTemplate}">
    </TabViewItem>
</TabView>

Abas cíclicas

Você deseja navegar entre as guias ciclicamente?

<TabView
    IsCyclical="True">
    ...
</TabView>

Carregamento lento

Carregamento lento da guia:

<TabView
    IsLazy="True">
    ...
</TabView>

Transições de guia e animações TabViewItem

Pode usar animações Xamarin.Forms para personalizar a transição entre cada guia, animar a guia quando aparece ou desaparece, ou mesmo animar o emblema quando aparece ou desaparece.

<TabView>
    <TabView.TabTransition>
        <local:CustomTabTransition />
    </TabView.TabTransition>
    <TabViewItem
        Text="Tab 1">      
            <TabViewItem.TabAnimation>
                <local:CustomTabViewItemAnimation />
            </TabViewItem.TabAnimation>
        <Grid 
            BackgroundColor="LawnGreen">
            <Label
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Text="TabContent1" />
        </Grid>
    </TabViewItem>
    ...
</TabView>

Usando VisualStates

Pode usar diferentes estados visuais para personalizar a guia atual, a próxima guia, etc.

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabViewStates">
            <VisualState x:Name="CurrentTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="PreviousTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="NextTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.7" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="DefaultTab">
                <VisualState.Setters>
                    <Setter Property="Opacity" Value="0.9" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Label Text="{Binding Index}" HorizontalOptions="Center" VerticalOptions="End" />
</Grid>

Crie guias usando C

Você pode usar XAML ou C # para criar a interface do usuário em Xamarin.Forms. Vamos ver como criaríamos guias usando C #.

var tabView = new Tabs
{
    TabStripPlacement = TabStripPlacement.Bottom,
    TabStripBackgroundColor = Color.Blue,
    TabStripHeight = 60,
    TabIndicatorColor = Color.Yellow,
    TabContentBackgroundColor = Color.Yellow
};

var tabViewItem1 = new TabViewItem
{
    Icon = "triangle.png",
    Text = "Tab 1",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow,
};

var tabViewItem1Content = new Grid
{
    BackgroundColor = Color.Gray
};

var label1 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent1"
};

tabViewItem1Content.Children.Add(label1);

tabViewItem1.Content = tabViewItem1Content;

tabView.TabItems.Add(tabViewItem1);

var tabViewItem2 = new TabViewItem
{
    Icon = "circle.png",
    Text = "Tab 2",
    TextColor = Color.White,
    TextColorSelected = Color.Yellow
};

var tabViewItem2Content = new Grid
{
    BackgroundColor = Color.OrangeRed
};

var label2 = new Label
{
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    Text = "TabContent2"
};

tabViewItem2Content.Children.Add(label2);

tabViewItem2.Content = tabViewItem2Content;

tabView.TabItems.Add(tabViewItem2);

Usando Estilos

Pode personalizar a aparência do conteúdo da guia, faixa de guia, item da guia, etc. usando estilos XAML ou CSS .

Usando XAML:

<Style
    x:Key="TabItemStyle"
    TargetType="TabViewItem">
    <Setter
        Property="FontSize"
        Value="12" />
    <Setter
        Property="TextColor"
        Value="#979797" />
</Style>

Usando CSS:

.customTabItem {
    font-size: medium;
    text-color: red;
}

Dificuldade: Média

Mais Informações

Com base em https://github.com/xamarin/Xamarin.Forms/issues/10773