Grid Extra, una rejilla adaptativa para WPF y UWP

GridExtra es una biblioteca de código abierto para .NET que nos permite añadir una rejilla de UI con diseño responsive a nuestras aplicaciones de WPF o UWP.

La biblioteca incorpora el componente ResponsiveGrid, que es un sistema de panel adaptativo que tiene un comportamiento similar a los sistema de rejilla CSS como bootstrap.

ResponsiveGrid cuenta de un sistema de 12 columnas. Los elementos interiores se dimensionan indicando el número de columnas empleadas. Por ejemplo, un ancho de 6 sería un 50% del ancho de la rejilla.

Las dimensiones pueden ser especificadas para distintos tamaños de pantalla para hacer que la rejilla sea responsive. Los tamaños disponibles son XS(<768px), SM(<992px), MD(<1200px), LG(1200px<=).

Al igual que pasaría en una página web, los elementos de la interfaz de usuario pueden reorganizarse automáticamente para adaptarse a diferentes resoluciones y tamaños de pantalla.

GridExtra es un buen intento por proporcionar funcionalidades responsive a nuestras aplicaciones WPF / UWP sin morir en el intento. Algo que es frecuente en aplicaciones web, pero no tan habitual, ni sencillo de realizar, en aplicaciones de escritorio.

Cómo usar GridExtra

Podemos añadir la biblioteca a un proyecto de .NET fácilmente, a través del paquete Nuget correspondiente.

Install-Package GridExtra

A continuación deberemos añadir el namespace GridExtra a nuestro fichero XAML.

xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf"

Con esto, podríamos convertir un grid normal en una Responsive Grid.

<Grid>
    <Grid.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="Background" Value="LightGray" />
            <Setter Property="Height" Value="60" />
        </Style>
    </Grid.Resources>
    <rg:ResponsiveGrid>
        <Border ge:ResponsiveGrid.XS="12" ge:ResponsiveGrid.SM="3" />
        <Border ge:ResponsiveGrid.XS="12" ge:ResponsiveGrid.SM="6" />
        <Border ge:ResponsiveGrid.XS="12" ge:ResponsiveGrid.SM="3" />
    </rg:ResponsiveGrid>
</Grid>

GridExtra es Open Source, y todo el código y documentación está disponible en el repositorio del proyecto en https://github.com/sourcechord/GridExtra