Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/YauGoh/Xamarin.Responsive
Responsive layout for Xamarin Forms
https://github.com/YauGoh/Xamarin.Responsive
Last synced: 3 months ago
JSON representation
Responsive layout for Xamarin Forms
- Host: GitHub
- URL: https://github.com/YauGoh/Xamarin.Responsive
- Owner: YauGoh
- Created: 2020-11-29T04:50:52.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-02-07T04:25:38.000Z (almost 4 years ago)
- Last Synced: 2024-11-04T07:39:23.401Z (3 months ago)
- Language: C#
- Homepage:
- Size: 777 KB
- Stars: 12
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- awesome-xamarin-forms - Xamarin.Responsive ★10
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.
# 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.
```
```