Non-changeable navigation button

Question

Introduction

I downloaded a template of a Universal Windows Platform (UWP) application and started making changes right away.

Problem

When I try to change the button responsible for shortening the left navigation page, I cannot make a change.

Source Code

<Page
    x:Class="AVE_VSCODE_EXTENSION.Views.ShellPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:behaviors="using:AVE_VSCODE_EXTENSION.Behaviors"
    xmlns:winui="using:Microsoft.UI.Xaml.Controls"
    xmlns:helpers="using:AVE_VSCODE_EXTENSION.Helpers"
    xmlns:views="using:AVE_VSCODE_EXTENSION.Views"
    Loaded="OnLoaded"
    mc:Ignorable="d">

    <winui:NavigationView
        x:Name="navigationView"
        IsBackButtonVisible="Visible"
        IsBackEnabled="{x:Bind IsBackEnabled, Mode=OneWay}"
        SelectedItem="{x:Bind Selected, Mode=OneWay}"
        ItemInvoked="OnItemInvoked"
        IsSettingsVisible="True"
        Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
        <winui:NavigationView.MenuItems>
            <!--
            TODO WTS: Change the symbols for each item as appropriate for your app
            More on Segoe UI Symbol icons: https://learn.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
            Or to use an IconElement instead of a Symbol see https://github.com/Microsoft/WindowsTemplateStudio/blob/release/docs/UWP/projectTypes/navigationpane.md
            Edit String/en-US/Resources.resw: Add a menu item title for each page
            -->
            <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Globe" helpers:NavHelper.NavigateTo="views:MainPage" />
            <winui:NavigationViewItem x:Uid="Shell_Chart" Icon="Admin" helpers:NavHelper.NavigateTo="views:ChartPage" />
        </winui:NavigationView.MenuItems>
        <i:Interaction.Behaviors>
            <behaviors:NavigationViewHeaderBehavior
                DefaultHeader="{x:Bind Selected.Content, Mode=OneWay}">
                <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                    <DataTemplate>
                        <Grid>
                            <TextBlock
                                Text="{Binding}"
                                Style="{ThemeResource TitleTextBlockStyle}"
                                Margin="{StaticResource SmallLeftRightMargin}" />
                        </Grid>
                    </DataTemplate>
                </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
            </behaviors:NavigationViewHeaderBehavior>
        </i:Interaction.Behaviors>
        <Grid>
            <Frame x:Name="shellFrame" />
        </Grid>
    </winui:NavigationView>
</Page>

Answer 1

When I try to change the button responsible for shortening the left navigation page, I cannot make a change.

The shortening button of navigation page is PaneToggleButton, and it has independent style to descript the content, you could place the following style in your app's resource and edit the Icon Textblock to approach like the following.

<Application.Resources>
    <Style x:Key="PaneToggleButtonStyle" TargetType="Button">
        <Setter Property="FontSize" Value="16" />
        <Setter Property="FontFamily" Value="{StaticResource SymbolThemeFontFamily}" />
        <Setter Property="MinHeight" Value="{StaticResource PaneToggleButtonHeight}" />
        <Setter Property="MinWidth" Value="{StaticResource PaneToggleButtonWidth}" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
        <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
        <Setter Property="BorderThickness" Value="{ThemeResource NavigationViewToggleBorderThickness}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid
                        x:Name="LayoutRoot"
                        Height="{TemplateBinding MinHeight}"
                        MinWidth="{TemplateBinding MinWidth}"
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="Stretch"
                        Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="{ThemeResource PaneToggleButtonHeight}" />
                        </Grid.RowDefinitions>

                        <Viewbox
                            x:Name="IconHost"
                            Width="16"
                            Height="16"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            AutomationProperties.AccessibilityView="Raw">

                            <TextBlock
                                x:Name="Icon"
                                AutomationProperties.AccessibilityView="Raw"
                                FontSize="{TemplateBinding FontSize}"
                                Text="&#xE718;" />

                        </Viewbox>

                        <ContentPresenter
                            x:Name="ContentPresenter"
                            Grid.Column="1"
                            VerticalContentAlignment="Center"
                            AutomationProperties.AccessibilityView="Raw"
                            Content="{TemplateBinding Content}"
                            FontSize="{TemplateBinding FontSize}" />

                        <Border
                            x:Name="RevealBorder"
                            Grid.ColumnSpan="2"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" />

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />

                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ButtonBackgroundDisabled}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Checked">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundChecked}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundChecked}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="CheckedPointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="CheckedPressed">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedPressed}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="CheckedDisabled">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ToggleButtonBackgroundCheckedDisabled}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ToggleButtonForegroundCheckedDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                    </Grid>

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