StaggeredPanel

StaggeredPanel permite el diseño de elementos en un enfoque de columna donde se agregará un elemento a la columna que haya usado la menor cantidad de espacio.

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

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

using CommunityToolkit.WinUI.Controls;
using Windows.UI;

namespace PrimitivesExperiment.Samples;

[ToolkitSampleNumericOption("DesiredColumnWidth", initial: 250, min: 50, max: 400, step: 1, Title = "DesiredColumnWidth")]
[ToolkitSampleNumericOption("ColumnSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "ColumnSpacing")]
[ToolkitSampleNumericOption("RowSpacing", initial: 5, min: 0, max: 50, step: 1, Title = "RowSpacing")]

[ToolkitSample(id: nameof(StaggeredPanelSample), "StaggeredPanel", description: $"A sample for showing how to create and use a {nameof(StaggeredPanel)}.")]
public sealed partial class StaggeredPanelSample : Page
{
    public ObservableCollection<ColorItem> ColorsCollection = new();
    public Random random;

    public StaggeredPanelSample()
    {
        this.InitializeComponent();
        random = new Random(DateTime.Now.Millisecond);
        for (int i = 0; i < random.Next(100, 200); i++)
        {
            var item = new ColorItem { Index = i, Width = random.Next(50, 250), Height = random.Next(50, 250), Color = Color.FromArgb(255, (byte)random.Next(0, 255), (byte)random.Next(0, 255), (byte)random.Next(0, 255)) };
            ColorsCollection.Add(item);
        }
    }
}