WPF UniformGrid vs Grid con IsSharedSizeScope = True

Lo que voy a publicar hoy es un pequeño truco que seguramente todos conozcáis, pero que sin duda puede ayudar a ahorrar mucho tiempo de diseño en vuestras preciosas y coherentes aplicaciones. Decir que los controles destinados al Layout de una interfaz de usuario en WPF son espectaculares sobra. Hay una gran cantidad de Panels que se ajustan a cualquier situción que estemos buscando. Pero a mí siempre me llaman la atención las cosas sencillas. Qué duda hay de que el Panel Grid de WPF es el más versátil de todos. Nos permite hacer cualquier cosa. Podemos definir tantas filas y columnas en él como queramos. Vamos, una pasada de control. Pues bien, uno de los “truquillos” de Grid es establecer el valor de la AttachedProperty Grid.IsSharedSizeScope a True. (De momento no hablaré de las Attached Properties, pero quizás me anime a hacerlo en un post posterior puesto que he implementado algunos trucos bastante interesantes con este mecanismo.) Dicha propiedad permite que las columnas o filas presentes en el Grid compartan entre ellas información de su anchura o altura. ¿Para qué puede ser útil? Se recurre mucho a esta técnica, por ejemplo, en el caso de querer hacer que los Button pertenecientes a un mismo grupo o categoría tengan el mismo tamaño (equivalente al máximo de entre todos). ¿Para qué se recurre a esto? Aunque todo es cuestión de diseño, hay estudios que demuestran que en una pareja de botones “Imprimir – Mandar por correo electrónico” por ejemplo, ambos deberían tener el mismo ancho para no parecer incoherentes. Siempre se puede usar un ancho fijo para ambos, pero no es una solución elegante si nuestra aplicación va a ser traducida a diversos idiomas donde las palabras, obviamente, no miden lo mismo. Para conseguir, pues, este efecto de homogeneidad se puede hacer uso de un par de columnas (ColumnDefinition), colocar en cada una de ellas un botón, establecer la propiedad SharedSizeGroup de cada ColumnDefinition a un valor común (por ejemplo “Grupo”) y el ingrediente final: la mencionada Grid.IsSharedSizeScope = True en el Grid contenedor. Veamos el XAML de dicho escenario:

 1: <Grid Grid.IsSharedSizeScope="True">
 2:     <Grid.ColumnDefinitions>
 3:         <ColumnDefinition SharedSizeGroup="Group"/>
 4:         <ColumnDefinition SharedSizeGroup="Group"/>
 5:     Grid.ColumnDefinitions>
 6:         <Button Content="Imprimir" Grid.Column="0" Margin="0,0,4,0"/>
 7:     <Button Content="Enviar por correo electrónico" Grid.Column="1" Margin="4,0,0,0"/>
 8: </Grid>

El resultado es el que esperábamos. Ambos botones tienen el mismo ancho y si en un futuro queremos cambiar el idioma o, incluso, el texto original, los botones seguirán siendo igual de anchos. Varias decenas de veces he repetido este mecanismo para diferentes situaciones, hasta que un día me percaté de que tanta “verborrea” de xaml se podría simplificar mucho haciendo uso de mi gran amigo: El sencillo UniformGrid. Con este Grid simplificado solo hay que tener en cuenta cuántas columnas y filas queremos u olvidarse por completo de definir nada (en cuyo caso UniformGrid creará dinámicamente tantas columnas como filas para que cada elemento hijo tenga cabida y se organice de una manera homogénea). Por lo tanto, para hacer una equivalencia de nuestro ejemplo pero con UniformGrid sólo necesitaremos establecer el número de filas que queremos. En nuestro caso será uno. UniformGrid se encargará pues de crear tantas columnas del mismo ancho como hijos contenga. De este modo tan sencillo y olvidándonos por completo de propiedades especiales y mágicas que necesitan trabajar juntas hemos conseguido el mismo efecto de homogeneidad en nuestros botones. Veamos el XAML necesario:

 1: <UniformGrid Rows="1">
 2:     <Button Content="Imprimir" Margin="0,0,4,0"/>
 3:     <Button Content="Enviar por correo electrónico" Margin="4,0,0,0"/>
 4: </UniformGrid> 

Mucho más sencillo y legible, ¿verdad? Y como siempre digo, esto sólo es un pequeño ejemplo, pero puede haber una gran cantidad de situaciones en las que se requiera el uso de cualquiera de estas técnicas para conseguir distintos resultados. Una de ellas, por ejemplo, es la necesidad de compartir anchuras entre diferentes items de una lista, los cuales han sido generados por un DataTemplate que contiene Grids y varias columnas. Pero quizás os lo explique en otro post. Espero no haber aburrido demasiado a nadie y gracias por leerme. Saludos

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

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