Представление с двумя панелями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 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. На двухэкранном устройстве представление с двумя панелями обеспечивает четкое разделение пользовательского интерфейса, при котором ваше содержимое размещается с обеих сторон промежутка между экранами.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.)

Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library

Логотип WinUI

Элемент управления TwoPaneView является частью библиотеки пользовательского интерфейса Windows — пакета NuGet, который содержит новые элементы управления и компоненты пользовательского интерфейса для приложений для Windows.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.For more info, including installation instructions, see Windows UI Library.

API-интерфейсы библиотеки пользовательского интерфейса Windows: Класс TwoPaneViewWindows UI Library APIs: TwoPaneView class

Совет

В рамках этого документа в XAML мы используем псевдоним muxc для всех API библиотеки пользовательского интерфейса Windows, которую мы добавили в проект.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 для всех API библиотеки пользовательского интерфейса Windows, которую мы добавили в проект.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.
  • если необходимо четко распределить содержимое между двумя экранами двухэкранного устройства.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. Представление с двумя панелями адаптирует пользовательский интерфейс приложения к различным конфигурациям экрана.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

Представление с двумя панелями содержит две панели для размещения содержимого.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.

Для настройки представления с двумя панелями задайте 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. Дополнительные сведения о создании адаптивного пользовательского интерфейса см. в статьях Responsive layouts with XAML (Гибкие макеты в XAML) и Layout panels (Панели макета).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. Единственное различие между устройствами заключается в том, что некоторые устройства, например настольные компьютеры, допускают изменение размера окон, а другие устройства — нет.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 упрощает оптимизацию пользовательского интерфейса для двухэкранных устройств.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. Дополнительные сведения о создании адаптивного пользовательского интерфейса см. в статьях Responsive layouts with XAML (Гибкие макеты в XAML) и Layout panels (Панели макета).See Responsive layouts with XAML and Layout panels for more info about creating an adaptive 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

При открытии на одном экране размер панели определяется свойствами Pane1Length и Pane2Length.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. Описание этих типов определения размера см. в разделе Layout properties (Свойства макета) в статье Responsive layouts with XAML (Гибкие макеты в XAML).See the Layout properties section of Responsive layouts with XAML for an explanation of auto and star sizing.

По умолчанию для Pane1Length установлено значение Auto, и размер панели масштабируется в соответствии с размером содержимого.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. Здесь для Pane1Length установлено значение 2*, поэтому для этой панели выделено вдвое больше пространства, чем для панели Pane2.Here, Pane1Length is set to 2* so it gets twice as much space as Pane2.

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

Представление с панелью pane 1, занимающей две трети экрана, и панелью pane 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

На одном экране режим отображения представления с двумя панелями определяется свойствами MinWideModeWidth и MinTallModeHeight.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 определяют использование режима отображения.This table shows how the Height and Width of the TwoPaneView determine which display mode is used.

Условие TwoPaneViewTwoPaneView condition РежимMode
Width > MinWideModeWidth Используется режим WideWide mode is used
Width <= MinWideModeWidth и Height > MinTallModeHeightWidth <= MinWideModeWidth, and Height > MinTallModeHeight Используется режим TallTall mode is used
Width <= MinWideModeWidth и Height <= MinTallModeHeightWidth <= MinWideModeWidth, and Height <= MinTallModeHeight Используется режим SinglePaneSinglePane 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

Представление с двумя панелями переходит в режим Wide, если один дисплей шире, чем свойство MinWideModeWidth.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), представление с двумя панелями автоматически меняет порядок: RightLeft преобразуется в LeftRight, а LeftRight — в RightLeft.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

Представление с двумя панелями переходит в режим Tall, если один дисплей уже значения MinWideModeWidth и выше значения MinTallModeHeight.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 и MinTallModeHeightSpecial values for MinWideModeWidth and MinTallModeHeight

С помощью свойства MinWideModeWidth можно предотвратить переход представления с двумя панелями в горизонтальный режим — просто установите для MinWideModeWidth значение Double.PositiveInfinity.You can use the MinWideModeWidth property to prevent the two-pane view from entering Wide mode - just set MinWideModeWidth to Double.PositiveInfinity.

Если для свойства MinTallModeHeight задано значение Double.PositiveInfinity, оно не позволит представлению с двумя панелями переходить в вертикальный режим.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 по умолчанию должен представлять пользовательский интерфейс, который должен отображаться при первой загрузке.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.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

Если для отображения одной панели достаточно пространства, переместите содержимое панели 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.

Изображение примера приложения на одном экране с прокруткой всего содержимого на одной панели

Режим SinglePaneSinglePane 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.

Ниже приведен код обработчика событий ModeChanged, который перемещает содержимое между Pane1 и Pane2.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

  • Всегда используйте представление с двумя панелями, позволяя приложению использовать преимущества двух экранов и больших экранов.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.