2 つのペインからなるビューTwo-pane view

TwoPaneView は、マスター ビューと詳細ビューなど、2 つの異なる領域のコンテンツがあるアプリの表示を管理するために役立つレイアウト コントロールです。TwoPaneView is a layout control that helps you manage the display of apps that have 2 distinct areas of content, like a master/detail view.

重要

この記事では、パブリック プレビュー段階であり、一般公開前に大幅に変更される可能性がある機能とガイダンスについて説明します。This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. 本書に記載された情報について、Microsoft は明示または黙示を問わずいかなる保証をするものでもありません。Microsoft makes no warranties, express or implied, with respect to the information provided here.

TwoPaneView コントロールは、すべての Windows デバイス上で動作します。さらに、特別なコーディングを必要とせずに、デュアルスクリーン デバイスを自動的に最大限に活用できるように設計されています。While it works on all Windows devices, the TwoPaneView control is designed to help you take full advantage of dual-screen devices automatically, with no special coding needed. デュアルスクリーン デバイスでは、2 ペイン ビューを使うことで、ユーザー インターフェイス (UI) が画面間のすき間にまたがる場合でもきれいに分割され、コンテンツがすき間の両側に表示されます。On a dual-screen device, the two-pane view ensures that the user interface (UI) is split cleanly when it spans the gap between screens, so that your content is presented on either side of the gap.

注意

"デュアルスクリーン デバイス" は、固有の機能を持つ特殊な種類のデバイスです。A dual-screen device is a special kind of device with unique capabilities. これは、複数のモニターが搭載されたデスクトップ デバイスとは同じではありません。It's not equivalent to a desktop device with multiple monitors. デュアルスクリーン デバイスの詳細については、「デュアルスクリーン デバイスの概要」を参照してください。For more info about dual-screen devices, see Introduction to dual-screen devices. (複数のモニターに合わせてアプリを最適化する方法の詳細については、「Show multiple views」 (複数のビューの表示) を参照してください。)(See Show multiple views for more info about ways you can optimize your app for multiple monitors.)

Windows UI ライブラリを入手するGet the Windows UI Library

WinUI ロゴ

TwoPaneView コントロールは、Windows アプリのための新しいコントロールと UI 機能を含む NuGet パッケージである Windows UI ライブラリの一部として含まれています。The TwoPaneView control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. インストール手順などについて詳しくは、「Windows UI Library (Windows UI ライブラリ)」をご覧ください。For more info, including installation instructions, see Windows UI Library.

Windows UI ライブラリ API: TwoPaneView クラスWindows UI Library APIs: TwoPaneView class

ヒント

このドキュメントでは、XAML で muxc エイリアスを使って、プロジェクトに含めた Windows UI Library API を表します。Throughout this document, we use the muxc alias in XAML to represent the Windows UI Library APIs that we have included in our project. Page 要素にこれを追加しました。xmlns:muxc="using:Microsoft.UI.Xaml.Controls"We have added this to our Page element: xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

コードビハインドでは、C# でも muxc エイリアスを使って、プロジェクトに含めた Windows UI Library API を表します。In the code-behind, we also use the muxc alias in C# to represent the Windows UI Library APIs that we have included in our project. この using ステートメントは、ファイルの先頭に追加されています。using muxc = Microsoft.UI.Xaml.Controls;We have added this using statement at the top of the file: using muxc = Microsoft.UI.Xaml.Controls;

これは適切なコントロールですか?Is this the right control?

コンテンツに 2 つの異なる領域があり、次に該当する場合は 2 ペイン ビューを使用します。Use the two-pane view when you have 2 distinct areas of content and:

  • ウィンドウに最適なサイズに合わせて、コンテンツの再配置とサイズ変更が自動的に行われます。The content should automatically rearrange and resize to best fit the window.
  • コンテンツの 2 つ目の領域は、使用できる空間に応じて表示または非表示にする必要があります。The secondary area of content should show/hide based on available space.
  • コンテンツは、デュアルスクリーン デバイスの 2 つの画面の間できれいに分かれる必要があります。The content should split cleanly between the 2 screens of a dual-screen device.

Examples

これらの画像は、実行されるアプリがシングルスクリーンに表示されている場合とデュアルスクリーンにまたがって表示されている場合を示しています。These images show an app running on a single-screen and spanned across dual-screens. 2 ペイン ビューを使うと、アプリの UI をさまざまな画面構成に適応させることができます。The two-pane view adapts the app UI to the various screen configurations.

2 ペイン ビューのアプリをシングル スクリーンで使用

"シングルスクリーン上のアプリ。"App on a single-screen.

2 ペイン ビューのアプリをデュアルスクリーンの横長モードで使用

"横長モードでデュアルスクリーン デバイス全体に表示されるアプリ"。App spanning a dual-screen device in wide mode.

2 ペイン ビューのアプリをデュアルスクリーンの縦長モードで使用

"縦長モードでデュアルスクリーン デバイス全体に表示されるアプリ"。App spanning a dual-screen device in tall mode.

しくみHow it works

2 ペイン ビューには、コンテンツが配置される 2 つのペインがあります。The two-pane view has two panes where you place your content. ウィンドウに使用できる空間に応じて、ペインのサイズと配置が調整されます。It adjusts the size and arrangement of the panes depending on the space available to the window. 使用できるペインのレイアウトは、TwoPaneViewMode 列挙体によって定義されます。The possible pane layouts are defined by the TwoPaneViewMode enumeration:

列挙値 Enum value 説明Description
SinglePane PanePriority プロパティの指定に従い、1 つのペインのみが表示されます。Only one pane is shown, as specified by the PanePriority property.
Wide WideModeConfiguration プロパティの指定に従い、ペインが横並びで表示されるか、単一のペインが表示されます。Panes are shown side-by-side, or a single pane is shown, as specified by the WideModeConfiguration property.
Tall TallModeConfiguration プロパティの指定に従い、ペインが上下に表示されるか、単一のペインが表示されます。Panes are shown top-bottom, or a single pane is shown, as specified by the TallModeConfiguration property.

2 ペイン ビューを構成するには、PanePriority を設定して、1 つのペインのみに空間がある場合に表示するペインを指定します。You configure the two-pane view by setting the PanePriority to specify which pane is shown when there is space for only one pane. 次に、Pane1 を縦長ウィンドウの上または下に表示するか、横長ウィンドウの左または右に表示するかを指定します。Then, you specify whether Pane1 is shown on the top or bottom for tall windows, or on the left or right for wide windows.

2 ペイン ビューでは、ペインのサイズと配置が処理されますが、ペイン内のコンテンツをサイズと向きの変更に適応させる必要があります。The two-pane view handles the size and arrangement of the panes, but you still need to make the content inside the pane adapt to the changes in size and orientation. アダプティブ UI の作成の詳細については、「XAML でのレスポンシブ レイアウト」と「レイアウト パネル」を参照してください。See Responsive layouts with XAML and Layout panels for more info about creating an adaptive UI.

TwoPaneView を使用して、アプリのスパン状態に基づいてペインの表示を管理します。The TwoPaneView manages the display of the panes based on the spanning state of the app.

  • シングルスクリーン上On a single-screen

    アプリがシングル スクリーンにのみ表示されている場合は、TwoPaneView を使用して、指定したプロパティの設定に基づいて、ペインのサイズと位置を調整します。When your app is on only a single screen, the TwoPaneView adjusts the size and position of its panes based on property settings you specify. このようなプロパティについては、次のセクションで詳しく説明します。We explain these properties in more detail in the next section. デバイス間の唯一の相違点は、デスクトップ PC などの一部のデバイスでは、サイズ変更可能なウィンドウを許可するが、他のデバイスでは許可しないことです。The only difference between devices is that some devices, like desktop PCs, allow re-sizable windows, while other devices don't.

  • デュアルスクリーンにまたがるSpanned across dual-screens

    TwoPaneView は、デュアルスクリーン デバイス用に UI を簡単に最適化できるように設計されています。The TwoPaneView is designed to make it easy to optimize your UI for spanning on dual-screen devices. 画面上の使用できるすべての空間を使用するようにウィンドウ サイズが自動調整されます。The window sizes itself to use all the available space on the screens. アプリがデュアルスクリーン デバイスの両方の画面にまたがる場合、各画面にはいずれかのペインのコンテンツが表示され、すき間にまたがってコンテンツが適切に広がります。When your app spans both screens of a dual-screen device, each screen displays the content of one of the panes and properly spans content across the gap. 2 ペイン ビューを使用すると、スパニング対応が組み込まれます。Spanning-awareness is built-in when you use two-pane view. 縦長または横長の構成を設定するだけで、どの画面にどのペインを表示するかを指定できます。You only need to set the tall/wide configuration to specify which pane is shown on which screen. 2 ペイン ビューで残りの処理が行われます。The two-pane view takes care of the rest.

2 ペイン ビュー コントロールの使用方法How to use the two-pane view control

TwoPaneView は、ページ レイアウトのルート要素である必要はありません。The TwoPaneView doesn't have to be the root element of your page layout. 実際、アプリの全体的なナビゲーションを提供する NavigationView コントロール内で使用することがよくあります。In fact, you'll often use it inside a NavigationView control that provides the overall navigation for your app. TwoPaneView は、XAML ツリー内の場所に関係なく、適切に適応できます。ただし、TwoPaneView を別の TwoPaneView 内に入れ子にしないことをお勧めします。The TwoPaneView adapts appropriately regardless of where it is in the XAML tree; however, we do recommend that you not nest a TwoPaneView inside another TwoPaneView. (そのようにした場合は、外側の TwoPaneView のみがスパンに対応します。)(If you do, only the outer TwoPaneView is spanning-aware.)

ペインにコンテンツを追加するAdd content to the panes

2 ペイン ビューの各ペインには、1 つの XAML UIElement を保持できます。Each pane of a two-pane view can hold a single XAML UIElement. コンテンツを追加するには、通常、各ペインに XAML レイアウト パネルを配置し、他のコントロールとコンテンツをパネルに追加します。To add content, you typically place a XAML layout panel in each pane, and then add other controls and content to the panel. ペインのサイズを変更し、横長モードと縦長モードを切り替えることができるため、各ペインのコンテンツがこのような変更に適応できることを確認する必要があります。The panes can change size and switch between wide and tall modes, so you need to make sure the content in each pane can adapt to these changes. アダプティブ UI の作成の詳細については、「XAML でのレスポンシブ レイアウト」と「レイアウト パネル」を参照してください。See Responsive layouts with XAML and Layout panels for more info about creating an adaptive UI.

この例では、前述の「」セクションで示したシンプルな画像と情報アプリ UI を作成します。This example creates the the simple picture/info app UI shown previously in the Examples section. アプリがデュアルスクリーンにまたがっている場合、画像と情報は別々の画面に表示されます。When the app is spanned across dual-screens, the picture and the info are shown on separate screens. シングル スクリーン上では、使用可能な空間の大きさに応じて、コンテンツを 2 つのペインに表示するか、1 つのペインに結合することができます。On a single screen, the content can be shown in two panes, or combined into a single pane, depending on how much space is available. (1 つのペインにのみ空間がある場合、Pane2 のコンテンツを Pane1 に移動し、ユーザー スクロールで非表示のコンテンツを表示できるようにします。(When there's only space for one pane, you move the content of Pane2 into Pane1, and let the user scroll to see any hidden content. このコードについては、後述する「モードの変更への対応」を参照してください)。You'll see the code for this later in the Responding to mode changes section.)

デュアル スクリーンにまたがるサンプル アプリの小さい画像

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="40"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar DefaultLabelPosition="Right">
        <AppBarButton x:Name="Share" Icon="Share" Label="Share" Click="Share_Click"/>
        <AppBarButton x:Name="Print" Icon="Print" Label="Print" Click="Print_Click"/>
    </CommandBar>

    <muxc:TwoPaneView
        x:Name="MyTwoPaneView"
        Grid.Row="1"
        MinWideModeWidth="959"
        MinTallModeHeight="863"
        ModeChanged="TwoPaneView_ModeChanged">

        <muxc:TwoPaneView.Pane1>
            <Grid x:Name="Pane1Root">
                <ScrollViewer>
                    <StackPanel x:Name="Pane1StackPanel">
                        <Image Source="Assets\LandscapeImage8.jpg"
                               VerticalAlignment="Top" HorizontalAlignment="Center"
                               Margin="16,0"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </muxc:TwoPaneView.Pane1>

        <muxc:TwoPaneView.Pane2>
            <Grid x:Name="Pane2Root">
                <ScrollViewer x:Name="DetailsContent">
                    <StackPanel Padding="16">
                        <TextBlock Text="Mountain.jpg" MaxLines="1"
                                       Style="{ThemeResource HeaderTextBlockStyle}"/>
                        <TextBlock Text="Date Taken:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="8/29/2019 9:55am"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Dimensions:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="800x536"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Resolution:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="96 dpi"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Description:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
                                       Style="{ThemeResource SubtitleTextBlockStyle}"
                                       TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </muxc:TwoPaneView.Pane2>
    </muxc:TwoPaneView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TwoPaneViewStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="Wide">
                <VisualState.Setters>
                    <Setter Target="MyTwoPaneView.Pane1Length"
                            Value="2*"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

表示するペインを指定するSpecify which pane to display

2 ペイン ビューで表示できるペインが 1 つだけの場合、PanePriority プロパティを使用して、表示するペインを決定します。When the two-pane view can only display a single pane, it uses the PanePriority property to determine which pane to display. 既定では、PanePriority は Pane1 に設定されています。By default, PanePriority is set to Pane1. XAML またはコードでこのプロパティを設定する方法を次に示します。Here's how you can set this property in XAML or in code.

<muxc:TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">
MyTwoPaneView.PanePriority = Microsoft.UI.Xaml.Controls.TwoPaneViewPriority.Pane2;

ペインのサイズ設定Pane sizing

シングル スクリーン上では、ペインのサイズは、Pane1Length および Pane2Length プロパティによって決まります。On a single screen, the size of the panes is determined by the Pane1Length and Pane2Length properties. これらには、auto および star(*) のサイズ設定をサポートする GridLength 値が使用されます。These use GridLength values that support auto and star(*) sizing. 自動サイズ設定と比例サイズ設定の詳細については、「XAML でのレスポンシブ レイアウト」の「レイアウト プロパティ」を参照してください。See the Layout properties section of Responsive layouts with XAML for an explanation of auto and star sizing.

既定では、Pane1LengthAuto に設定され、コンテンツに合わせてサイズが自動調整されます。By default, Pane1Length is set to Auto and it sizes itself to fit its content. Pane2Length* に設定され、残りのすべての空間が使用されます。Pane2Length is set to * and it uses all the remaining space.

ペインが既定のサイズに設定されている 2 ペイン ビュー

既定のサイズ設定のペインPanes with default sizing

この既定値は、Pane1 に項目の一覧があり、Pane2 の詳細項目の数が多い、マスターと詳細からなる一般的なレイアウトに役立ちます。The default values are useful for a typical master/detail layout, where you have a list of items in Pane1, and a lot of details in Pane2. ただし、コンテンツに応じて、異なる方法で空間を分割することをお勧めします。However, depending on your content, you might prefer to divide the space differently. ここでは、Pane1Length2* に設定されているため、Pane2の 2 倍の空間が使用されます。Here, Pane1Length is set to 2* so it gets twice as much space as Pane2.

<muxc:TwoPaneView x:Name="MyTwoPaneView" Pane1Length="2*">

画面の 3 分の 2 を使用するペイン 1 と、3 分の 1 を使用するペイン 2 の 2 ペイン ビュー

ペインサイズ 2* と *Panes sized 2* and *

注意

前述したように、アプリがデュアル スクリーンにまたがっている場合、これらのプロパティは無視され、各ペインはいずれかの画面に表示されます。As mentioned previously, when the app is spanned across dual-screens, these properties are ignored and each pane fills one of the screens.

自動サイズ設定を使用するようにペインを設定した場合、ペインのコンテンツを保持する Panel の高さと幅を設定することにより、サイズを制御できます。If you set a pane to use auto sizing, you can control the size by setting the height and width of the Panel that holds the pane's content. この場合、ModeChanged イベントを処理し、現在のモードに合わせてコンテンツの高さと幅の制約を設定する必要があります。In this case, you might need to handle the ModeChanged event and set the height and width constraints of the content as appropriate for the current mode.

横長モードまたは縦長モードで表示するDisplay in wide or tall mode

シングル スクリーン上では、2 ペイン ビューのディスプレイの ModeMinWideModeWidth および MinTallModeHeight プロパティによって決まります。On a single screen, the two-pane view's display Mode is determined by the MinWideModeWidth and MinTallModeHeight properties. どちらのプロパティも、既定値は NavigationView.CompactThresholdWidth と同じ 641 px です。Both properties have a default value of 641px, the same as NavigationView.CompactThresholdWidth.

次の表は、TwoPaneView の高さと幅によって、使用される表示モードを決定する方法を示しています。This table shows how the Height and Width of the TwoPaneView determine which display mode is used.

TwoPaneView 条件TwoPaneView condition モードMode
Width > MinWideModeWidth Wide モードが使用されますWide mode is used
Width <= MinWideModeWidth、かつ Height > MinTallModeHeightWidth <= MinWideModeWidth, and Height > MinTallModeHeight Tall モードが使用されますTall mode is used
Width <= MinWideModeWidth、かつ Height <= MinTallModeHeightWidth <= MinWideModeWidth, and Height <= MinTallModeHeight SinglePane モードが使用されますSinglePane mode is used

注意

前述したように、アプリがデュアル スクリーンにまたがっている場合、これらのプロパティは無視され、表示モードはデバイスの "配置" に基づいて決定されます。As mentioned previously, when the app is spanned across dual-screens, these properties are ignored and display mode is determined based on the device posture.

横長構成のオプションWide configuration options

MinWideModeWidth プロパティよりも幅の広いシングル ディスプレイがある場合、2 ペイン ビューは Wide モードに切り替わります。The two-pane view enters Wide mode when there's a single display that's wider than the MinWideModeWidth property. MinWideModeWidth を使うと、2 ペイン ビューが横長モードに切り替わるタイミングを制御できます。MinWideModeWidth controls when the two-pane view enters wide mode. 既定値は 641 px ですが、任意の値に変更できます。The default value is 641px, but you can change it to whatever you want. 一般的に、このプロパティは、ペインの最小の幅として使用する値に設定することをお勧めします。In general, you should set this property to whatever you want the minimum width of your pane to be.

2 ペイン ビューが横長モードの場合、WideModeConfiguration プロパティによって、表示される内容が決まります。When the two-pane view is in wide mode, the WideModeConfiguration property determines what to show:

列挙 値Enum value 説明Description
SinglePane シングル ペイン (PanePriority によって決まります)。A single pane (as determined by PanePriority). ペインは、TwoPaneView のサイズ全体を占有します (つまり、両方向に比例サイズ設定です)。The pane takes up the full size of the TwoPaneView (ie, it's star sized in both directions).
LeftRight 左側に Pane1、右側に Pane2Pane1 on the left/Pane2 on the right. 両方のペインは縦方向に比例サイズ設定、Pane1 の幅は自動サイズ設定、Pane2 の幅は比例サイズ設定です。Both panes are star sized vertically, Pane1's width is autosized, and Pane2's width is star sized.
RightLeft 右側に Pane1、左側に Pane2Pane1 on the right/Pane2 on the left. 両方のペインは縦方向に比例サイズ設定、Pane2 の幅は自動サイズ設定、Pane1 の幅は比例サイズ設定です。Both panes are star sized vertically, Pane2's width is autosized, and Pane1's width is star sized.

既定の設定は LeftRight です。The default setting is LeftRight.

LeftRightLeftRight RightLeftRightLeft
2 ペイン ビューで構成されるビュー (左、右) 2 ペイン ビューで構成されるビュー (右、左)

ヒント: デバイスで右から左 (RTL) に記述する言語を使用している場合、2 ペイン ビューでは順序が自動的に入れ替わり、RightLeftLeftRight として表示され、LeftRightRightLeft として表示されます。TIP: When the device uses a right-to-left (RTL) language, the two-pane view automatically swaps the order: RightLeft renders as LeftRight, and LeftRight renders as RightLeft.

縦長構成のオプションTall configuration options

幅が MinWideModeWidth よりも狭く、高さが MinTallModeHeight よりも高いシングル ディスプレイがある場合、2 ペイン ビューは Tall モードに切り替わります。The two-pane view enters Tall mode when there's a single display that's narrower than MinWideModeWidth, and taller than MinTallModeHeight. 既定値は 641 px ですが、任意の値に変更できます。The default value is 641px, but you can change it to whatever you want. 一般的に、このプロパティは、ペインの最小の高さとして使用する値に設定することをお勧めします。In general, you should set this property to whatever you want the minimum height of your pane to be.

2 ペイン ビューが縦長モードの場合、TallModeConfiguration プロパティによって、表示される内容が決まります。When the two-pane view is in tall mode, the TallModeConfiguration property determines what to show:

列挙 値Enum value 説明Description
SinglePane シングル ペイン (PanePriority によって決まります)。A single pane (as determined by PanePriority). ペインは、TwoPaneView のサイズ全体を占有します (つまり、両方向に比例サイズ設定です)。The pane takes up the full size of the TwoPaneView (ie, it's star sized in both directions).
TopBottom 上側に Pane1、下側に Pane2Pane1 on the top/Pane2 on the bottom. 両方のペインは横方向に比例サイズ設定、Pane1 の高さは自動サイズ設定、Pane2 の高さは比例サイズ設定です。Both panes are star sized horizontally, Pane1's height is autosized, and Pane2's height is star sized.
BottomTop 下側に Pane1、上側に Pane2Pane1 on the bottom/Pane2 on the top. 両方のペインは横方向に比例サイズ設定、Pane2 の高さは自動サイズ設定、Pane1 の高さは比例サイズ設定です。Both panes are star sized horizontally, Pane2's height is autosized, and Pane1's height is star sized.

既定値は TopBottom です。The default is TopBottom.

TopBottomTopBottom BottomTopBottomTop
2 ペイン ビューで構成されるビュー (上、下) 2 ペイン ビューで構成されるビュー (下、上)

MinWideModeWidth と MinTallModeHeight の特別な値Special values for MinWideModeWidth and MinTallModeHeight

MinWideModeWidth プロパティを使用して、2 ペイン ビューが横長モードに切り替わらないようにできます。MinWideModeWidthouble.PositiveInfinity に設定するだけです。You can use the MinWideModeWidth property to prevent the two-pane view from entering Wide mode - just set MinWideModeWidth to Double.PositiveInfinity.

MinTallModeHeightDouble.PositiveInfinity に設定すると、2 ペイン ビューは縦長モードに切り替わらなくなります。If you set MinTallModeHeight to Double.PositiveInfinity, it prevents the two-pane view from entering Tall mode.

MinTallModeHeight を 0 に設定すると、2 ペイン ビューが SinglePane モードになるのを防ぎます。If you set MinTallModeHeight to 0, it prevents the two-pane view from entering SinglePane mode.

モードの変更への対応Responding to mode changes

読み取り専用の Mode プロパティを使用して現在の表示モードを取得できます。You can use the read-only Mode property to get the current display mode. 2 ペイン ビューに表示されるペインが変わるたびに、更新されたコンテンツがレンダリングされる前に ModeChanged イベントが発生します。Whenever the two-pane view changes which pane or panes it's displaying, the ModeChanged event occurs before it renders the updated content. このイベントを処理して、表示モードの変更に対応できます。You can handle the event to respond to changes in the display mode.

ヒント

ModeChanged イベントは、ページが最初に読み込まれるときには発生しないので、既定の XAML は最初に読み込まれたときに表示される UI を表す必要があります。The ModeChanged event does not occur when the page is initially loaded, so your default XAML should represent the UI as it should appear when first loaded.

このイベントを使用する方法の 1 つは、ユーザーが SinglePane モードですべてのコンテンツを表示できるようにアプリの UI を更新することです。One way you can use this event is to update your app's UI so users can view all the content in SinglePane mode. たとえば、サンプル アプリにはプライマリ ペイン (画像) と情報ペインがあります。For example, the example app has a primary pane (the image) and an info pane.

縦長モードでまたがって表示されるサンプル アプリの小さい画像

"縦長モード"Tall mode

1 つのペインを表示するだけの空間しかない場合は、ユーザーがスクロールしてすべてのコンテンツを表示できるように、Pane2 のコンテンツを Pane1 に移動します。When there's only enough space to display one pane, you can move the content of Pane2 into Pane1 so the user can scroll to see all the content. 次のようになります。It looks like this.

1 つの画面に表示され、シングル ペインですべてのコンテンツのスクロールができるサンプル アプリの画像

SinglePane モードSinglePane mode

MinWideModeWidth および MinTallModeHeight プロパティによって、表示モードを変更するタイミングが決定するため、これらのプロパティの値を調整すると、ペイン間でコンテンツを移動するタイミングを変更できます。Remember that the MinWideModeWidth and MinTallModeHeight properties determine when the display mode changes, so you can change when the content is moved between panes by adjusting the values of these properties.

Pane1Pane2 の間でコンテンツを移動する ModeChanged イベント ハンドラー コードを次に示します。Here's the ModeChanged event handler code that moves the content between Pane1 and Pane2. また、VisualState を設定して、横長モードの画像の幅を制限します。It also sets a VisualState to constrain the width of the image in Wide mode.

private void TwoPaneView_ModeChanged(Microsoft.UI.Xaml.Controls.TwoPaneView sender, object args)
{
    // Remove details content from it's parent panel.
    ((Panel)DetailsContent.Parent).Children.Remove(DetailsContent);
    // Set Normal visual state.
    Windows.UI.Xaml.VisualStateManager.GoToState(this, "Normal", true);

    // Single pane
    if (sender.Mode == Microsoft.UI.Xaml.Controls.TwoPaneViewMode.SinglePane)
    {
        // Add the details content to Pane1.
        Pane1StackPanel.Children.Add(DetailsContent);
    }
    // Dual pane.
    else
    {
        // Put details content in Pane2.
        Pane2Root.Children.Add(DetailsContent);

        // If also in Wide mode, set Wide visual state
        // to constrain the width of the image to 2*.
        if (sender.Mode == Microsoft.UI.Xaml.Controls.TwoPaneViewMode.Wide)
        {
            Windows.UI.Xaml.VisualStateManager.GoToState(this, "Wide", true);
        }
    }
}

推奨と非推奨Dos and don'ts

  • アプリでデュアルスクリーンと大画面を活用できるように、できる限り 2 ペイン ビューを使用してください。Do use the two-pane view whenever you can so that your app can take advantage of dual-screens and large screens.
  • 別の 2 ペイン ビュー内に 2 ペイン ビューを配置しないでください。Don't put a two-pane view inside another two-pane view.