CODEWITHSUNDEEP
c#wpfnavigation
Bassie
Bassie

Reputation: 10400

How to style default NavigationUI

I'm using a Frame in a Window to display content and I added navigation with 

<Frame NavigationUIVisibility="Visible" Name="FrameContent" VerticalAlignment="Stretch" Margin="0,34,-0.8,0.4" Grid.RowSpan="2"/>

And in Window.xsml.cs

FrameContent.Navigate(new HomeView());

And the navigation bar looks like this:

enter image description here

Is there any way of changing the default look of this bar? Or is the only option to create a new one?

Upvotes: 3

Views: 1239

Answers (2)

guest
guest

Reputation: 21

There is a way to change the default look of the bar.

  1. Have the xaml file with the frame open.
  2. Open the document outline window. (From the Visual Studio Toolbar: View => Other Windows => Document Outline)
  3. In the Document Outline window right click on the frame to display a context menu.
  4. Select from the context menu: Edit Template => Edit a Copy...
  5. Press OK on the Create Style Resource window.
  6. Change the contents of Window.Resources to your liking.

Upvotes: 2

Nehorai Elbaz
Nehorai Elbaz

Reputation: 2452

In my WPF app I created my own, The simplest version of it was like:

<Grid VerticalAlignment="Top" Height="50" Background="DarkGray">
    <StackPanel Orientation="Horizontal">
         <Button Content="Back" Click="Back_Btn"/>
         <Button Content="Next" Click="Next_Btn"/>
     </StackPanel>
</Grid>

In code behind:

private void Next_Btn(object sender, RoutedEventArgs e)
{
   if (this.NavigationService.CanGoForward)
       NavigationService.GoForward();
    else
        NavigationService.Navigate(new HomeView());
}

private void Back_Btn(object sender, RoutedEventArgs e)
{
    if (this.NavigationService.CanGoBack)
        NavigationService.GoBack();
    else
        NavigationService.Navigate(new HomeView());
}

If you want you can design the buttons with materialdesign package from NuGet for example.

The MVVM version of it is more complex.

Upvotes: 3

Related Questions