GridExtra

by sourcechord

sourcechord / GridExtra

Custom panel controls for WPF/UWP.

140 Stars 15 Forks Last release: about 3 years ago (v0.4.0) MIT License 32 Commits 5 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

xmlns:ge="clr-namespace:SourceChord.GridExtra;assembly=GridExtra.Wpf"

For UWP

xmlns:ge="using:SourceChord.GridExtra"

Usage

ResponsiveGrid

ResponsiveGrid provides the grid layout system that is similar to Bootstrap framework.

demo

Example

    
        
            
        
        
            
            
            
        
    

extra small device(~768px)
extra small device

small device(~992px)
small device

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.| |XSOffset
SM
Offset
MDOffset
LG
Offset
|int|Gets or sets a value that determines grid columns offset for XS(extra small), SM(small), MD(medium), LG(large) devices.| |XSPush
SM
Push
MDPush
LG
Push
|int|Gets or sets a value that moves columns to right from the original position.| |XSPull
SM
Pull
MDPull
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
|XSOffset
SM
Offset
MDOffset
LG
Offset
| |col-xs-push
col-sm-push
col-md-push
col-lg-push
|XSPush
SM
Push
MDPush
LG
Push
| |col-xs-pull
col-sm-pull
col-md-pull
col-lg-pull
|XSPull
SM
Pull
MDPull
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.

demo

Example1 (Row/Column Definition)

    
        
    

Example1

Row/Column Definition with Min/Max size
    
        
    

ge:GridEx.ColumnDefinition="50, *(50-200), 2*(80-), 2*(-300)"
is similar to below definition.
        
            
            
            
            
        

Example2 (Area Definition)

Area
property provides the way of defineing Row/Column/RowSpan/ColumnSpan.
    
        
        
    

Example2

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.
    

Row devision is defined by line feed or

/
. * line feed *
\n
(.cs) *
(xaml)
* 
/
    

Example4 (Named Template Area, working with RowDefinition/ColumnDefintion)

    
        
        
        
        
        
    

Example4

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)

demo2

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

    
        
        

    <textblock text="Age:"></textblock>
    <textbox verticalalignment="Top" margin="5"></textbox>

    <button ge:gridex.area="2, 1, 1, 1" margin="5" width="60" horizontalalignment="Right" content="OK"></button>
</grid>

Example5

AutoFillChildren with Hidden/Collapsed items
    
        
        
        
        
        
        
    

Example5_1

AutoFillChildren with pinned items
    
        
        
        
        
        
    

Example5_2

WrapPanelEx (WPF Only)

WrapPanelEx is Helper class that provide adaptive layout for WrapPanel.

demo

Example1

WrapPanelEx.AdaptiveLayout property makes WrapPanel into UWP Community Toolkit's AdaptiveGridView like layout.

    
        
            
            
        
        
            
            
            
            
            
            
            
        
        
    

Lisence

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.