C# Shell
Clone or download
Latest commit 31e478e May 26, 2018
Permalink
Failed to load latest commit information.
AiForms.Layouts Release 1.1.0 May 26, 2018
Sample Release 1.1.0 May 26, 2018
images Release 0.0.1 Apr 10, 2017
nuget Release 1.1.0 May 26, 2018
.gitignore Fix issue #15 Mar 20, 2018
AiForms.Layouts.sln Bug Fix, Add RepeatableStack Jul 12, 2017
LICENSE.txt having roughly complete again. Feb 10, 2017
README.md Release 1.1.0 May 26, 2018

README.md

AiForms.Layouts for Xamarin.Forms

This is a collection of Xamarin.Forms custom layouts

Referenced source code

Features

Demo

https://twitter.com/muak_x/status/830061279330996224

Nuget Installation

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

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);
}

RepeatableFlex

This layout is a FlexLayout corresponding to DataTemplate and DataTemplateSelector.

Parameters

  • ItemsSource
  • ItemTemplate

How to write with Xaml

<ScrollView Orientation="Virtical" HeightRequest="86">
<al:RepeatableFlex Direction="Row" Wrap="Wrap" AlignItems="Start" JustifyContent="Start" ItemsSource="{Binding BoxList}">
	<al:RepeatableFlex.ItemTemplate>
		<DataTemplate>
			<ContentView BackgroundColor="{Binding Color}" WidthRequest="80" HeightRequest="80" Padding="3" />
		</DataTemplate>
	</al:RepeatableFlex.ItemTemplate>
</al:RepeatableFlex>
</ScrollView>

WrapLayout

This Layout performs wrapping on the boundaries.

By Flex Layout having come, there is seldom opportunity using this layout. But it can be used when you want to arrange uniformly each items depending on screen width or make it square.

Parameters

  • Spacing
    • added between elements
  • UniformColumns
    • number for uniform child width (default 0)
    • If it is 0,it will obey WidthRequest value.
    • If it is more than 0 ,a child width will be width which divide parent width by this number.
  • IsSquare
    • If it is true,it make item height equal to item width when UniformColums > 0 (default false)

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

This Layout is WrapLayout corresponding to DataTemplate and DataTemplateSelector.

Parameters

  • ItemTapCommandProperty
    • Command invoked when a item is tapped.
  • ItemsSource
  • ItemTemplate

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

This layout is a StackLayout corresponding to DataTemplate and DataTemplateSelector.

Parameters

  • ItemsSource
  • ItemTemplate

How to write with 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>

Contributors

License

MIT Licensed.