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)
- switch layout with window width.
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.