WrapLayout and RepeatableStackLayout for Xamarin.Forms
Tags: xamarinforms, xamarin
Published: 2018-01-25 07:49:29

---
title: WrapLayout and RepeatableStackLayout for Xamarin.Forms
published: true
description: 
tags: Xamarin.Forms,Xamarin
---

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
{% youtube 9kE-OA9jz8c %}
	
### RepeatableStack
{% youtube pKUF1dDYvtE %}

## Repository

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

## Nuget Package

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

### Installation

```bash
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.

```csharp
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

```xml
<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

```xml
<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

```xml
<!-- 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>
```