后续排序按照从上至下或从右至左的顺序进行，具体取决于方向属性的值。
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>
