NavigationView WinUI3 справа

Один из способов сделать это — изменить стиль NavigationView.

Возьмите значение по умолчанию Style для NavigationView из generic.xaml. Убедитесь, что версия соответствует версии вашего WindowsAppSDK.

Минимальные изменения, которые вам нужно сделать:

• Установите HorizontalAlignment на Right в PaneToggleButtonGrid.
• Установите PanePlacement на Right в RootSplitView.
• Установите HorizontalAlignment на Right в PaneContentGrid.

<?xml version = "1.0" encoding = "utf-8" ?>
<Page
    x:Class = "RightNavigationViewExample.ShellPage"
    xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls = "using:Microsoft.UI.Xaml.Controls"
    xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local = "using:RightNavigationViewExample"
    xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable = "d">
    <Page.Resources>
        <Style
            x:Key = "RightNavigationViewStyle"
            TargetType = "controls:NavigationView">
            <Setter Property = "PaneToggleButtonStyle" Value = "{StaticResource PaneToggleButtonStyle}" />
            <Setter Property = "IsTabStop" Value = "False" />
            <Setter Property = "CompactPaneLength" Value = "{ThemeResource NavigationViewCompactPaneLength}" />
            <Setter Property = "CornerRadius" Value = "{ThemeResource OverlayCornerRadius}" />
            <Setter Property = "Template">
                <Setter.Value>
                    <ControlTemplate TargetType = "controls:NavigationView">
                        <Grid x:Name = "RootGrid">
                            <!--  Button grid  -->
                            <Grid
                                x:Name = "PaneToggleButtonGrid"
                                Width = "48"
                                HorizontalAlignment = "Right"
                                VerticalAlignment = "Top"
                                Canvas.ZIndex = "100">

                                <!--  ABBREVIATED  -->

                                <!--  Displaymode (compact/minimal/normal) left  -->
                                <SplitView
                                    x:Name = "RootSplitView"
                                    Grid.Row = "1"
                                    Background = "{TemplateBinding Background}"
                                    BorderBrush = "{ThemeResource NavigationViewItemSeparatorForeground}"
                                    BorderThickness = "{ThemeResource NavigationViewBorderThickness}"
                                    CompactPaneLength = "{TemplateBinding CompactPaneLength}"
                                    CornerRadius = "{Binding Source = {ThemeResource OverlayCornerRadius}, Converter = {StaticResource RightCornerRadiusFilterConverter}}"
                                    DisplayMode = "Inline"
                                    IsPaneOpen = "{Binding RelativeSource = {RelativeSource TemplatedParent}, Path=IsPaneOpen, Mode=TwoWay}"
                                    IsTabStop = "False"
                                    OpenPaneLength = "{Binding RelativeSource = {RelativeSource TemplatedParent}, Path=TemplateSettings.OpenPaneWidth}"
                                    PaneBackground = "{ThemeResource NavigationViewDefaultPaneBackground}"
                                    PanePlacement = "Right">
                                    <SplitView.Pane>
                                        <Grid
                                            x:Name = "PaneContentGrid"
                                            Margin = "{ThemeResource NavigationViewPaneContentGridMargin}"
                                            HorizontalAlignment = "Right"
                                            BorderBrush = "{ThemeResource NavigationViewItemSeparatorForeground}"
                                            Visibility = "{Binding RelativeSource = {RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
                                    <!--  ABBREVIATED  -->

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <!--  RightNavigationView  -->
    <Grid>
        <NavigationView
            SelectionChanged = "NavigationView_SelectionChanged"
            Style = "{StaticResource RightNavigationViewStyle}">
            <NavigationView.MenuItems>
                <NavigationViewItem
                    Content = "Home"
                    Tag = "RightNavigationViewExample.HomePage">
                    <NavigationViewItem.MenuItems>
                        <NavigationViewItem
                            Content = "Page A"
                            Tag = "RightNavigationViewExample.PageA" />
                    </NavigationViewItem.MenuItems>
                </NavigationViewItem>
            </NavigationView.MenuItems>
            <Frame x:Name = "ContentFrame" />
        </NavigationView>
    </Grid>
</Page>

Другой способ сделать это с меньшим количеством кода — получить целевые элементы и напрямую изменить свойства.

Вы можете получить целевые элементы с помощью VisualTreeHelper, но проще использовать пакет NuGet CommunityToolkit.WinUI.UI.

Во-первых, назовите свой элемент управления NavigationView, например. Райтнавигатионвиевконтрол.

<NavigationView
    x:Name = "RightNavigationViewControl"
    SelectionChanged = "NavigationView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem
            Content = "Home"
            Icon = "Home"
            Tag = "RightNavigationViewExample.HomePage">
            <NavigationViewItem.MenuItems>
                <NavigationViewItem
                    Content = "Page A"
                    Tag = "RightNavigationViewExample.PageA" />
            </NavigationViewItem.MenuItems>
        </NavigationViewItem>
    </NavigationView.MenuItems>
    <Frame x:Name = "ContentFrame" />
</NavigationView>

Затем получите целевые элементы с помощью метода расширения FindDescendant из CommunityToolkit.WinUI.UI и измените свойства следующим образом:

using CommunityToolkit.WinUI.UI;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;

namespace RightNavigationViewExample;

public sealed partial class ShellPage : Page
{
    public ShellPage()
    {
        this.InitializeComponent();
        this.RightNavigationViewControl.Loaded += RightNavigationViewControl_Loaded;
    }

    private void RightNavigationViewControl_Loaded(object sender, RoutedEventArgs e)
    {
        if (this.RightNavigationViewControl.FindDescendant<Grid>(x => x.Name is "PaneToggleButtonGrid") is Grid paneToggleButtonGrid &&
            this.RightNavigationViewControl.FindDescendant<SplitView>(x => x.Name is "RootSplitView") is SplitView rootSplitView &&
            this.RightNavigationViewControl.FindDescendant<Grid>(x => x.Name is "PaneContentGrid") is Grid paneContentGrid)
        {
            paneToggleButtonGrid.HorizontalAlignment = HorizontalAlignment.Right;
            rootSplitView.PanePlacement = SplitViewPanePlacement.Right;
            paneContentGrid.HorizontalAlignment = HorizontalAlignment.Right;
        }
    }
}