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. 이중 화면 디바이스에서 나란히 보기는 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. (여러 모니터에 맞게 앱을 최적화하는 방법에 대한 자세한 내용은 여러 보기 표시를 참조하세요.)(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 라이브러리를 참조하세요.For more info, including installation instructions, see Windows UI Library.

Windows UI 라이브러리 API: TwoPaneView 클래스Windows UI Library APIs: TwoPaneView class

이 문서 전체에서 XAML의 muxc 별칭을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 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 라이브러리 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개의 개별 콘텐츠 영역이 있는 경우 나란히 보기를 사용합니다. 그리고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.
  • 여유 공간에 따라 콘텐츠의 보조 영역이 표시되거나 숨겨져야 합니다.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. 나란히 보기는 앱 UI를 다양한 화면 구성에 맞게 조정합니다.The two-pane view adapts the app UI to the various screen configurations.

단일 화면의 나란히 보기 앱

단일 화면의 앱App on a single-screen.

와이드 모드에서 보여 주는 이중 화면의 나란히 보기 앱

와이드 모드에서 이중 화면 디바이스를 스패닝하는 앱App spanning a dual-screen device in wide mode.

톨 모드에서 보여 주는 이중 화면의 나란히 보기 앱

톨 모드에서 이중 화면 디바이스를 스패닝하는 앱App spanning a dual-screen device in tall mode.

작동 방식How it works

나란히 보기에는 콘텐츠가 표시되는 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 속성에 지정된 대로 하나의 창만 표시됩니다.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.

1개 영역만 사용할 수 있는 공간이 있을 때 표시되는 영역을 지정하려면 PanePriority를 설정하여 나란히 보기를 구성합니다.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.

영역의 크기와 배열은 나란히 보기에서 자동으로 처리하지만 영역 내부의 콘텐츠는 크기 및 방향 변경에 맞게 사용자가 직접 조정해야 합니다.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. 나란히 보기를 사용하는 경우 스패닝 인식 기능이 기본 제공됩니다.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. 나머지는 나란히 보기에서 자동으로 처리합니다.The two-pane view takes care of the rest.

나란히 보기 컨트롤을 사용하는 방법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

나란히 보기의 각 창에는 단일 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. 단일 화면에서 콘텐츠는 사용 가능한 공간의 양에 따라 두 개의 창에 표시되거나 단일 창으로 결합될 수 있습니다.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. (한 영역에 맞는 공간만 있다면 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

나란히 보기가 단일 영역만 표시할 수 있는 경우 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

단일 화면에서 창의 크기는 Pane1LengthPane2Length 속성에 따라 결정됩니다.On a single screen, the size of the panes is determined by the Pane1Length and Pane2Length properties. 이는 자동배율(*) 크기 조정을 지원하는 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.

창이 기본 크기로 설정된 나란히 보기

기본 크기 조정을 사용하는 영역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보다 두 배 많은 공간을 확보합니다.Here, Pane1Length is set to 2* so it gets twice as much space as Pane2.

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

화면의 2/3를 사용하는 창 1과 1/3을 사용하는 창 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.

자동 크기 조정을 사용하도록 영역을 설정하면 영역의 콘텐츠가 포함되는 패널의 높이와 너비를 설정하여 크기를 제어할 수 있습니다.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

단일 화면에서 나란히 보기의 표시 ModeMinWideModeWidthMinTallModeHeight 속성에 따라 결정됩니다.On a single screen, the two-pane view's display Mode is determined by the MinWideModeWidth and MinTallModeHeight properties. 두 속성의 기본값은 641px이며 NavigationView.CompactThresholdWidth와 동일합니다.Both properties have a default value of 641px, the same as NavigationView.CompactThresholdWidth.

다음 표에서는 TwoPaneView의 Height와 Width에서 사용되는 표시 모드를 결정하는 방법을 보여 줍니다.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 <= MinWideModeWidthHeight > MinTallModeHeightWidth <= MinWideModeWidth, and Height > MinTallModeHeight Tall 모드가 사용됨Tall mode is used
Width <= MinWideModeWidthHeight <= 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 속성보다 넓은 단일 표시가 있는 경우 나란히 보기가 Wide 모드로 전환됩니다.The two-pane view enters Wide mode when there's a single display that's wider than the MinWideModeWidth property. MinWideModeWidth는 나란히 보기가 와이드 모드로 전환되는 경우를 제어합니다.MinWideModeWidth controls when the two-pane view enters wide mode. 기본값은 641px이지만 원하는 대로 변경할 수 있습니다.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.

나란히 보기가 와이드 모드인 경우 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은 왼쪽에 있고, Pane2는 오른쪽에 있습니다.Pane1 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은 왼쪽에 있고, Pane2는 오른쪽에 있습니다.Pane1 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
왼쪽에서 오른쪽으로 구성된 나란히 보기 오른쪽에서 왼쪽으로 구성된 나란히 보기

팁: 디바이스에서 RTL(오른쪽에서 왼쪽으로) 언어를 사용하는 경우 나란히 보기는 순서를 자동으로 바꿉니다. 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보다 긴 단일 표시가 있는 경우 나란히 보기가 Tall 모드로 전환됩니다.The two-pane view enters Tall mode when there's a single display that's narrower than MinWideModeWidth, and taller than MinTallModeHeight. 기본값은 641px이지만 원하는 대로 변경할 수 있습니다.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.

나란히 보기가 톨 모드인 경우 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은 위쪽에 있고, Pane2는 아래쪽에 있습니다.Pane1 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은 아래쪽에 있고, Pane2는 위쪽에 있습니다.Pane1 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
위쪽에서 아래쪽으로 구성된 나란히 보기 아래쪽에서 위쪽으로 구성된 나란히 보기

MinWideModeWidth 및 MinTallModeHeight의 특수 값Special values for MinWideModeWidth and MinTallModeHeight

MinWideModeWidth 속성을 사용하여 나란히 보기가 와이드 모드로 전환되지 않도록 할 수 있습니다. MinWideModeWidthDouble.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로 설정하면 나란히 보기가 Tall 모드로 전환되지 않습니다.If you set MinTallModeHeight to Double.PositiveInfinity, it prevents the two-pane view from entering Tall mode.

MinTallModeHeight를 0으로 설정하면 나란히 보기가 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. 나란히 보기에서 표시하는 창을 변경할 때마다 업데이트된 콘텐츠를 렌더링하기 전에 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.

이 이벤트를 사용할 수 있는 한 가지 방법은 사용자가 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 모드Tall mode

하나의 창을 표시하는 데 충분한 공간만 있는 경우 사용자가 스크롤하여 모든 콘텐츠를 볼 수 있도록 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.

모든 콘텐츠를 단일 창에서 스크롤하는 단일 화면의 샘플 앱 이미지

SinglePane 모드SinglePane mode

MinWideModeWidthMinTallModeHeight 속성에서 표시 모드를 변경하는 경우를 결정하므로 이러한 속성의 값을 조정하여 콘텐츠를 창 간에 이동하는 경우를 변경할 수 있습니다.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. Wide 모드에서 이미지의 너비를 제한하도록 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

  • 앱에서 이중 화면 및 큰 화면을 활용할 수 있도록 가능한 경우 항상 나란히 보기를 사용합니다.Do use the two-pane view whenever you can so that your app can take advantage of dual-screens and large screens.
  • 나란히 보기를 다른 나란히 보기 안에 배치하지 않습니다.Don't put a two-pane view inside another two-pane view.