두 창 보기는 목록/세부 정보 보기와 같이 2개의 고유한 콘텐츠 영역이 있는 앱의 표시를 관리하는 데 도움이 되는 레이아웃 컨트롤입니다.
이것이 올바른 컨트롤인가요?
두 개의 고유하지만 관련된 콘텐츠 영역이 있는 경우 다음 두 개의 창 보기를 사용합니다.
- 콘텐츠는 창에 가장 적합하도록 자동으로 다시 정렬하고 크기를 조정해야 합니다.
- 콘텐츠의 보조 영역은 사용 가능한 공간에 따라 표시/숨겨야 합니다.
콘텐츠의 두 영역을 표시해야 하지만 두 창 보기에서 제공하는 크기 조정 및 다시 정렬이 필요하지 않은 경우 분할 보기를 대신 사용하는 것이 좋습니다.
탐색 옵션의 경우 탐색 보기를 사용합니다.
작동 방식
두 창 보기에는 콘텐츠를 배치하는 두 개의 창이 있습니다. 창에서 사용할 수 있는 공간에 따라 창의 크기와 배열을 조정합니다. 가능한 창 레이아웃은 TwoPaneViewMode 열거형으로 정의됩니다.
| 열거형 값 | Description |
|---|---|
SinglePane |
PanePriority 속성에 지정된 대로 하나의 창만 표시됩니다. |
Wide |
창이 나란히 표시되거나 WideModeConfiguration 속성에 지정된 대로 단일 창이 표시됩니다. |
Tall |
창은 위쪽 아래쪽으로 표시되거나 TallModeConfiguration 속성에 지정된 대로 단일 창이 표시됩니다. |
와이드 모드의 앱.
세로 모드의 앱입니다.
하나의 창에 대한 공간이 있을 때 표시되는 창을 지정하도록 PanePriority 를 설정하여 두 창 보기를 구성합니다. 그런 다음 높은 창의 경우 위쪽 또는 아래쪽에 표시할지, 넓은 창의 경우 왼쪽 또는 오른쪽에 표시할지 Pane1 를 지정합니다.
두 창 보기는 창의 크기와 정렬을 처리하지만 창 내의 콘텐츠가 크기와 방향의 변경에 맞게 조정되도록 해야 합니다. 적응형 UI를 만드는 방법에 대한 자세한 내용은 XAML 및 레이아웃 패널 을 사용하여 반응형 레이아웃을 참조하세요.
두 창 보기 만들기
- 중요 API:TwoPaneView 클래스
이 XAML은 기본 TwoPaneView을 만드는 방법을 보여줍니다.
<TwoPaneView>
<TwoPaneView.Pane1>
<Grid Background="{ThemeResource LayerFillColorDefaultBrush}">
<TextBlock Text="Pane 1" Margin="24"
Style="{ThemeResource HeaderTextBlockStyle}"/>
</Grid>
</TwoPaneView.Pane1>
<TwoPaneView.Pane2>
<Grid Background="{ThemeResource LayerFillColorAltBrush}">
<TextBlock Text="Pane 2" Margin="24"
Style="{ThemeResource HeaderTextBlockStyle}"/>
</Grid>
</TwoPaneView.Pane2>
</TwoPaneView>
TwoPaneView가 페이지 레이아웃의 루트 요소가 될 필요는 없습니다. 실제로 앱에 대한 전체 탐색을 제공하는 NavigationView 컨트롤 내에서 자주 사용합니다.
TwoPaneView XAML 트리의 위치에 관계없이 적절하게 조정됩니다.
창에 콘텐츠 추가
2창 보기의 각 창에는 단일 XAML UIElement이 있습니다. 콘텐츠를 추가하려면 일반적으로 각 창에 XAML 레이아웃 패널을 배치한 다음 다른 컨트롤과 콘텐츠를 패널에 추가합니다. 창은 크기를 변경하고 와이드 모드와 높이 모드 간에 전환할 수 있으므로 각 창의 콘텐츠가 이러한 변경 내용에 맞게 조정되도록 해야 합니다. 적응형 UI를 만드는 방법에 대한 자세한 내용은 XAML 및 레이아웃 패널 을 사용하여 반응형 레이아웃을 참조하세요.
이 예제에서는 이전에 표시된 간단한 그림/정보 앱 UI를 만듭니다. 콘텐츠는 사용 가능한 공간의 양에 따라 두 창에 표시되거나 단일 창으로 결합될 수 있습니다. (하나의 창에 대한 공간만 있는 경우 Pane2의 콘텐츠를 Pane1로 이동하고 사용자가 스크롤하여 숨겨진 콘텐츠를 볼 수 있도록 합니다. 이에 대한 코드는 나중에 모드 변경 내용에 응답 섹션에 표시됩니다.)
<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>
<TwoPaneView
x:Name="MyTwoPaneView"
Grid.Row="1"
MinWideModeWidth="959"
MinTallModeHeight="863"
ModeChanged="TwoPaneView_ModeChanged">
<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>
</TwoPaneView.Pane1>
<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>
</TwoPaneView.Pane2>
</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>
표시할 창 지정
두 창 보기는 단일 창만 표시할 수 있는 경우 PanePriority 속성을 사용하여 표시할 창을 결정합니다. 기본적으로 PanePriority는 Pane1로 설정됩니다. XAML 또는 코드에서 이 속성을 설정하는 방법은 다음과 같습니다.
<TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">
MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;
창 크기 조정
창의 크기는 Pane1Length 및 Pane2Length 속성에 의해 결정됩니다. 자동 크기 조정과 별(*) 크기 조정을 지원하는 GridLength 값을 사용합니다. 자동 및 별 크기 조정에 대한 설명은 XAML이 있는 반응형 레이아웃의 레이아웃 속성 섹션을 참조하세요.
기본적으로 Pane1Length이(가) Auto으로 설정되어 있으며, 콘텐츠에 맞게 크기가 조정됩니다.
Pane2Length가 *로 설정되어 나머지 공간을 모두 사용합니다.
기본 크기 조정이 있는 창
기본값은 항목 목록이 있고 세부 정보가 많은 일반적인 목록/세부 정보 레이아웃에 Pane1Pane2유용합니다. 그러나 콘텐츠에 따라 공간을 다르게 나누는 것이 좋습니다.
Pane1Length는 여기에서 2*으로 설정되어 Pane2보다 두 배 더 많은 공간을 차지합니다.
<TwoPaneView x:Name="MyTwoPaneView" Pane1Length="2*">
크기가 2*와 *인 패널
자동 크기 조정을 사용하도록 창을 설정하는 경우 창 콘텐츠를 포함하는 높이와 너비 Panel 를 설정하여 크기를 제어할 수 있습니다. 이 경우 이벤트를 처리 ModeChanged 하고 콘텐츠의 높이 및 너비 제약 조건을 현재 모드에 맞게 설정해야 할 수 있습니다.
와이드 또는 높이 모드로 표시
단일 화면에서 두 창 보기의 표시 모드 는 MinWideModeWidth 및 MinTallModeHeight 속성에 의해 결정됩니다. 두 속성의 기본값은 NavigationView.CompactThresholdWidth와 동일한 641px입니다.
이 표는 TwoPaneView의 Height 및 Width이(가) 사용되는 표시 모드를 결정하는 방법을 보여줍니다.
| TwoPaneView 조건 | Mode |
|---|---|
Width > MinWideModeWidth |
Wide 모드가 사용됩니다. |
Width
<= MinWideModeWidth, 및 Height>MinTallModeHeight |
Tall 모드가 사용됩니다 |
Width
<= MinWideModeWidth, 및 Height<= MinTallModeHeight |
SinglePane 모드를 사용합니다 |
광범위한 구성 옵션
MinWideModeWidth 는 두 창 보기가 와이드 모드로 전환되는 경우를 제어합니다. 사용 가능한 공간이 MinWideModeWidth 속성보다 넓은 경우, 두 부분 보기 모드는 Wide로 전환됩니다. 기본값은 641px이지만 원하는 대로 변경할 수 있습니다. 일반적으로 창의 최소 너비를 원하는 대로 이 속성을 설정해야 합니다.
두 창 보기가 와이드 모드인 경우 WideModeConfiguration 속성에 따라 표시할 내용이 결정됩니다.
| 열거형 값 | Description |
|---|---|
SinglePane |
단일 창(PanePriority에 따라 결정됨)입니다. 창은 TwoPaneView를 전체 크기로 차지합니다 (즉, 양방향 모두에서 전체 크기로 확장됩니다). |
LeftRight |
Pane1 왼쪽/Pane2 오른쪽에 있습니다. 두 창 모두 세로로 별 크기이고 너비 Pane1는 자동으로 조정되고 Pane2너비는 별 크기입니다. |
RightLeft |
Pane1 오른쪽/Pane2 왼쪽에 있습니다. 두 창 모두 세로로 별 크기이고 너비 Pane2는 자동으로 조정되고 Pane1너비는 별 크기입니다. |
기본 설정은 LeftRight입니다.
| 왼쪽오른쪽 | 오른쪽왼쪽 |
|---|---|
|
|
|
비고
디바이스에서 RTL(오른쪽에서 왼쪽으로) 언어를 사용하는 경우, 두 창 보기는 순서를 자동으로 바꿉니다. RightLeft를 LeftRight로, LeftRight를 RightLeft로 렌더링합니다.
높은 구성 옵션
사용 가능한 공간의 너비가 Tall보다 좁고 MinWideModeWidth보다 높을 때, 두 창 보기가 MinTallModeHeight 모드로 전환됩니다. 기본값은 641px이지만 원하는 대로 변경할 수 있습니다. 일반적으로 이 속성을 창의 최소 높이를 원하는 대로 설정해야 합니다.
두 창 보기가 높이 모드인 경우 TallModeConfiguration 속성에 따라 표시할 항목이 결정됩니다.
| 열거형 값 | Description |
|---|---|
SinglePane |
하나의 창(PanePriority로 결정된 대로)입니다. 창은 TwoPaneView의 전체 크기를 차지하며, 양방향으로 별 크기로 설정됩니다. |
TopBottom |
Pane1 위쪽/Pane2 아래쪽에 있습니다. 두 창 모두 가로로 별 크기이고, Pane1높이가 자동으로 조정되고 Pane2, 높이가 별 크기입니다. |
BottomTop |
Pane1 맨 아래/Pane2 위쪽에 있습니다. 두 창 모두 가로로 별 크기이고, Pane2높이가 자동으로 조정되고 Pane1, 높이가 별 크기입니다. |
기본값은 TopBottom입니다.
| 위아래 | 하향식 |
|---|---|
|
|
MinWideModeWidth 및 MinTallModeHeight에 대한 특수 값
이 속성 MinWideModeWidth을(를) 사용하여 두 창 모드 Wide로 전환되지 않도록 할 수 있습니다. MinWideModeWidth을(를) Double.PositiveInfinity로 설정하기만 하면 됩니다.
MinTallModeHeight을 Double.PositiveInfinity로 설정하면, 두 창 보기가 Tall 모드로 전환되지 않습니다.
0으로 MinTallModeHeight을(를) 설정하면 두 창 보기가 SinglePane 모드로 전환되지 않습니다.
모드 변경에 응답
읽기 전용 모드 속성을 사용하여 현재 표시 모드를 가져올 수 있습니다. 두 패널 보기에서 표시되는 패널이 변경될 때마다 ModeChanged 이벤트는 업데이트된 콘텐츠를 렌더링하기 전에 발생합니다. 디스플레이 모드의 변경 내용에 응답하도록 이벤트를 처리할 수 있습니다.
중요합니다
ModeChanged 이 이벤트는 페이지가 처음 로드될 때 발생하지 않으므로 기본 XAML은 처음 로드될 때 나타나는 UI를 나타내야 합니다.
이 이벤트를 활용하는 한 가지 방법은 사용자가 모든 콘텐츠를 SinglePane 모드에서 볼 수 있도록 앱의 UI를 업데이트하는 것입니다. 예를 들어 예제 앱에는 기본 창(이미지) 및 정보 창이 있습니다.
높이 모드
하나의 창만 표시할 수 있을 정도로 공간이 부족한 경우, 사용자가 모든 콘텐츠를 볼 수 있도록 Pane2의 콘텐츠를 Pane1로 옮길 수 있습니다. 모양은 다음과 같습니다.
SinglePane 모드
다음 사항을 기억하십시오. MinWideModeWidth 및 MinTallModeHeight 속성은 표시 모드가 변경되는 시기를 결정하므로, 이러한 속성의 값을 조정하여 팬 사이에서 콘텐츠가 이동하는 시점을 변경할 수 있습니다.
이것은 ModeChanged에서 Pane1와 Pane2 사이로 콘텐츠를 이동시키는 이벤트 처리기 코드입니다. 또한 VisualState 를 설정하여 모드에서 Wide 이미지의 너비를 제한합니다.
private void TwoPaneView_ModeChanged(TwoPaneView sender, object args)
{
// Remove details content from it's parent panel.
((Panel)DetailsContent.Parent).Children.Remove(DetailsContent);
// Set Normal visual state.
VisualStateManager.GoToState(this, "Normal", true);
// Single pane
if (sender.Mode == 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 == TwoPaneViewMode.Wide)
{
VisualStateManager.GoToState(this, "Wide", true);
}
}
}
UWP 및 WinUI 2
중요합니다
이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.
이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.
UWP 앱용 TwoPaneView 에는 WinUI 2가 필요합니다. 설치 지침을 비롯한 자세한 내용은 WinUI 2를 참조하세요. 이 컨트롤에 대한 API는 Microsoft.UI.Xaml.Controls 네임스페이스에 있습니다.
- WinUI 2 API:TwoPaneView 클래스
이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작을 참조하세요.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:TwoPaneView />
관련 문서
GitHub에서 Microsoft와 공동 작업
이 콘텐츠의 원본은 GitHub에서 찾을 수 있으며, 여기서 문제와 끌어오기 요청을 만들고 검토할 수도 있습니다. 자세한 내용은 참여자 가이드를 참조하세요.
Windows developer