Xamarin.Forms 動態產生檢視項目的 WrapView

在現在的 Xamarin.Forms 內建的控制項中，並沒有辦法針對動態產生的控制項，使用 XAML & ViewModel 來實現這樣的效果，因此，在這裡，參考了 XLabs 內提供的 WrapLayout，將其相關原始碼抽取出來，就可以實踐這樣的效果。

範例專案原始碼

在這個範例中，第1個 Row 中，將會顯示 View Model 內的35五筆資料，並且使用 DataTemplate 方式定義其要顯示的樣貌；不過，在這裡將會使用水平排列的方式來顯示。

在這個範例中，第2個 Row 中，將會顯示 View Model 內的35五筆資料，並且使用 DataTemplate 方式定義其要顯示的樣貌；不過，在這裡將會使用垂直排列的方式來顯示。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:local="clr-namespace:XFWrapLayout"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFWrapLayout.Views.MainPage"
             Title="MainPage">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <local:WrapView Grid.Row="0" ItemsSource="{Binding MyItems}" Orientation="Horizontal">
            <local:WrapView.ItemTemplate>
                <DataTemplate>
                    <StackLayout BackgroundColor="Blue" WidthRequest="40" HeightRequest="20" VerticalOptions="Fill" Padding="6, 6, 6, 6">
                        <Label Text="{Binding Name}" FontSize="Small" XAlign="Start" TextColor="White" VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                </DataTemplate>
            </local:WrapView.ItemTemplate>
        </local:WrapView>
        <local:WrapView Grid.Row="1" ItemsSource="{Binding MyItems}" Orientation="Vertical">
            <local:WrapView.ItemTemplate>
                <DataTemplate>
                    <StackLayout BackgroundColor="Red" WidthRequest="40" HeightRequest="20" VerticalOptions="Fill" Padding="6, 6, 6, 6">
                        <Label Text="{Binding Name}" FontSize="Small" XAlign="Start" TextColor="White" VerticalOptions="EndAndExpand"/>
                    </StackLayout>
                </DataTemplate>
            </local:WrapView.ItemTemplate>
        </local:WrapView>
    </Grid>
</ContentPage>