https://github.com/Intelliabb/XamCustomLayouts

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

card custom forms layouts xamarin xaml

Last synced: 2 months ago
JSON representation

Xamarin.Forms Custom Layouts - Cards

• Host: GitHub
• URL: https://github.com/Intelliabb/XamCustomLayouts
• Owner: Intelliabb
• License: apache-2.0
• Created: 2018-03-19T03:53:22.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-04T03:28:51.000Z (about 6 years ago)
• Last Synced: 2024-08-03T23:24:44.103Z (5 months ago)
• Topics: card, custom, forms, layouts, xamarin, xaml
• Language: C#
• Size: 294 KB
• Stars: 18
• Watchers: 3
• Forks: 11
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-xamarin-forms - XamCustomLayouts ★18 - Cards. (UI)

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!