分割ビュー コントロール

  • [アーティクル]

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

重要な API: SplitView クラス

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

Microsoft Edge 分割ビューの例

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

  • オーバーレイ

    ウィンドウは開くまで非表示になります。 ウィンドウを開くと、コンテンツ領域がオーバーレイされます。

  • Inline

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

  • CompactOverlay

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

  • CompactInline

    ウィンドウの狭い部分は、アイコンを表示するのに十分な幅のこのモードで常に表示されます。 既定の閉じたウィンドウの幅は 48px で、 CompactPaneLengthで変更できます。 ウィンドウを開くと、コンテンツに使用できる領域が減り、コンテンツが途中で押し出されます。

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

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

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

例

WinUI 2 ギャラリー
WinUI ギャラリー

WinUI 2 Gallery アプリがインストールされている場合は、ここをクリックしてアプリを開き、SplitView の動作を確認します。

分割ビューを作成する

コンテンツの横にインラインで表示されるウィンドウを開いた 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>

サンプル コードの入手