kamulog

xamarin.formsのネタなど

AiForms.LayoutsにDataTemplateに対応したStackLayoutを追加しました。

AiForms.LayoutsというXamarin.FormsのCustomLayoutをパッケージしているものがあるのですが、そこに今更すぎますが、RepeatableStackというDataTemplateに対応したStackLayoutを追加しました。
個人でも仕事でも何かと使う機会が多かったので、わざわざ作るのが面倒だという場合に…

リポジトリ

github.com

Nuget

www.nuget.org

Install-Package AiForms.Layouts

PCLだけにインストールでOKです。

本体の紹介記事

kamusoft.hatenablog.jp

RepeatableStack

StackLayoutにItemsSourceとItemTemplateプロパティを追加しただけのものです。

Xaml使用例

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:al="clr-namespace:AiForms.Layouts;assembly=AiForms.Layouts"
        x:Class="Sample.Views.MainPage">
    <StackLayout>
        <!-- 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>
    </StackLayout>
</ContentPage>

デモ

f:id:kamusoft:20170713164827g:plain

動的に追加するときになんかちらつきますが細かいことは気にしないでくださいw