Skip to content

Commit cb59341

Browse files
michael-hawkermichael-hawker
committed
Setup ResizeThumb control for ResizeElementAdorner, almost works...
Having separate ResizeThumb which handles manipulation is basically a generalized ContentSizer, this helps encapsulate that logic as well nicely. Then the ResizeElementAdorner is just a coordinator/initializer to provide the complete package of resizing. TODO: Moving the element probably can just be handled by the underlying element with standared manipulation (do we have a Behavior for that?) and doesn't need to involve the Adorner layer (outside of syncing movement/position, which needs to be tested...)
1 parent 7c20776 commit cb59341

File tree

12 files changed

+546
-159
lines changed

12 files changed

+546
-159
lines changed

‎components/Adorners/samples/Adorners.md‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Adorners
33
author: michael-hawker
44
description: Adorners let you overlay content on top of your XAML components in a separate layer on top of everything else.
5-
keywords: Adorners, Control, Layout, InfoBadge, AdornerLayer, AdornerDecorator, Adorner, Input Validation, Highlighting
5+
keywords: Adorners, Control, Layout, InfoBadge, AdornerLayer, AdornerDecorator, Adorner, Input Validation, Resize, Highlighting
66
dev_langs:
77
- csharp
88
category: Controls
@@ -60,13 +60,7 @@ The following example uses `IEditableObject` to control the editing lifecycle co
6060
6161
Adorners are template-based controls, but you can use a class-backed resource dictionary to better enable usage of x:Bind for easier creation and binding to the `AdornedElement`, as seen here.
6262

63-
You can see other example of custom adorners with the other Adorner help topics for the built-in adorners provided in this package, such as the `InputValidationAdorner`.
64-
65-
## TODO: Resize Example
66-
67-
Another common use case for adorners is to allow a user to resize a visual element.
68-
69-
// TODO: Make an example here for this w/ custom Adorner class...
63+
You can see other example of custom adorners with the other Adorner help topics for the built-in adorners provided in this package, such as the `InputValidationAdorner` and `ResizeElementAdorner`.
7064

7165
## Migrating from WPF
7266

‎components/Adorners/src/ResizeElement/ResizeElementAdorner.cs‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,32 @@
22
// The .NET Foundation licenses this file to you under the MIT license.
33
// See the LICENSE file in the project root for more information.
44

5+
using CommunityToolkit.WinUI.Controls;
6+
57
namespace CommunityToolkit.WinUI.Adorners;
68

79
/// <summary>
810
/// An <see cref="Adorner"/> that will allow a user to resize the adorned element.
911
/// </summary>
12+
[TemplatePart(Name = nameof(TopThumbPart), Type = typeof(ResizeThumb))]
13+
[TemplatePart(Name = nameof(BottomThumbPart), Type = typeof(ResizeThumb))]
14+
[TemplatePart(Name = nameof(LeftThumbPart), Type = typeof(ResizeThumb))]
15+
[TemplatePart(Name = nameof(RightThumbPart), Type = typeof(ResizeThumb))]
16+
[TemplatePart(Name = nameof(TopLeftThumbPart), Type = typeof(ResizeThumb))]
17+
[TemplatePart(Name = nameof(TopRightThumbPart), Type = typeof(ResizeThumb))]
18+
[TemplatePart(Name = nameof(BottomLeftThumbPart), Type = typeof(ResizeThumb))]
19+
[TemplatePart(Name = nameof(BottomRightThumbPart), Type = typeof(ResizeThumb))]
1020
public sealed partial class ResizeElementAdorner : Adorner<FrameworkElement>
1121
{
22+
private ResizeThumb? TopThumbPart;
23+
private ResizeThumb? BottomThumbPart;
24+
private ResizeThumb? LeftThumbPart;
25+
private ResizeThumb? RightThumbPart;
26+
private ResizeThumb? TopLeftThumbPart;
27+
private ResizeThumb? TopRightThumbPart;
28+
private ResizeThumb? BottomLeftThumbPart;
29+
private ResizeThumb? BottomRightThumbPart;
30+
1231
/// <summary>
1332
/// Initializes a new instance of the <see cref="ResizeElementAdorner"/> class.
1433
/// </summary>
@@ -23,18 +42,50 @@ public ResizeElementAdorner()
2342
/// <inheritdoc/>
2443
protected override void OnApplyTemplate()
2544
{
45+
OnDetaching();
46+
2647
base.OnApplyTemplate();
48+
49+
TopThumbPart = GetTemplateChild(nameof(TopThumbPart)) as ResizeThumb;
50+
BottomThumbPart = GetTemplateChild(nameof(BottomThumbPart)) as ResizeThumb;
51+
LeftThumbPart = GetTemplateChild(nameof(LeftThumbPart)) as ResizeThumb;
52+
RightThumbPart = GetTemplateChild(nameof(RightThumbPart)) as ResizeThumb;
53+
TopLeftThumbPart = GetTemplateChild(nameof(TopLeftThumbPart)) as ResizeThumb;
54+
TopRightThumbPart = GetTemplateChild(nameof(TopRightThumbPart)) as ResizeThumb;
55+
BottomLeftThumbPart = GetTemplateChild(nameof(BottomLeftThumbPart)) as ResizeThumb;
56+
BottomRightThumbPart = GetTemplateChild(nameof(BottomRightThumbPart)) as ResizeThumb;
57+
58+
// OnApplyTemplate can be called after OnAttached, especially if the Adorner isn't initially visible, so we need to re-apply the TargetControl here.
59+
OnAttached();
2760
}
2861

2962
/// <inheritdoc/>
3063
protected override void OnAttached()
3164
{
3265
base.OnAttached();
66+
67+
TopThumbPart?.TargetControl = AdornedElement;
68+
BottomThumbPart?.TargetControl = AdornedElement;
69+
LeftThumbPart?.TargetControl = AdornedElement;
70+
RightThumbPart?.TargetControl = AdornedElement;
71+
TopLeftThumbPart?.TargetControl = AdornedElement;
72+
TopRightThumbPart?.TargetControl = AdornedElement;
73+
BottomLeftThumbPart?.TargetControl = AdornedElement;
74+
BottomRightThumbPart?.TargetControl = AdornedElement;
3375
}
3476

3577
/// <inheritdoc/>
3678
protected override void OnDetaching()
3779
{
3880
base.OnDetaching();
81+
82+
TopThumbPart?.TargetControl = null;
83+
BottomThumbPart?.TargetControl = null;
84+
LeftThumbPart?.TargetControl = null;
85+
RightThumbPart?.TargetControl = null;
86+
TopLeftThumbPart?.TargetControl = null;
87+
TopRightThumbPart?.TargetControl = null;
88+
BottomLeftThumbPart?.TargetControl = null;
89+
BottomRightThumbPart?.TargetControl = null;
3990
}
4091
}

‎components/Adorners/src/ResizeElement/ResizeElementAdorner.xaml‎

Lines changed: 44 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!-- 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-
<ResourceDictionary x:Class="CommunityToolkit.WinUI.Adorners.Resources.ResizeElementAdornerResources"
3-
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2+
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
43
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
54
xmlns:adorners="using:CommunityToolkit.WinUI.Adorners"
65
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
@@ -15,57 +14,49 @@
1514
<Setter Property="Template">
1615
<Setter.Value>
1716
<ControlTemplate TargetType="adorners:ResizeElementAdorner">
18-
<ContentControl x:Name="ContentContainer"
19-
HorizontalContentAlignment="Stretch"
20-
VerticalContentAlignment="Stretch">
21-
<ContentControl.ContentTemplate>
22-
<DataTemplate x:DataType="adorners:ResizeElementAdorner">
23-
<Grid BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
24-
BorderThickness="1">
25-
<controls:ResizeThumb x:Name="PART_TopThumb"
26-
Margin="0,-8,0,0"
27-
HorizontalAlignment="Center"
28-
VerticalAlignment="Top"
29-
Cursor="SizeNorthSouth" />
30-
<controls:ResizeThumb x:Name="PART_BottomThumb"
31-
Margin="0,0,0,-8"
32-
HorizontalAlignment="Center"
33-
VerticalAlignment="Bottom"
34-
Cursor="SizeNorthSouth" />
35-
<controls:ResizeThumb x:Name="PART_LeftThumb"
36-
Margin="-8,0,0,0"
37-
HorizontalAlignment="Left"
38-
VerticalAlignment="Center"
39-
Cursor="SizeWestEast" />
40-
<controls:ResizeThumb x:Name="PART_RightThumb"
41-
Margin="0,0,-8,0"
42-
HorizontalAlignment="Right"
43-
VerticalAlignment="Center"
44-
Cursor="SizeWestEast" />
45-
<controls:ResizeThumb x:Name="PART_UpperLeftThumb"
46-
Margin="-8,-8,0,0"
47-
HorizontalAlignment="Left"
48-
VerticalAlignment="Top"
49-
Cursor="SizeNorthwestSoutheast" />
50-
<controls:ResizeThumb x:Name="PART_UpperRightThumb"
51-
Margin="0,-8,-8,0"
52-
HorizontalAlignment="Right"
53-
VerticalAlignment="Top"
54-
Cursor="SizeNortheastSouthwest" />
55-
<controls:ResizeThumb x:Name="PART_LowerLeftThumb"
56-
Margin="-8,0,0,-8"
57-
HorizontalAlignment="Left"
58-
VerticalAlignment="Bottom"
59-
Cursor="SizeNortheastSouthwest" />
60-
<controls:ResizeThumb x:Name="PART_LowerRightThumb"
61-
Margin="0,0,-8,-8"
62-
HorizontalAlignment="Right"
63-
VerticalAlignment="Bottom"
64-
Cursor="SizeNorthwestSoutheast" />
65-
</Grid>
66-
</DataTemplate>
67-
</ContentControl.ContentTemplate>
68-
</ContentControl>
17+
<Grid BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
18+
BorderThickness="1">
19+
<controls:ResizeThumb x:Name="TopThumbPart"
20+
Margin="0,-8,0,0"
21+
HorizontalAlignment="Center"
22+
VerticalAlignment="Top"
23+
Direction="Top" />
24+
<controls:ResizeThumb x:Name="BottomThumbPart"
25+
Margin="0,0,0,-8"
26+
HorizontalAlignment="Center"
27+
VerticalAlignment="Bottom"
28+
Direction="Bottom" />
29+
<controls:ResizeThumb x:Name="LeftThumbPart"
30+
Margin="-8,0,0,0"
31+
HorizontalAlignment="Left"
32+
VerticalAlignment="Center"
33+
Direction="Left" />
34+
<controls:ResizeThumb x:Name="RightThumbPart"
35+
Margin="0,0,-8,0"
36+
HorizontalAlignment="Right"
37+
VerticalAlignment="Center"
38+
Direction="Right" />
39+
<controls:ResizeThumb x:Name="TopLeftThumbPart"
40+
Margin="-8,-8,0,0"
41+
HorizontalAlignment="Left"
42+
VerticalAlignment="Top"
43+
Direction="TopLeft" />
44+
<controls:ResizeThumb x:Name="TopRightThumbPart"
45+
Margin="0,-8,-8,0"
46+
HorizontalAlignment="Right"
47+
VerticalAlignment="Top"
48+
Direction="TopRight"/>
49+
<controls:ResizeThumb x:Name="BottomLeftThumbPart"
50+
Margin="-8,0,0,-8"
51+
HorizontalAlignment="Left"
52+
VerticalAlignment="Bottom"
53+
Direction="BottomLeft" />
54+
<controls:ResizeThumb x:Name="BottomRightThumbPart"
55+
Margin="0,0,-8,-8"
56+
HorizontalAlignment="Right"
57+
VerticalAlignment="Bottom"
58+
Direction="BottomRight" />
59+
</Grid>
6960
</ControlTemplate>
7061
</Setter.Value>
7162
</Setter>

‎components/Adorners/src/ResizeElement/ResizeElementAdorner.xaml.cs‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎components/Adorners/src/ResizeElement/ResizeThumb.cs‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎components/Adorners/src/ResizeElement/Thumb/ResizeDirection.cs‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
namespace CommunityToolkit.WinUI.Controls;
6+
7+
/// <summary>
8+
/// Specifies the direction in which a <see cref="ResizeThumb"/> will resize its target element.
9+
/// </summary>
10+
public enum ResizeDirection
11+
{
12+
/// <summary>
13+
/// No resize.
14+
/// </summary>
15+
None,
16+
17+
/// <summary>
18+
/// Resize from the top. Manipulates the Y position and Height.
19+
/// </summary>
20+
Top,
21+
22+
/// <summary>
23+
/// Resize from the bottom. Manipulates the Height.
24+
/// </summary>
25+
Bottom,
26+
27+
/// <summary>
28+
/// Resize from the left. Manipulates the X position and Width.
29+
/// </summary>
30+
Left,
31+
32+
/// <summary>
33+
/// Resize from the right. Manipulates the Width.
34+
/// </summary>
35+
Right,
36+
37+
/// <summary>
38+
/// Resize from the upper-left corner. Manipulates the X position, Y position, Width, and Height.
39+
/// </summary>
40+
TopLeft,
41+
42+
/// <summary>
43+
/// Resize from the upper-right corner. Manipulates the Y position, Width, and Height.
44+
/// </summary>
45+
TopRight,
46+
47+
/// <summary>
48+
/// Resize from the lower-left corner. Manipulates the X position, Width, and Height.
49+
/// </summary>
50+
BottomLeft,
51+
52+
/// <summary>
53+
/// Resize from the lower-right corner. Manipulates the Width and Height.
54+
/// </summary>
55+
BottomRight,
56+
}

‎components/Adorners/src/ResizeElement/Thumb/ResizePositionMode.cs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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+
namespace CommunityToolkit.WinUI.Controls;
6+
7+
/// <summary>
8+
/// Specifies how the <see cref="ResizeThumb"/> will adjust the position of its target element.
9+
/// </summary>
10+
public enum ResizePositionMode
11+
{
12+
/// <summary>
13+
/// Resize using Canvas.Left and Canvas.Top properties.
14+
/// </summary>
15+
Canvas,
16+
17+
/// <summary>
18+
/// Resize using <see cref="FrameworkElement.Margin"/>'s Top and Left values.
19+
/// </summary>
20+
MarginTopLeft,
21+
}

0 commit comments

Comments
 (0)