TabView

シェルを使用してタブを作成できます。 ただし、特定のセクション内にネストされたタブが必要な場合はどうなりますか（例：グリッド）、_各タブを完全にカスタマイズしたい場合はどうなりますか？_。 このような場合、これまでのところカスタムレンダラーが必要になります...

TabViewは、一連のタブとそれぞれのコンテンツを表示する方法です。 TabViewは、ユーザーにほとんどすべてをカスタマイズする機能を提供しながら、複数のコンテンツを表示するのに役立ちます。

注： TabViewは、レイアウトを使用した配置、スタイル設定、上げられたボタンのような不均一なスタイル設定など、ネイティブタブが制限に達したときに引き継ぐクロスプラットフォームビューです。

API

次に、TabViewのプロパティ、イベント、および視覚的状態のリスト。

プロパティ

TabViewのプロパティ

| プロパティ| タイプ| 説明|
| ---------- |：-------------：|：-------------：|
| TabItemsSource | IEnumerable | TabViewのタブアイテムを生成するために使用されるコレクション。 |
| TabViewItemDataTemplate | DataTemplate | タブビューがタブアイテムのヘッダーを生成するために使用するテンプレート。 |
| TabContentDataTemplate | DataTemplate | タブビューがタブアイテムのコンテンツを生成するために使用するテンプレート。 |
| IsCyclical | ブール| 周期的なタブナビゲーションを有効または無効にします。 |
| IsLazy | ブール| レイジータブの読み込みを有効または無効にします。 |
| SelectedIndex | Int | 現在選択されているタブを取得または設定します。 デフォルトは0です。
| TabStripPlacement | TabStripPlacement | TabStripの配置（上または下）。 |
| TabStripBackground | ブラシ| TabStripの背景。 |
| TabIndicatorBrush | ブラシ| TabIndicatorの背景。 |
| TabIndicatorHeight | ダブル| TabIndicatorの高さ。 |
| TabIndicatorWidth | ダブル| TabIndicatorの幅。 |
| TabIndicatorPlacement | TabIndicatorPlacement | |
| TabIndicatorView | 表示| TabIndicatorのコンテンツ。 |
| TabContentBackground | ブラシ| タブコンテンツの背景。 |
| TabContentHeight | ダブル| タブコンテンツの高さ。 |
| TabStripHeight | ダブル| TabStripの高さ。 |
| TabContentHeight | ダブル| タブコンテンツの高さ。 |
| HasTabStripShadow | ブール| TabStripシャドウ効果を表示または非表示にします。 |
| IsTabTransitionEnabled | ブール| タブ間の遷移を有効または無効にします。 |
| IsSwipeEnabled | ブール| スワイプジェスチャを有効または無効にします。 |

TabViewItemのプロパティ

| プロパティ| タイプ| 説明|
| ---------- |：-------------：|：-------------：|
| テキスト| 文字列| タブのテキスト。 |
| TextColor | 色| タブのテキストの色。 |
| TextColorSelected | 色| 選択したタブのテキストの色。 |
| FontSize | FontSize | タブテキストで使用されるフォントサイズ。 |
| FontSizeSelected | FontSize | 選択したタブで使用されているフォントサイズ。 |
| FontFamily | 文字列| タブで使用されるフォントファミリ。 |
| FontFamilySelected | 文字列| 選択したタブで使用されているフォントファミリ。 |
| FontAttributes | FontAttributes | タブで使用されるフォント属性。 |
| FontAttributesSelected | FontAttributes | 選択したタブで使用されるフォント属性。 |
| アイコン| ImageSource | タブのアイコン。 |
| IconSelected | ImageSource | 選択したタブのアイコンとして使用されるImageSource。 |
| コンテンツ| 表示| タブの内容。 ビューであり、コンテンツとして何でも使用できます。 |
| BadgeText | ブール| タブで使用されるバッジテキスト。 |
| BadgeTextColor | 色| タブで使用されるバッジのテキストの色。 |
| BadgeTextColorSelected | 色| 選択したタブで使用されているバッジのテキストの色。 |
| BadgeBackgroundColor | 色| タブで使用されるバッジの色。 |
| BadgeBackgroundColorSelected | 色| 選択したタブで使用されているバッジの色。 |
| IsSelected | ブール| タブが選択されているかどうかを示すブール値。 |
| TapCommand | ICommand | ユーザーがタブをタップしたときに実行されるコマンド。 |
| TapCommandParameter | オブジェクト| tapコマンドパラメータ。 |

イベント

TabViewイベント

| イベント| 説明|
| ---------- |：-------------：|
| SelectionChanged | 選択したタブが変更されたときに発生するイベント。 |
| スクロール| タブ間をスワイプすると発生するイベント。 |

TabViewItemイベント

| イベント| 説明|
| ---------- |：-------------：|
| TabTapped | ユーザーがタブをタップしたときに発生するイベント。 |

VisualStates

Visual State Manager（VSM）は、コードからユーザーインターフェイスに視覚的な変更を加えるための構造化された方法を提供します。
VSMは、視覚的状態の概念を導入しています。 TabViewは、その基になる状態に応じて、いくつかの異なる視覚的外観を持つことができます。

TabViewには、4つの特定のVisualStateがあります。

• CurrentTabVisualState
• NextTabVisualState
• 以前のTabVisualState
• 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でUIを作成できます。 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に基づく