後續順序會依序由上而下或由左而右，需視方向屬性的值而定。
WrapPanel 位置子控制基於方向，水平方向（預設）位置控制從左到右，垂直方向位置控制從上到下，當達到最大寬度或高度時，控制鍵會自動根據方向建立列或欄。
可透過 HorizontalSpacing 和 VerticalSpacing 屬性自動在項目間新增間距。 當 Orientation 是水平時，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!;
}
}
}
Examples
以下是新增 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>
