分割ビュー コントロール

分割ビュー コントロールには、展開/折りたたみ可能なウィンドウとコンテンツ領域があります。

重要な API: SplitView クラス

SplitView を使ってハブを表示する Microsoft Edge アプリの例を次に示します。

分割ビューのコンテンツ領域は常に表示されます。 ウィンドウは展開/折りたたみを行うことも、開いた状態のままにすることもでき、アプリ ウィンドウの右側または左側から表示できます。 このウィンドウには 4 つのモードがあります。

• オーバーレイ

  ウィンドウは開くまで表示されません。 開くと、ウィンドウはコンテンツ領域をオーバーレイします。

• Inline

  ウィンドウは常に表示され、コンテンツ領域をオーバーレイしません。 画面領域はウィンドウとコンテンツ領域に分割されます。

• CompactOverlay

  このモードでは、ウィンドウの狭い部分が常にアイコンを表示できるだけの大きさで表示されます。 閉じたウィンドウの既定の幅は 48 ピクセルで、この値は CompactPaneLength で変更できます。 ウィンドウを開くと、ウィンドウはコンテンツ領域をオーバーレイします。

• CompactInline

  このモードでは、ウィンドウの狭い部分が常にアイコンを表示できるだけの大きさで表示されます。 閉じたウィンドウの既定の幅は 48 ピクセルで、この値は CompactPaneLength で変更できます。 ウィンドウを開くと、コンテンツを押しのけるようにして、コンテンツの利用可能な領域が小さくなります。

これは適切なコントロールですか?

分割ビュー コントロールを使って、ユーザーが補足的なウィンドウを開いたり閉じたりできる "引き出し" エクスペリエンスを作成することができます。 たとえば、SplitView を使用してリストと詳細パターンを構築できます。

展開/折りたたみボタンとナビゲーション項目のリストを含むナビゲーション メニューを構築する場合は、NavigationView コントロールを使用します。

例

WinUI 2 ギャラリー
	WinUI 2 ギャラリー アプリがインストールされている場合は、ここをクリックしてアプリを開き、SplitView の動作を確認してください。 WinUI 2 ギャラリー アプリ (Microsoft Store) を入手する ソース コード (GitHub) を入手する

分割ビューの作成

以下は、Content の横にインラインでオープン状態の Pane を表示する SplitView コントロールのコードです。

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

サンプル コードの入手

• WinUI 2 ギャラリー のサンプル - 対話型形式ですべての XAML コントロールを表示します。

関連トピック

• ナビゲーション ウィンドウのパターン
• リスト ビュー
• リストと詳細