Customizing PaneToggleButton Icon and Position in NavigationView UWP

Question

Customizing PaneToggleButton Icon and Position in NavigationView UWP

Sateesh Kumar N 1

I have tried to change PaneToggleButton icon using the default style PaneToggleButtonStyle and changed the Icon to '>'

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

But when I tried to achieve the following design, I am not able to move the Icon position to right as shown below

So how can I create a custom template for PaneToggleButton ?

Anonymous

2021-06-24T07:35:19.06+00:00

@Sateesh Kumar N Any updates about your issue? Does Nico's reply help you to solve the issue? If it helps, please consider accepting Nico's reply as answer.

1 answer

Your answer

Anonymous

2021-06-24T07:35:19.06+00:00

@Sateesh Kumar N Any updates about your issue? Does Nico's reply help you to solve the issue? If it helps, please consider accepting Nico's reply as answer.

Answer 1

Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,871

Hello, Welcome to Micorosoft Q&A,

Customizing PaneToggleButton Icon and Position in NavigationView UWP

if you has checked NavigationView style. you will find TogglePaneButton was placed on the RootGrid and on the top level, but not on the pane, so you can't place it on the right of panel.

For above design, the better way is make navigation base on SplitView. And make arrow button to control the splitview open or not.

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Sateesh Kumar N 1 Reputation point

2021-06-21T07:19:30.043+00:00
Thank you for your reply @Nico Zhu (Shanghai Wicresoft Co,.Ltd.) , I have tried using SplitView, in the SplitView.Pane I have added two columns to a grid and Placed the HamburgerButton to second column. Now the design is showing As shown below.

Added the following code to make the Pane to compact mode in HamburgerButton click event.

splitView.DisplayMode = SplitViewDisplayMode.CompactInline;

Now the screen is showing as shown, here the HamburgerButton icon is not visible. could you please help me to make the button visible in the second column itself

Nico Zhu (Shanghai Wicresoft Co,.Ltd.) 12,871

you could set ToggleBtn ColumnProperty dynamic in the code behind like the following.

private void ToggleBtn_Click(object sender, RoutedEventArgs e)
{
    MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
    if (MySplitView.IsPaneOpen)
    {
        ToggleBtn.SetValue(Grid.ColumnProperty, 1);
    }
    else
    {
        ToggleBtn.SetValue(Grid.ColumnProperty, 0);
    }

}