CODEWITHSUNDEEP
uwpuwp-xaml
Xinpeng
Xinpeng

Reputation: 75

Is it possible to change NavigationView's settings item's icon and text?

Basically when using NavigationView, the settings item always shows up as a gear icon and a text of "Settings". Is it possible to change these two things?

Upvotes: 6

Views: 3788

Answers (3)

RK Coder
RK Coder

Reputation: 438

My answer is based on @Andreas Fredriksson answer, but contains the Icon change as well:

private void Navigation_Loaded(object sender, RoutedEventArgs e)
{
      var settings = (NavigationViewItem)Navigation.SettingsItem;
      settings.Content = "Help";
      settings.Icon = new SymbolIcon((Symbol)0xE897); 
}

Upvotes: 2

Andreas Fredriksson
Andreas Fredriksson

Reputation: 51

This is how I changed the text:

private void Navigation_Loaded(object sender, RoutedEventArgs e)
{
    var settings = (Microsoft.UI.Xaml.Controls.NavigationViewItem) Navigation.SettingsItem;
    settings.Content = "Other settings";
}

Navigation is my control <NavigationView x:Name="Navigation" /> in XAML.

Upvotes: 5

Martin Zikmund
Martin Zikmund

Reputation: 39082

Yes, you can edit the default template of the control to modify the style of the settings area. You can find the following there:

<NavigationViewItem x:Name="SettingsNavPaneItem" Grid.Row="5">
    <NavigationViewItem.Icon>
        <SymbolIcon Symbol="Setting"/>
    </NavigationViewItem.Icon>
</NavigationViewItem>

So changing the icon is easy. Regarding the text you may be able to change it here as well, but I am not sure if the control will not override it and can't verify as I'm not at my PC. Try to use the SettingsItem property of the NavigationView and cast to NavigationViewItem.

Update: Changing the text

Here is how you can customize the settings item text, I don't know why I haven't thought about it before - create a custom NavigationView and update the text manually in OnApplyTemplate:

public class CustomizableNavigationView : NavigationView
{
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var settingsItem = (NavigationViewItem)GetTemplateChild("SettingsNavPaneItem");
        settingsItem.Content = "Custom text";
    }
}

Update: WinUI

Going forward, the recommended solution will be to use the WinUI library and its NavigationView control. This allows you to add multiple NavigatoinItem in the PaneFooter area and those are fully configurable. In addition to this the new control supports not only classic hamburger menu display but also can display horizontally on top of the view, which is now the recommended navigation pattern on large screens.

Upvotes: 3

Related Questions