Grid Extra, an adaptive grid for WPF and UWP

GridExtra is an open-source library for .NET that allows us to add a responsive UI grid to our WPF or UWP applications.

The library incorporates the ResponsiveGrid component, which is an adaptive panel system that behaves similarly to CSS grid systems like bootstrap.

ResponsiveGrid consists of a 12-column system. Inner elements are sized by indicating the number of columns used. For example, a width of 6 would be 50% of the grid width.

Dimensions can be specified for different screen sizes to make the grid responsive. The available sizes are XS (<768px), SM (<992px), MD (<1200px), LG (1200px<=).

As with a web page, user interface elements can automatically rearrange to adapt to different resolutions and screen sizes.

GridExtra is a good attempt to provide responsive functionality to our WPF / UWP applications without dying in the attempt. Something that is common in web applications, but not so common, nor easy to do, in desktop applications.

How to use GridExtra

We can easily add the library to a .NET project through the corresponding Nuget package.

Install-Package GridExtra

Next, we should add the GridExtra namespace to our XAML file.

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

With this, we can turn a normal grid into a 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 is Open Source, and all the code and documentation is available in the project’s repository at https://github.com/sourcechord/GridExtra