タブウィジェットでは、マッシュアップコンテンツを個別のビューに整理できます。各ビューは 1 つのタブで、ウィジェットのプロパティを使用して定義できるラベルが付いています。ランタイムでは、一度に 1 つのタブだけが開き、現在のタブは下線を使用してハイライトされます。タブウィジェットは 1 つのレスポンシブウィジェットで、そのコンテナのサイズに基づいて拡大および縮小します。コンテナの寸法を制御するか、ウィジェットの Width および Height プロパティを使用して、ウィジェットを固定の幅または高さに設定できます。

以下の方法でウィジェットを設定できます。

デフォルトでは、マッシュアップを開くとき、ウィジェット内のすべてのタブがロードされます。タブ上のウィジェットにバインドされているサービスは、マッシュアップの Loaded イベントなどのイベントがランタイムにトリガーされると実行されます。大規模なウィジェットのコレクションが含まれている複数の複雑なビジュアリゼーションがタブウィジェットに含まれている場合に、バックグラウンドのタブでサービスを実行し、ウィジェットをロードすると、パフォーマンスが低下する可能性があります。非表示のタブがランタイムに必要になるまで、これらのタブのロードが遅延されるように遅延読み込みを設定して、マッシュアップとネットワークのパフォーマンスを向上させることができます。ウィジェットで遅延読み込みを設定するとき、マッシュアップが開くとすぐに表示されるデフォルトのタブを遅延読み込みから除外してください。ウィジェット内のタブの遅延読み込みを有効にするには、次の手順を実行します。

ランタイムでは、遅延読み込みが行われたタブは、タブを開くと自動的にロードされます。タブコンテナに対して EnableContainerUnload プロパティが有効になっている場合、このコンテナは自動的にアンロードされるため、表示されていないときにシステムリソースが解放され、パフォーマンスが向上します。アンロードされたタブに切り替えると、そのタブが自動的に再ロードされます。タブの遅延読み込みサービスへの追加のバインドを作成することにより、マッシュアップ内のその他のイベント (ボタンウィジェットの Clicked イベントなど) を使用してコンテンツを手動でロードおよびアンロードできます。

ウィジェットの TabStyle プロパティを使用して、タブのスタイルを設定できます。このプロパティは、次の 2 つのオプションをサポートしています。

フレームなし - タブ名が境界線なしで表示されます。(デフォルト)

フレーム付き - タブ名とコンテンツ領域を囲むように境界線が表示されます。コンテンツ領域の周りの境界線の表示を制御するには、HideContentAreaBorder プロパティを使用します。

フレーム付きタブを使用する場合、TabMode プロパティを使用して、タブ名の外観をカスタマイズできます。タブ名には、提供するコンテンツとユーザーエクスペリエンスに応じて、ラベル、アイコン、またはその両方を表示できます。タブごとに、テキストラベルを定義したり、メディアエンティティを参照したり、SVG アイコンを指定したりできます。

以下のイメージは、ラベルとアイコンの両方が表示される 2 つのタブを示しています。ラベルとアイコンの両方を使用すると、新規ユーザーが理解しやすくなります。

以下のイメージは、アイコンのみが表示されるタブを示しています。アイコンを使用すると、特に画面領域が限られている場合に、ユーザーが各タブの目的をすばやく特定できます。

アイコンのサイズをカスタマイズするには、ウィジェットの TabIconSize プロパティを使用します。

フレーム付きタブを使用する場合、TabsPosition プロパティを使用して、タブを水平または垂直に表示するようにウィジェットを設定できます。タブは、コンテンツ領域の上部または下部に水平方向に表示することも、左側または右側に垂直方向に表示することもできます。垂直タブを使用するには、次の手順を実行します。

次の例は、左側でタブが垂直方向に並べられたフレーム付きスタイルを示しています。

デフォルトでは、タブは使用可能なスペースに応じてタブ名のコンテンツに合わせて拡大または縮小するように設定されています。使用可能なスペースをすべてのタブに均等に配分したり、固定幅を設定したりするには、TabWdithConfig プロパティを使用します。均等配分は、タブが水平方向に表示される場合にのみサポートされます。