Skip to content

Commit d06200f

Browse files
michael-hawkermichael-hawker
committed
Add PropertySizer with NavigationView sample
Works amazing, first try!
1 parent af98809 commit d06200f

File tree

7 files changed

+199
-2
lines changed

7 files changed

+199
-2
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -649,6 +649,7 @@
649649
<Content Include="SamplePages\RichSuggestBox\RichSuggestBoxCode.bind" />
650650
<Content Include="SamplePages\Sizers\ContentSizer.bind" />
651651
<Content Include="SamplePages\Sizers\GridSplitter.bind" />
652+
<Content Include="SamplePages\Sizers\PropertySizer.bind" />
652653
</ItemGroup>
653654
<ItemGroup>
654655
<Compile Include="App.xaml.cs">

‎Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Sizers/PropertySizer.bind‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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+
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
8+
mc:Ignorable="d">
9+
10+
<muxc:NavigationView
11+
x:Name="ViewPanel"
12+
PaneDisplayMode="Left"
13+
IsPaneOpen="False"
14+
OpenPaneLength="300">
15+
<muxc:NavigationView.AutoSuggestBox>
16+
<AutoSuggestBox AutomationProperties.Name="Search" QueryIcon="Find" />
17+
</muxc:NavigationView.AutoSuggestBox>
18+
<muxc:NavigationView.MenuItems>
19+
<muxc:NavigationViewItem Content="Menu Item1" Tag="SamplePage1">
20+
<muxc:NavigationViewItem.Icon>
21+
<SymbolIcon Symbol="Play" />
22+
</muxc:NavigationViewItem.Icon>
23+
</muxc:NavigationViewItem>
24+
<muxc:NavigationViewItem Content="Menu Item2" Tag="SamplePage2">
25+
<muxc:NavigationViewItem.Icon>
26+
<SymbolIcon Symbol="Save" />
27+
</muxc:NavigationViewItem.Icon>
28+
</muxc:NavigationViewItem>
29+
<muxc:NavigationViewItem Content="Menu Item3 with Really Long Name and Such..." Tag="SamplePage3">
30+
<muxc:NavigationViewItem.Icon>
31+
<SymbolIcon Symbol="Refresh" />
32+
</muxc:NavigationViewItem.Icon>
33+
</muxc:NavigationViewItem>
34+
<muxc:NavigationViewItem Content="Menu Item4" Tag="SamplePage4">
35+
<muxc:NavigationViewItem.Icon>
36+
<SymbolIcon Symbol="Download" />
37+
</muxc:NavigationViewItem.Icon>
38+
</muxc:NavigationViewItem>
39+
</muxc:NavigationView.MenuItems>
40+
<Grid>
41+
<Grid.ColumnDefinitions>
42+
<ColumnDefinition Width="Auto"/>
43+
<ColumnDefinition Width="*"/>
44+
</Grid.ColumnDefinitions>
45+
<controls:PropertySizer Binding="{Binding OpenPaneLength, ElementName=ViewPanel, Mode=TwoWay}"
46+
HorizontalAlignment="Left"
47+
Visibility="{Binding IsPaneOpen, ElementName=ViewPanel}"/>
48+
<!--In An Application, put your host frame here: <Frame Grid.Column="1"/>-->
49+
<!--Here we show the content as a border for a visual aid -->
50+
<Border
51+
BorderBrush="Red"
52+
BorderThickness="4"
53+
HorizontalAlignment="Stretch"
54+
VerticalAlignment="Stretch"
55+
Grid.Column="1">
56+
<TextBlock
57+
HorizontalAlignment="Center"
58+
VerticalAlignment="Center"
59+
Text="{Binding OpenPaneLength, ElementName=ViewPanel}" />
60+
</Border>
61+
</Grid>
62+
</muxc:NavigationView>
63+
</Page>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
</controls:DataGrid.Columns>
6666
</controls:DataGrid>
6767
<controls:GridSplitter x:Key="GridSplitterControl" />
68+
<controls:PropertySizer x:Key="PropertySizerControl" />
6869
</Page.Resources>
6970

7071
<Grid>

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@
179179
"Name": "ContentSizer",
180180
"Subcategory": "Layout",
181181
"About": "ContentSizer is a general sizing control which can manipulate the size of its parent or other elements. Used as a building block for more complex UI systems.",
182-
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/ContentSizer",
182+
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Sizers/ContentSizer",
183183
"XamlCodeFile": "/SamplePages/Sizers/ContentSizer.bind",
184184
"Icon": "/SamplePages/Sizers/ContentSizer.png",
185185
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ContentSizer.md"
@@ -188,11 +188,20 @@
188188
"Name": "GridSplitter",
189189
"Subcategory": "Layout",
190190
"About": "GridSplitter represents the control that redistributes space between columns or rows of a Grid control.",
191-
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/GridSplitter",
191+
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Sizers/GridSplitter",
192192
"XamlCodeFile": "/SamplePages/Sizers/GridSplitter.bind",
193193
"Icon": "/SamplePages/Sizers/GridSplitter.png",
194194
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/GridSplitter.md"
195195
},
196+
{
197+
"Name": "PropertySizer",
198+
"Subcategory": "Layout",
199+
"About": "PropertySizer is a specific sizing control which can manipulate any double value or some other element or property.",
200+
"CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Controls.Layout/Sizers/PropertySizer",
201+
"XamlCodeFile": "/SamplePages/Sizers/PropertySizer.bind",
202+
"Icon": "/SamplePages/Sizers/ContentSizer.png",
203+
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/ContentSizer.md"
204+
},
196205
{
197206
"Name": "AttachedDropShadow (Composition)",
198207
"Type": "AttachedDropShadowPage",

‎Microsoft.Toolkit.Uwp.UI.Controls.Layout/Sizers/PropertySizer/PropertySizer.Events.cs‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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 Microsoft.Toolkit.Uwp.UI;
6+
using Windows.UI.Core;
7+
using Windows.UI.Xaml;
8+
using Windows.UI.Xaml.Controls;
9+
using Windows.UI.Xaml.Input;
10+
11+
namespace Microsoft.Toolkit.Uwp.UI.Controls
12+
{
13+
/// <summary>
14+
/// Events for <see cref="PropertySizer"/>.
15+
/// </summary>
16+
public partial class PropertySizer
17+
{
18+
private double _currentSize;
19+
20+
/// <inheritdoc/>
21+
protected override void OnDragStarting()
22+
{
23+
if (ReadLocalValue(BindingProperty) != DependencyProperty.UnsetValue)
24+
{
25+
_currentSize = Binding;
26+
}
27+
}
28+
29+
/// <inheritdoc/>
30+
protected override bool OnDragHorizontal(double horizontalChange)
31+
{
32+
horizontalChange = IsDragInverted ? -horizontalChange : horizontalChange;
33+
34+
// TODO: Setup a Minimum/Maximum properties to constrain bounds
35+
////if (!IsValidWidth(TargetControl, _currentSize + horizontalChange, ActualWidth))
36+
////{
37+
//// return false;
38+
////}
39+
40+
SetValue(BindingProperty, _currentSize + horizontalChange);
41+
42+
return true;
43+
}
44+
45+
/// <inheritdoc/>
46+
protected override bool OnDragVertical(double verticalChange)
47+
{
48+
verticalChange = IsDragInverted ? -verticalChange : verticalChange;
49+
50+
////if (!IsValidHeight(TargetControl, _currentSize + verticalChange, ActualHeight))
51+
////{
52+
//// return false;
53+
////}
54+
55+
SetValue(BindingProperty, _currentSize + verticalChange);
56+
57+
return true;
58+
}
59+
}
60+
}

‎Microsoft.Toolkit.Uwp.UI.Controls.Layout/Sizers/PropertySizer/PropertySizer.Properties.cs‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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 Windows.UI.Xaml;
6+
using Windows.UI.Xaml.Controls;
7+
8+
namespace Microsoft.Toolkit.Uwp.UI.Controls
9+
{
10+
/// <summary>
11+
/// Properties for <see cref="PropertySizer"/>.
12+
/// </summary>
13+
public partial class PropertySizer
14+
{
15+
/// <summary>
16+
/// Gets or sets a value indicating whether the <see cref="PropertySizer"/> control is resizing in the opposite direction.
17+
/// </summary>
18+
public bool IsDragInverted
19+
{
20+
get { return (bool)GetValue(IsDragInvertedProperty); }
21+
set { SetValue(IsDragInvertedProperty, value); }
22+
}
23+
24+
/// <summary>
25+
/// Identifies the <see cref="IsDragInverted"/> dependency property.
26+
/// </summary>
27+
public static readonly DependencyProperty IsDragInvertedProperty =
28+
DependencyProperty.Register(nameof(IsDragInverted), typeof(bool), typeof(PropertySizer), new PropertyMetadata(false));
29+
30+
/// <summary>
31+
/// Gets or sets the binding to a <c>double</c> value that the <see cref="PropertySizer"/> is manipulating.
32+
/// </summary>
33+
/// <example>
34+
/// &lt;controls:PropertySizer Binding="{Binding OpenPaneLength, ElementName=ViewPanel, Mode=TwoWay}"&gt;
35+
/// </example>
36+
public double Binding
37+
{
38+
get { return (double)GetValue(BindingProperty); }
39+
set { SetValue(BindingProperty, value); }
40+
}
41+
42+
/// <summary>
43+
/// Identifies the <see cref="Binding"/> dependency property.
44+
/// </summary>
45+
public static readonly DependencyProperty BindingProperty =
46+
DependencyProperty.Register(nameof(Binding), typeof(double), typeof(PropertySizer), new PropertyMetadata(null));
47+
}
48+
}

‎Microsoft.Toolkit.Uwp.UI.Controls.Layout/Sizers/PropertySizer/PropertySizer.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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 Windows.UI.Xaml.Controls;
6+
7+
namespace Microsoft.Toolkit.Uwp.UI.Controls
8+
{
9+
/// <summary>
10+
/// The <see cref="PropertySizer"/> is a control which can be used to manipulate the value of another <c>double</c> based property. For instance manipulating the <c>OpenPaneLength</c> of a <c>NavigationView</c> control. If you are using a <see cref="Grid"/>, use <see cref="GridSplitter"/> instead.
11+
/// </summary>
12+
public partial class PropertySizer : SizerBase
13+
{
14+
}
15+
}

0 commit comments

Comments
 (0)