Add new WrapLayout and StaggeredLayout controls #3160
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" | ||
| xmlns:winui="using:Microsoft.UI.Xaml.Controls" | ||
| mc:Ignorable="d"> | ||
|
|
||
| <Page.Resources> | ||
| <DataTemplate x:Key="StaggeredTemplate"> | ||
| <Grid Background="{ThemeResource Brush-Grey-04}"> | ||
| <Border Width="{Binding Width}" Height="{Binding Height}"> | ||
| <Border.Background> | ||
| <SolidColorBrush Color="{Binding Color}"/> | ||
| </Border.Background> | ||
| <TextBlock Text="{Binding Index}" FontSize="20"/> | ||
| </Border> | ||
| </Grid> | ||
|
|
||
| </DataTemplate> | ||
| </Page.Resources> | ||
|
|
||
| <Grid Padding="48"> | ||
| <ScrollViewer > | ||
| <winui:ItemsRepeater x:Name="StaggeredRepeater" | ||
| ItemTemplate="{StaticResource StaggeredTemplate}"> | ||
| <winui:ItemsRepeater.Layout> | ||
| <controls:StaggeredLayout DesiredColumnWidth="@[DesiredColumnWidth:Slider:250:50-400]" | ||
| ColumnSpacing="@[ColumnSpacing:Slider:5:0-50]@" | ||
| RowSpacing="@[RowSpacing:Slider:5:0-50]@"/> | ||
| </winui:ItemsRepeater.Layout> | ||
| </winui:ItemsRepeater> | ||
| </ScrollViewer> | ||
| </Grid> | ||
| </Page> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <Page | ||
| x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.StaggeredLayoutPage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages.StaggeredLayout" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| mc:Ignorable="d" | ||
| Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> | ||
|
|
||
| <Grid> | ||
|
|
||
| </Grid> | ||
| </Page> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| // 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 System; | ||
| using System.Collections.ObjectModel; | ||
| using Microsoft.Toolkit.Uwp.UI.Extensions; | ||
| using Microsoft.UI.Xaml.Controls; | ||
| using Windows.UI; | ||
| using Windows.UI.Xaml; | ||
| using Windows.UI.Xaml.Controls; | ||
|
|
||
| namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages | ||
| { | ||
| /// <summary> | ||
| /// An empty page that can be used on its own or navigated to within a Frame. | ||
| /// </summary> | ||
| public sealed partial class StaggeredLayoutPage : Page, IXamlRenderListener | ||
| { | ||
| private ObservableCollection<Item> _items = new ObservableCollection<Item>(); | ||
| private Random _random; | ||
|
|
||
| public StaggeredLayoutPage() | ||
| { | ||
| this.InitializeComponent(); | ||
|
|
||
| _random = new Random(DateTime.Now.Millisecond); | ||
| for (int i = 0; i < _random.Next(1000, 5000); i++) | ||
| { | ||
| var item = new Item { Index = i, Width = _random.Next(50, 250), Height = _random.Next(50, 250), Color = Color.FromArgb(255, (byte)_random.Next(0, 255), (byte)_random.Next(0, 255), (byte)_random.Next(0, 255)) }; | ||
| _items.Add(item); | ||
| } | ||
| } | ||
|
|
||
| public void OnXamlRendered(FrameworkElement control) | ||
| { | ||
| var repeater = control.FindChildByName("StaggeredRepeater") as ItemsRepeater; | ||
|
|
||
| if (repeater != null) | ||
| { | ||
| repeater.ItemsSource = _items; | ||
| } | ||
| } | ||
|
|
||
| private class Item | ||
| { | ||
| public int Index { get; internal set; } | ||
|
|
||
| public int Width { get; internal set; } | ||
|
|
||
| public int Height { get; internal set; } | ||
|
|
||
| public Color Color { get; internal set; } | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" | ||
| xmlns:winui="using:Microsoft.UI.Xaml.Controls" | ||
| mc:Ignorable="d"> | ||
|
|
||
| <Page.Resources> | ||
| <DataTemplate x:Key="WrapTemplate"> | ||
| <Border Width="{Binding Width}" Height="50"> | ||
| <Border.Background> | ||
| <SolidColorBrush Color="{Binding Color}"/> | ||
| </Border.Background> | ||
| <TextBlock Text="{Binding Index}" FontSize="20"/> | ||
| </Border> | ||
| </DataTemplate> | ||
| </Page.Resources> | ||
|
|
||
| <Grid Padding="48"> | ||
| <ScrollViewer > | ||
| <winui:ItemsRepeater x:Name="WrapRepeater" | ||
| Background="{ThemeResource Brush-Grey-04}" | ||
| ItemTemplate="{StaticResource WrapTemplate}"> | ||
| <winui:ItemsRepeater.Layout> | ||
| <controls:WrapLayout x:Name="Wrap" | ||
| VerticalSpacing="@[VerticalSpacing:Slider:5:0-200]@" | ||
| HorizontalSpacing="@[HorizontalSpacing:Slider:5:0-200]@"/> | ||
| </winui:ItemsRepeater.Layout> | ||
| </winui:ItemsRepeater> | ||
| </ScrollViewer> | ||
| </Grid> | ||
| </Page> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <Page | ||
| x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.WrapLayoutPage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages.WrapLayout" | ||
| xmlns:d="http://schemas.microsoft.com/expression/blend/2008" | ||
| xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" | ||
| xmlns:winui="using:Microsoft.UI.Xaml.Controls" | ||
| mc:Ignorable="d" | ||
| Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> | ||
|
|
||
| <Grid> | ||
|
|
||
| </Grid> | ||
| </Page> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| // 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 System; | ||
| using System.Collections.ObjectModel; | ||
| using Microsoft.Toolkit.Uwp.UI.Extensions; | ||
| using Microsoft.UI.Xaml.Controls; | ||
| using Windows.UI; | ||
| using Windows.UI.Xaml; | ||
| using Windows.UI.Xaml.Controls; | ||
|
|
||
| namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages | ||
| { | ||
| /// <summary> | ||
| /// An empty page that can be used on its own or navigated to within a Frame. | ||
| /// </summary> | ||
| public sealed partial class WrapLayoutPage : Page, IXamlRenderListener | ||
| { | ||
| private ObservableCollection<Item> _items = new ObservableCollection<Item>(); | ||
| private Random _random; | ||
|
|
||
| public WrapLayoutPage() | ||
| { | ||
| this.InitializeComponent(); | ||
|
|
||
| _random = new Random(DateTime.Now.Millisecond); | ||
| for (int i = 0; i < _random.Next(1000, 5000); i++) | ||
| { | ||
| var item = new Item { Index = i, Width = _random.Next(50, 250), Height = _random.Next(50, 250), Color = Color.FromArgb(255, (byte)_random.Next(0, 255), (byte)_random.Next(0, 255), (byte)_random.Next(0, 255)) }; | ||
| _items.Add(item); | ||
| } | ||
| } | ||
|
|
||
| public void OnXamlRendered(FrameworkElement control) | ||
| { | ||
| var repeater = control.FindChildByName("WrapRepeater") as ItemsRepeater; | ||
|
|
||
| if (repeater != null) | ||
| { | ||
| repeater.ItemsSource = _items; | ||
| } | ||
| } | ||
|
|
||
| private class Item | ||
| { | ||
| public int Index { get; internal set; } | ||
|
|
||
| public int Width { get; internal set; } | ||
|
|
||
| public int Height { get; internal set; } | ||
|
|
||
| public Color Color { get; internal set; } | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <Project Sdk="MSBuild.Sdk.Extras"> | ||
|
|
||
| <PropertyGroup> | ||
| <TargetFramework>uap10.0.17134</TargetFramework> | ||
|
There was a problem hiding this comment. Am I missing where the min target framework is? Will this work on 16299? There was a problem hiding this comment. This is the min for WinUI, moving it to 16299 fails to build |
||
| <TargetPlatformVersion Condition="'$(TargetPlatformVersion)' == '' ">10.0.18362.0</TargetPlatformVersion> | ||
| <Title>Windows Community Toolkit Layout</Title> | ||
| <Description> | ||
| This library provides XAML layout controls. It is part of the Windows Community Toolkit. | ||
| </Description> | ||
| <RootNamespace>Microsoft.Toolkit.Uwp.UI.Controls</RootNamespace> | ||
| </PropertyGroup> | ||
|
|
||
| <ItemGroup> | ||
| <None Include="VisualStudioToolsManifest.xml" Pack="true" PackagePath="tools" /> | ||
| </ItemGroup> | ||
|
|
||
| <ItemGroup> | ||
| <PackageReference Include="Microsoft.UI.Xaml" Version="2.3.200213001" /> | ||
skendrot marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </ItemGroup> | ||
|
|
||
| <Import Project="$(MSBuildSDKExtrasTargets)" Condition="Exists('$(MSBuildSDKExtrasTargets)')" /> | ||
|
|
||
| <!-- https://weblogs.asp.net/rweigelt/disable-warnings-in-generated-c-files-of-uwp-app --> | ||
| <Target Name="PragmaWarningDisablePrefixer" AfterTargets="MarkupCompilePass2"> | ||
| <ItemGroup> | ||
| <GeneratedCSFiles Include="**\*.g.cs;**\*.g.i.cs" /> | ||
| </ItemGroup> | ||
| <Message Text="CSFiles: @(GeneratedCSFiles->'"%(Identity)"')" /> | ||
| <Exec Command="for %%f in (@(GeneratedCSFiles->'"%(Identity)"')) do echo #pragma warning disable > %%f.temp && type %%f >> %%f.temp && move /y %%f.temp %%f > NUL" /> | ||
| </Target> | ||
| </Project> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <wpf:ResourceDictionary xml:space="preserve" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:ss="urn:shemas-jetbrains-com:settings-storage-xaml" xmlns:wpf="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> | ||
|
|
||
| </wpf:ResourceDictionary> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| // 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 System.Resources; | ||
| using System.Runtime.CompilerServices; | ||
|
|
||
| // General Information about an assembly is controlled through the following | ||
| // set of attributes. Change these attribute values to modify the information | ||
| // associated with an assembly. | ||
| [assembly: InternalsVisibleTo("UnitTests")] | ||
| [assembly: NeutralResourcesLanguage("en-US")] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <?xml version="1.0" encoding="utf-8"?> | ||
| <Directives xmlns="http://schemas.microsoft.com/netfx/2013/01/metadata"> | ||
| <Library Name="Microsoft.Toolkit.Uwp.UI.Controls.Layout"> | ||
| </Library> | ||
| </Directives> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have you tested it's picked up in release mode by the XAML Reader? If not, just add a dummy reference here.