Those great looking navigation rails we created, work great as long as your app is simple and contains only the pages you defined in the nav rail control and you don't need any additional complex logic.
Let me give you an example where things can get complicated.
I want a settings page on my app, however I don't want to include it on the nav rail headers. It makes sense. You don't expect to have dozens of tabs on your nav rail as you'll have a very bad UX (User Experience).
So, what we do is make a hidden tab, because we want to keep our tab-page design consistency, and this tab will be displayed programmatically (not with a user clicking on the tab header). To accomplish this, we need our code to become Tab-Aware. That means our code needs to know what page is currently displayed and also it needs to have the ability to tell the window to select a specific tab. It's not that intuitive. The 'TabControl' control keeps the tabs in its own index, giving each tab a numeric index which makes the whole code navigation very difficult for the developer. The solution for that is two simple functions I wrote:
Set-NavigationRailTab - "selects" a tab programmatically.
Get-NavigationRailSelectedTabName - returns the name of the current selected tab.
Both functions use a friendly tab names you give to the tabs. You must name all of your tabs! To name a tab you put the Name attribute to the TabItem in Xaml. We are all set to go.
Please download Example8.PS1 and Example8.xaml and this time also download our common functions library file, CommonFunctions.ps1
If you skipped the post about how to include common files, read this here .
Launch the app and take a look at the Navigation bar. No 'settings' tab exists. Now open the hamburger menu and click on 'Settings'. The page appears.
The 'settings' tab was selected programmatically by this event action:
Set-NavigationRailTab -NavigationRail $NavRail -TabName "Settings"Every tab selection change will trigger a Snackbar showing you the selected tab, demonstrating the app's ability to be aware of what tab is being displayed.
One thing to mention on the PS code is the last line on ListBox's event:
$LeftDrawerListBox1.add_SelectionChanged({
....
$LeftDrawerListBox1.SelectedIndex = -1
})This line was added because MD's ListBox styles making it "remember" the last item a user selected until another one is selected. That behavior can cause "inert" clicks. To overcome this, you just let the ListBox forget its selection after a selection is made. -1 means nothing is selected.
Note that now, as we have our common functions file included, we use a new function to load the window data (New-Window), plus we use the New-Snackbar and Get-OpenFilePath from that file, and of course our tab related functions.
Take some time to explore all of the functions on the common file. Take a look at the parameters and learn what they are used for.
For example, the New-Window function has a switch that tells the function not to load the Snackbar queue. If you don't intend to use Snackbars on your app, use this switch and save an un-necessary burden to your app. Try finding it.
You can also try putting this switch and see what happens when running the app.
We'll keep adding functions to this file as we progress.
Comments