Seguimos con esta serie de posts acerca del Silverlight Toolkit. En esta ocasión veremos el GridSplitter, un control muy útil al momento de diseñar interfaces personalizables en nuestra aplicación de Silverlight.
Propiedades
- PreviewStyle – Maneja el estilo usado para la vista previa de los cambios
- ShowsPreview – Indica si se mostrará una vista previa a los cambios
El GridSplitter se coloca en cualquier celda de un Grid y dependiendo de los valores que asignemos a sus propiedades HorizontalAlignment y VerticalAlignment es la forma en que se comportará:
| HorizontalAlignment | VerticalAlignment | Resultado |
| Stretch | Otra | Redimensiona filas |
| Otra | Stretch | Redimensiona columnas |
| Stretch | Stretch | Redimensiona columnas si ActualHeight es mayor o igual que ActualWidth. De otra forma, redimensiona filas. |
Para usar este control necesitamos por lo menos dos controles Grid. En este ejemplo vamos a construir un layout de una aplicación con sus paneles de tamaño personalizable:
En este caso, solo usaremos ShowsPreview en el panel inferior del centro (el amarillo). Como siempre, debemos comenzar por agregar la referencia de System.Windows.Controls a nuestro proyecto y luego la agregamos a nuestro MainPage.xaml:
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Después procedemos a definir nuestras columnas y filas para crear el layout mostrado en la imagen de arriba:
<Grid x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.208*"/>
<ColumnDefinition Width="0.578*"/>
<ColumnDefinition Width="0.214*"/>
</Grid.ColumnDefinitions>
<Canvas x:Name="panelIzquierdo" Background="#FF0E3EA3"/>
<Canvas x:Name="panelDerecho" Grid.Column="2" Background="#FFC11B1B"/>
<controls:GridSplitter Width="10"
Grid.Column="0"
VerticalAlignment="Stretch"
HorizontalAlignment="Right"
Margin="0,0,-5,0"
Background="Transparent"/>
<controls:GridSplitter Width="10"
Grid.Column="2"
VerticalAlignment="Stretch"
HorizontalAlignment="Left"
Margin="-5,0,0,0"
Background="Transparent"/>
<Grid x:Name="panelCentral" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="0.179*"/>
<RowDefinition Height="0.652*"/>
<RowDefinition Height="0.169*"/>
</Grid.RowDefinitions>
<Canvas x:Name="panelCentralSuperior" Background="#FF24C504"/>
<Canvas x:Name="panelCentralInferior" Grid.Row="2" Background="#FFB1DA00"/>
<Canvas x:Name="panelCentralCentral" Grid.Row="1" Background="#FFD2A819"/>
<controls:GridSplitter Height="10"
Grid.Row="1"
Margin="0,-5,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Stretch"
Background="Transparent" />
<controls:GridSplitter Height="10"
Grid.Row="2"
VerticalAlignment="Top"
HorizontalAlignment="Stretch"
Background="Transparent"
Margin="0,-5,0,0"
ShowsPreview="True"/>
</Grid>
</Grid>
Podemos ver como el primer GridSplitter se coloca en la primera celda del grid principal, ahí le indicamos que se alinea a la derecha horizontalmente y que abarque todo su espacio verticalmente, lo que provoca que el usuario pueda redimensionar el espacio de la columna de la izquierda y la central.
Lo mismo pasa con el resto de los separadores. Un caso a notar es el del último GridSplitter, donde usamos ShowsPreview. Cuando tratamos de redimensionar el panel amarillo, observamos una línea horizontal que actúa como vista previa, en vez de cambiarlo en tiempo real como el comportamiento de el resto de los separadores.
Como podemos ver, este control es una gran herramienta para proveer al usuario final una interfaz personalizable de manera sencilla.
Pueden ver el demo en línea aquí o descargarse el proyecto aquí.