PropertySizer

For instance, manipulating the OpenPaneLength of a NavigationView control. If you are using a Grid, use GridSplitter instead.

Examples

The main use-case is for PropertySizer to allow you to manipulate the OpenPaneLength property of a NavigationView control to create a user customizable size shelf. This is handy when using NavigationView with a tree of items that represents some project or folder structure for your application.

Both GridSplitter and ContentSizer are insufficient as they would force the NavigationView to a specific size and not allow it to remember its size when it expands or collapses.

<!--  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.  -->
<Page x:Class="SizersExperiment.Samples.PropertySizerNavigationViewPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
      mc:Ignorable="d">

    <muxc:NavigationView x:Name="ViewPanel"
                         Width="500"
                         MinHeight="300"
                         HorizontalAlignment="Left"
                         IsPaneOpen="True"
                         OpenPaneLength="300"
                         PaneDisplayMode="Left">
        <muxc:NavigationView.AutoSuggestBox>
            <AutoSuggestBox AutomationProperties.Name="Search"
                            QueryIcon="Find" />
        </muxc:NavigationView.AutoSuggestBox>
        <muxc:NavigationView.MenuItems>
            <muxc:NavigationViewItem Content="Menu Item1"
                                     Tag="SamplePage1">
                <muxc:NavigationViewItem.Icon>
                    <SymbolIcon Symbol="Play" />
                </muxc:NavigationViewItem.Icon>
            </muxc:NavigationViewItem>
            <muxc:NavigationViewItem Content="Menu Item2"
                                     Tag="SamplePage2">
                <muxc:NavigationViewItem.Icon>
                    <SymbolIcon Symbol="Save" />
                </muxc:NavigationViewItem.Icon>
            </muxc:NavigationViewItem>
            <muxc:NavigationViewItem Content="Menu Item3 with Really Long Name and Such..."
                                     Tag="SamplePage3">
                <muxc:NavigationViewItem.Icon>
                    <SymbolIcon Symbol="Refresh" />
                </muxc:NavigationViewItem.Icon>
            </muxc:NavigationViewItem>
            <muxc:NavigationViewItem Content="Menu Item4"
                                     Tag="SamplePage4">
                <muxc:NavigationViewItem.Icon>
                    <SymbolIcon Symbol="Download" />
                </muxc:NavigationViewItem.Icon>
            </muxc:NavigationViewItem>
        </muxc:NavigationView.MenuItems>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <!--  Note the use of a TwoWay binding here, this is required for this control to work.  -->
            <controls:PropertySizer HorizontalAlignment="Left"
                                    Binding="{x:Bind ViewPanel.OpenPaneLength, Mode=TwoWay}"
                                    Maximum="440"
                                    Minimum="52"
                                    Visibility="{x:Bind ViewPanel.IsPaneOpen, Mode=OneWay}" />
            <!--In An Application, put your host frame here: <Frame Grid.Column="1"/>-->
            <!--  Here we show the content as a border for a visual aid  -->
            <Border Grid.Column="1"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Background="{ThemeResource AccentFillColorDefaultBrush}">
                <TextBlock HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
                           Text="{x:Bind ViewPanel.OpenPaneLength, Mode=OneWay}" />
            </Border>
        </Grid>
    </muxc:NavigationView>
</Page>

// 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.

namespace SizersExperiment.Samples;

[ToolkitSample(id: nameof(PropertySizerNavigationViewPage), "NavigationView Shelf", description: "Shows how to create an expandable shelf using a NavigationView and PropertySizer.")]
public sealed partial class PropertySizerNavigationViewPage : Page
{
    public PropertySizerNavigationViewPage()
    {
        this.InitializeComponent();
    }
}