Xamarin.Forms FlexLayout Major Steps

FlexLayoutOptions.workbook

uti	id	title	platforms	packages
com.xamarin.workbook	7e650a9b-4216-4b28-945c-217cd85530b2	FlexLayout Options	Android	id version Xamarin.Forms 3.0.0.482510

FlexLayout Options

Notebook for exploring FlexLayout options.

#r "Xamarin.Forms.Core"
#r "Xamarin.Forms.Xaml"
#r "Xamarin.Forms.Platform"

using System;
using Xamarin.Forms;

var page = new ContentPage();
Application.Current.MainPage = page;

Carousel App

The basic idea is that for every option, just add a new page to the Carousel.

CarouselPage Children must be of type ContentPage, so convenience method AddLayoutExample to avoid confusion:

var rootPage = new CarouselPage();
Application.Current.MainPage = rootPage;

void AddLayoutExample(FlexLayout fl, string text) 
{
    var outer = new FlexLayout();
    outer.Direction = FlexDirection.Column;
    outer.Children.Add(fl);
    FlexLayout.SetGrow(fl, 1);

    var lbl = new Label {
        Text = text,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalTextAlignment = TextAlignment.Center,
        FontSize = 24, 
        BackgroundColor = Color.LightGray
    };
    FlexLayout.SetBasis(lbl, 60);
    outer.Children.Add(lbl);

    rootPage.Children.Add(new ContentPage { Content = outer });
}

Helper function for creating content.

View MakeView(Color c, string t) {
    var v = new Label
    {
        Text = t,
        BackgroundColor = c,
        VerticalTextAlignment = TextAlignment.Center,
        HorizontalTextAlignment = TextAlignment.Center,
        FontSize = 72
    };
    return v;
}

(FlexLayout, IEnumerable<View>) MakeTriple()
{
    var layout = new FlexLayout();
    var A = MakeView(Color.Cyan, "a");
    var B = MakeView(Color.Magenta, "b");
    var C = MakeView(Color.Yellow, "c");

        foreach(var v in new[] { A, B,C })
        {
            layout.Children.Add(v);
        }
        
        layout.Direction = FlexDirection.Column;

        return (layout, new[] {A, B, C});
}

Helper function for iterating over an enum and creating a new FlexLayout with that value assigned as appropriate:

IEnumerable<T> EnumerateEnum<T>() 
{ 
    foreach(var enumVal in Enum.GetValues(typeof(T)).Cast<T>()) yield return enumVal;
}

// We do not recognize `where T : System.Enum` 
IEnumerable<(T, FlexLayout, IEnumerable<View>)> LayoutsForEnumerableOption<T>(Action<FlexLayout, T> assignment) 
{
    foreach(var enumVal in EnumerateEnum<T>())
    {
        var (l, vs) = MakeTriple();
        assignment(l, enumVal);

        yield return (enumVal, l, vs);
    }
}

Helper function for debugging nested layouts:

var colors = new[] { Color.AliceBlue, Color.BlanchedAlmond, Color.LightCoral, Color.LavenderBlush };
int i = 0;
Color NextColor() 
{
    return colors[i++ % colors.Length];
}

AlignItems

foreach(var (alignVal, p,_) in LayoutsForEnumerableOption<FlexAlignItems>((l,val) => l.AlignItems = val)) AddLayoutExample(p, $"AlignItems = FlexAlignItems.{alignVal} ");

Direction

foreach(var (val, p,_) in LayoutsForEnumerableOption<FlexDirection>((l,val) => l.Direction = val)) AddLayoutExample(p, $"Direction = FlexDirection.{val} ");

JustifyContent

foreach(var (val, p,_) in LayoutsForEnumerableOption<FlexJustify>((l,val) => l.JustifyContent = val)) AddLayoutExample(p, $"JustifyContent = FlexJustify.{val} ");