Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/Intelliabb/XamCustomLayouts

Xamarin.Forms Custom Layouts - Cards
https://github.com/Intelliabb/XamCustomLayouts

card custom forms layouts xamarin xaml

Last synced: 29 days ago
JSON representation

Xamarin.Forms Custom Layouts - Cards

Awesome Lists containing this project

README

        

# Card View Using Custom Layouts In Xamarin.Forms
This sample shows how to create a custom layout (container) that can be reused in the app and can take any `View` as child.

Download NuGet Package: https://www.nuget.org/packages/IntelliAbb.Xamarin.Controls

Blog post: https://intelliabb.com/2018/03/21/card-view-for-xamarin-forms-using-custom-layouts/

## Card View

### iOS

![iOS](/Screenshots/ios.png)

### Android

![Android](/Screenshots/android.png)

## Parts
1. Icon
2. Title
3. Content View (`ContentPresenter`)
4. Action View (`ContentPresenter`)

All parts are optional. You can mix and match to your needs.

## Usage

### In XAML
Depending on where you place your custom layout/control, bring in the namespace, if needed.

`xmlns:controls="clr-namespace:XamCustomLayouts.Controls;assembly=XamCustomLayouts.Controls" `

then,
```






```

### In C#
```
var card = new ShadedCard {
Icon = "icon.png",
Title = "My Card",
ContentView = new StackLayout {
. . .
},
ActionView = new StackLayout {
. . .
},
};

// assuming you have a child-bearing container as parent,
Parent.Children.Add(card);
```

## MVVM Data Binding
If you are using MVVM in your Xamarin.Forms app (as you should :)), you will find that binding to a control inside a view that is child of this card view, the implicit bindings will not work as the child control does not know about the grandparent control (page) and it's binding context. So, you will have to explicitly bind to the page's binding context by simply doing the following,

1. Name your page. i.e. `<... x:Name="MyPage"/>`
2. Bind explicitly. i.e. ``

That is it. You just told your grand child control/view to bind to `MyPage`'s `BindingContext`, which is your `ViewModel`.

Enjoy!