Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
La vista de dos paneles es un control de diseño que le ayuda a administrar la visualización de las aplicaciones que tienen 2 áreas de contenido distintas, como una vista de lista y detalles.
¿Es este el control adecuado?
Use la vista de dos paneles cuando tenga dos áreas distintas pero relacionadas con el contenido y:
- El contenido deba reorganizarse y cambiar de tamaño automáticamente para ajustarse mejor a la ventana.
- El área secundaria del contenido deba mostrarse u ocultarse en función del espacio disponible.
Si necesita mostrar dos áreas de contenido, pero no necesita el cambio de tamaño y la reorganización proporcionados por la vista de dos paneles, considere la posibilidad de usar una vista dividida en su lugar.
Para las opciones de navegación, use una vista de navegación.
Funcionamiento
La vista de dos paneles tiene dos paneles donde colocas el contenido. Ajusta el tamaño y la disposición de los paneles en función del espacio disponible en la ventana. Los diseños de panel posibles se definen con la enumeración TwoPaneViewMode:
| Valor de enumeración | Descripción |
|---|---|
SinglePane |
Solo se muestra un panel, según se especifique en la propiedad PanePriority. |
Wide |
Los paneles se muestran uno junto al otro, o se muestra un solo panel, tal y como se especifica en la propiedad WideModeConfiguration. |
Tall |
Los paneles se muestran uno sobre el otro, o se muestra un solo panel, tal y como se especifica en la propiedad TallModeConfiguration. |
Aplicación en modo ancho.
Aplicación en modo alto.
Para configurar la vista de dos paneles, establece la propiedad PanePriority para especificar qué panel se muestra cuando hay espacio para un solo panel. 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.
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. 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.
Crear una vista de dos paneles
- API importantes:Clase TwoPaneView
En este CÓDIGO XAML se muestra cómo crear un elemento básico 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>
No es necesario que TwoPaneView sea el elemento raíz del diseño de página. De hecho, a menudo lo usarás en un control NavigationView que proporciona la navegación general para la aplicación. El TwoPaneView se adapta adecuadamente independientemente de dónde se encuentra en el árbol XAML.
Agregar contenido a los paneles
Cada panel de una vista de dos paneles puede contener un único UIElement de XAML. Para agregar contenido, normalmente colocas un panel de diseño XAML en cada panel y, luego, agregas otros controles y contenido al 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. 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.
En este ejemplo se crea la interfaz de usuario sencilla de la aplicación picture/info mostrada anteriormente. El contenido se puede mostrar en dos paneles o combinarse en un solo panel, dependiendo de la cantidad de espacio disponible. (Cuando solo hay espacio para un panel, se mueve el contenido de Panel2 a Panel1 y se deja que el usuario se desplace para ver el contenido oculto. Más adelante, verá el código para esto en la sección Responder a los cambios de modo).
<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>
Especificar qué panel se va a mostrar
Cuando la vista de dos paneles solo puede mostrar un único panel, usa la propiedad PanePriority para determinar qué panel se va a mostrar. De manera predeterminada, PanePriority se establece en Pane1. Aquí se muestra cómo puedes establecer esta propiedad en XAML o en código.
<TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">
MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;
Cambio de tamaño de los paneles
El tamaño de los paneles viene determinado por las propiedades Pane1Length y Pane2Length . Usan valores GridLength que admiten el ajuste de tamaño auto y star(*) . 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.
De manera predeterminada, Pane1Length se establece en Auto y su tamaño se ajusta a su contenido.
Pane2Length se establece en * y usa todo el espacio restante.
Paneles con ajuste de tamaño predeterminado
Los valores predeterminados son útiles para un diseño típico de lista y detalles, donde hay una lista de elementos en Pane1 y muchos detalles en Pane2. Sin embargo, en función del contenido, puede que prefieras dividir el espacio de otra manera. Aquí, Pane1Length se establece en 2* de modo que se obtiene el doble de espacio que Pane2.
<TwoPaneView x:Name="MyTwoPaneView" Pane1Length="2*">
Paneles de tamaño 2* y *
Si establece un panel para usar el ajuste de tamaño automático, puede controlar el tamaño estableciendo el alto y el ancho del Panel que contiene el contenido del panel. En este caso, es posible que tenga que controlar el ModeChanged evento y establecer las restricciones de alto y ancho del contenido según corresponda para el modo actual.
Pantalla en modo Wide o Tall
En una pantalla única, el Modo de pantalla de la vista de dos paneles está determinado por las propiedades MinWideModeWidth y MinTallModeHeight. Ambas propiedades tienen un valor predeterminado de 641 px, igual que NavigationView.CompactThresholdWidth.
En esta tabla se muestra cómo Height y Width del TwoPaneView determina qué modo de visualización se usa.
| Condición TwoPaneView | Modo |
|---|---|
Width > MinWideModeWidth |
Se usa el modo Wide |
Width
<= MinWideModeWidth, y Height>MinTallModeHeight |
Se usa el modo Tall |
Width
<= MinWideModeWidth y Height<= MinTallModeHeight |
Se usa el modo SinglePane |
Opciones de configuración Wide
MinWideModeWidth controla cuando la vista de dos paneles entra en el modo Wide. La vista de dos paneles entra en modo Wide cuando el espacio disponible es más amplio que la propiedad MinWideModeWidth. El valor predeterminado es de 641 px, pero puedes cambiarlo a lo que quieras. En general, tienes que establecer esta propiedad en el ancho mínimo que quieras para el panel.
Cuando la vista de dos paneles está en modo Wide, la propiedad WideModeConfiguration determina lo que se debe mostrar:
| Valor de enumeración | Descripción |
|---|---|
SinglePane |
Un solo panel (según lo determinado por PanePriority). El panel ocupa el tamaño completo de TwoPaneView (es decir, adopta el tamaño star en ambas direcciones). |
LeftRight |
Pane1 a la izquierda/Pane2 a la derecha. 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. |
RightLeft |
Pane1 a la derecha/Pane2 a la izquierda. 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. |
El valor predeterminado es LeftRight.
| LeftRight | DerechaIzquierda |
|---|---|
|
|
|
Nota:
Cuando el dispositivo usa un idioma de derecha a izquierda (RTL), la vista de dos paneles intercambia automáticamente el orden: RightLeft se representa como LeftRighty LeftRight se representa como RightLeft.
Opciones de configuración de Tall
La vista de dos paneles entra en modo Tall cuando el espacio disponible es más estrecho que MinWideModeWidth y más alto que MinTallModeHeight. El valor predeterminado es de 641 px, pero puedes cambiarlo a lo que quieras. En general, tienes que establecer esta propiedad en la altura mínima que quieras para el panel.
Cuando la vista de dos paneles está en modo Tall, la propiedad TallModeConfiguration determina lo que se debe mostrar:
| Valor de enumeración | Descripción |
|---|---|
SinglePane |
Un solo panel (según lo determinado por PanePriority). El panel ocupa el tamaño completo de TwoPaneView (es decir, adopta el tamaño star en ambas direcciones). |
TopBottom |
Pane1 en la parte superior/Pane2 en la parte inferior. 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. |
BottomTop |
Pane1 en la parte inferior/Pane2 en la parte superior. 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. |
El valor predeterminado es TopBottom.
| ArribaAbajo | BottomTop |
|---|---|
|
|
Valores especiales para MinWideModeWidth y MinTallModeHeight
Puede usar la propiedad MinWideModeWidth para evitar que la vista de dos paneles entre en el modo Wide: solo tiene que establecer MinWideModeWidth en Double.PositiveInfinity.
Si estableces MinTallModeHeight en Double.PositiveInfinity, esta impide que la vista de dos paneles entre en el modo Tall.
Si estableces MinTallModeHeight en 0, esta impide que la vista de dos paneles entre en el modo SinglePane.
Responder a los cambios de modo
Puede usar la propiedad de solo lectura Mode para obtener el modo de presentación actual. 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. Puedes controlar el evento para responder a cambios en el modo de presentación.
Importante
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.
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. Por ejemplo, la aplicación de ejemplo tiene un panel principal (la imagen) y un panel de información.
Modo Tall
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. Tiene esta apariencia.
Modo SinglePane
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.
A continuación se muestra el código del controlador de eventos ModeChanged que mueve el contenido entre Pane1 y Pane2. También establece VisualState para restringir el ancho de la imagen en modo 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 y WinUI 2
Importante
La información y los ejemplos de este artículo están optimizados para aplicaciones que usan el SDK de Aplicaciones para Windows y WinUI 3, pero generalmente son aplicables a las aplicaciones para UWP que usan WinUI 2. Consulta la referencia de la API de UWP para obtener información y ejemplos específicos de la plataforma.
Esta sección contiene la información que necesitas para utilizar el control en una aplicación UWP o WinUI 2.
TwoPaneView para aplicaciones para UWP requiere WinUI 2. Para obtener más información, incluidas las instrucciones de instalación, consulta WinUI 2. Existen API para este control en el espacio de nombres Microsoft.UI.Xaml.Controls .
- API de WinUI 2:clase TwoPaneView
Para usar el código de este artículo con WinUI 2, use un alias en XAML (usamos muxc) para representar las API de la biblioteca de interfaz de usuario de Windows que se incluyen en el proyecto. Consulta Introducción a WinUI 2 para obtener más información.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:TwoPaneView />
Artículos relacionados
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
