TabView

Podemos tener pestañas usando Shell. Sin embargo, ¿qué pasa si queremos tener pestañas anidadas dentro de una sección específica (Ejemplo: Cuadrícula) ?, _¿y si queremos personalizar completamente cada pestaña? _. En estos casos, necesitaríamos un renderizador personalizado hasta ahora ...

TabView es una forma de mostrar un conjunto de pestañas y su contenido respectivo. TabView es útil para mostrar varios contenidos mientras le da al usuario la capacidad de personalizar casi todo.

NOTA: TabView es una vista multiplataforma que se hace cargo cuando las pestañas nativas alcanzan sus límites, como el posicionamiento con diseños, estilo y estilo no uniforme como un botón elevado.

API

A continuación, una lista con las propiedades, eventos y estados visuales de TabView.

Propiedades

Propiedades de TabView

| Propiedad | Tipo | Descripción |
| ---------- |: -------------: |: -------------: |
| TabItemsSource | IEnumerable | Una colección que se usa para generar los elementos de la pestaña TabView. |
| TabViewItemDataTemplate | DataTemplate | la plantilla que usa la Vista de pestaña para generar el encabezado de los elementos de pestaña. |
| TabContentDataTemplate | DataTemplate | La plantilla que usa la Vista de pestañas para generar el contenido de los elementos de pestañas. |
| IsCyclical | Bool | Habilita o deshabilita la navegación cíclica por pestañas. |
| IsLazy | Bool | Habilita o deshabilita la carga diferida de pestañas. |
| SelectedIndex | Int | Obtiene o establece la pestaña seleccionada actualmente. El valor predeterminado es 0. |
| TabStripPlacement | TabStripPlacement | La ubicación de TabStrip (superior o inferior). |
| TabStripBackground | Cepillo | El fondo TabStrip. |
| TabIndicatorBrush | Cepillo | El fondo de TabIndicator. |
| TabIndicatorHeight | doble | La altura de TabIndicator. |
| TabIndicatorWidth | doble | El ancho de TabIndicator. |
| TabIndicatorPlacement | TabIndicatorPlacement | |
| TabIndicatorView | Ver | El contenido de TabIndicator. |
| TabContentBackground | Cepillo | Fondo del contenido de la pestaña. |
| TabContentHeight | Doble | La altura del contenido de la pestaña. |
| TabStripHeight | Doble | La altura de TabStrip. |
| TabContentHeight | Doble | La altura del contenido de la pestaña. |
| HasTabStripShadow | Bool | Muestra u oculta el efecto de sombra TabStrip. |
| IsTabTransitionEnabled | Bool | Habilita o deshabilita la transición entre pestañas. |
| IsSwipeEnabled | Bool | Habilita o deshabilita el gesto de deslizar. |

Propiedades de TabViewItem

| Propiedad | Tipo | Descripción |
| ---------- |: -------------: |: -------------: |
| Texto | Cadena | El texto de la pestaña. |
| TextColor | Color | El color del texto de la pestaña. |
| TextColorSelected | Color | El color del texto de la pestaña seleccionada. |
| FontSize | FontSize | El tamaño de fuente utilizado en el texto de la pestaña. |
| FontSizeSelected | FontSize | El tamaño de fuente utilizado en la pestaña seleccionada. |
| FontFamily | Cadena | La familia de fuentes utilizada en la pestaña. |
| FontFamilySelected | Cadena | La familia de fuentes utilizada en la pestaña seleccionada. |
| FontAttributes | FontAttributes | Los atributos de fuente utilizados en la pestaña. |
| FontAttributesSelected | FontAttributes | Los atributos de fuente utilizados en la pestaña seleccionada. |
| Icono | ImageSource | El icono de la pestaña. |
| IconSelected | ImageSource | ImageSource utilizado como icono en la pestaña seleccionada. |
| Contenido | Ver | El contenido de la pestaña. Es Ver, puede usar cualquier cosa como contenido. |
| BadgeText | Bool | El texto de la insignia utilizado en la pestaña. |
| BadgeTextColor | Color | El color del texto de la insignia utilizado en la pestaña. |
| BadgeTextColorSelected | Color | El color del texto de la insignia utilizado en la pestaña seleccionada. |
| BadgeBackgroundColor | Color | El color de la insignia utilizado en la pestaña. |
| BadgeBackgroundColorSelected | Color | El color de la insignia utilizado en la pestaña seleccionada. |
| IsSelected | Bool | un bool que indica si la pestaña está seleccionada o no. |
| TapCommand | ICommand | Comando que se ejecuta cuando el usuario toca una pestaña. |
| TapCommandParameter | objeto | El parámetro de comando de tap. |

Eventos

Eventos de TabView

| Evento | Descripción |
| ---------- |: -------------: |
| SelectionChanged | Evento que se genera cuando cambia la pestaña seleccionada. |
| Desplazado | Evento que se genera cuando se pasa de una pestaña a otra. |

Eventos de TabViewItem

| Evento | Descripción |
| ---------- |: -------------: |
| TabTapped | Evento que se genera cuando el usuario toca una pestaña. |

VisualStates

Visual State Manager (VSM) proporciona una forma estructurada de realizar cambios visuales en la interfaz de usuario desde el código.
El VSM introduce el concepto de estados visuales. TabView puede tener varias apariencias visuales diferentes según su estado subyacente.

TabView tiene cuatro VisualStates específicos:

• CurrentTabVisualState
• NextTabVisualState
• PreviousTabVisualState
• DefaultTabVisualState

Escenarios

Veamos algunos ejemplos que cubren escenarios comunes.

Pestañas básicas

Veamos un ejemplo 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 (pestañas dinámicas):

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

Pestañas personalizadas

La apariencia de cada pestaña se puede personalizar:

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

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

Fichas cíclicas

¿Quieres navegar entre las pestañas de forma cíclica?

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

Carga lenta

Carga de pestañas perezosa:

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

Transiciones de pestañas y animaciones de TabViewItem

Puede usar animaciones de Xamarin.Forms para personalizar la transición entre cada pestaña, animar la pestaña cuando aparece o desaparece, o incluso animar la insignia cuando aparece o 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

Puede usar diferentes estados visuales para personalizar la pestaña actual, la siguiente pestaña, 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>

Crear pestañas usando C

Puede usar XAML o C # para crear la interfaz de usuario en Xamarin.Forms. Veamos cómo crearíamos pestañas 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

Puede personalizar la apariencia del contenido de la pestaña, la tira de pestañas, el elemento de pestaña, etc. utilizando estilos XAML o 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;
}

Dificultad: media

Más información

Basado en https://github.com/xamarin/Xamarin.Forms/issues/10773