WrapPanel

Nachfolgende Sortierung erfolgt sequenziell von oben nach unten oder von rechts nach links, je nach Wert der Orientation-Eigenschaft.

Das WrapPanel positioniert untergeordnete Steuerelemente abhängig von der Ausrichtung: Bei horizontaler Ausrichtung (Standardeinstellung) werden die Steuerelemente von links nach rechts angeordnet, bei vertikaler Ausrichtung von oben nach unten. Sobald die maximale Breite bzw. Höhe erreicht ist, erstellt das Steuerelement abhängig von der Ausrichtung automatisch eine neue Zeile oder Spalte.

Der Abstand kann automatisch zwischen Elementen mithilfe der Eigenschaften HorizontalSpacing und VerticalSpacing hinzugefügt werden. Wenn die Ausrichtung horizontal ist, fügt HorizontalSpacing einen gleichmäßigen horizontalen Abstand zwischen jedem einzelnen Element hinzu, und VerticalSpacing fügt einen gleichmäßigen Abstand zwischen jeder Zeile von Elementen hinzu.

Wenn die Ausrichtung vertikal ist, fügt HorizontalSpacing einen gleichmäßigen Abstand zwischen jeder Spalte von Elementen hinzu, und VerticalSpacing fügt einen gleichmäßigen vertikalen Abstand zwischen einzelnen Elementen hinzu.

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

Beispiele

Das folgende Beispiel für das Hinzufügen eines WrapPanel-Steuerelements.

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