All Projects → sourcechord → Gridextra

sourcechord / Gridextra

Licence: mit
Custom panel controls for WPF/UWP.

Projects that are alternatives of or similar to Gridextra

Xamlcss
Style Xaml applications with CSS
Stars: ✭ 271 (+81.88%)
Mutual labels:  uwp, wpf, xaml
Rapid Xaml Toolkit
Tools to accelerate XAML development within Visual Studio.
Stars: ✭ 427 (+186.58%)
Mutual labels:  uwp, wpf, xaml
Arcgis Runtime Samples Dotnet
Sample code for ArcGIS Runtime SDK for .NET – UWP, WPF, Xamarin.Android, Xamarin.iOS, and Xamarin.Forms
Stars: ✭ 274 (+83.89%)
Mutual labels:  uwp, wpf, xaml
XamlIslands
Repository with several XAML Islands v1 samples (Win32, WPF, and WinForms) to demonstrate how to use it.
Stars: ✭ 47 (-68.46%)
Mutual labels:  xaml, uwp, wpf
Mvvmvalidation
Lightweight library that helps reduce boilerplate when implementing validation in XAML MVVM applications
Stars: ✭ 141 (-5.37%)
Mutual labels:  uwp, wpf, xaml
arcgis-runtime-demos-dotnet
Demo applications provided by the ArcGIS Runtime SDK for .NET Team
Stars: ✭ 51 (-65.77%)
Mutual labels:  xaml, uwp, wpf
Xamlflair
XamlFlair is an animation library for UWP, WPF, and Uno, built to facilitate Xaml animations using only attached properties.
Stars: ✭ 362 (+142.95%)
Mutual labels:  uwp, wpf, xaml
WindowsCommunityToolkit
The Windows Community Toolkit is a collection of helpers, extensions, and custom controls. It simplifies and demonstrates common developer tasks building UWP and .NET apps for Windows 10 and Windows 11. The toolkit is part of the .NET Foundation.
Stars: ✭ 4,934 (+3211.41%)
Mutual labels:  xaml, uwp, wpf
Adaptivecards
A new way for developers to exchange card content in a common and consistent way.
Stars: ✭ 950 (+537.58%)
Mutual labels:  uwp, wpf, xaml
Reactiveproperty
ReactiveProperty provides MVVM and asynchronous support features under Reactive Extensions. Target framework is .NET Standard 2.0.
Stars: ✭ 603 (+304.7%)
Mutual labels:  uwp, wpf, xaml
IconPacks.Browser
The Browser for all available Icon packages from MahApps.Metro.IconPacks
Stars: ✭ 74 (-50.34%)
Mutual labels:  xaml, uwp, wpf
Xamarin Forms Gtk Movies Sample
The Movie DB Xamarin.Forms Sample
Stars: ✭ 83 (-44.3%)
Mutual labels:  uwp, wpf, xaml
Ammyui
Ammy language repository
Stars: ✭ 356 (+138.93%)
Mutual labels:  uwp, wpf, xaml
Windowscommunitytoolkit
The Windows Community Toolkit is a collection of helpers, extensions, and custom controls. It simplifies and demonstrates common developer tasks building UWP and .NET apps for Windows 10. The toolkit is part of the .NET Foundation.
Stars: ✭ 4,654 (+3023.49%)
Mutual labels:  uwp, wpf, xaml
Mahapps.metro.iconpacks
Awesome icon packs for WPF and UWP in one library
Stars: ✭ 1,157 (+676.51%)
Mutual labels:  uwp, wpf, xaml
Arcgis Toolkit Dotnet
Toolkit for ArcGIS Runtime SDK for .NET
Stars: ✭ 125 (-16.11%)
Mutual labels:  uwp, wpf, xaml
Angular Generic Table
A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
Stars: ✭ 100 (-32.89%)
Mutual labels:  grid, responsive
React Native Flexbox Grid
Responsive Grid for React Native
Stars: ✭ 95 (-36.24%)
Mutual labels:  grid, responsive
Framy Css
Very simple CSS Framework
Stars: ✭ 103 (-30.87%)
Mutual labels:  grid, responsive
Q42.winrt
Useful library for data driven Windows Phone 8 and Windows 8 C# / XAML WinRT projects
Stars: ✭ 111 (-25.5%)
Mutual labels:  uwp, xaml

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

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

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

demo

Example1 (Row/Column Definition)

    <Grid ge:GridEx.RowDefinition="*, *, *, *"
          ge:GridEx.ColumnDefinition="50, 75, *, 2*"
          ShowGridLines="True">
        <Button Grid.Row="1"
                Grid.Column="2"
                Margin="5"
                Content="Button" />
    </Grid>

Example1

Row/Column Definition with Min/Max size
    <Grid ge:GridEx.RowDefinition="*, *, *, *"
          ge:GridEx.ColumnDefinition="50, *(50-200), 2*(80-), 2*(-300)"
          ShowGridLines="True">
        <Button Grid.Row="1"
                Grid.Column="2"
                Margin="5"
                Content="Button" />
    </Grid>

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

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="*" MinWidth="50" MaxWidth="200"/>
            <ColumnDefinition Width="2*" MinWidth="80"/>
            <ColumnDefinition Width="2*" MaxWidth="300"/>
        </Grid.ColumnDefinitions>

Example2 (Area Definition)

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

    <Grid ge:GridEx.RowDefinition="*, *, *, *"
          ge:GridEx.ColumnDefinition="*, *, *, *"
          ShowGridLines="True">
        <Button Margin="5"
                ge:GridEx.Area="0, 0, 1, 2"
                Content="GridEx.Area=&quot;0, 0, 1, 2&quot;" />
        <Button Margin="5"
                ge:GridEx.Area="2, 1, 2, 3"
                Content="GridEx.Area=&quot;2, 1, 2, 3&quot;" />
    </Grid>

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.

    <Grid ge:GridEx.TemplateArea="
            Header Header Header &#10;
            Menu Content SubMenu &#10;
            Footer Footer Footer &#10;
          "
          ShowGridLines="True">
        <Button Margin="5"
                ge:GridEx.AreaName="Header"
                Content="Header" />
        <Button Margin="5"
                ge:GridEx.AreaName="Menu"
                Content="Menu" />
        <Button Margin="5"
                ge:GridEx.AreaName="Content"
                Content="Content" />
        <Button Margin="5"
                ge:GridEx.AreaName="SubMenu"
                Content="SubMenu" />
        <Button Margin="5"
                ge:GridEx.AreaName="Footer"
                Content="Footer" />
    </Grid>

Example3

Row devision is defined by line feed or /.

  • line feed
    • \n(.cs)
    • &#10;(xaml)
  • /
    <Grid ge:GridEx.TemplateArea="
            Header Header Header/
            Menu Content SubMenu/
            Footer Footer Footer/
          ">

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

    <Grid ge:GridEx.RowDefinition="50, *, 30"
          ge:GridEx.ColumnDefinition="*, 2*, 100"
          ge:GridEx.TemplateArea="
            Header Header Header/
            Menu Content SubMenu/
            Footer Footer Footer/
          "
          ShowGridLines="True">
        <Button Margin="5"
                ge:GridEx.AreaName="Header"
                Content="Header" />
        <Button Margin="5"
                ge:GridEx.AreaName="Menu"
                Content="Menu" />
        <Button Margin="5"
                ge:GridEx.AreaName="Content"
                Content="Content" />
        <Button Margin="5"
                ge:GridEx.AreaName="SubMenu"
                Content="SubMenu" />
        <Button Margin="5"
                ge:GridEx.AreaName="Footer"
                Content="Footer" />
    </Grid>

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.
    <Grid ge:GridEx.ColumnDefinition="*, *"
        ge:GridEx.RowDefinition="Auto, Auto, Auto"
        ge:GridEx.AutoFillChildren="True"
        ShowGridLines="True">
        <TextBlock Text="Name:" />
        <TextBox VerticalAlignment="Top" Margin="5"/>

        <TextBlock Text="Age:" />
        <TextBox VerticalAlignment="Top" Margin="5"/>

        <Button ge:GridEx.Area="2, 1, 1, 1"
            Margin="5" Width="60"
            HorizontalAlignment="Right"
            Content="OK" />
    </Grid>

Example5

AutoFillChildren with Hidden/Collapsed items
    <Grid ge:GridEx.ColumnDefinition="*, *, *"
          ge:GridEx.RowDefinition="*, *"
          ge:GridEx.AutoFillChildren="True">
        <Button Content="1" Visibility="Hidden"/>
        <Button Content="2" />
        <Button Content="3" />
        <Button Content="4" />
        <Button Content="5" Visibility="Collapsed" />
        <Button Content="6" />
    </Grid>

Example5_1

AutoFillChildren with pinned items
    <Grid ge:GridEx.ColumnDefinition="*, *, *"
          ge:GridEx.RowDefinition="*, *"
          ge:GridEx.AutoFillChildren="True">
        <Button Content="1" />
        <Button Content="2" />
        <Button Content="3" />
        <Button Content="4" />
        <Button Content="Fixed Item" ge:GridEx.Area="0,1,1,1"/>
    </Grid>

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.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <WrapPanel ItemWidth="200" ItemHeight="70"
                   Orientation="Horizontal"
                   ge:WrapPanelEx.AdaptiveLayout="{Binding IsChecked, ElementName=chkIsAdaptive}">
            <Button />
            <Button />
            <Button />
            <Button />
            <Button />
            <Button />
            <Button />
        </WrapPanel>
        <CheckBox x:Name="chkIsAdaptive"
                  Grid.Row="1" Margin="5"
                  Content="WrapPanelEx.AdaptiveLayout"/>
    </Grid>

Lisence

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].