Home > Net >  How to add a button in a NavigationView using UWP?
How to add a button in a NavigationView using UWP?

Time:12-22

I'm implementing a NavigationView like described is enter image description here

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.

CodePudding user response:

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>

  • Related