WrapPanel

後続の順序は、Orientation プロパティの値に応じて、上から下または右から左に順番に行われます。

WrapPanel は、方向に基づいて子コントロールを配置します。水平方向 (既定) ではコントロールを左から右に配置し、垂直方向では上から下に配置します。また、最大幅または最大高さに達すると、方向に応じて新しい行または列が自動的に作成されます。

HorizontalSpacing プロパティと VerticalSpacing プロパティを使用して、項目間の間隔を自動的に追加できます。 [向き] が [水平] の場合、HorizontalSpacing は個々の項目間に均一な水平方向の間隔を追加し、VerticalSpacing は項目の各行間に均一な間隔を追加します。

[方向] が [縦] の場合、HorizontalSpacing は項目の各列間に均一な間隔を追加し、VerticalSpacing は個々の項目間に均一な垂直方向の間隔を追加します。

<!--  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.WrapPanelSample"
      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="PhotoTemplate">
            <Grid Width="{Binding Width}"
                  Height="{Binding Height}"
                  Margin="0">
                <Image HorizontalAlignment="Center"
                       Stretch="UniformToFill">
                    <Image.Source>
                        <BitmapImage DecodePixelHeight="200"
                                     UriSource="{Binding Thumbnail}" />
                    </Image.Source>
                </Image>
                <Border VerticalAlignment="Bottom">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0,1">
                            <GradientStop Offset="0" Color="Transparent" />
                            <GradientStop Offset="1" Color="#33000000" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock Margin="5,20,5,5"
                               VerticalAlignment="Bottom"
                               Foreground="White"
                               Text="{Binding Category}" />
                </Border>
            </Grid>
        </DataTemplate>
        <Style TargetType="ListViewItem">
            <!--  Change those values to change the WrapPanel's children alignment  -->
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="HorizontalContentAlignment" Value="Center" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="MinWidth" Value="0" />
            <Setter Property="MinHeight" Value="0" />
        </Style>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal"
                    Spacing="4">
            <Button Click="AddButton_Click"
                    Content="Add random sized image" />
            <Button Click="AddFixedBtn_Click"
                    Content="Add fixed sized image" />
            <Button Click="SwitchBtn_Click"
                    Content="Switch Orientation" />
        </StackPanel>
        <ListView Name="WrapPanelContainer"
                  Grid.Row="1"
                  IsItemClickEnabled="True"
                  ItemClick="ItemControl_ItemClick"
                  ItemTemplate="{StaticResource PhotoTemplate}"
                  ItemsSource="{x:Bind WrapPanelCollection, Mode=OneWay}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <controls:WrapPanel x:Name="sampleWrapPanel"
                                        Padding="12"
                                        HorizontalSpacing="{Binding HorizontalSpacing, ElementName=ThisSamplePage, Mode=OneWay}"
                                        VerticalSpacing="{Binding VerticalSpacing, ElementName=ThisSamplePage, Mode=OneWay}" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ListView>
    </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;

// TODO: Discuss with Uno folks about their own internal WrapPanel implementation.
using WrapPanel = CommunityToolkit.WinUI.Controls.WrapPanel;

namespace PrimitivesExperiment.Samples;

[ToolkitSampleNumericOption("HorizontalSpacing", initial: 5, min: 0, max: 200, step: 1, Title = "Horizontal Spacing")]
[ToolkitSampleNumericOption("VerticalSpacing", initial: 5, min: 0, max: 200, step: 1, Title = "VerticalSpacing")]

[ToolkitSample(id: nameof(WrapPanelSample), "WrapPanel", description: $"A sample for showing how to create and use a {nameof(WrapPanel)}.")]
public sealed partial class WrapPanelSample : Page
{
    private static readonly Random Rand = new Random();
    private ObservableCollection<PhotoDataItemWithDimension> WrapPanelCollection = new();

    public WrapPanelSample()
    {
        this.InitializeComponent();
    }

    private void ItemControl_ItemClick(object sender, ItemClickEventArgs e)
    {
        var item = e.ClickedItem as PhotoDataItemWithDimension;
        if (item == null)
        {
            return;
        }

        WrapPanelCollection.Remove(item);
    }

    private void AddButton_Click(object sender, RoutedEventArgs e)
    {
        WrapPanelCollection.Add(new PhotoDataItemWithDimension
        {
            Category = "Remove",
            Thumbnail = "ms-appx:///Assets/BigFourSummerHeat.jpg",
            Width = Rand.Next(60, 180),
            Height = Rand.Next(40, 140)
        });
    }

    private void AddFixedBtn_Click(object sender, RoutedEventArgs e)
    {
        WrapPanelCollection.Add(new PhotoDataItemWithDimension
        {
            Category = "Remove",
            Thumbnail = "ms-appx:///Assets/BigFourSummerHeat.jpg",
            Width = 150,
            Height = 100
        });
    }

    private void SwitchBtn_Click(object sender, RoutedEventArgs e)
    {
        if (WrapPanelContainer.FindDescendant<WrapPanel>() is WrapPanel sampleWrapPanel)
        {
            if (sampleWrapPanel.Orientation == Orientation.Horizontal)
            {
                sampleWrapPanel.Orientation = Orientation.Vertical;
                ScrollViewer.SetVerticalScrollMode(WrapPanelContainer, ScrollMode.Disabled);
                ScrollViewer.SetVerticalScrollBarVisibility(WrapPanelContainer, ScrollBarVisibility.Disabled);
                ScrollViewer.SetHorizontalScrollMode(WrapPanelContainer, ScrollMode.Auto);
                ScrollViewer.SetHorizontalScrollBarVisibility(WrapPanelContainer, ScrollBarVisibility.Auto);
            }
            else
            {
                sampleWrapPanel.Orientation = Orientation.Horizontal;
                ScrollViewer.SetVerticalScrollMode(WrapPanelContainer, ScrollMode.Auto);
                ScrollViewer.SetVerticalScrollBarVisibility(WrapPanelContainer, ScrollBarVisibility.Auto);
                ScrollViewer.SetHorizontalScrollMode(WrapPanelContainer, ScrollMode.Disabled);
                ScrollViewer.SetHorizontalScrollBarVisibility(WrapPanelContainer, ScrollBarVisibility.Disabled);
            }
        }
    }

    public class PhotoDataItemWithDimension : PhotoDataItem
    {
        public double Width { get; set; }
        public double Height { get; set; }
    }

    public class PhotoDataItem
    {
        public string? Title { get; set; }

        public string? Category { get; set; }

        public string? Thumbnail { get; set; }

        public override string ToString()
        {
            return Title!;
        }
    }
}

例示

WrapPanel コントロールを追加する次の例。

<Page ....
      xmlns:controls="using:CommunityToolkit.WinUI.Controls">

    <Grid Background="{StaticResource Brush-Grey-05}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button Name="HorizontalButton" Click="HorizontalButton_Click" Content="Add Horizontal Control" />
            <controls:WrapPanel Name="HorizontalWrapPanel" Grid.Row="1" Margin="2" />
        </Grid>

        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="50" />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button Name="VerticalButton" Click="VerticalButton_Click" Content="Add Vertical Control" />
            <controls:WrapPanel Name="VerticalWrapPanel" Grid.Row="1" Margin="2"
                                 VerticalSpacing="10" HorizontalSpacing="10" Orientation="Vertical" />
        </Grid>
    </Grid>
</Page>