Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
Subsequent ordering happens sequentially from top to bottom or from right to left, depending on the value of the Orientation property.
The WrapPanel position child controls based on orientation, horizontal orientation (default) positions controls from left to right and vertical orientation positions controls from top to bottom, and once the max width or height is reached the control automatically create row or column based on the orientation.
Spacing can be automatically added between items using the HorizontalSpacing and VerticalSpacing properties. When the Orientation is Horizontal, HorizontalSpacing adds uniform horizontal spacing between each individual item, and VerticalSpacing adds uniform spacing between each row of items.
When the Orientation is Vertical, HorizontalSpacing adds uniform spacing between each column of items, and VerticalSpacing adds uniform vertical spacing between individual items.
<!-- 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
The following example of adding WrapPanel Control.
<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>
Collaborate with us on GitHub
The source for this content can be found on GitHub, where you can also create and review issues and pull requests. For more information, see our contributor guide.
Windows Community Toolkit