JaraIOGridControlAbstractions - An extension of Grid control attributes

Left tab panel is how you normally create your rows and columns in Grid.
Right tab panel is how JaraIOGridControlAbstractions is implemented. Now don't get confused with the new charaters and format you saw. I will explain that a bit later.

JaraIOGridControlAbstractions has four attributes called

• RowDefinitions [v1.0]
• ColumnDefinitions  [v1.0]
• GridDefinitions  [v1.2]
• RowColumn  [v1.2]

Download the package using Package Manager or from NuGet Manager

Install-Package JaraIOGridControlAbstractions -Version 1.2.0

Add a new namespace in XAML

xmlns:jio="clr-namespace:JaraIO.ControlAbstractions;assembly=JaraIOGridControlAbstractions"

RowDefintions and ColumnDefinitions
You can use these attributes if you want to create Rows or Columns for your Grid.
i.e.

<Grid jio:GridEx.RowDefinitions="*,*">

Add a two rows

<Grid jio:GridEx.ColumnDefinitions="Auto,*">

Add tow columns in the grid

GridDefintions and RowColumn is introduced in v1.2
In part of making it even more easier to create Rows and Columns. There are new special characters added

• Tilde (~) is an alternative for Auto
• Space as an alternative for comma 

Here are some examples on how to use GridDefinitions and RowColumn

GridDefinitions
Adding two rows and two columns. First row is set to Auto and the other is Star. Two columns are set to Star

<Grid jio:GridEx.GridDefinitions="~ * / * *">

is the same as

<Grid jio:GridEx.GridDefinitions="Auto,*/*,*">

or

<Grid jio:GridEx.GridDefinitions="~,*/*,*">

Slash is a seprator for Row height values and Column width values.

These are the same when using RowDefinitions and ColumnDefinitions

<Grid jio:GridEx.RowDefinitions="Auto,*" jio.GridEx.ColumnDefintions="*,*">

Another example
Create columns only. Use / character before the column width values.

<Grid jio:GridEx.GridDefinitions="/~ *" />

Create rows only. Notice I did not add any / character. This means I am only adding rows

<Grid jio:GridEx.GridDefinitions="~ * ~" />

RowColumn
Set your element row, column position, or span
Normally, what you are going to do when setting your element to a specific Row or Column is.

<Grid Grid.Row="0" Grid.Column="1">

You can use RowColumn property like so

<Grid jio:GridEx.RowColumn="0/1">

What if we are spanning our element to a number of columns or rows. Normally you would do this

<Grid Grid.Column="0" Grid.ColumnSpan="3">

Using RowColumn, we can do this

<Grid jio:GridEx.RowColumn="/0 3">

Notice the / character again before the actual values. This means we are only setting the values for Column only.

Another example

<Grid Grid.Row="2" Grid.RowSpan="3" Grid.Column="2">

Using RowColumn, we can do this

<Grid jio:GridEx.RowColumn="2 3/2" >

Just simple as that.

Give it a try!

<Grid>
  <Grid jio:GridEx.GridDefinitions="~ * ~">
    <Grid Grid.Row="0" BackgroundColor="Red">
      <Label Text="Header" Margin="5" />
    </Grid>

    <Grid Grid.Row="1" BackgroundColor="Green">
      <Grid jio:GridEx.GridDefinitions="/* 2*">
        <Grid Grid.Column="0">
          <Label Text="Content" />
        </Grid>

        <Grid Grid.Column="1" BackgroundColor="Yellow">
          <Grid jio:GridEx.GridDefinitions="* * 3*">
            <Grid BackgroundColor="Accent" Grid.Row="0">
              <Label Text="Content 2" />
            </Grid>
            <Grid BackgroundColor="AliceBlue" Grid.Row="1">
              <Label Text="Content 3" />
            </Grid>
            <Grid BackgroundColor="AntiqueWhite" 
                Grid.Row="2"
                jio:GridEx.GridDefinitions="* * / * *"
                >

              <Grid jio:GridEx.RowColumn="0/0" BackgroundColor="Cyan" />
              <Grid jio:GridEx.RowColumn="0/1" BackgroundColor="Magenta" />
              <Grid jio:GridEx.RowColumn="1/0 2" BackgroundColor="Yellow">
                <Label Text="Span" VerticalOptions="Center" HorizontalOptions="Center" />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Grid>

    <Grid Grid.Row="2" BackgroundColor="Blue">
      <Label Text="Footer"  Margin="5"  />
    </Grid>
  </Grid>
</Grid>

Received some DM in my Twitter if I can release the same for WPF and UWP. Wish granted. WPF version is now available at NuGet as JaraIOGridControlAbstractionsWPF

Here's the sample