Skip to content

Commit d996cb5

Browse files
michael-hawkermichael-hawker
committed
Add initial ConstrainedPresenter control for AspectRatio and simple Sample.
TODO: Tests and trying out more scenarios and better sample.
1 parent cbefac4 commit d996cb5

File tree

8 files changed

+234
-7
lines changed

8 files changed

+234
-7
lines changed

‎Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
1+
<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
22
<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
33
<PropertyGroup>
44
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
@@ -271,6 +271,7 @@
271271
<Content Include="SamplePages\Graph\LoginButton.png" />
272272
<Content Include="SamplePages\Graph\PeoplePicker.png" />
273273
<Content Include="SamplePages\Graph\PersonView.png" />
274+
<Content Include="SamplePages\Primitives\ConstrainedPresenter.png" />
274275
<Content Include="SamplePages\Primitives\SwitchPresenter.png" />
275276
<Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.png" />
276277
<Content Include="SamplePages\Animations\Effects\FadeBehavior.png" />
@@ -621,6 +622,9 @@
621622
<Content Include="SamplePages\Graph\PeoplePickerXaml.bind" />
622623
<Content Include="SamplePages\Graph\PersonViewXaml.bind" />
623624
<Content Include="SamplePages\ListViewExtensions\ListViewExtensionsCode.bind" />
625+
<Content Include="SamplePages\Primitives\ConstrainedPresenter.bind">
626+
<SubType>Designer</SubType>
627+
</Content>
624628
</ItemGroup>
625629
<ItemGroup>
626630
<Compile Include="App.xaml.cs">
@@ -1534,4 +1538,4 @@
15341538
</Target>
15351539
<!-- No-op to avoid build error when packing solution from commandline -->
15361540
<Target Name="Pack" />
1537-
</Project>
1541+
</Project>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Primitives/ConstrainedPresenter.bind‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
7+
mc:Ignorable="d">
8+
9+
<Grid>
10+
<controls:ConstrainedPresenter AspectRatio="16:3" VerticalAlignment="Top">
11+
<Image Source="/Assets/Photos/WestSeattleView.jpg" Stretch="UniformToFill"/>
12+
</controls:ConstrainedPresenter>
13+
</Grid>
14+
</Page>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Primitives/ConstrainedPresenter.png‎

825 Bytes
Loading

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
<controls:Case IsDefault="True" />
4848
</controls:CaseCollection>
4949
</controls:SwitchPresenter>
50+
<controls:ConstrainedPresenter x:Key="ConstrainedPresenterControl" />
5051
</Page.Resources>
5152

5253
<Grid>

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -475,6 +475,15 @@
475475
"XamlCodeFile": "/SamplePages/Primitives/SwitchPresenter.bind",
476476
"Icon": "/SamplePages/Primitives/SwitchPresenter.png",
477477
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/SwitchPresenter.md"
478+
},
479+
{
480+
"Name": "ConstrainedPresenter",
481+
"Subcategory": "Layout",
482+
"About": "The ConstrainedPresenter is a ContentPresenter which can allow a developer to constrain the scale or aspect ratio of its content.",
483+
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Primitives/ConstrainedPresenter",
484+
"XamlCodeFile": "/SamplePages/Primitives/ConstrainedPresenter.bind",
485+
"Icon": "/SamplePages/Primitives/ConstrainedPresenter.png",
486+
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ConstrainedPresenter.md"
478487
}
479488
]
480489
},
@@ -1259,4 +1268,4 @@
12591268
}
12601269
]
12611270
}
1262-
]
1271+
]

‎Microsoft.Toolkit.Uwp.UI.Controls.Primitives/ConstrainedPresenter/AspectRatio.cs‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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 System;
6+
7+
namespace Microsoft.Toolkit.Uwp.UI.Controls
8+
{
9+
/// <summary>
10+
/// The <see cref="AspectRatio"/> structure is used by the <see cref="ConstrainedPresenter"/> control to
11+
/// define a specific ratio to restrict its content.
12+
/// </summary>
13+
[Windows.Foundation.Metadata.CreateFromString(MethodName = "Microsoft.Toolkit.Uwp.UI.Controls.AspectRatio.ConvertToAspectRatio")]
14+
public readonly struct AspectRatio
15+
{
16+
/// <summary>
17+
/// Gets the width component of the aspect ratio or the aspect ratio itself (and height will be 1).
18+
/// </summary>
19+
public double Width { get; }
20+
21+
/// <summary>
22+
/// Gets the height component of the aspect ratio.
23+
/// </summary>
24+
public double Height { get; }
25+
26+
/// <summary>
27+
/// Gets the raw numeriucal aspect ratio value itself (Width / Height).
28+
/// </summary>
29+
public double Value => Width / Height;
30+
31+
/// <summary>
32+
/// Initializes a new instance of the <see cref="AspectRatio"/> struct with the provided width and height.
33+
/// </summary>
34+
/// <param name="width">Width side of the ratio.</param>
35+
/// <param name="height">Height side of the ratio.</param>
36+
public AspectRatio(double width, double height)
37+
{
38+
Width = width;
39+
Height = height;
40+
}
41+
42+
/// <summary>
43+
/// Initializes a new instance of the <see cref="AspectRatio"/> struct with the specific numerical aspect ratio.
44+
/// </summary>
45+
/// <param name="ratio">Raw Aspect Ratio, Height will be 1.</param>
46+
public AspectRatio(double ratio)
47+
{
48+
Width = ratio;
49+
Height = 1;
50+
}
51+
52+
/// <summary>
53+
/// Converter to take a string aspect ration like "16:9" and convert it to an <see cref="AspectRatio"/> struct.
54+
/// Used automatically by XAML.
55+
/// </summary>
56+
/// <param name="rawString">The string to be converted in format "Width:Height" or a decimal value.</param>
57+
/// <returns>The <see cref="AspectRatio"/> struct representing that ratio.</returns>
58+
public static AspectRatio ConvertToAspectRatio(string rawString)
59+
{
60+
string[] ratio = rawString.Split(":");
61+
62+
if (ratio.Length == 2)
63+
{
64+
return new AspectRatio(Convert.ToDouble(ratio[0]), Convert.ToDouble(ratio[1]));
65+
}
66+
else if (ratio.Length == 1)
67+
{
68+
return new AspectRatio(Convert.ToDouble(ratio[0]));
69+
}
70+
71+
return new AspectRatio(1);
72+
}
73+
74+
/// <inheritdoc/>
75+
public override string ToString()
76+
{
77+
return Width + ":" + Height;
78+
}
79+
}
80+
}

‎Microsoft.Toolkit.Uwp.UI.Controls.Primitives/ConstrainedPresenter/ConstrainedPresenter.cs‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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 System;
6+
using System.Collections.Generic;
7+
using System.Linq;
8+
using System.Text;
9+
using System.Threading.Tasks;
10+
using Windows.Foundation;
11+
using Windows.UI.Xaml;
12+
using Windows.UI.Xaml.Controls;
13+
14+
namespace Microsoft.Toolkit.Uwp.UI.Controls
15+
{
16+
/// <summary>
17+
/// The <see cref="ConstrainedPresenter"/> is a <see cref="ContentPresenter"/> control which can restrict the
18+
/// available size for its content based on a scale factor and/or a specific <see cref="AspectRatio"/>.
19+
/// </summary>
20+
public class ConstrainedPresenter : ContentPresenter // TODO: Think it should be a Border? But it's sealed; hopefully can change in WinUI 3.
21+
{
22+
/// <summary>
23+
/// Gets or sets aspect Ratio to use for the contents of the Panel (after scaling).
24+
/// </summary>
25+
public AspectRatio AspectRatio
26+
{
27+
get { return (AspectRatio)GetValue(AspectRatioProperty); }
28+
set { SetValue(AspectRatioProperty, value); }
29+
}
30+
31+
/// <summary>
32+
/// Identifies the <see cref="AspectRatio"/> property.
33+
/// </summary>
34+
public static readonly DependencyProperty AspectRatioProperty =
35+
DependencyProperty.Register(nameof(AspectRatio), typeof(AspectRatio), typeof(ConstrainedPresenter), new PropertyMetadata(null, AspectRatioPropertyChanged));
36+
37+
private static void AspectRatioPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
38+
{
39+
if (d is ConstrainedPresenter panel)
40+
{
41+
panel.InvalidateMeasure();
42+
}
43+
}
44+
45+
/// <summary>
46+
/// Gets or sets the scale for the width of the panel. Should be a value between 0-1.0. Default is 1.0.
47+
/// </summary>
48+
public double ScaleX
49+
{
50+
get { return (double)GetValue(ScaleXProperty); }
51+
set { SetValue(ScaleXProperty, value); }
52+
}
53+
54+
/// <summary>
55+
/// Identifies the <see cref="ScaleX"/> property.
56+
/// </summary>
57+
public static readonly DependencyProperty ScaleXProperty =
58+
DependencyProperty.Register(nameof(ScaleX), typeof(double), typeof(ConstrainedPresenter), new PropertyMetadata(1.0, ScalePropertyChanged));
59+
60+
/// <summary>
61+
/// Gets or sets the scale for the height of the panel. Should be a value between 0-1.0. Default is 1.0.
62+
/// </summary>
63+
public double ScaleY
64+
{
65+
get { return (double)GetValue(ScaleYProperty); }
66+
set { SetValue(ScaleYProperty, value); }
67+
}
68+
69+
/// <summary>
70+
/// Identifies the <see cref="ScaleY"/> property.
71+
/// </summary>
72+
public static readonly DependencyProperty ScaleYProperty =
73+
DependencyProperty.Register(nameof(ScaleY), typeof(double), typeof(ConstrainedPresenter), new PropertyMetadata(1.0, ScalePropertyChanged));
74+
75+
private static void ScalePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
76+
{
77+
if (d is ConstrainedPresenter panel)
78+
{
79+
panel.InvalidateMeasure();
80+
}
81+
}
82+
83+
/// <inheritdoc/>
84+
protected override Size MeasureOverride(Size availableSize)
85+
{
86+
return base.MeasureOverride(CalculateConstrainedSize(availableSize));
87+
}
88+
89+
/// <inheritdoc/>
90+
protected override Size ArrangeOverride(Size finalSize)
91+
{
92+
return base.ArrangeOverride(CalculateConstrainedSize(finalSize));
93+
}
94+
95+
private Size CalculateConstrainedSize(Size initialSize)
96+
{
97+
var availableSize = new Size(initialSize.Width * ScaleX, initialSize.Height * ScaleY);
98+
99+
// If we don't have an Aspect Ratio, just return the scaled value.
100+
if (ReadLocalValue(AspectRatioProperty) == DependencyProperty.UnsetValue)
101+
{
102+
return availableSize;
103+
}
104+
105+
// Calculate the Aspect Ratio constraint based on the newly scaled size.
106+
var currentAspect = availableSize.Width / availableSize.Height;
107+
var desiredAspect = AspectRatio.Value;
108+
109+
if (currentAspect >= desiredAspect)
110+
{
111+
return new Size(availableSize.Height * desiredAspect, availableSize.Height);
112+
}
113+
else
114+
{
115+
return new Size(availableSize.Width, availableSize.Width / desiredAspect);
116+
}
117+
}
118+
}
119+
}

‎Microsoft.Toolkit.Uwp.UI.Controls.Primitives/SwitchPresenter/SwitchPresenter.cs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ public Case CurrentCase
2828
}
2929

3030
/// <summary>
31-
/// Indicates the <see cref="CurrentCase"/> property.
31+
/// Identifies the <see cref="CurrentCase"/> property.
3232
/// </summary>
3333
public static readonly DependencyProperty CurrentCaseProperty =
3434
DependencyProperty.Register(nameof(CurrentCase), typeof(Case), typeof(SwitchPresenter), new PropertyMetadata(null));
@@ -43,7 +43,7 @@ public CaseCollection SwitchCases
4343
}
4444

4545
/// <summary>
46-
/// Indicates the <see cref="SwitchCases"/> property.
46+
/// Identifies the <see cref="SwitchCases"/> property.
4747
/// </summary>
4848
public static readonly DependencyProperty SwitchCasesProperty =
4949
DependencyProperty.Register(nameof(SwitchCases), typeof(CaseCollection), typeof(SwitchPresenter), new PropertyMetadata(null, OnSwitchCasesPropertyChanged));
@@ -58,7 +58,7 @@ public object Value
5858
}
5959

6060
/// <summary>
61-
/// Indicates the <see cref="Value"/> property.
61+
/// Identifies the <see cref="Value"/> property.
6262
/// </summary>
6363
public static readonly DependencyProperty ValueProperty =
6464
DependencyProperty.Register(nameof(Value), typeof(object), typeof(SwitchPresenter), new PropertyMetadata(null, OnValuePropertyChanged));
@@ -73,7 +73,7 @@ public Type TargetType
7373
}
7474

7575
/// <summary>
76-
/// Indicates the <see cref="TargetType"/> property.
76+
/// Identifies the <see cref="TargetType"/> property.
7777
/// </summary>
7878
public static readonly DependencyProperty TargetTypeProperty =
7979
DependencyProperty.Register(nameof(TargetType), typeof(Type), typeof(SwitchPresenter), new PropertyMetadata(null));

0 commit comments

Comments
 (0)