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 Renderer 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 toma el control 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 utilizada para generar los elementos de la pestaña de TabView. |
| TabViewItemDataTemplate | Plantilla de datos | la plantilla que usa la vista de pestaña para generar el encabezado de los elementos de la pestaña. |
| TabContentDataTemplate | Plantilla de datos | La plantilla que usa la vista de pestaña para generar el contenido de los elementos de la pestaña. |
| escíclico | bool | Habilite o deshabilite la navegación con pestañas cíclicas. |
| esperezoso | bool | Habilite o deshabilite la carga de pestañas perezosas. |
| ÍndiceSeleccionado | internacional | Obtiene o establece la pestaña seleccionada actualmente. El valor predeterminado es 0. |
| Colocación de tabstrip | Colocación de tabstrip | La ubicación de TabStrip (superior o inferior). |
| TabStripFondo | Cepillo | El fondo TabStrip. |
| TabIndicatorBrush | Cepillo | El fondo de TabIndicator. |
| TabIndicatorHeight | doble | La altura de TabIndicator. |
| TabIndicatorWidth | doble | El ancho de TabIndicator. |
| Ubicación del indicador de tabulación | Ubicación del indicador de tabulación | |
| TabIndicatorView | Ver | El contenido de TabIndicator. |
| Fondo de contenido de la pestaña | Cepillo | El 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 | Activa o desactiva la transición entre pestañas. |
| Está habilitado para deslizar | bool | Activa o desactiva el gesto de deslizar. |

Propiedades de TabViewItem

| Propiedad | Tipo | Descripción |
|----------|:-------------:|:-------------------:|
| Texto | Cadena | El texto de la pestaña. |
| Color de texto | Color | El color del texto de la pestaña. |
| TextoColorSeleccionado | Color | El color del texto de la pestaña seleccionada. |
| Tamaño de fuente | Tamaño de fuente | El tamaño de fuente utilizado en el texto de la pestaña. |
| Tamaño de fuente seleccionado | Tamaño de fuente | El tamaño de fuente utilizado en la pestaña seleccionada. |
| Familia de fuentes | Cadena | La familia de fuentes utilizada en la pestaña. |
| Familia de fuentes seleccionada | Cadena | La familia de fuentes utilizada en la pestaña seleccionada. |
| Atributos de fuente | Atributos de fuente | Los atributos de fuente utilizados en la pestaña. |
| FuenteAtributosSeleccionados | Atributos de fuente | Los atributos de fuente utilizados en la pestaña seleccionada. |
| Icono | Fuente de la imagen | El icono de la pestaña. |
| IconoSeleccionado | Fuente de la imagen | El ImageSource utilizado como icono en la pestaña seleccionada. |
| Contenido | Ver | El contenido de la pestaña. Es Vista, 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 que se usa en la pestaña. |
| InsigniaTextoColorSeleccionado | 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. |
| EstáSeleccionado | bool | un bool que indica si la pestaña está seleccionada o no. |
| TapCommand | IComando | Comando que se ejecuta cuando el usuario toca una pestaña. |
| TapCommandParámetro | objeto | El parámetro de comando de toque. |

Eventos

PestañaVer eventos

| Evento | Descripción |
|----------|:-------------------:|
| SelecciónCambiada | Evento que se genera cuando cambia la pestaña seleccionada. |
| Desplazado | Evento que se genera cuando se desliza entre pestañas. |

Eventos de TabViewItem

| Evento | Descripción |
|----------|:-------------------:|
| Pestaña pulsada | 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>

Pestañas cíclicas

¿Quieres navegar entre las pestañas cíclicamente?

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

Carga lenta

Carga perezosa de pestañas:

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

Transiciones de pestañas y animaciones 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>

Uso de estados visuales

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);

Uso de estilos

Puede personalizar la apariencia del contenido de la pestaña, la tira de pestañas, el elemento de la pestaña, etc. usando 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