WrapLayoutSample.xaml

<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
<Page x:Class="PrimitivesExperiment.Samples.WrapLayoutSample"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:attributes="using:CommunityToolkit.Tooling.SampleGen.Attributes"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:PrimitivesExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="WrapTemplate"
                      x:DataType="local:ColorItem">
            <Border Width="{x:Bind Width}"
                    Height="48"
                    CornerRadius="{StaticResource ControlCornerRadius}">
                <Border.Background>
                    <SolidColorBrush Color="{x:Bind Color}" />
                </Border.Background>
                <TextBlock Margin="6,4,4,4"
                           FontSize="16"
                           Text="{x:Bind Index}" />
            </Border>
        </DataTemplate>
    </Page.Resources>

    <Grid>
        <muxc:ItemsRepeater x:Name="WrapRepeater"
                            ItemTemplate="{StaticResource WrapTemplate}"
                            ItemsSource="{x:Bind ColorsCollection, Mode=OneWay}">
            <muxc:ItemsRepeater.Layout>
                <controls:WrapLayout x:Name="Wrap"
                                     HorizontalSpacing="{x:Bind HorizontalSpacing, Mode=OneWay}"
                                     VerticalSpacing="{x:Bind VerticalSpacing, Mode=OneWay}" />
            </muxc:ItemsRepeater.Layout>
        </muxc:ItemsRepeater>
    </Grid>
</Page>