StaggeredPanelSample.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.StaggeredPanelSample"
      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:local="using:PrimitivesExperiment.Samples"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      x:Name="ThisSamplePage">

    <Page.Resources>
        <DataTemplate x:Key="StaggeredTemplate"
                      x:DataType="local:ColorItem">
            <Grid Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                  BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                  BorderThickness="1"
                  CornerRadius="{StaticResource ControlCornerRadius}">
                <Border Width="{x:Bind Width}"
                        Height="{x:Bind Height}"
                        Margin="4"
                        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>
            </Grid>
        </DataTemplate>
    </Page.Resources>


    <Grid>
        <GridView Name="GridView"
                  ItemTemplate="{StaticResource StaggeredTemplate}"
                  ItemsSource="{x:Bind ColorsCollection, Mode=OneWay}">

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <controls:StaggeredPanel ColumnSpacing="{Binding ColumnSpacing, ElementName=ThisSamplePage, Mode=OneWay}"
                                             DesiredColumnWidth="{Binding DesiredColumnWidth, ElementName=ThisSamplePage, Mode=OneWay}"
                                             RowSpacing="{Binding RowSpacing, ElementName=ThisSamplePage, Mode=OneWay}" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </Grid>
</Page>