Vista de dos panelesTwo-pane view

TwoPaneView es un control de diseño que te ayuda a administrar la presentación de aplicaciones que tienen dos áreas de contenido distintas, como una vista principal/detalles.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.

Importante

En este artículo se describen la funcionalidad y las instrucciones que se encuentran en versión preliminar pública, por lo que es posible que puedan modificarse de forma sustancial antes de que estén disponibles con carácter general.This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft no ofrece ninguna garantía, expresa o implícita, con respecto a la información que se ofrece aquí.Microsoft makes no warranties, express or implied, with respect to the information provided here.

Aunque el control TwoPaneView funciona en todos los dispositivos Windows, está diseñado para ayudarte a sacar el máximo partido de los dispositivos de doble pantalla de manera automática, sin necesidad de ninguna codificación especial.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. En un dispositivo de doble pantalla, la vista de dos paneles garantiza que la interfaz de usuario (UI) se divida sin problemas cuando abarque la brecha entre las pantallas, de modo que el contenido se presente a alguno de los lados de la brecha.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.

Nota

Un dispositivo de doble pantalla es un tipo especial de dispositivo con funcionalidades exclusivas.A dual-screen device is a special kind of device with unique capabilities. No equivale a un dispositivo de escritorio con varios monitores.It's not equivalent to a desktop device with multiple monitors. Para obtener más información sobre los dispositivos de doble pantalla, consulta Introducción a los dispositivos de doble pantalla.For more info about dual-screen devices, see Introduction to dual-screen devices. (Consulta Mostrar varias vistas para más información sobre las formas en que puedes optimizar la aplicación para varios monitores).(See Show multiple views for more info about ways you can optimize your app for multiple monitors.)

Obtención de la biblioteca de la interfaz de usuario de WindowsGet the Windows UI Library

Logotipo de WinUI

El control TwoPaneView se incluye como parte de la biblioteca de interfaz de usuario de Windows, un paquete NuGet que contiene nuevos controles y características de interfaz de usuario destinados a aplicaciones de 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. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows).For more info, including installation instructions, see Windows UI Library.

API de la biblioteca de interfaz de usuario de Windows: Clase TwoPaneViewWindows UI Library APIs: TwoPaneView class

Sugerencia

En este documento, se usa el alias muxc en XAML para representar las API de la biblioteca de interfaz de usuario de Windows que hemos incluido en nuestro proyecto.Throughout this document, we use the muxc alias in XAML to represent the Windows UI Library APIs that we have included in our project. Hemos agregado lo siguiente a nuestro elemento Page: xmlns:muxc="using:Microsoft.UI.Xaml.Controls"We have added this to our Page element: xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

En el código subyacente, se usa el alias muxc en C# para representar las API de la biblioteca de interfaz de usuario de Windows que hemos incluido en nuestro proyecto.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. Hemos agregado esta instrucción using en la parte superior del archivo: using muxc = Microsoft.UI.Xaml.Controls;We have added this using statement at the top of the file: using muxc = Microsoft.UI.Xaml.Controls;

¿Es este el control adecuado?Is this the right control?

Usa la vista de dos paneles cuando tenga dos áreas de contenido distintas y:Use the two-pane view when you have 2 distinct areas of content and:

  • El contenido deba reorganizarse y cambiar de tamaño automáticamente para ajustarse mejor a la ventana.The content should automatically rearrange and resize to best fit the window.
  • El área secundaria del contenido deba mostrarse u ocultarse en función del espacio disponible.The secondary area of content should show/hide based on available space.
  • El contenido deba dividirse sin problemas entre las dos pantallas de un dispositivo de doble pantalla.The content should split cleanly between the 2 screens of a dual-screen device.

EjemplosExamples

Estas imágenes muestran una aplicación que se ejecuta en una pantalla única y se amplía dos pantallas.These images show an app running on a single-screen and spanned across dual-screens. La vista de dos paneles adapta la UI de la aplicación a configuraciones de varias pantallas.The two-pane view adapts the app UI to the various screen configurations.

Aplicación de vista en dos paneles en una sola pantalla

Aplicación en una sola pantalla.App on a single-screen.

Aplicación de vista en dos paneles en dos pantallas en modo Wide

Aplicación que abarca un dispositivo de doble pantalla en modo Wide.App spanning a dual-screen device in wide mode.

Aplicación de vista en dos paneles en dos pantallas en modo Tall

Aplicación que abarca un dispositivo de doble pantalla en modo Tall.App spanning a dual-screen device in tall mode.

Cómo funcionaHow it works

La vista de dos paneles tiene dos paneles donde colocas el contenido.The two-pane view has two panes where you place your content. Ajusta el tamaño y la disposición de los paneles en función del espacio disponible en la ventana.It adjusts the size and arrangement of the panes depending on the space available to the window. Los diseños de panel posibles se definen con la enumeración TwoPaneViewMode:The possible pane layouts are defined by the TwoPaneViewMode enumeration:

Valor enumEnum value DescripciónDescription
SinglePane Solo se muestra un panel, según se especifique en la propiedad PanePriority.Only one pane is shown, as specified by the PanePriority property.
Wide Los paneles se muestran uno junto al otro, o se muestra un solo panel, tal y como se especifica en la propiedad WideModeConfiguration.Panes are shown side-by-side, or a single pane is shown, as specified by the WideModeConfiguration property.
Tall Los paneles se muestran uno sobre el otro, o se muestra un solo panel, tal y como se especifica en la propiedad TallModeConfiguration.Panes are shown top-bottom, or a single pane is shown, as specified by the TallModeConfiguration property.

Para configurar la vista de dos paneles, establece la propiedad PanePriority para especificar qué panel se muestra cuando hay espacio para un solo panel.You configure the two-pane view by setting the PanePriority to specify which pane is shown when there is space for only one pane. Luego, especifica si Pane1 se muestra en la parte superior o inferior de las ventanas Tall, o a la izquierda o a la derecha para las ventanas Wide.Then, you specify whether Pane1 is shown on the top or bottom for tall windows, or on the left or right for wide windows.

La vista de dos paneles controla el tamaño y la disposición de los paneles, pero aún tienes que hacer que el contenido dentro del panel se adapte a los cambios de tamaño y orientación.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. Para más información sobre la creación de una interfaz de usuario adaptable, consulta Diseños adaptativos con XAML y Paneles de diseño.See Responsive layouts with XAML and Layout panels for more info about creating an adaptive UI.

TwoPaneView administra la presentación de los paneles en función del estado de expansión de la aplicación.The TwoPaneView manages the display of the panes based on the spanning state of the app.

  • En una sola pantallaOn a single-screen

    Cuando la aplicación está en una sola pantalla, TwoPaneView ajusta el tamaño y la posición de los paneles en función de los valores de propiedad que especifiques.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. En la sección siguiente se explican estas propiedades con más detalle.We explain these properties in more detail in the next section. La única diferencia entre los dispositivos es que algunos dispositivos, como los equipos de escritorio, permiten el cambio de tamaño de las ventanas, mientras que otros no.The only difference between devices is that some devices, like desktop PCs, allow re-sizable windows, while other devices don't.

  • Ampliado a dos pantallasSpanned across dual-screens

    TwoPaneView está diseñado para facilitar la optimización de la UI para ampliarse en dispositivos de doble pantalla.The TwoPaneView is designed to make it easy to optimize your UI for spanning on dual-screen devices. La ventana cambia de tamaño automáticamente para usar todo el espacio disponible en las pantallas.The window sizes itself to use all the available space on the screens. Cuando la aplicación abarca ambas pantallas de un dispositivo de doble pantalla, cada pantalla muestra el contenido de uno de los paneles y divide correctamente el contenido entre la brecha.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. El reconocimiento de la extensión está integrado al usar la vista de dos paneles.Spanning-awareness is built-in when you use two-pane view. Solo tienes que establecer la configuración Tall/Wide para especificar qué panel se muestra en qué pantalla.You only need to set the tall/wide configuration to specify which pane is shown on which screen. La vista de dos paneles se encarga del resto.The two-pane view takes care of the rest.

Cómo usar el control de vista de dos panelesHow to use the two-pane view control

No es necesario que TwoPaneView sea el elemento raíz del diseño de página.The TwoPaneView doesn't have to be the root element of your page layout. De hecho, a menudo lo usarás en un control NavigationView que proporciona la navegación general para la aplicación.In fact, you'll often use it inside a NavigationView control that provides the overall navigation for your app. TwoPaneView se adapta de manera correcta independientemente de dónde se encuentra en el árbol XAML; sin embargo, se recomienda no anidar un control TwoPaneView dentro de otro 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. (Si lo hace, solo el TwoPaneView exterior será compatible con la expansión).(If you do, only the outer TwoPaneView is spanning-aware.)

Agregar contenido a los panelesAdd content to the panes

Cada panel de una vista de dos paneles puede contener un único UIElement de XAML.Each pane of a two-pane view can hold a single XAML UIElement. Para agregar contenido, normalmente colocas un panel de diseño XAML en cada panel y, luego, agregas otros controles y contenido al panel.To add content, you typically place a XAML layout panel in each pane, and then add other controls and content to the panel. Los paneles pueden cambiar el tamaño y cambiar entre los modos Wide y Tall, por lo que debes asegurarte de que el contenido de cada panel puede adaptarse a estos cambios.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. Para más información sobre la creación de una interfaz de usuario adaptable, consulta Diseños adaptativos con XAML y Paneles de diseño.See Responsive layouts with XAML and Layout panels for more info about creating an adaptive UI.

En este ejemplo, se crea la UI de la aplicación sencilla de imagen/información que se muestra anteriormente en la sección Ejemplos.This example creates the the simple picture/info app UI shown previously in the Examples section. Cuando la aplicación se amplía a dos pantallas, la imagen y la información se muestran en pantallas independientes.When the app is spanned across dual-screens, the picture and the info are shown on separate screens. En una sola pantalla, el contenido se puede mostrar en dos paneles o combinarse en un solo panel, en función de la cantidad de espacio disponible.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. (Cuando solo hay espacio para un panel, se mueve el contenido de Pane2 a Pane1, y se permite al usuario desplazarse para ver cualquier contenido oculto.(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. Verás el código más adelante en la sección Responder a los cambios de modo).You'll see the code for this later in the Responding to mode changes section.)

Pequeña imagen de la aplicación de ejemplo distribuida en dos pantallas

<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>

Especificar qué panel se va a mostrarSpecify which pane to display

Cuando la vista de dos paneles solo puede mostrar un único panel, usa la propiedad PanePriority para determinar qué panel se va a mostrar.When the two-pane view can only display a single pane, it uses the PanePriority property to determine which pane to display. De manera predeterminada, PanePriority se establece en Pane1.By default, PanePriority is set to Pane1. Aquí se muestra cómo puedes establecer esta propiedad en XAML o en código.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;

Cambio de tamaño de los panelesPane sizing

En una única pantalla, el tamaño de los paneles está determinado por las propiedades Pane1Length y Pane2Length.On a single screen, the size of the panes is determined by the Pane1Length and Pane2Length properties. Usan valores GridLength que admiten el ajuste de tamaño auto y star(*).These use GridLength values that support auto and star(*) sizing. Consulta la sección Propiedades de diseño de Diseños adaptativos con XAML para ver una explicación de los ajustes de tamaño auto y star.See the Layout properties section of Responsive layouts with XAML for an explanation of auto and star sizing.

De manera predeterminada, Pane1Length se establece en Auto y su tamaño se ajusta a su contenido.By default, Pane1Length is set to Auto and it sizes itself to fit its content. Pane2Length se establece en * y usa todo el espacio restante.Pane2Length is set to * and it uses all the remaining space.

Vista de dos paneles con paneles establecidos en tamaños predeterminados

Paneles con ajuste de tamaño predeterminadoPanes with default sizing

Los valores predeterminados son útiles para un diseño típico de principal/detalles, donde tienes una lista de elementos en Pane1 y muchos detalles en 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. Sin embargo, en función del contenido, puede que prefieras dividir el espacio de otra manera.However, depending on your content, you might prefer to divide the space differently. Aquí, Pane1Length se establece en 2* de modo que se obtiene el doble de espacio que Pane2.Here, Pane1Length is set to 2* so it gets twice as much space as Pane2.

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

Vista de dos paneles con el panel 1 con dos tercios de pantalla, y el panel 2 con un tercio

Paneles de tamaño 2* y *Panes sized 2* and *

Nota

Como se mencionó anteriormente, cuando la aplicación se expande en dos pantallas, estas propiedades se omiten y cada panel rellena una de las pantallas.As mentioned previously, when the app is spanned across dual-screens, these properties are ignored and each pane fills one of the screens.

Si establece un panel para usar el ajuste automático de tamaño, puede controlar el tamaño estableciendo el alto y el ancho del panel que contiene el contenido del 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. En este caso, es posible que tenga que controlar el evento ModeChanged y establecer las restricciones de alto y ancho del contenido según corresponda para el modo actual.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.

Pantalla en modo Wide o TallDisplay in wide or tall mode

En una pantalla única, el Modo de pantalla de la vista de dos paneles está determinado por las propiedades MinWideModeWidth y MinTallModeHeight.On a single screen, the two-pane view's display Mode is determined by the MinWideModeWidth and MinTallModeHeight properties. Ambas propiedades tienen un valor predeterminado de 641 px, igual que NavigationView.CompactThresholdWidth.Both properties have a default value of 641px, the same as NavigationView.CompactThresholdWidth.

En esta tabla se muestra cómo el alto y el ancho de TwoPaneView determinan el modo de visualización que se usa.This table shows how the Height and Width of the TwoPaneView determine which display mode is used.

Condición TwoPaneViewTwoPaneView condition ModoMode
Width > MinWideModeWidth Se usa el modo WideWide mode is used
Width <= MinWideModeWidth y Height > MinTallModeHeightWidth <= MinWideModeWidth, and Height > MinTallModeHeight Se usa el modo TallTall mode is used
Width <= MinWideModeWidth y Height <= MinTallModeHeightWidth <= MinWideModeWidth, and Height <= MinTallModeHeight Se usa el modo SinglePaneSinglePane mode is used

Nota

Como se mencionó anteriormente, cuando la aplicación se expande en dos pantallas, estas propiedades se omiten y el modo de visualización se determina en función de la posición del dispositivo.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.

Opciones de configuración WideWide configuration options

La vista de dos paneles entra en el modo Wide cuando hay una sola pantalla que es más ancha que la propiedad MinWideModeWidth.The two-pane view enters Wide mode when there's a single display that's wider than the MinWideModeWidth property. MinWideModeWidth controla cuando la vista de dos paneles entra en el modo Wide.MinWideModeWidth controls when the two-pane view enters wide mode. El valor predeterminado es de 641 px, pero puedes cambiarlo a lo que quieras.The default value is 641px, but you can change it to whatever you want. En general, tienes que establecer esta propiedad en el ancho mínimo que quieras para el panel.In general, you should set this property to whatever you want the minimum width of your pane to be.

Cuando la vista de dos paneles está en modo Wide, la propiedad WideModeConfiguration determina lo que se debe mostrar:When the two-pane view is in wide mode, the WideModeConfiguration property determines what to show:

Valor enumEnum value DescripciónDescription
SinglePane Un solo panel (según lo determinado por PanePriority).A single pane (as determined by PanePriority). El panel ocupa el tamaño completo de TwoPaneView (es decir, adopta el tamaño star en ambas direcciones).The pane takes up the full size of the TwoPaneView (ie, it's star sized in both directions).
LeftRight Pane1 a la izquierda/Pane2 a la derecha.Pane1 on the left/Pane2 on the right. Ambos paneles tienen un tamaño star en sentido vertical, el ancho de Pane1 se ajusta automáticamente, y el ancho de Pane2 se ajusta según star.Both panes are star sized vertically, Pane1's width is autosized, and Pane2's width is star sized.
RightLeft Pane1 a la derecha/Pane2 a la izquierda.Pane1 on the right/Pane2 on the left. Ambos paneles tienen un tamaño star en sentido vertical, el ancho de Pane2 se ajusta automáticamente, y el ancho de Pane1 se ajusta según star.Both panes are star sized vertically, Pane2's width is autosized, and Pane1's width is star sized.

El valor de configuración predeterminado es LeftRight.The default setting is LeftRight.

LeftRightLeftRight RightLeftRightLeft
Vista de dos paneles configurada de izquierda a derecha Vista de dos paneles configurada de derecha a izquierda

SUGERENCIA: Cuando el dispositivo usa un idioma de derecha a izquierda (RTL), la vista de dos paneles intercambia el orden automáticamente: RightLeft se representa como LeftRight, y LeftRight se representa como 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.

Opciones de configuración de TallTall configuration options

La vista de dos paneles entra en el modo Tall cuando hay una sola pantalla que es más estrecha que MinWideModeWidth, y más alta que MinTallModeHeight.The two-pane view enters Tall mode when there's a single display that's narrower than MinWideModeWidth, and taller than MinTallModeHeight. El valor predeterminado es de 641 px, pero puedes cambiarlo a lo que quieras.The default value is 641px, but you can change it to whatever you want. En general, tienes que establecer esta propiedad en la altura mínima que quieras para el panel.In general, you should set this property to whatever you want the minimum height of your pane to be.

Cuando la vista de dos paneles está en modo Tall, la propiedad TallModeConfiguration determina lo que se debe mostrar:When the two-pane view is in tall mode, the TallModeConfiguration property determines what to show:

Valor enumEnum value DescripciónDescription
SinglePane Un solo panel (según lo determinado por PanePriority).A single pane (as determined by PanePriority). El panel ocupa el tamaño completo de TwoPaneView (es decir, adopta el tamaño star en ambas direcciones).The pane takes up the full size of the TwoPaneView (ie, it's star sized in both directions).
TopBottom Pane1 en la parte superior/Pane2 en la parte inferior.Pane1 on the top/Pane2 on the bottom. Ambos paneles tienen un tamaño star en sentido horizontal, la altura de Pane1 se ajusta automáticamente y la altura de Pane2 se ajusta según star.Both panes are star sized horizontally, Pane1's height is autosized, and Pane2's height is star sized.
BottomTop Pane1 en la parte inferior/Pane2 en la parte superior.Pane1 on the bottom/Pane2 on the top. Ambos paneles tienen un tamaño star en sentido horizontal, la altura de Pane2 se ajusta automáticamente y la altura de Pane1 se ajusta según star.Both panes are star sized horizontally, Pane2's height is autosized, and Pane1's height is star sized.

El valor predeterminado es TopBottom.The default is TopBottom.

TopBottomTopBottom BottomTopBottomTop
Vista de dos paneles configurada de arriba-abajo Vista de dos paneles configurada de abajo-arriba

Valores especiales para MinWideModeWidth y MinTallModeHeightSpecial values for MinWideModeWidth and MinTallModeHeight

Puedes usar la propiedad MinWideModeWidth para evitar que la vista de dos paneles entre en el modo Wide, solo tienes que establecer MinWideModeWidth en Double.PositiveInfinity.You can use the MinWideModeWidth property to prevent the two-pane view from entering Wide mode - just set MinWideModeWidth to Double.PositiveInfinity.

Si estableces MinTallModeHeight en Double.PositiveInfinity, esta impide que la vista de dos paneles entre en el modo Tall.If you set MinTallModeHeight to Double.PositiveInfinity, it prevents the two-pane view from entering Tall mode.

Si estableces MinTallModeHeight en 0, esta impide que la vista de dos paneles entre en el modo SinglePane.If you set MinTallModeHeight to 0, it prevents the two-pane view from entering SinglePane mode.

Responder a los cambios de modoResponding to mode changes

Puede usar la propiedad de solo lectura Mode para obtener el modo de presentación actual.You can use the read-only Mode property to get the current display mode. Cada vez que la vista de dos paneles cambia los paneles que se muestran, se produce el evento ModeChanged antes de que represente el contenido actualizado.Whenever the two-pane view changes which pane or panes it's displaying, the ModeChanged event occurs before it renders the updated content. Puedes controlar el evento para responder a cambios en el modo de presentación.You can handle the event to respond to changes in the display mode.

Sugerencia

El evento ModeChanged no se produce cuando se carga inicialmente la página, por lo que el código XAML predeterminado debe representar la UI según debe aparecer cuando se carga por primera vez.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.

Una forma de usar este evento es actualizar la UI de la aplicación para que los usuarios puedan ver todo el contenido en el modo 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. Por ejemplo, la aplicación de ejemplo tiene un panel principal (la imagen) y un panel de información.For example, the example app has a primary pane (the image) and an info pane.

Pequeña imagen de la aplicación de ejemplo distribuida en modo Tall

Modo TallTall mode

Cuando solo hay espacio suficiente para mostrar un panel, puedes mover el contenido de Pane2 a Pane1, de modo que el usuario pueda desplazarse para ver todo el contenido.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. Tiene esta apariencia.It looks like this.

Imagen de la aplicación de ejemplo en una pantalla con todo el contenido desplazándose en un único panel

Modo SinglePaneSinglePane mode

Recuerda que las propiedades MinWideModeWidth y MinTallModeHeight determinan cuándo cambia el modo de visualización, así que puedes cambiar el momento en que el contenido se mueve entre los paneles si ajustas los valores de estas propiedades.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.

A continuación se muestra el código del controlador de eventos ModeChanged que mueve el contenido entre Pane1 y Pane2.Here's the ModeChanged event handler code that moves the content between Pane1 and Pane2. También establece VisualState para restringir el ancho de la imagen en modo Wide.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);
        }
    }
}

Qué hacer y qué no hacerDos and don'ts

  • Usa la vista de dos paneles siempre que puedas para que la aplicación pueda aprovechar las pantallas dobles y las pantallas de gran tamaño.Do use the two-pane view whenever you can so that your app can take advantage of dual-screens and large screens.
  • No coloques una vista de dos paneles dentro de otra vista de dos paneles.Don't put a two-pane view inside another two-pane view.