TabView

У нас могут быть вкладки с помощью Shell. Однако что произойдет, если мы хотим иметь вложенные вкладки в определенном разделе (пример: сетка) ?, _ что, если мы хотим полностью настроить каждую вкладку? _. В этих случаях нам пока понадобится Custom Renderer ...

TabView - это способ отображения набора вкладок и их соответствующего содержимого. TabView полезен для отображения нескольких материалов, давая пользователю возможность настраивать практически все.

ПРИМЕЧАНИЕ. TabView - это кроссплатформенное представление, которое вступает во владение, когда собственные вкладки достигают своих пределов, таких как позиционирование с помощью макетов, стилей и неоднородных стилей, таких как выпуклая кнопка.

API

Затем список со свойствами, событиями и визуальными состояниями TabView.

Характеристики

Свойства TabView

| Недвижимость | Тип | Описание |
| ---------- |: -------------: |: -------------: |
| TabItemsSource | IEnumerable | Коллекция, используемая для создания элементов вкладок TabView. |
| TabViewItemDataTemplate | DataTemplate | шаблон, который представление вкладок использует для создания заголовка элементов вкладки. |
| TabContentDataTemplate | DataTemplate | Шаблон, который используется в представлении вкладок для создания содержимого элементов вкладок. |
| IsCyclical | Bool | Включение или отключение циклической навигации по вкладкам. |
| IsLazy | Bool | Включение или отключение ленивой загрузки вкладок. |
| SelectedIndex | Int | Получает или задает текущую выбранную вкладку. По умолчанию 0. |
| TabStripPlacement | TabStripPlacement | Размещение TabStrip (вверху или внизу). |
| TabStripBackground | Кисть | Фон TabStrip. |
| TabIndicatorBrush | Кисть | Фон TabIndicator. |
| TabIndicatorHeight | двойной | Высота TabIndicator. |
| TabIndicatorWidth | двойной | Ширина TabIndicator. |
| TabIndicatorPlacement | TabIndicatorPlacement | |
| TabIndicatorView | Просмотр | Содержимое TabIndicator. |
| TabContentBackground | Кисть | Фон содержимого вкладки. |
| TabContentHeight | Двойной | Высота содержимого вкладки. |
| TabStripHeight | Двойной | Высота TabStrip. |
| TabContentHeight | Двойной | Высота содержимого вкладки. |
| HasTabStripShadow | Bool | Показать или скрыть эффект тени TabStrip. |
| IsTabTransitionEnabled | Bool | Включение или отключение перехода между вкладками. |
| IsSwipeEnabled | Bool | Включение или отключение жеста смахивания. |

Свойства TabViewItem

| Недвижимость | Тип | Описание |
| ---------- |: -------------: |: -------------: |
| Текст | Строка | Текст вкладки. |
| TextColor | Цвет | Цвет текста вкладки. |
| TextColorSelected | Цвет | Цвет текста выбранной вкладки. |
| FontSize | FontSize | Размер шрифта, используемый в тексте табуляции. |
| FontSizeSelected | FontSize | Размер шрифта, используемый в выбранной вкладке. |
| FontFamily | Строка | Семейство шрифтов, используемое на вкладке. |
| FontFamilySelected | Строка | Семейство шрифтов, используемое на выбранной вкладке. |
| FontAttributes | FontAttributes | Атрибуты шрифта, используемые на вкладке. |
| FontAttributesSelected | FontAttributes | Атрибуты шрифта, используемые на выбранной вкладке. |
| Иконка | ImageSource | Значок вкладки. |
| IconSelected | ImageSource | ImageSource используется как значок на выбранной вкладке. |
| Содержание | Просмотр | Содержание вкладки. Представление, может использовать что угодно в качестве содержимого. |
| BadgeText | Bool | Текст значка, используемый на вкладке. |
| BadgeTextColor | Цвет | Цвет текста значка, используемый на вкладке. |
| BadgeTextColorSelected | Цвет | Цвет текста значка, используемый на выбранной вкладке. |
| BadgeBackgroundColor | Цвет | Цвет значка, используемый на вкладке. |
| BadgeBackgroundColorSelected | Цвет | Цвет значка, используемый на выбранной вкладке. |
| IsSelected | Bool | логическое значение, указывающее, выбрана вкладка или нет. |
| TapCommand | ICommand | Команда, которая выполняется, когда пользователь нажимает вкладку. |
| TapCommandParameter | объект | Параметр команды касания. |

События

TabView События

| Событие | Описание |
| ---------- |: -------------: |
| SelectionChanged | Событие, которое возникает при изменении выбранной вкладки. |
| Прокручивается | Событие, которое возникает при перелистывании вкладок. |

TabViewItem События

| Событие | Описание |
| ---------- |: -------------: |
| TabTapped | Событие, которое возникает, когда пользователь нажимает вкладку. |

VisualStates

Диспетчер визуальных состояний (VSM) предоставляет структурированный способ внесения визуальных изменений в пользовательский интерфейс из кода.
VSM вводит концепцию визуальных состояний. TabView может иметь несколько различных визуальных представлений в зависимости от своего основного состояния.

TabView имеет четыре конкретных VisualState :

• CurrentTabVisualState
• NextTabVisualState
• PreviousTabVisualState
• DefaultTabVisualState

Сценарии

Давайте посмотрим несколько примеров, охватывающих общие сценарии.

Основные вкладки

Давайте посмотрим на простой пример:

<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

Использование TabItemsSource (динамические вкладки):

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

Пользовательские вкладки

Внешний вид каждой вкладки можно настроить:

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

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

Циклические вкладки

Вы хотите циклически перемещаться между вкладками?

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

Ленивая загрузка

Ленивая загрузка вкладки:

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

Переходы вкладок и анимация TabViewItem

Можно использовать анимацию Xamarin.Forms для настройки перехода между каждой вкладкой, анимировать вкладку при появлении или исчезновении или даже анимировать значок при появлении или исчезновении.

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

Использование VisualStates

Можно использовать разные визуальные состояния для настройки текущей вкладки, следующей вкладки и т. Д.

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

Создание вкладок с помощью C

Вы можете использовать XAML или C # для создания пользовательского интерфейса в Xamarin.Forms. Давайте посмотрим, как мы будем создавать вкладки с помощью 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);

Использование стилей

Можно настроить внешний вид содержимого вкладки, полосы вкладок, элемента вкладки и т. Д. С помощью стилей XAML или CSS .

Использование XAML:

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

Используя CSS:

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

Уровень сложности: средний

Больше информации

На основе https://github.com/xamarin/Xamarin.Forms/issues/10773