分割ビュー コントロールSplit view control

分割ビュー コントロールには、展開/折りたたみ可能なウィンドウとコンテンツ領域があります。A split view control has an expandable/collapsible pane and a content area.

重要な API:SplitView クラスImportant APIs: SplitView class

SplitView を使ってハブを表示する Microsoft Edge アプリの例を次に示します。Here is an example of the Microsoft Edge app using SplitView to show its Hub.

Microsoft Edge の分割ビューの例

分割ビューのコンテンツ領域は常に表示されます。A split view's content area is always visible. ウィンドウは展開/折りたたみを行うことも、開いた状態のままにすることもでき、アプリ ウィンドウの右側または左側から表示できます。The pane can expand and collapse or remain in an open state, and can present itself from either the left side or right side of an app window. このウィンドウには 4 つのモードがあります。The pane has four modes:

  • オーバーレイOverlay

    ウィンドウは開くまで表示されません。The pane is hidden until opened. 開くと、ウィンドウはコンテンツ領域をオーバーレイします。When open, the pane overlays the content area.

  • インラインInline

    ウィンドウは常に表示され、コンテンツ領域をオーバーレイしません。The pane is always visible and doesn't overlay the content area. 画面領域はウィンドウとコンテンツ領域に分割されます。The pane and content areas divide the available screen real estate.

  • CompactOverlayCompactOverlay

    このモードでは、ウィンドウの狭い部分が常にアイコンを表示できるだけの大きさで表示されます。A narrow portion of the pane is always visible in this mode, which is just wide enough to show icons. 閉じたウィンドウの既定の幅は 48 ピクセルで、この値は CompactPaneLength で変更できます。The default closed pane width is 48px, which can be modified with CompactPaneLength. ウィンドウを開くと、ウィンドウはコンテンツ領域をオーバーレイします。If the pane is opened, it will overlay the content area.

  • CompactInlineCompactInline

    このモードでは、ウィンドウの狭い部分が常にアイコンを表示できるだけの大きさで表示されます。A narrow portion of the pane is always visible in this mode, which is just wide enough to show icons. 閉じたウィンドウの既定の幅は 48 ピクセルで、この値は CompactPaneLength で変更できます。The default closed pane width is 48px, which can be modified with CompactPaneLength. ウィンドウを開くと、コンテンツを押しのけるようにして、コンテンツの利用可能な領域が小さくなります。If the pane is opened, it will reduce the space available for content, pushing the content out of its way.

適切なコントロールの選択Is this the right control?

分割ビュー コントロールを使って、ユーザーが補足的なウィンドウを開いたり閉じたりできる "引き出し" エクスペリエンスを作成することができます。The split view control can be used to create any "drawer" experience where users can open and close the supplemental pane. たとえば、SplitView を使用してマスター/詳細パターンを構築できます。For example, you can use SplitView to build the master/details pattern.

展開/折りたたみボタンとナビゲーション項目のリストを含むナビゲーション メニューを構築する場合は、NavigationView コントロールを使用します。If you'd like to build a navigation menu with an expand/collapse button and a list of navigation items, then use the NavigationView control.

Examples

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、SplitView の動作を確認してください。If you have the XAML Controls Gallery app installed, click here to open the app and see the SplitView in action.

分割ビューの作成Create a split view

以下は、Content の横にインラインでオープン状態の Pane を表示する SplitView コントロールのコードです。Here's a SplitView control with an open Pane appearing inline next to the Content.

<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>

サンプル コードを入手するGet the sample code