Updated TabbedCommandBar for WinUI 2.6 (#4132)

## Fixes #4085

Previously, `TabbedCommandBar` used the system XAML `NavigationView`, but this doesn't work on WinUI 3. This PR makes the control functional on WinUI 2.6+ and 3.x, albeit with a few style issues (which will be fixed either in this PR or a later one).

## PR Type
What kind of change does this PR introduce?

Bugfix
Refactoring (no functional changes, no api changes)


## What is the current behavior?
See #4085


## What is the new behavior?
- `TabbedCommandBar` now inherits from MUXC `NavigationView` and uses 2.6 styles
- `Normal*` and `ContextualTabTemplate` now use MUXC `NavigationViewItem`


## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tested code with current [supported SDKs](../readme.md#supported)
- [ ] Tests for the changes have been added (for bug fixes / features) (if applicable)
- [x] Contains **NO** breaking changes

Author: msftbot[bot]

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind

@@ -14,7 +14,10 @@
             <RowDefinition/>
         </Grid.RowDefinitions>
 
-        <controls:TabbedCommandBar>
+        <controls:TabbedCommandBar> <!-- IsBackButtonVisible="Visible" -->
+            <controls:TabbedCommandBar.AutoSuggestBox>
+                <AutoSuggestBox QueryIcon="Find" AutomationProperties.Name="Search" />
+            </controls:TabbedCommandBar.AutoSuggestBox>
             <controls:TabbedCommandBar.PaneFooter>
                 <CommandBar Background="Transparent" DefaultLabelPosition="Right">
                     <AppBarButton Label="Share" Icon="Share"/>

Microsoft.Toolkit.Uwp.UI.Controls.Core/TabbedCommandBar/TabbedCommandBar.cs

@@ -6,8 +6,9 @@
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Markup;
-using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Media.Animation;
+using NavigationView = Microsoft.UI.Xaml.Controls.NavigationView;
+using NavigationViewSelectionChangedEventArgs = Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
 {
@@ -36,8 +37,10 @@ public class TabbedCommandBar : NavigationView
         public TabbedCommandBar()
         {
             DefaultStyleKey = typeof(TabbedCommandBar);
+            DefaultStyleResourceUri = new System.Uri("ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls.Core/Themes/Generic.xaml");
 
             SelectionChanged += SelectedItemChanged;
+            Loaded += TabbedCommandBar_Loaded;
         }
 
         /// <inheritdoc/>
@@ -55,6 +58,15 @@ protected override void OnApplyTemplate()
             _tabbedCommandBarContentBorder = GetTemplateChild("PART_TabbedCommandBarContentBorder") as Border;
             _tabChangedStoryboard = GetTemplateChild("TabChangedStoryboard") as Storyboard;
 
+            // TODO: We could maybe optimize and use a lower-level Loaded event for what's hosting the MenuItems
+            // to set SelectedItem, but then we may have to pull in another template part, so think we're OK
+            // to do the Loaded event at the top level.
+        }
+
+        private void TabbedCommandBar_Loaded(object sender, RoutedEventArgs e)
+        {
+            // We need to select the item after the template is realized, otherwise the SelectedItem's
+            // DataTemplate bindings don't properly navigate the visual tree.
             SelectedItem = MenuItems.FirstOrDefault();
         }