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 is based on a 12-column system. Inner elements are sized by specifying the number of columns used. For example, a width of 6 would be 50% of the grid’s 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<=).
Just like on a web page, user interface elements can automatically rearrange themselves to adapt to different resolutions and screen sizes.
GridExtra is a good attempt to provide responsive functionality to our WPF / UWP applications without too much hassle. This is common in web applications, but not as common, nor as easy to achieve, in desktop applications.
How to use GridExtra
We can easily add the library to a .NET project via the corresponding Nuget package.
Install-Package GridExtra
Next, we need to add the GridExtra namespace to our XAML file.
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf"
With this, we could convert 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 repository at https://github.com/sourcechord/GridExtra
