https://github.com/sourcechord/gridextra
Custom panel controls for WPF/UWP.
https://github.com/sourcechord/gridextra
grid responsive uwp wpf xaml
Last synced: about 1 month ago
JSON representation
Custom panel controls for WPF/UWP.
- Host: GitHub
- URL: https://github.com/sourcechord/gridextra
- Owner: sourcechord
- License: mit
- Created: 2016-12-04T00:20:55.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-08-07T14:17:59.000Z (over 4 years ago)
- Last Synced: 2024-04-29T10:06:54.931Z (12 months ago)
- Topics: grid, responsive, uwp, wpf, xaml
- Language: C#
- Size: 1.67 MB
- Stars: 206
- Watchers: 13
- Forks: 33
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GridExtra
GridExtra is a custom panel library for WPF/UWP.
* ResponsiveGrid
* 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)
* GridEx
* Helper class that defines usefull attached properties for Grid panel.
* WrapPanelEx
* Helper class that provide adaptive layout for WrapPanel.
## install
*Nuget Package*
```
Install-Package GridExtra
```
https://www.nuget.org/packages/GridExtra/
### Preparation
Add xmlns to xaml code.
#### For WPF
```xml
xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf"
```
#### For UWP
```xml
xmlns:ge="using:SourceChord.GridExtra"
```
## Usage
### ResponsiveGrid
ResponsiveGrid provides the grid layout system that is similar to Bootstrap framework.
#### Example
```xml
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="LightGray" />
<Setter Property="Height" Value="60" />
```
*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.
### GridEx
GridEx is Helper class for defining Grid properties.
#### Example1 (Row/Column Definition)
```xml
```
##### Row/Column Definition with Min/Max size
```xml
```
`ge:GridEx.ColumnDefinition="50, *(50-200), 2*(80-), 2*(-300)"` is similar to below definition.
```xml
```
#### Example2 (Area Definition)
`Area` property provides the way of defineing Row/Column/RowSpan/ColumnSpan.
```xml
```
#### Example3 (Named Template Area)
`TemplateArea` provides named grid areas, like CSS Grid Layout Module Level 1.
`TemplateArea` property makes row/column definition. And, define region's name.
Children of Grid can be placed with region's name, that is defined by `TemplateArea` property.
```xml
```
Row devision is defined by line feed or `/`.
* line feed
* `\n`(.cs)
* `
`(xaml)
* `/`
```xml
```
#### Example4 (Named Template Area, working with RowDefinition/ColumnDefintion)
```xml
```
##### Attached Properties(for Grid)
|Property Name|Type|Description|
|-----|-----|-----|
|RowDefinition|string|Sets a value that determines row definition of Grid.|
|ColumnDefinition|string|Sets a value that determines column definition of Grid.|
|TemplateArea|string|Sets a definition of grid devision and area names. |
##### Attached Properties(for Grid children)
|Property Name|Type|Description|
|-----|-----|-----|
|Area|string|Sets a value that determines Row, Column, RowSpan, ColumnSpan properties.|
|AreaName|string|Sets a name of regions for item's belong.(use with `TemplateArea` property)|
#### Example5 (Auto fill children)
##### Attached Properties(for Grid)
|Property Name|Type|Description|
|-----|-----|-----|
|AutoFillChildren|string|Gets or sets a value that indicates whether the Grid arranges its children to each cell.|
|AutoFillOrientation|string|Sets a value that determines auto fill orientation.|
##### Attached Properties(for Grid children)
|Property Name|Type|Description|
|-----|-----|-----|
|AutoFillSpan|string|Sets a value that determines cell span value that is used during AutoFill process.|
```xml
```
##### AutoFillChildren with Hidden/Collapsed items
```xml
```
##### AutoFillChildren with pinned items
```xml
```
### WrapPanelEx **(WPF Only)**
WrapPanelEx is Helper class that provide adaptive layout for WrapPanel.
#### Example1
WrapPanelEx.AdaptiveLayout property makes WrapPanel into UWP Community Toolkit's [AdaptiveGridView](https://docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/controls/AdaptiveGridView) like layout.
```xml
```
## Lisence
[MIT](LICENSE)