Navigation Bar in less than 2 minutes

MDIX (Material Design In Xaml) contains a VERY simple yet beautiful looking navigation bar. MD calls it a "Navigation Rail Tab Control". Whatever.

It is, of course, based on a basic WPF TabControl, but he himself won't recognize it if he sees one...

So, as I promised, this Navigation Rail can be up and ready in no time, and what would you say if I'll tell you there is no need for PS code beside the basic template you already know? Am I serious? Yes I am.

Download Example6 from my GitHub here .

Here is how it looks on the simplest example I made:

You can put the rail on any side of the screen depending on your app design. Here is a left rail example from MD's official site:

The only thing I needed to do with this navigation rail is add content for each page and select the icons and captions for the header. That's all there is to do.

There is a nice shadow set, the animation looks great and the active page on the header is beautifully highlighted.

For our next apps, being more complex, we will make some changes to the rail so it can give us the right design we want.

Here is the basic construct of this Xaml control:

<TabControl 
Style="{StaticResource MaterialDesignNavigatilRailTabControl}" 
TabStripPlacement="Top"
materialDesign:ShadowAssist.ShadowDepth="Depth3" 
materialDesign:ColorZoneAssist.Mode="PrimaryDark"
materialDesign:NavigationRailAssist.SelectionCornerRadius="50 10 10 10" 
materialDesign:NavigationRailAssist.ShowSelectionBackground="True">

  <materialDesign:NavigationRailAssist.FloatingContent>
    <!-- Here you can put any Xaml controls. 
        They will be placed on the right or top of the tab headers 
        When the control is placed on top or on the side 
        respectively -->
  </materialDesign:NavigationRailAssist.FloatingContent>

  <TabItem>
    <TabItem.Header>
      <!-- The tab header comes here. Either text or text with icon -->
    </TabItem.Header>
    <!-- This is the place where you put your page content -->
  </TabItem>
        
</TabControl>

The control properties are straightforward.

The "SelectionCornerRadius" property, is the one that gives the nice highlighted background shape for the tab headers.

Of course, for every page you want to put, you need to duplicate all the TabItem part (from <TabItem> to </TabItem>).

Before we finish, the net is full of discussion groups and technical pages about Dragablz TabControl. Well, it is a great product, and it has some cool features like moving the tab labels on the bar's headers with drag and drop and even popping the tab out as a new window if you drag it outside the bar, however personally I will keep on using MD's navigation rails (unless it is very much needed for the app). My goal is to "keep it simple".