Skip to content

Add MultiColumnsStackPanel #3381

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 34 commits into
base: main
Choose a base branch
from
Draft

Add MultiColumnsStackPanel #3381

Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
48825c8
add sample page + implementation skeleton
vgromfeld Jun 5, 2020
e05e47c
add properties binding
vgromfeld Jun 6, 2020
9da8406
first drop of implementation
vgromfeld Jun 6, 2020
112a5d3
improve arrange logic
vgromfeld Jun 8, 2020
e70cf76
algorithm is almost working (but not efficient)
vgromfeld Jun 16, 2020
77cba20
rewrite algorithm
vgromfeld Jun 17, 2020
b5aa4fc
algorithm is working but partition is not optimal
vgromfeld Jun 17, 2020
d60ed83
fix algorithm
vgromfeld Jun 27, 2020
a6d8db1
fix comment
vgromfeld Jun 27, 2020
bd5a116
add items spacing support
vgromfeld Jun 27, 2020
809917a
fix no children case
vgromfeld Jun 27, 2020
8dd4efa
fix algorithm
vgromfeld Jul 2, 2020
f6a9384
add scroll viewer viewport support
vgromfeld Jul 2, 2020
340b29e
update sample code
vgromfeld Jul 4, 2020
29aa3e4
fix pixel rounding issue
vgromfeld Jul 4, 2020
6d39cbf
add horizontal alignment support
vgromfeld Jul 6, 2020
e993503
update configuration
vgromfeld Jul 7, 2020
8f6539f
update comments
vgromfeld Jul 7, 2020
c48c746
renamed dependency properties
vgromfeld Jul 23, 2020
af071eb
merge from master
vgromfeld Jul 23, 2020
848288a
add horizontal padding support
vgromfeld Jul 29, 2020
0ef895a
add vertical padding support
vgromfeld Jul 29, 2020
f3c3111
Merge branch 'master' into multiColumnsStackPanel
vgromfeld Jul 29, 2020
1762462
Merge branch 'master' into multiColumnsStackPanel
vgromfeld Aug 1, 2020
8856498
fix stylecop issues
vgromfeld Nov 9, 2020
05d3b08
Remove HorizontalContentAlignment property
vgromfeld Nov 9, 2020
12e4fa2
Merge branch 'multiColumnsStackPanel' of https://github.com/vgromfeld…
vgromfeld Nov 9, 2020
1cfaf2d
merge from master
vgromfeld Nov 9, 2020
aabefb2
Merge branch 'master' into multiColumnsStackPanel
vgromfeld Nov 9, 2020
900d6e6
rename control to FormPanel
vgromfeld Nov 16, 2020
d2703af
update control height to get a better alignment
vgromfeld Nov 16, 2020
846a21c
pr comments
vgromfeld Nov 23, 2020
a9186aa
Merge branch 'master' into multiColumnsStackPanel
Rosuavio Dec 3, 2020
38219fa
Merge branch 'master' into multiColumnsStackPanel
Kyaa-dost Dec 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,7 @@
<Content Include="Icons\More.png" />
<Content Include="Icons\Notifications.png" />
<Content Include="Icons\Services.png" />
<Content Include="SamplePages\MultiColumnsStackPanel\MultiColumnsStackPanel.png" />
<Content Include="SamplePages\TilesBrush\TilesBrush.png" />
<Content Include="SamplePages\Eyedropper\Eyedropper.png" />
<Content Include="SamplePages\OnDevice\OnDevice.png" />
Expand Down Expand Up @@ -515,6 +516,9 @@
<Compile Include="SamplePages\FocusBehavior\FocusBehaviorPage.xaml.cs">
<DependentUpon>FocusBehaviorPage.xaml</DependentUpon>
</Compile>
<Compile Include="SamplePages\MultiColumnsStackPanel\MultiColumnsStackPanelPage.xaml.cs">
<DependentUpon>MultiColumnsStackPanelPage.xaml</DependentUpon>
</Compile>
<Compile Include="SamplePages\TilesBrush\TilesBrushPage.xaml.cs">
<DependentUpon>TilesBrushPage.xaml</DependentUpon>
</Compile>
Expand Down Expand Up @@ -997,6 +1001,13 @@
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="SamplePages\MultiColumnsStackPanel\MultiColumnsStackPanelPage.xaml">
<SubType>Designer</SubType>
<Generator>MSBuild:Compile</Generator>
</Page>
<Content Include="SamplePages\MultiColumnsStackPanel\MultiColumnsStackPanelCode.bind">
<SubType>Designer</SubType>
</Content>
<Page Include="SamplePages\FocusBehavior\FocusBehaviorPage.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
Expand Down Expand Up @@ -1559,7 +1570,6 @@
<Name>Visual C++ 2015 Runtime for Universal Windows Platform Apps</Name>
</SDKReference>
</ItemGroup>
<ItemGroup />
<PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
<VisualStudioVersion>14.0</VisualStudioVersion>
</PropertyGroup>
Expand Down
Binary file added ...kit.Uwp.SampleApp/SamplePages/MultiColumnsStackPanel/MultiColumnsStackPanel.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 66 additions & 0 deletions ....Toolkit.Uwp.SampleApp/SamplePages/MultiColumnsStackPanel/MultiColumnsStackPanelCode.bind
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<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:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Disabled"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Auto">
<controls:MultiColumnsStackPanel HorizontalAlignment="Left"
VerticalAlignment="Top"
HorizontalSpacing="@[HorizontalSpacing:Slider:12:0-120]"
VerticalSpacing="@[VerticalSpacing:Slider:8:0-64]"
MaxColumnWidth="@[MaxColumnWidth:Slider:240:0-500]"
Padding="@[Padding:Thickness:0,0,0,0]@">
<TextBox Header="Field 1" />
<TextBox Header="Field 2" HorizontalAlignment="Right" />
<Button Content="Open" HorizontalAlignment="Center" />
<Button Content="Action" HorizontalAlignment="Stretch" />
<TextBox Height="200"
Header="Field 3" />
<TextBox Header="Field 4" />
<TextBox Header="Field 5" />
<TextBox Height="100"
Header="Field 6" />
<TextBox Height="200"
Header="Field 7" />
<TextBox Header="Field 8" />
<TextBox Height="100"
Header="Field 9" />
<TextBox Header="Field 10" />
<TextBox Header="Field 11" />
<TextBox Header="Field 12" />
<TextBox Header="Field 13" />
<TextBox Height="200"
Header="Field 14" />
<TextBox Header="Field 15" />
<TextBox Height="100"
Header="Field 16" />
<TextBox Header="Field 17" />
<TextBox Header="Field 18" />
<TextBox Header="Field 19" />
<TextBox Height="200"
Header="Field 20" />
<TextBox Header="Field 21" />
<TextBox Height="100"
Header="Field 22" />
<TextBox Header="Field 23" />
<TextBox Height="300"
Header="Field 24" />
<TextBox Header="Field 25" />
<TextBox Height="200"
Header="Field 26" />
<TextBox Header="Field 27" />
<TextBox Header="Field 28" />
<TextBox Height="200"
Header="Field 29" />
<TextBox Header="Field 30" />
</controls:MultiColumnsStackPanel>
</ScrollViewer>
</Grid>
</Page>
65 changes: 65 additions & 0 deletions ....Toolkit.Uwp.SampleApp/SamplePages/MultiColumnsStackPanel/MultiColumnsStackPanelPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.MultiColumnsStackPanelPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
mc:Ignorable="d">

<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Disabled"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Auto"
VerticalScrollMode="Auto">
<controls:MultiColumnsStackPanel Padding="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
HorizontalSpacing="24"
MaxColumnWidth="240"
VerticalSpacing="24">
<TextBox Header="Field 1" />
<TextBox Header="Field 2" />
<TextBox Height="200"
Header="Field 3" />
<TextBox Header="Field 4" />
<TextBox Header="Field 5" />
<TextBox Height="100"
Header="Field 6" />
<TextBox Height="200"
Header="Field 7" />
<TextBox Header="Field 8" />
<TextBox Height="100"
Header="Field 9" />
<TextBox Header="Field 10" />
<TextBox Header="Field 11" />
<TextBox Header="Field 12" />
<TextBox Header="Field 13" />
<TextBox Height="200"
Header="Field 14" />
<TextBox Header="Field 15" />
<TextBox Height="100"
Header="Field 16" />
<TextBox Header="Field 17" />
<TextBox Header="Field 18" />
<TextBox Header="Field 19" />
<TextBox Height="200"
Header="Field 20" />
<TextBox Header="Field 21" />
<TextBox Height="100"
Header="Field 22" />
<TextBox Header="Field 23" />
<TextBox Height="300"
Header="Field 24" />
<TextBox Header="Field 25" />
<TextBox Height="200"
Header="Field 26" />
<TextBox Header="Field 27" />
<TextBox Header="Field 28" />
<TextBox Height="200"
Header="Field 29" />
<TextBox Header="Field 30" />
</controls:MultiColumnsStackPanel>
</ScrollViewer>
</Grid>
</Page>
16 changes: 16 additions & 0 deletions ...olkit.Uwp.SampleApp/SamplePages/MultiColumnsStackPanel/MultiColumnsStackPanelPage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// 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 Windows.UI.Xaml.Controls;

namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
{
/// <summary>
/// A page that shows how to use the MultiColumnsStackPanel.
/// </summary>
public sealed partial class MultiColumnsStackPanelPage : Page
{
public MultiColumnsStackPanelPage() => InitializeComponent();
}
}
10 changes: 10 additions & 0 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,16 @@
"Icon": "/SamplePages/WrapPanel/WrapPanel.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/WrapPanel.md"
},
{
"Name": "MultiColumnsStackPanel",
"Type": "MultiColumnsStackPanelPage",
"Subcategory": "Layout",
"About": "The MultiColumnsStackPanel Control positions child elements in fixed size columns.",
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/MultiColumnsStackPanel",
"XamlCodeFile": "MultiColumnsStackPanelCode.bind",
"Icon": "/SamplePages/MultiColumnsStackPanel/MultiColumnsStackPanel.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/MultiColumnsStackPanel.md"
},
{
"Name": "WrapLayout",
"Type": "WrapLayoutPage",
Expand Down
Loading