Desarrollo, Universal, Windows10

SplitView en Windows 10 Universal Apps


Uno de los nuevos controles en el SDK para el desarrollo de aplicaciones universales de Windows 10 es el control SplitView. Supongo que han visto las aplicaciones con el menú tipo hamburguesa, si es así y desean crear una aplicación con este menú, les recomiendo que utilicen SplitView.

SplitView

El control divide la página en dos partes, el de la izquierda se llama Ventana y se puede utilizar para los menús.
El panel tiene diferentes modos de visualización:

Overlay
Cuando el panel está abierto se mostrará sobre el contenido principal de la página.

CompactOverlay
Se muestra de la misma manera como superposición, pero con más delgada.
Si solo van a mostrar iconos, esta es la mejor opción.

Inline
Cuando el panel está abierto será junto al contenido principal, ver la pantalla de arriba.

CompactInline
Inline también tiene un modo más compacto con el CompactOverlay.

<SplitView Name=”Split” OpenPaneLength=”200″ IsPaneOpen=”False” DisplayMode=”Overlay”>
<SplitView.Pane>
<StackPanel Padding=”10″>
<TextBlock Text=”Item 1″ />
<TextBlock Margin=”0,10″ Text=”Item 2″ />
<TextBlock Text=”Item 3″ />
<TextBlock Margin=”0,10″ Text=”Item 4″ />
</StackPanel>
</SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”50″ />
<RowDefinition Height=”*” />
</Grid.RowDefinitions>
<Button Background=”White” Click=”Button_Click”>
<StackPanel>
<Rectangle Height=”3″ Width=”20″ Fill=”Black” />
<Rectangle Margin=”0,5″ Height=”3″ Width=”20″ Fill=”Black” />
<Rectangle Height=”3″ Width=”20″ Fill=”Black” />
</StackPanel>
</Button>

<TextBlock Margin=”10″ Grid.Row=”1″ Text=”Main content here” />

</Grid>
</SplitView>

La colocación por defecto del panel es a la izquierda, pero también se puede tener del lado derecho, para esto sólo hay que configurar la propiedad PanePlacement a la derecha.

<SplitView Name=”Split” PanePlacement=”Right” OpenPaneLenght=”200″ IsPaneOpen=”False” DisplayMode=”Inline”>

Traducción al español del blog de: Daniel Hindrikes

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s