ResponsiveGrid

This project has been moved to GridExtra
https://github.com/sourcechord/GridExtra

ResponsiveGrid is a custom panel control for WPF/UWP.
This library provides the grid layout system that is similar to Bootstrap framework.

features

• ResponsiveGrid class
  • Custom Panel class that provides bootstrap like grid system.
• Grid system
  • switch layout with window width.
    • XS(<768px), SM(<992px), MD(<1200px), LG(1200px<=)
  • 12 columns across the page.(customizable with MaxDivision property)

Usage

install

Nuget Package

Install-Package ResponsiveGrid

https://www.nuget.org/packages/ResponsiveGrid/

Preparation

Add xmlns to xaml code.

For WPF

xmlns:rg="clr-namespace:SourceChord.ResponsiveGrid;assembly=ResponsiveGrid.Wpf"

For UWP

xmlns:rg="using:SourceChord.ResponsiveGrid"

Getting Started

    <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 rg:ResponsiveGrid.XS="12" rg:ResponsiveGrid.SM="3" />
            <Border rg:ResponsiveGrid.XS="12" rg:ResponsiveGrid.SM="6" />
            <Border rg:ResponsiveGrid.XS="12" rg:ResponsiveGrid.SM="3" />
        </rg:ResponsiveGrid>
    </Grid>

extra small device(~768px)

small device(~992px)

Properties

Dependency Properties

Property Name	Type	Description
MaxDivision	int	Gets or sets a value that determines grid divisions.
BreakPoints	BreakPoints class
ShowGridLines	int	Gets or sets a value that indicates whether grid column's lines are visible within this ResponsiveGrid.

Attached Properties

Property Name	Type	Description
XS SM MD LG	int	Gets or sets a value that determines grid columns for XS(extra small), SM(small), MD(medium), LG(large) devices.
XS_Offset SM_Offset MD_Offset LG_Offset	int	Gets or sets a value that determines grid columns offset for XS(extra small), SM(small), MD(medium), LG(large) devices.
XS_Push SM_Push MD_Push LG_Push	int	Gets or sets a value that moves columns to right from the original position.
XS_Pull SM_Pull MD_Pull LG_Pull	int	Gets or sets a value that moves columns to left from the original position.

Compared to bootstrap

bootstrap	ResponsiveGrid
col-xs col-sm col-md col-lg	XS SM MD LG
col-xs-offset col-sm-offset col-md-offset col-lg-offset	XS_Offset SM_Offset MD_Offset LG_Offset
col-xs-push col-sm-push col-md-push col-lg-push	XS_Push SM_Push MD_Push LG_Push
col-xs-pull col-sm-pull col-md-pull col-lg-pull	XS_Pull SM_Pull MD_Pull LG_Pull
visibility-xs, visibility-sm,… hidden-xs, hidden-sm,...	(T.B.D.)

attention

ResponsiveGrid is not suitable for ItemsPanel, because it isn't implemented VirtualizingPanel class.

If you use ResponsiveGrid in ListBox as ItemsPanel. Your ListBox become to not virtualize items of ListBox.

Lisence

MIT