WrapLayout and RepeatableStackLayout for Xamarin.Forms
Kamu
Posted on January 25, 2018
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>
Posted on January 25, 2018
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
May 16, 2023
