Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tobias-oschmann/ResponsiveLayout
A responsive LayoutView for Xamarin.Forms where you can define multiple layout templates for different widths, platforms or device types (Idioms).
https://github.com/tobias-oschmann/ResponsiveLayout
layout responsive responsive-layout xamarin xamarin-forms
Last synced: 29 days ago
JSON representation
A responsive LayoutView for Xamarin.Forms where you can define multiple layout templates for different widths, platforms or device types (Idioms).
- Host: GitHub
- URL: https://github.com/tobias-oschmann/ResponsiveLayout
- Owner: tobias-oschmann
- License: mit
- Created: 2019-10-07T18:57:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-10T20:24:33.000Z (about 5 years ago)
- Last Synced: 2024-08-03T23:24:08.405Z (4 months ago)
- Topics: layout, responsive, responsive-layout, xamarin, xamarin-forms
- Language: C#
- Homepage:
- Size: 9.34 MB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-xamarin-forms - ResponsiveLayout ★10
README
# **ResponsiveLayout**
A responsive LayoutView for Xamarin.Forms where you can define multiple layout templates for different widths, platforms or device types (Idioms).
Tested on Android and UWP. iOS might also work.
## NuGet Installation
https://www.nuget.org/packages/ResponsiveLayout.Xamarin.Forms
Install-Package ResponsiveLayout.Xamarin.Forms
## Properties
### **EnableContentCaching**: bool
If this option is enabled, the **ResponsiveLayout** will cache the created contents for each requested template.
This is especially useful if you use the LayoutMode "Width" on a desktop application.
### **LayoutMode**: ResponsiveLayoutMode
Determines which DataTemplates will be used.
Available values are: **[Width](#LayoutMode: Width)**, **[Idiom](#LayoutMode: Idiom)**, **[Platform](#LayoutMode: Platform)** and **[Orientation](#LayoutMode: Orientation)**.
---
**Here are some examples:**
# LayoutMode: Width
The **ResponsiveLayout** will choose one of the given templates depending on the width of the main page.
You don't have to sepcify a template for every size (XS - XL), the **ResponsiveLayout** takes the next appropriate template.
## Templates
- **ContentTemplateXS** - Width < 576px
- **ContentTemplateSM** - Width >= 576px
- **ContentTemplateMD** - Width >= 768px
- **ContentTemplateLG** - Width >= 992px
- **ContentTemplateXL** - Width >= 1200px
# LayoutMode: Idiom
The **ResponsiveLayout** takes the template for the current Device Idiom.
If you don't have a specific template for an Idiom, the **ResponsiveLayout** uses the default template.
## Templates
- **ContentTemplateIdiomDefault** - The default template for this mode.
- **ContentTemplateIdiomPhone** - TargetIdiom:Phone
- **ContentTemplateIdiomTablet** - TargetIdiom:Tablet
- **ContentTemplateIdiomDesktop** - TargetIdiom:Desktop
- **ContentTemplateIdiomTV** - TargetIdiom:TV
- **ContentTemplateIdiomWatch** - TargetIdiom:Watch
# LayoutMode: Platform
The **ResponsiveLayout** uses the appropriate template for the current RuntimePlatform.
If you don't have a specific template for a Platform, the **ResponsiveLayout** uses the default template.
## Templates
- **ContentTemplatePlatformDefault** - The default template for this mode.
- **ContentTemplatePlatformIOS** - Device.iOS
- **ContentTemplatePlatformAndroid** - Device.Android
- **ContentTemplatePlatformUWP** - Device.UWP
- **ContentTemplatePlatformMacOS** - Device.MacOS
- **ContentTemplatePlatformGTK** - Device.GTK
- **ContentTemplatePlatformTizen** - Device.Tizen
- **ContentTemplatePlatformWPF** - Device.WPF
# LayoutMode: Orientation
The **ResponsiveLayout** uses the appropriate template for the current device orientation.
## Templates
- **ContentTemplatePortrait** - Height > Width
- **ContentTemplateLandscape** - Width > Height
