ResponsiveGrid

KO | EN

gitlite — search

#python #ai #typescript #android #rust #nodejs #java #windows #awesome #cli #mcp #ios #openai #open-source

(★ 58)

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

ResponsiveGrid Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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.

![demo](https://raw.githubusercontent.com/sourcechord/ResponsiveGrid/master/docs/Demo.gif)

## 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
```xml
xmlns:rg="clr-namespace:SourceChord.ResponsiveGrid;assembly=ResponsiveGrid.Wpf"
```

#### For UWP
```xml
xmlns:rg="using:SourceChord.ResponsiveGrid"
```

#### Getting Started
```xml
 <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)* 
![extra small device](https://raw.githubusercontent.com/sourcechord/ResponsiveGrid/master/docs/capture1.png)

*small device(~992px)*  
![small device](https://raw.githubusercontent.com/sourcechord/ResponsiveGrid/master/docs/capture2.png)

#### 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](LICENSE)

ResponsiveGrid

ResponsiveGrid Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

ResponsiveGrid

ResponsiveGrid Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README