Двухпанельный вид

Представление с двумя панелями — это элемент управления макетом, который помогает управлять отображением приложений с 2 различными областями содержимого, например представлением списка и сведений.

Это правильный контроль?

Используйте двухпанельный режим, если у вас есть две отдельные, но связанные области содержимого и:

Содержимое должно автоматически переупорядочиваться и изменяться в размерах под размер окна.
Вторичная область содержимого должна отображать или скрываться на основе доступного пространства.

Если вам нужно отобразить две области содержимого, но не требуется изменение размера и перестроение, предоставленное представлением двух панелей, рассмотрите возможность использования разделенного представления .

Для параметров навигации используйте представление навигации.

Принцип работы

В двухпанельном представлении есть две области, куда вы помещаете содержимое. Он настраивает размер и расположение панелей в зависимости от места, доступного для окна. Возможные макеты панели определяются перечислением TwoPaneViewMode :

Значение перечисления	Description
`SinglePane`	Показана только одна область, как указано свойством PanePriority .
`Wide`	Области отображаются параллельно или одна панель отображается, как указано в свойстве WideModeConfiguration .
`Tall`	Области отображаются сверху вниз или одна панель отображается, как указано в свойстве TallModeConfiguration .

Приложение с видом на две панели в широком режиме: фотография горы расположена слева, а информация о фотографии находится справа.

Приложение в широком режиме.

Приложение с двумя экранами в вертикальном режиме с фотографией горы в верхней части и сведениями о фотографии в нижней части.

Приложение в вертикальном режиме.

Вы настраиваете двухпанельное представление, задав PanePriority, чтобы указать, какая панель отображается, если пространство позволяет только одну панель. Затем вы указываете, отображается ли Pane1 вверху или нижнем углу для высоких окон, а также слева или вправо для широких окон.

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

Добавьте содержимое в панели

Каждая панель представления с двумя панелями может содержать один XAML UIElement. Чтобы добавить содержимое, обычно вы помещите панель макета XAML в каждую область, а затем добавьте другие элементы управления и содержимое на панель. Панели могут изменять размер и переключаться между широкими и высокими режимами, поэтому необходимо убедиться, что содержимое в каждой области может адаптироваться к этим изменениям. Для получения дополнительной информации о создании адаптивного пользовательского интерфейса см. Адаптивные макеты с использованием XAML и Панели макетов.

В этом примере создается простой пользовательский интерфейс для приложения «Рисунки и информация», показанный ранее. Содержимое может отображаться в двух панелях или в одной области в зависимости от того, сколько места доступно. (При наличии только пространства для одной панели вы перемещаете содержимое Панели2 в Область1 и позволяет пользователю прокручивать все скрытое содержимое. Вы увидите код для этого позже в разделе "Ответ на изменения режима ".)

Небольшое изображение приложения, например, отображаемого на двух экранах

<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 имеет значение * и использует все оставшееся пространство.

Двухпанельное представление с панелями, установленными в размерах по умолчанию

Панели с размерами по умолчанию

Значения по умолчанию полезны для типичного макета "список/подробности", где есть список элементов в Pane1, и много подробностей в Pane2. Однако в зависимости от содержимого может потребоваться разделить пространство по-разному. Здесь Pane1Length установлено так, что оно получает в два раза больше пространства, чем 2*.

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

Двухпанельное представление, где панель 1 занимает две трети экрана, а панель 2 — одну треть

Области размером 2* и *

Если вы настроили панель для автоматического изменения размера, её размерами можно управлять, задав высоту и ширину контейнера Panel, который содержит её содержимое. В этом случае может потребоваться обработать ModeChanged событие и задать ограничения высоты и ширины содержимого в соответствии с текущим режимом.

Отображение в широком или высоком режиме

На одном экране режим отображения двух панелей определяется свойствами MinWideModeWidth и MinTallModeHeight . Оба свойства имеют значение по умолчанию 641px, то же самое, что и NavigationView.CompactThresholdWidth.

В этой таблице показано, как Height и WidthTwoPaneView определяют, какой режим отображения используется.

Условие TwoPaneView	Mode
`Width` > `MinWideModeWidth`	Режим `Wide` используется
`Width` <= `MinWideModeWidth`, и `Height`>`MinTallModeHeight`	Режим `Tall` используется
`Width` <= `MinWideModeWidth`, и `Height`<= `MinTallModeHeight`	Режим `SinglePane` используется

Широкие параметры конфигурации

MinWideModeWidth управляет, когда представление двух панелей входит в широкий режим. Представление двух панелей переходит в Wide режим, когда доступное пространство шире значения свойства MinWideModeWidth. Значение по умолчанию равно 641px, но его можно изменить на любое нужное значение. Как правило, для этого свойства следует задать минимальное значение ширины панели.

Если представление с двумя областями находится в широком режиме, свойство WideModeConfiguration определяет, что нужно показать:

Значение перечисления	Description
`SinglePane`	Одна панель (определяемая `PanePriority`). Панель занимает полный размер `TwoPaneView` (т. е. размер звезды в обоих направлениях).
`LeftRight`	`Pane1` слева или`Pane2` справа. Обе панели имеют звездный размер по вертикали, ширина `Pane1` автоматически устанавливается, а ширина `Pane2` — становится по звездному масштабу.
`RightLeft`	`Pane1` справа или`Pane2` слева. Обе панели имеют звездный размер по вертикали, ширина `Pane2` автоматически устанавливается, а ширина `Pane1` — становится по звездному масштабу.

Значение по умолчанию равно LeftRight.

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.

TopBottom	Нижний стол

Специальные значения для MinWideModeWidth и MinTallModeHeight

Вы можете использовать свойство MinWideModeWidth, чтобы предотвратить переход двухпанельного отображения в режим Wide — просто установите MinWideModeWidth на Double.PositiveInfinity.

Если установить MinTallModeHeight на Double.PositiveInfinity, это предотвратит переход представления двух панелей в режим Tall.

Если вы установите MinTallModeHeight значение 0, это предотвратит переход в режим SinglePane двухпанельного просмотра.

Реагирование на изменения режима

Для получения текущего режима отображения можно использовать свойство "Режим только для чтения". Всякий раз, когда представление двух панелей изменяет отображаемую область или панели, событие ModeChanged возникает перед отображением обновленного содержимого. Событие можно обрабатывать для реагирования на изменения в режиме отображения.

Это важно

Событие ModeChanged не происходит при первоначальной загрузке страницы, поэтому код XAML по умолчанию должен представлять пользовательский интерфейс, так как он должен отображаться при первой загрузке.

Одним из способов использования этого события является обновление пользовательского интерфейса приложения, чтобы пользователи могли просматривать все содержимое в SinglePane режиме. Например, в примере приложения есть основная область (изображение) и панель сведений.

Небольшое изображение примерного приложения, развернутого в удлиненном режиме

Высокий режим

Когда достаточно места для отображения одной панели, можно переместить содержимое 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);
        }
    }
}

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-02-25