Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/YauGoh/Xamarin.Responsive

Responsive layout for Xamarin Forms
https://github.com/YauGoh/Xamarin.Responsive

Last synced: 29 days ago
JSON representation

Responsive layout for Xamarin Forms

Awesome Lists containing this project

README

        

# Introduction

Devices come in all sorts of sizes. We need a solution to make application development easier when targetting solutions that support devices ranging from mobile to desktop devices.

Here is a responsive grid inspired by the original responsive grid from [Twitter Bootstrap](https://getbootstrap.com/docs/4.0/layout/grid/). It will allow you to create a single solution with a single layout that responds when opened from a Mobile, Tablet or Desktop, or when the window is resized small to large.

Markdown Monster icon

Markdown Monster icon

Markdown Monster icon

# Getting started

Install from package manager

```
Install-Package Xamarin.Responsive
```

Install from dot cli

```
dotnet add package Xamarin.Responsive
```

# Responsive Breakpoints

Layout is managed base on the the View Size of the main application's window. Just like Bootstrap's responsive grid we define a layout as being:

- Extra small (Xs) - Application windows with a width <= 576 pixels
- Small (Sm) - Application windows with a width > 576 pixels but <= 768 pixels
- Medium (Md) - Application windows with a width > 768 pixels but <= 996 pixels
- Large (Lg) - Application windows with a width > 996 pixels but <= 1024 pixels
- Extra Large (Xl) - Application windows with a width > 1024 pixels

# Import Xamarin.Responsive namespace

Import the responsive namespace into your XAML.

```

...

```

# Samples

## Simple - Mobile to Large Devices

Mobile devices display full width (12 or 12 columns).
Small devices display half width (6 of 12 columns).
Medium devices display third width (4 of 12 columns).
Large devices display one quarter (3 of 12 columns).

```







```

## Setting individual columns settings

By default all controls will use the width of 1 of 12 columns. If we want a control or label to fill the width on our screen when rendered on a phone, but fill only 25% of the screen otherwise (medium to extra large devices).

```



```

## Changing number of columns in Container

By default the grid is 12 Columns, you can change this in the Container control.

```

...

```

## Responsively set control properties

Control properties such as Text, Visiblility can be set responsively.

eg.

- Setting the text of a Label

```





```

- Setting the margin

```





```

- You can default a Value and Selectively set values for specific View Sizes.

```





```

## Aspect Ratio

Maintain a specific aspect ratio for a control.

```





```