Skip to content

Commit f3fe793

Browse files
Avid29Avid29
committed
Revised WrapPanel2 samples
1 parent c3d5658 commit f3fe793

9 files changed

+331
-58
lines changed

‎components/WrapPanel2/samples/WrapPanel2.Samples.csproj‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<Project>
1+
<Project>
22
<Import Project="$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))" Condition="Exists('$([MSBuild]::GetPathOfFileAbove(Directory.Build.props))')" />
33

44
<PropertyGroup>
@@ -12,4 +12,19 @@
1212
<DependentUpon>WrapPanel2BasicSample.xaml</DependentUpon>
1313
</Compile>
1414
</ItemGroup>
15+
<ItemGroup>
16+
<Compile Update="WrapPanel2ProportionalSample.xaml.cs">
17+
<DependentUpon>WrapPanel2ProportionalSample.xaml</DependentUpon>
18+
</Compile>
19+
</ItemGroup>
20+
<ItemGroup>
21+
<Compile Update="WrapPanel2MegaSample.xaml.cs">
22+
<DependentUpon>WrapPanel2MegaSample.xaml</DependentUpon>
23+
</Compile>
24+
</ItemGroup>
25+
<ItemGroup>
26+
<Content Update="WrapPanel2BasicSample.xaml">
27+
<SubType>Designer</SubType>
28+
</Content>
29+
</ItemGroup>
1530
</Project>

‎components/WrapPanel2/samples/WrapPanel2.md‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: WrapPannel2
2+
title: WrapPanel2
33
author: Avid29
44
description: A labs-component candidate for a new WrapPanel implementation.
55
keywords: WrapPanel, Control, Layout
@@ -52,3 +52,16 @@ When set to `Equal`, this panel will stretch all items in the row/column to occu
5252
#### Proportional
5353

5454
When set to `Proportional`, this panel will stretch all items in the row/column proportionally to their defined size to occupy the remaining space when needed if `FixedRowLengths` is enabled.
55+
56+
## Additional Samples
57+
58+
### Adjusted Sizings Sample
59+
60+
> [!Sample WrapPanel2MegaSample]
61+
62+
### Proportional Sizing
63+
64+
Encoding diagram example
65+
66+
[!Sample WrapPanel2ProportionalSample]
67+

‎components/WrapPanel2/samples/WrapPanel2BasicSample.xaml‎

Lines changed: 22 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- 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. -->
1+
<!-- 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. -->
22
<Page x:Class="WrapPanel2Experiment.Samples.WrapPanel2BasicSample"
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -20,64 +20,32 @@
2020
</Style>
2121
</Page.Resources>
2222

23-
<Grid MaxHeight="600"
24-
Margin="16">
25-
<controls:WrapPanel2 HorizontalAlignment="{x:Bind LayoutHorizontalAlignment, Mode=OneWay}"
23+
<Grid MaxHeight="600">
24+
<Grid.RowDefinitions>
25+
<RowDefinition Height="auto" />
26+
<RowDefinition />
27+
</Grid.RowDefinitions>
28+
29+
<StackPanel Margin="8"
30+
Orientation="Horizontal"
31+
Spacing="8">
32+
<Button Click="AddItemClick"
33+
Content="Add Item" />
34+
<Button Click="Add5ItemsClick"
35+
Content="Add 5 Items" />
36+
<Button Click="ClearItemsClick"
37+
Content="Clear" />
38+
</StackPanel>
39+
40+
<controls:WrapPanel2 x:Name="WrapPanel"
41+
Grid.Row="1"
42+
HorizontalAlignment="{x:Bind LayoutHorizontalAlignment, Mode=OneWay}"
2643
VerticalAlignment="{x:Bind LayoutVerticalAlignment, Mode=OneWay}"
2744
FixedRowLengths="{x:Bind FixedRowLengths, Mode=OneWay}"
2845
ItemSpacing="{x:Bind ItemSpacing, Mode=OneWay}"
2946
LineSpacing="{x:Bind LineSpacing, Mode=OneWay}"
3047
Orientation="{x:Bind local:WrapPanel2BasicSample.ConvertStringToOrientation(LayoutOrientation), Mode=OneWay}"
3148
OverflowBehavior="{x:Bind local:WrapPanel2BasicSample.ConvertStringToOverflowBehavior(LayoutOverflowBehavior), Mode=OneWay}"
32-
StretchChildren="{x:Bind local:WrapPanel2BasicSample.ConvertStringToForcedStretchMethod(LayoutStretchChildren), Mode=OneWay}">
33-
<Border controls:WrapPanel2.LayoutLength="2*">
34-
<TextBlock HorizontalAlignment="Center"
35-
Text="2*" />
36-
</Border>
37-
<Border controls:WrapPanel2.LayoutLength="Auto">
38-
<TextBlock HorizontalAlignment="Center"
39-
Text="Auto" />
40-
</Border>
41-
<Border controls:WrapPanel2.LayoutLength="400">
42-
<TextBlock HorizontalAlignment="Center"
43-
Text="400px" />
44-
</Border>
45-
<Border controls:WrapPanel2.LayoutLength="1*">
46-
<TextBlock HorizontalAlignment="Center"
47-
Text="1*" />
48-
</Border>
49-
<Border controls:WrapPanel2.LayoutLength="200">
50-
<TextBlock HorizontalAlignment="Center"
51-
Text="200px" />
52-
</Border>
53-
<Border controls:WrapPanel2.LayoutLength="300">
54-
<TextBlock HorizontalAlignment="Center"
55-
Text="300px" />
56-
</Border>
57-
<Border controls:WrapPanel2.LayoutLength="600">
58-
<TextBlock HorizontalAlignment="Center"
59-
Text="600px" />
60-
</Border>
61-
<Border controls:WrapPanel2.LayoutLength="2*">
62-
<TextBlock HorizontalAlignment="Center"
63-
Text="2*" />
64-
</Border>
65-
<Border controls:WrapPanel2.LayoutLength="1.5*">
66-
<TextBlock HorizontalAlignment="Center"
67-
Text="1.5*" />
68-
</Border>
69-
<Border controls:WrapPanel2.LayoutLength="Auto">
70-
<TextBlock HorizontalAlignment="Center"
71-
Text="Auto with longer text" />
72-
</Border>
73-
<Border controls:WrapPanel2.LayoutLength="400">
74-
<TextBlock HorizontalAlignment="Center"
75-
Text="400px" />
76-
</Border>
77-
<Border controls:WrapPanel2.LayoutLength="1*">
78-
<TextBlock HorizontalAlignment="Center"
79-
Text="1*" />
80-
</Border>
81-
</controls:WrapPanel2>
49+
StretchChildren="{x:Bind local:WrapPanel2BasicSample.ConvertStringToForcedStretchMethod(LayoutStretchChildren), Mode=OneWay}" />
8250
</Grid>
8351
</Page>

‎components/WrapPanel2/samples/WrapPanel2BasicSample.xaml.cs‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// See the LICENSE file in the project root for more information.
44

55
using CommunityToolkit.WinUI.Controls;
6+
using Windows.UI;
67

78
namespace WrapPanel2Experiment.Samples;
89

@@ -18,7 +19,7 @@ namespace WrapPanel2Experiment.Samples;
1819
[ToolkitSampleMultiChoiceOption("LayoutStretchChildren", "StarSizedOnly", "First", "Last", "Equal", "Proportional", Title = "Forced Stretch Method")]
1920
[ToolkitSampleMultiChoiceOption("LayoutOverflowBehavior", "Wrap", "Drop", Title = "Overflow Behavior")]
2021

21-
[ToolkitSample(id: nameof(WrapPanel2BasicSample), "WrapPanel2 Basic Sample", description: $"A sample for showing how to use a {nameof(WrapPanel2)} panel.")]
22+
[ToolkitSample(id: nameof(WrapPanel2BasicSample), $"Basic demo of the {nameof(WrapPanel2)} with auto-sized items.", description: $"A sample showing every property of the {nameof(WrapPanel2)} panel.")]
2223
public sealed partial class WrapPanel2BasicSample : Page
2324
{
2425
public WrapPanel2BasicSample()
@@ -72,4 +73,43 @@ public WrapPanel2BasicSample()
7273
"Drop" => OverflowBehavior.Drop,
7374
_ => throw new System.NotImplementedException(),
7475
};
76+
77+
private int _index;
78+
79+
private string[] LoremIpsumWords => LoremIpsum.Split(' ');
80+
81+
private string LoremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fermentum placerat pretium. Phasellus molestie faucibus purus ut semper. Etiam felis ante, condimentum sed leo in, aliquam pharetra libero. Etiam ante ante, sagittis in semper eu, aliquam non sapien. Donec a pharetra magna. Suspendisse et nulla magna. Cras varius sem dolor, ac faucibus turpis malesuada ac. Maecenas rutrum tortor et faucibus rutrum. Vestibulum in gravida odio, non dapibus dui. Praesent leo tellus, vulputate sed sollicitudin id, fringilla quis ligula. Cras eget ex vitae purus pulvinar mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec consectetur tellus id augue ultrices, eget congue tellus pharetra.";
82+
83+
private void AddItemClick(object sender, RoutedEventArgs e)
84+
{
85+
AddItem();
86+
}
87+
88+
private void Add5ItemsClick(object sender, RoutedEventArgs e)
89+
{
90+
for (int i = 0; i < 5; i++)
91+
AddItem();
92+
}
93+
94+
private void ClearItemsClick(object sender, RoutedEventArgs e)
95+
{
96+
WrapPanel.Children.Clear();
97+
_index = 0;
98+
}
99+
100+
private void AddItem()
101+
{
102+
_index = _index % LoremIpsumWords.Length;
103+
104+
var currentWord = LoremIpsumWords[_index++];
105+
var border = new Border()
106+
{
107+
Child = new TextBlock()
108+
{
109+
Text = currentWord,
110+
}
111+
};
112+
113+
WrapPanel.Children.Add(border);
114+
}
75115
}

‎components/WrapPanel2/samples/WrapPanel2MegaSample.xaml‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!-- 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. -->
2+
<Page x:Class="WrapPanel2Experiment.Samples.WrapPanel2MegaSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
6+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7+
xmlns:local="using:WrapPanel2Experiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<Page.Resources>
12+
<Style TargetType="Border">
13+
<Setter Property="Background" Value="#55000000" />
14+
<Setter Property="BorderBrush" Value="#88000000" />
15+
<Setter Property="CornerRadius" Value="8" />
16+
<Setter Property="BorderThickness" Value="1" />
17+
<Setter Property="Padding" Value="8" />
18+
<Setter Property="HorizontalAlignment" Value="Stretch" />
19+
<Setter Property="VerticalAlignment" Value="Stretch" />
20+
</Style>
21+
</Page.Resources>
22+
23+
<Grid MaxHeight="600"
24+
Margin="16">
25+
<controls:WrapPanel2 HorizontalAlignment="{x:Bind LayoutHorizontalAlignment, Mode=OneWay}"
26+
VerticalAlignment="{x:Bind LayoutVerticalAlignment, Mode=OneWay}"
27+
FixedRowLengths="{x:Bind FixedRowLengths, Mode=OneWay}"
28+
ItemSpacing="{x:Bind ItemSpacing, Mode=OneWay}"
29+
LineSpacing="{x:Bind LineSpacing, Mode=OneWay}"
30+
Orientation="{x:Bind local:WrapPanel2MegaSample.ConvertStringToOrientation(LayoutOrientation), Mode=OneWay}"
31+
OverflowBehavior="{x:Bind local:WrapPanel2MegaSample.ConvertStringToOverflowBehavior(LayoutOverflowBehavior), Mode=OneWay}"
32+
StretchChildren="{x:Bind local:WrapPanel2MegaSample.ConvertStringToForcedStretchMethod(LayoutStretchChildren), Mode=OneWay}">
33+
<Border controls:WrapPanel2.LayoutLength="2*">
34+
<TextBlock HorizontalAlignment="Center"
35+
Text="2*" />
36+
</Border>
37+
<Border controls:WrapPanel2.LayoutLength="Auto">
38+
<TextBlock HorizontalAlignment="Center"
39+
Text="Auto" />
40+
</Border>
41+
<Border controls:WrapPanel2.LayoutLength="400">
42+
<TextBlock HorizontalAlignment="Center"
43+
Text="400px" />
44+
</Border>
45+
<Border controls:WrapPanel2.LayoutLength="1*">
46+
<TextBlock HorizontalAlignment="Center"
47+
Text="1*" />
48+
</Border>
49+
<Border controls:WrapPanel2.LayoutLength="200">
50+
<TextBlock HorizontalAlignment="Center"
51+
Text="200px" />
52+
</Border>
53+
<Border controls:WrapPanel2.LayoutLength="300">
54+
<TextBlock HorizontalAlignment="Center"
55+
Text="300px" />
56+
</Border>
57+
<Border controls:WrapPanel2.LayoutLength="600">
58+
<TextBlock HorizontalAlignment="Center"
59+
Text="600px" />
60+
</Border>
61+
<Border controls:WrapPanel2.LayoutLength="2*">
62+
<TextBlock HorizontalAlignment="Center"
63+
Text="2*" />
64+
</Border>
65+
<Border controls:WrapPanel2.LayoutLength="1.5*">
66+
<TextBlock HorizontalAlignment="Center"
67+
Text="1.5*" />
68+
</Border>
69+
<Border controls:WrapPanel2.LayoutLength="Auto">
70+
<TextBlock HorizontalAlignment="Center"
71+
Text="Auto with longer text" />
72+
</Border>
73+
<Border controls:WrapPanel2.LayoutLength="400">
74+
<TextBlock HorizontalAlignment="Center"
75+
Text="400px" />
76+
</Border>
77+
<Border controls:WrapPanel2.LayoutLength="1*">
78+
<TextBlock HorizontalAlignment="Center"
79+
Text="1*" />
80+
</Border>
81+
</controls:WrapPanel2>
82+
</Grid>
83+
</Page>

‎components/WrapPanel2/samples/WrapPanel2MegaSample.xaml.cs‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.WinUI.Controls;
6+
7+
namespace WrapPanel2Experiment.Samples;
8+
9+
/// <summary>
10+
/// An example sample page of a custom control inheriting from Panel.
11+
/// </summary>
12+
[ToolkitSampleMultiChoiceOption("LayoutOrientation", "Horizontal", "Vertical", Title = "Orientation")]
13+
[ToolkitSampleMultiChoiceOption("LayoutHorizontalAlignment", "Left", "Center", "Right", "Stretch", Title = "Horizontal Alignment")]
14+
[ToolkitSampleMultiChoiceOption("LayoutVerticalAlignment", "Top", "Center", "Bottom", "Stretch", Title = "Vertical Alignment")]
15+
[ToolkitSampleNumericOption("ItemSpacing", 8, 0, 16, Title = "Item Spacing")]
16+
[ToolkitSampleNumericOption("LineSpacing", 2, 0, 16, Title = "Line Spacing")]
17+
[ToolkitSampleBoolOption("FixedRowLengths", false, Title = "Fixed Row Lengths")]
18+
[ToolkitSampleMultiChoiceOption("LayoutStretchChildren", "StarSizedOnly", "First", "Last", "Equal", "Proportional", Title = "Forced Stretch Method")]
19+
[ToolkitSampleMultiChoiceOption("LayoutOverflowBehavior", "Wrap", "Drop", Title = "Overflow Behavior")]
20+
21+
[ToolkitSample(id: nameof(WrapPanel2MegaSample), "Demo of all WrapPanel2 feature", description: $"A sample showing every property of the {nameof(WrapPanel2)} panel.")]
22+
public sealed partial class WrapPanel2MegaSample : Page
23+
{
24+
public WrapPanel2MegaSample()
25+
{
26+
this.InitializeComponent();
27+
}
28+
29+
// TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
30+
public static Orientation ConvertStringToOrientation(string orientation) => orientation switch
31+
{
32+
"Vertical" => Orientation.Vertical,
33+
"Horizontal" => Orientation.Horizontal,
34+
_ => throw new System.NotImplementedException(),
35+
};
36+
37+
// TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
38+
public static HorizontalAlignment ConvertStringToHorizontalAlignment(string alignment) => alignment switch
39+
{
40+
"Left" => HorizontalAlignment.Left,
41+
"Center" => HorizontalAlignment.Center,
42+
"Right" => HorizontalAlignment.Right,
43+
"Stretch" => HorizontalAlignment.Stretch,
44+
_ => throw new System.NotImplementedException(),
45+
};
46+
47+
// TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
48+
public static VerticalAlignment ConvertStringToVerticalAlignment(string alignment) => alignment switch
49+
{
50+
"Top" => VerticalAlignment.Top,
51+
"Center" => VerticalAlignment.Center,
52+
"Bottom" => VerticalAlignment.Bottom,
53+
"Stretch" => VerticalAlignment.Stretch,
54+
_ => throw new System.NotImplementedException(),
55+
};
56+
57+
// TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
58+
public static StretchChildren ConvertStringToForcedStretchMethod(string stretchMethod) => stretchMethod switch
59+
{
60+
"StarSizedOnly" => StretchChildren.StarSizedOnly,
61+
"First" => StretchChildren.First,
62+
"Last" => StretchChildren.Last,
63+
"Equal" => StretchChildren.Equal,
64+
"Proportional" => StretchChildren.Proportional,
65+
_ => throw new System.NotImplementedException(),
66+
};
67+
68+
// TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
69+
public static OverflowBehavior ConvertStringToOverflowBehavior(string overflowBehavior) => overflowBehavior switch
70+
{
71+
"Wrap" => OverflowBehavior.Wrap,
72+
"Drop" => OverflowBehavior.Drop,
73+
_ => throw new System.NotImplementedException(),
74+
};
75+
}

0 commit comments

Comments
 (0)