WrapLayout and RepeatableStackLayout for Xamarin.Forms

For now, Xamarin.Forms hasn't a Layout which is wrapped on view boundary such as WPF WrapLayout.

That's why I made the layout library named AiForms.Layout.

Demo

RepeatableWrapLayout

RepeatableStack

Repository

https://github.com/muak/AiForms.Layouts

Nuget Package

https://www.nuget.org/packages/AiForms.Layouts/

Installation

Install-Package AiForms.Layouts

You need to install this package to .NETStandard / PCL project and each platform project.

iOS

If you don't use XamlCompilationOptions.Compile, need to write following code in AppDelegate.cs; Otherwise needn't.

public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    global::Xamarin.Forms.Forms.Init();

    AiForms.Layouts.LayoutsInit.Init();  //need to write here

    LoadApplication(new App(new iOSInitializer()));

    return base.FinishedLaunching(app, options);
}

Overview

Wraplayout

WrapLayout horizontally arranges an element, automatically wraps at parent view boundary.
In addition to wrapping function, there are functions that each element width is automatically made uniform width by specifying the number of elements in a row.

Parameters

• Spacing
  • Margin between elements.
• UniformColumns
  • Specifying more than 0, a child width will be width which divide parent width by this number.
• IsSquare
  • Specifying true, a child height will be equal to its width.

How to write with Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:l="clr-namespace:AiForms.Layouts;assembly=AiForms.Layouts"
        x:Class="Sample.Views.MainPage">
    <StackLayout>
        <l:WrapLayout Spacing="4" UniformColumns="3" IsSquare="true" HorizontalOptions="FillAndExpand">
            <BoxView Color="Red" />
            <BoxView Color="Blue" />
            <BoxView Color="Green" />
            <BoxView Color="Black" />
            <BoxView Color="Yellow" />
        </l:WrapLayout>
    </StackLayout>
</ContentPage>

RepeatableWrapLayout

RepeatableWrapLayout is a WrapLayout corresponded to DataTemplate and DataTemplateSelector.

Parameters

• ItemTapCommandProperty
  • Command invoked when an element is tapped.
• ItemsSource
  • What is like ListView ItemsSource.
• ItemTemplate
  • What is like ListView ItemTemplate.

How to write to Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:l="clr-namespace:AiForms.Layouts;assembly=AiForms.Layouts"
        x:Class="Sample.Views.MainPage">
    <StackLayout>
        <ScrollView HorizontalOptions="FillAndExpand">
            <l:RepeatableWrapLayout
                ItemTapCommand="{Binding TapCommand}"
                ItemsSource="{Binding BoxList}"
                Spacing="3" UniformColumns="{Binding UniformColumns}"
                IsSquare="{Binding IsSquare}" >
                <l:RepeatableWrapLayout.ItemTemplate>
                    <DataTemplate>
                        <StackLayout BackgroundColor="{Binding Color}" >
                            <Label
                                VerticalTextAlignment="Center" HorizontalTextAlignment="Center"
                                Text="{Binding Name}"  />
                        </StackLayout>
                    </DataTemplate>
                </l:RepeatableWrapLayout.ItemTemplate>
            </l:RepeatableWrapLayout>
        </ScrollView>
    </StackLayout>
</ContentPage>

RepeatableStack

RepeatableStack is a StackLayout corresponded to DataTemplate and DataTemplateSelector.

Parameters

• ItemsSource
• ItemTemplate

How to write to Xaml

<!-- Horizontal -->
<ScrollView Orientation="Horizontal" HeightRequest="86">
<al:RepeatableStack Orientation="Horizontal" ItemsSource="{Binding BoxList}" HeightRequest="86">
    <al:RepeatableStack.ItemTemplate>
        <DataTemplate>
            <ContentView BackgroundColor="{Binding Color}" WidthRequest="80" HeightRequest="80" Padding="3" />
        </DataTemplate>
    </al:RepeatableStack.ItemTemplate>
</al:RepeatableStack>
</ScrollView>

<!-- Vertical -->
<ScrollView>
<al:RepeatableStack Orientation="Vertical" ItemsSource="{Binding BoxList}">
    <al:RepeatableStack.ItemTemplate>
        <DataTemplate>
            <ContentView BackgroundColor="{Binding Color}" WidthRequest="80" HeightRequest="80" Padding="3" />
        </DataTemplate>
    </al:RepeatableStack.ItemTemplate>
</al:RepeatableStack>
</ScrollView>

Comments

[rag19102]

How can I get data when I click the item using TapGestureRecognizer