https://github.com/matthewrdev/Xamarin.Forms.GridLocationExtension

Specify grid locations by name for simpler, more maintainable XAML.
https://github.com/matthewrdev/Xamarin.Forms.GridLocationExtension

Last synced: 29 days ago
JSON representation

Specify grid locations by name for simpler, more maintainable XAML.

• Host: GitHub
• URL: https://github.com/matthewrdev/Xamarin.Forms.GridLocationExtension
• Owner: matthewrdev
• License: mit
• Created: 2020-12-22T04:23:52.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-22T22:52:21.000Z (almost 4 years ago)
• Last Synced: 2024-08-03T23:25:46.534Z (4 months ago)
• Language: C#
• Homepage:
• Size: 601 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-xamarin-forms - Xamarin.Forms.GridLocationExtension ★4

README

        
# Xamarin.Forms Grid Markup Extension

**🚨Experimental🚨**.

Specify grid locations by name for simpler, more maintainable XAML.

**Before**

```

```

**After**

```

```

See:

 * [GridLocationExtension](GridLocationMarkupExtension/GridLocationExtension.cs)

 * [GridSpanExtension](GridLocationMarkupExtension/GridSpanExtension.cs)

 ![Using the GridLocation and GridSpan markup extensions](img/example-image.png)

## The Problem With Grids In Xamarin.Forms

Grids, while powerful, have one fundamental drawback; we place controls using 0-based indices. Consider the following code:

```

    

        

        

        

    

     

     

     

     

```

Each time we place a control in the grid, we do so using a 0-based location. This has a few problems:

 * Firstly, we can accidentally use an index not declared in the `RowDefinitions/ColumnDefinitions` of the grid, creating a rendering bug.

 * Secondly, if we add or remove a row/column, we now need to update the `RowDefinitions/ColumnDefinitions` and all affected indices in the grid.

 * Lastly, it is difficult to tell if we have correctly placed our control in the grid when looking at syntax such as `Grid.Row="1"`. There is a significant amount of thinking required to validate this location.

To solve these issues, this repository introduces two new markup extensions that allow grid locations to be referenced by name:

 * Use the `GridLocationExtension` to lookup the index of a named row or column in XAML: `Grid.Row={local:GridLocation namedRow}`.

 * Use the `GridSpanExtension` to calculate the span between two named rows or columns in XAML: `Grid.Row={local:GridSpan From=startRow, To=endRow}`.

These extensions require that each row and column definition includes an `x:Name` attribute to expose it to the extension. For example: ``.

Here is an example these extensions applied to the previous code sample:

```

    

        

        

        

    

     

     

     

     

```

There are a few benefits here:

 * Each row/column definition is now documented via the `x:Name` attribute.

 * As rows/columns are now resolved at runtime via the `GridLocation` extension, we can freely move and delete rows/columns without needing to readjust indices and spans.

 * We can use `GridSpan` extensions `From` and `To` to easily calculate the correct spans through names. This reduces code complexity and makes it very clear what the intended behaviour of a span is.

If you like this work and would like to see it continue, please raise an issue to start a discussion. 😊

## Disclaimer

While stable and tested, it is **not** recommended that you use this code in your production apps for the following reasons:

 * These extensions do not have complete API documentation.

 * The extensions have no error logging to assist you in diagnosing runtime issues.

 * The extensions use reflection to perform the location and span calculations. This may have adverse runtime performance impacts.

 * The extensions execute a Xamarin.Forms internal API with the use of reflection. Unless Xamarin.Forms exposes the relevant APIs, this methodology may break at any point in the future.