How to add a button in a NavigationView using UWP?

Question

I'm implementing a NavigationView like described is this topic.

Between the nav items (NavigationViewItem) I need to add a simple button, that will just execute an action, it will not navigate anywhere.

Every control I add to nav receives the property to stay selected when clicked, but I need a control that doesn't deselect the current nav, just execute an action.

Does anyone know how to do this or can suggest a solution? Grateful.

Answer 1

but I need a control that doesn't deselect the current nav, just execute an action.

Sure, you could edit the default NavigationView style and insert button into PaneContentGrid , and you could get default NavigationView style from generic.xaml file, then find PaneContentGrid add button like the following ( InsertButton ).

<SplitView.Pane>
    <Grid x:Name="PaneContentGrid" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.LeftPaneVisibility}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="0" />
            <!--  above button margin + back button space  -->
            <RowDefinition x:Name="PaneContentGridToggleButtonRow" Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="8" />
            <!--  above list margin  -->
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="8" />
        </Grid.RowDefinitions>

        <Grid x:Name="ContentPaneTopPadding" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.TopPadding}" />

        <Grid Grid.Row="2" Height="{StaticResource PaneToggleButtonHeight}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="{ThemeResource PaneToggleButtonWidth}" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <ContentControl
                x:Name="PaneHeaderContentBorder"
                Grid.Column="1"
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Stretch"
                IsTabStop="False" />
        </Grid>

        <Grid
            x:Name="AutoSuggestArea"
            Grid.Row="3"
            Height="{ThemeResource NavigationViewTopPaneHeight}"
            VerticalAlignment="Center">

            <ContentControl
                x:Name="PaneAutoSuggestBoxPresenter"
                Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}"
                HorizontalContentAlignment="Stretch"
                VerticalContentAlignment="Center"
                IsTabStop="False" />

            <Button
                x:Name="PaneAutoSuggestButton"
                Width="{TemplateBinding CompactPaneLength}"
                Style="{ThemeResource NavigationViewPaneSearchButtonStyle}"
                Visibility="Collapsed" />
        </Grid>

        <ContentControl
            x:Name="PaneCustomContentBorder"
            Grid.Row="4"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            IsTabStop="False" />

        <!--  Left nav list  -->
        <NavigationViewList
            x:Name="MenuItemsHost"
            Grid.Row="6"
            Margin="0,0,0,20"
            HorizontalAlignment="Stretch"
            IsItemClickEnabled="True"
            ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
            ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}"
            ItemTemplate="{TemplateBinding MenuItemTemplate}"
            ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}"
            SelectedItem="{TemplateBinding SelectedItem}"
            SelectionMode="Single"
            SingleSelectionFollowsFocus="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.SingleSelectionFollowsFocus}" />

        <ContentControl
            x:Name="FooterContentBorder"
            Grid.Row="7"
            HorizontalContentAlignment="Stretch"
            VerticalContentAlignment="Stretch"
            IsTabStop="False" />
        <Button Grid.Row="7" Content="Command"  x:Name="InsertButton"/>
        <NavigationViewItem
            x:Name="SettingsNavPaneItem"
            Grid.Row="8"
            Icon="Setting" />
    </Grid>
</SplitView.Pane>

If you don't want to edit style, you could also insert button into NavigationView PaneFooter like following

<NavigationView x:Name="nvSample">
    <NavigationView.MenuItems>
        <NavigationViewItem
            Content="Menu Item1"
            Icon="Play"
            Tag="SamplePage1" />
        <NavigationViewItem
            Content="Menu Item2"
            Icon="Save"
            Tag="SamplePage2" />
        <NavigationViewItem
            Content="Menu Item3"
            Icon="Refresh"
            Tag="SamplePage3" />
        <NavigationViewItem
            Content="Menu Item4"
            Icon="Download"
            Tag="SamplePage4" />
    </NavigationView.MenuItems>
    <Frame x:Name="contentFrame" />
    <NavigationView.PaneFooter>
        <Button Content="Click"/>
    </NavigationView.PaneFooter>
</NavigationView>