すべて新しい.タブの表示コントロール

The .NET Multi-platform App UI マウイはキマリンの進化です.フォーム.これは、主にさまざまなプラットフォームのような単一のプロジェクト開発に焦点を当てAndroid , iOS , macOS , and Windows .
SyncFusionは、クールなセットを出荷している.NET MAUI tools 含まれますCharts , Radial Gauge , and Tab View コントロール2021 Volume 3 リリースこれらのコントロールは本当に高速で、機能豊富で、あなたの中で使用する柔軟性があります.NETマウイアプリケーション.
このブログで紹介します.コード例と一緒にネットマウイタブビューコントロール.

. NETマウイタブビュー(プレビュー)
上級者タブのナビゲーションのためのシンプルで直感的なインターフェイスです.どこであなたのユーザーを探索し、別のタブの間で切り替えるには、モバイルとデスクトップアプリケーションの両方でそれを使用することができます.

タブビューの概要

アプリケーションが複雑で巨大なレイアウトを必要とするとき、スクリーンスペース使用を最適化します.

同じスペースに異なるコンテンツを提示する一連のタブアイテムを含みます.

ユーザーによってアクセスされる1つのタブ項目だけを示します.ユーザーが画面上に表示されるコンテンツを作るために別のタブをタップします.

タブ幅モード
.タブを表示する2つの幅のオプション:デフォルトとサイズをコンテンツに提供します.これらのオプションは、タブバーのタブの幅を計算する方法を設定します.

デフォルト
既定のオプションでは、タブバーの幅に基づいてすべてのタブの幅が等しく分割されます.これはタブの数にかかわらずタブスクロールを許可しない固定タブバーを有効にします.

<syncfusion:SfTabView TabWidthMode="Default" />

タブ幅

内容へのサイズ
タブの幅を設定する必要がある場合は、このオプションを使用できます.このオプションはタブの配置とタブ幅がタブバーの幅を超えたときにタブスクロールを有効にします.

<syncfusion:SfTabView TabWidthMode="SizeToContent" />

タブの幅モード

タブイメージ位置
.タブをクリックすると、タブのイメージがタブのテキストにどのように一致するかを決定する4つのオプションが用意されます.利用可能なオプションは、上部、下部、左、右です.

トップ
一番上のオプションは、テキストの上にイメージを置きます.

<syncfusion:SfTabItem ImagePosition="Top"/>

タブ画像を上部に配置する

底
下のオプションは、テキストの下にイメージを置きます.

<syncfusion:SfTabItem ImagePosition="Bottom"/>

タブイメージを下に配置する

左側
左のオプションは、テキストの前にイメージを置きます.

<syncfusion:SfTabItem ImagePosition="Left"/>

タブ画像を左に配置する

右
右のオプションは、テキストの後にイメージを置きます.

<syncfusion:SfTabItem ImagePosition="Right"/>

タブイメージを右に配置する

選択表示場所
.タブをクリックすると、選択ヘッダーがタブヘッダー項目の内容に対してどのように一致するかを決定する3つのオプションが用意されます.利用可能なオプションは、上、下、および塗りつぶしです.

トップ
選択インジケータは、選択したタブの上部にある場所です.

<syncfusion:SfTabView IndicatorPlacement="Top" />

上部に選択インジケータを配置する

底
選択インジケータは、選択したタブの下部に配置されます.

<syncfusion:SfTabView IndicatorPlacement="Bottom" />

選択インジケータを下部に配置する

フィル
選択インジケータは、選択したタブを塗りつぶします.

<syncfusion:SfTabView IndicatorPlacement="Fill" />

選択したタブの選択範囲を塗りつぶす

タブバーの配置
.タブのバーのタブの内容に相対的に一致する方法を決定する2つのオプションを提供します.利用可能なオプションは、上部と下部です.

トップ
タブバーは、タブビューコントロールのコンテンツ領域の上に配置されます.

<syncfusion:SfTabView TabBarPlacement="Top" />

タブコンテンツの上部にタブバーを配置する

底
タブバーは、タブビューコントロールのコンテンツ領域の下に配置されます.

<syncfusion:SfTabView TabBarPlacement="Bottom" />

タブコンテンツの下部にタブバーを配置する

入れ子タブ
このサポートは、ユーザーがネストしたタブビューを持つことができます.また、その項目のプロパティを使用して別のタブビュー内のタブビューを構成することもできます.

<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 1">
<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 1 SubItem 1"/>
<syncfusion:SfTabItem Header="Item 1 SubItem 2"/>
</syncfusion:SfTabView>
</syncfusion:SfTabItem>
<syncfusion:SfTabItem Header="Item 2">
<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 2 SubItem 1"/>
<syncfusion:SfTabItem Header="Item 2 SubItem 2"/>
</syncfusion:SfTabView>
</syncfusion:SfTabItem>
</syncfusion:SfTabView>

リップルアニメーション
内蔵リップルアニメーションは、素材のテーマに一致します.このアニメーションはまた、ユーザーにより良いテーピング体験を提供します.

色とフォントのカスタマイズ
簡単にすべてのフォントとそのシンプルなAPIを使用して色をカスタマイズできます.
カスタマイズされたフォントと色でタブバー

ビジュアルステートマネージャー
ビジュアル状態マネージャを使用して変更を行います.コードで設定されているビジュアル状態に基づいて、Name UIビュービューのプロパティを表示します.該当する視覚状態は、通常、有効、無効に選択されます.

<Style TargetType="TabView:SfTabItem">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Selected" >
<VisualState.Setters>
<Setter Property="TextColor" Value="Red" />
<Setter Property="ImagePosition" Value="Top" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontAttributes" Value="Bold" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="Black" />
<Setter Property="ImagePosition" Value="Left" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontAttributes" Value="Italic" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>

ビジュアル状態マネージャによるタブ項目のデザイン

結論
読書ありがとう!このブログの記事では、我々の機能を行っている.NET MAUI Tab View コントロールは2021 Volume 3 リリースまた、我々は、アクションボタン、オーバーフローボタン、スワイプのナビゲーションなどのいくつかのより多くの機能を提供する予定です.アセンブリをダウンロードできますNuGet この新しいコントロールを評価する.チェックアウトRelease Notes and What’s New 詳細ページ.
また、さらに提供する予定です.私たちの既存のsyncfusionXamarin.Forms コントロール.あなたは私たちの今後のリリースでそれらを期待することができます!
これから他の機能が必要ですか?ネットマウイタブビュー?以下のコメントをお願いしますsupport forum , Direct-Trac , or feedback portal . 我々は常にあなたを支援して満足している!

関連ブログ