From 255eee88afda481bc32eedd87c1543ed558579e8 Mon Sep 17 00:00:00 2001
From: YoshiAsk <jjask7@gmail.com>
Date: Mon, 2 Nov 2020 14:50:39 -0600
Subject: [PATCH 1/5] Add initial work for TabbedCommandBar

---
 .../Microsoft.Toolkit.Uwp.UI.Controls.csproj  |   3 +
 .../TabbedCommandBar/TabbedCommandBar.cs      | 117 +++++
 .../TabbedCommandBar/TabbedCommandBar.xaml    | 443 ++++++++++++++++++
 .../TabbedCommandBar/TabbedCommandBarItem.cs  | 100 ++++
 .../TabbedCommandBarItemTemplateSelector.cs   |  37 ++
 .../Themes/Generic.xaml                       |   1 +
 .../VisualStudioToolsManifest.xml             |   1 +
 Windows Community Toolkit.sln                 |  43 --
 8 files changed, 702 insertions(+), 43 deletions(-)
 create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs
 create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
 create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs
 create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItemTemplateSelector.cs

diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj
index 6258250a2f0..e66525ff1e6 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj
@@ -71,6 +71,9 @@
      <Page Update="RemoteDevicePicker\RemoteDevicePicker.xaml">
       <SubType>Designer</SubType>
     </Page>
+     <Page Update="Ribbon\Ribbon.xaml">
+       <Generator>MSBuild:Compile</Generator>
+     </Page>
      <Page Update="TokenizingTextBox\TokenizingTextBox.xaml">
        <Generator>MSBuild:Compile</Generator>
      </Page>
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs
new file mode 100644
index 00000000000..a1284f4ea78
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.cs
@@ -0,0 +1,117 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Collections.Generic;
+using System.Linq;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Markup;
+using Windows.UI.Xaml.Media.Animation;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// A basic ribbon control that houses <see cref="TabbedCommandBarItem"/>s
+    /// </summary>
+    [ContentProperty(Name = nameof(Items))]
+    [TemplatePart(Name = "PART_RibbonNavigationView", Type = typeof(NavigationView))]
+    [TemplatePart(Name = "PART_RibbonContent", Type = typeof(ContentControl))]
+    [TemplatePart(Name = "PART_TabChangedStoryboard", Type = typeof(Storyboard))]
+    public class TabbedCommandBar : Control
+    {
+        private NavigationView _ribbonNavigationView = null;
+        private ContentControl _ribbonContent = null;
+        private Storyboard _tabChangedStoryboard = null;
+
+        // This should probably be made public at some point
+        private TabbedCommandBarItem SelectedTab { get; set; }
+
+        /// <summary>
+        /// Identifies the <see cref="Items"/> property.
+        /// </summary>
+        public static readonly DependencyProperty ItemsProperty = DependencyProperty.Register(
+            nameof(Items),
+            typeof(IList<object>),
+            typeof(TabbedCommandBar),
+            new PropertyMetadata(new List<object>()));
+
+        /// <summary>
+        /// Identifies the <see cref="Footer"/> property.
+        /// </summary>
+        public static readonly DependencyProperty FooterProperty = DependencyProperty.Register(
+            nameof(Footer),
+            typeof(UIElement),
+            typeof(TabbedCommandBar),
+            new PropertyMetadata(new Border()));
+
+        // I would prefer this be an IList<TabbedCommandBarItem>, but Intellisense really doesn't like that.
+        /// <summary>
+        /// Gets or sets A list of <see cref="TabbedCommandBarItem"/>s to display in this <see cref="TabbedCommandBar"/>.
+        /// </summary>
+        public IList<object> Items
+        {
+            get { return (IList<object>)GetValue(ItemsProperty); }
+            set { SetValue(ItemsProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the <see cref="UIElement"/> to be displayed in the footer of the ribbon tab strip.
+        /// </summary>
+        public UIElement Footer
+        {
+            get { return (UIElement)GetValue(FooterProperty); }
+            set { SetValue(FooterProperty, value); }
+        }
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="TabbedCommandBar"/> class.
+        /// </summary>
+        public TabbedCommandBar()
+        {
+            DefaultStyleKey = typeof(TabbedCommandBar);
+        }
+
+        /// <inheritdoc/>
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            // Get RibbonContent first, since setting SelectedItem requires it
+            _ribbonContent = GetTemplateChild("PART_RibbonContent") as ContentControl;
+
+            _ribbonNavigationView = GetTemplateChild("PART_RibbonNavigationView") as NavigationView;
+            if (_ribbonNavigationView != null)
+            {
+                // Populate the NavigationView with items
+                // TODO: Get binding working, necessary for contextual tabs
+                _ribbonNavigationView.MenuItems.Clear();
+                foreach (TabbedCommandBarItem item in Items)
+                {
+                    _ribbonNavigationView.MenuItems.Add(item);
+                }
+                _ribbonNavigationView.PaneFooter = Footer;
+
+                _ribbonNavigationView.SelectionChanged += RibbonNavigationView_SelectionChanged;
+                _ribbonNavigationView.SelectedItem = _ribbonNavigationView.MenuItems.FirstOrDefault();
+            }
+
+            _tabChangedStoryboard = GetTemplateChild(nameof(_tabChangedStoryboard)) as Storyboard;
+        }
+
+        private void RibbonNavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
+        {
+            if (args.SelectedItem is TabbedCommandBarItem item)
+            {
+                _ribbonContent.Content = item;
+                _tabChangedStoryboard?.Begin();
+            }
+            else if (args.SelectedItem is NavigationViewItem navItem)
+            {
+                // This code is a hack and is only temporary, because I can't get binding to work.
+                // RibbonContent might be null here, there should be a check
+                _ribbonContent.Content = Items[System.Math.Min(Items.Count - 1, _ribbonNavigationView.MenuItems.IndexOf(navItem))];
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
new file mode 100644
index 00000000000..75732830e3a
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
@@ -0,0 +1,443 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls">
+
+    <!--  For some reason this code causes an exception at runtime, that String couldn't be turned into a Uri.  -->
+    <!--<ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls.Ribbon/TabbedCommandBar/TabbedCommandBar.xaml" />
+        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls.Ribbon/TabbedCommandBar/TabbedCommandBarItem.xaml" />
+    </ResourceDictionary.MergedDictionaries>-->
+
+    <Style BasedOn="{StaticResource CommandBarRevealStyle}"
+           TargetType="controls:TabbedCommandBarItem">
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="DefaultLabelPosition" Value="Right" />
+        <Setter Property="Background" Value="{ThemeResource TabbedCommandBarContentBackground}" />
+        <!--
+            Also, is there a way to prevent the overflow button from showing if there aren't any buttons to send to the overflow menu?
+            (See my message in the WinUI channel: https://discord.com/channels/372137812037730304/671870147354427422/771057634203402300 )
+            Hardcoding the height of the CommandBar does work, but it's a bit of a hack.
+        -->
+        <Setter Property="Height" Value="40" />
+    </Style>
+
+    <StaticResource x:Key="TabbedCommandBarContentBackground"
+                    ResourceKey="SystemControlChromeLowAcrylicWindowBrush" />
+    <Style TargetType="controls:TabbedCommandBar">
+        <Setter Property="Background" Value="{ThemeResource SystemControlChromeMediumLowAcrylicWindowMediumBrush}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:TabbedCommandBar">
+                    <Grid>
+                        <Grid.Resources>
+                            <!--
+                                For some reason, this data template refuses to let me set the x:DataType. I get the following error:
+                                XamlCompiler error WMC0612: The XAML Binary Format (XBF) generator
+                                reported syntax error '0x09C4' : Property Not Found
+                            -->
+                            <DataTemplate x:Key="NormalTabTemplate">
+                                <NavigationViewItem Content="{Binding Header}" />
+                            </DataTemplate>
+                            <DataTemplate x:Key="ContextualTabTemplate">
+                                <NavigationViewItem Content="{Binding Header}">
+                                    <NavigationViewItem.Resources>
+                                        <SolidColorBrush x:Key="TopNavigationViewItemForeground"
+                                                         Color="{ThemeResource SystemAccentColor}" />
+                                        <SolidColorBrush x:Key="TopNavigationViewItemForegroundSelected"
+                                                         Color="{ThemeResource SystemAccentColor}" />
+                                        <SolidColorBrush x:Key="TopNavigationViewItemForegroundPointerOver"
+                                                         Color="{ThemeResource SystemAccentColorLight2}" />
+                                        <SolidColorBrush x:Key="TopNavigationViewItemForegroundPressed"
+                                                         Color="{ThemeResource SystemAccentColorLight2}" />
+                                    </NavigationViewItem.Resources>
+                                </NavigationViewItem>
+                            </DataTemplate>
+                            <controls:TabbedCommandBarItemTemplateSelector x:Key="DefaultTabbedCommandBarItemTemplateSelector"
+                                                                           Contextual="{StaticResource ContextualTabTemplate}"
+                                                                           Normal="{StaticResource NormalTabTemplate}" />
+                        </Grid.Resources>
+
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+
+                        <NavigationView x:Name="PART_RibbonNavigationView"
+                                        Background="{TemplateBinding Background}"
+                                        MenuItemTemplateSelector="{StaticResource DefaultTabbedCommandBarItemTemplateSelector}"
+                                        PaneDisplayMode="Top"
+                                        Style="{StaticResource RibbonTabNavigationViewStyle}" />
+
+                        <Border Grid.Row="1"
+                                HorizontalAlignment="Stretch"
+                                Background="{ThemeResource TabbedCommandBarContentBackground}" />
+                        <ContentControl x:Name="PART_RibbonContent"
+                                        Grid.Row="1"
+                                        HorizontalAlignment="Stretch"
+                                        HorizontalContentAlignment="Stretch">
+                            <ContentControl.Resources>
+                                <Storyboard x:Name="TabChangedStoryboard">
+                                    <PopInThemeAnimation TargetName="PART_RibbonContent" />
+                                </Storyboard>
+                                <Style TargetType="ComboBox" />
+                                <!--<Style TargetType="ComboBox">
+                                    <Setter Property="Background" Value="{ThemeResource AppBarButtonRevealBackground}" />
+                                    <Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
+                                    <Setter Property="BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrush}" />
+                                    <Setter Property="BorderThickness" Value="{ThemeResource AppBarButtonRevealBorderThemeThickness}" />
+                                    <Setter Property="VerticalAlignment" Value="Stretch" />
+                                    <Setter Property="VerticalContentAlignment" Value="Center" />
+                                    <Setter Property="Template">
+                                        <Setter.Value>
+                                            <ControlTemplate TargetType="ComboBox">
+                                                <Grid x:Name="LayoutRoot" Margin="1,0,1,0">
+                                                    <Grid.Resources>
+                                                        <Storyboard x:Key="OverlayOpeningAnimation">
+                                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
+                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
+                                                                <SplineDoubleKeyFrame
+                                                                    KeySpline="0.1,0.9 0.2,1.0"
+                                                                    KeyTime="0:0:0.383"
+                                                                    Value="1.0" />
+                                                            </DoubleAnimationUsingKeyFrames>
+                                                        </Storyboard>
+                                                        <Storyboard x:Key="OverlayClosingAnimation">
+                                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
+                                                                <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
+                                                                <SplineDoubleKeyFrame
+                                                                    KeySpline="0.1,0.9 0.2,1.0"
+                                                                    KeyTime="0:0:0.216"
+                                                                    Value="0.0" />
+                                                            </DoubleAnimationUsingKeyFrames>
+                                                        </Storyboard>
+                                                    </Grid.Resources>
+
+                                                    <Grid.RowDefinitions>
+                                                        <RowDefinition Height="Auto" />
+                                                        <RowDefinition Height="*" />
+                                                        <RowDefinition Height="Auto" />
+                                                    </Grid.RowDefinitions>
+
+                                                    <Grid.ColumnDefinitions>
+                                                        <ColumnDefinition Width="*" />
+                                                        <ColumnDefinition Width="32" />
+                                                    </Grid.ColumnDefinitions>
+                                                    <ContentPresenter
+                                                        x:Name="HeaderContentPresenter"
+                                                        Grid.Row="0"
+                                                        Grid.Column="0"
+                                                        Grid.ColumnSpan="2"
+                                                        Margin="{ThemeResource ComboBoxTopHeaderMargin}"
+                                                        VerticalAlignment="Top"
+                                                        x:DeferLoadStrategy="Lazy"
+                                                        Content="{TemplateBinding Header}"
+                                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                                        FlowDirection="{TemplateBinding FlowDirection}"
+                                                        FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
+                                                        TextWrapping="Wrap"
+                                                        Visibility="Collapsed" />
+                                                    <Border
+                                                        x:Name="Background"
+                                                        Grid.Row="1"
+                                                        Grid.Column="0"
+                                                        Grid.ColumnSpan="2"
+                                                        MinWidth="{ThemeResource ComboBoxThemeMinWidth}"
+                                                        Background="{TemplateBinding Background}"
+                                                        BorderBrush="{TemplateBinding BorderBrush}"
+                                                        BorderThickness="{TemplateBinding BorderThickness}"
+                                                        Control.IsTemplateFocusTarget="True"
+                                                        CornerRadius="{TemplateBinding CornerRadius}" />
+                                                    <Border
+                                                        x:Name="HighlightBackground"
+                                                        Grid.Row="1"
+                                                        Grid.Column="0"
+                                                        Grid.ColumnSpan="2"
+                                                        Background="{ThemeResource ComboBoxBackgroundUnfocused}"
+                                                        BorderBrush="{ThemeResource ComboBoxBackgroundBorderBrushUnfocused}"
+                                                        BorderThickness="{TemplateBinding BorderThickness}"
+                                                        CornerRadius="{TemplateBinding CornerRadius}"
+                                                        Opacity="0" />
+                                                    <ContentPresenter
+                                                        x:Name="ContentPresenter"
+                                                        Grid.Row="1"
+                                                        Grid.Column="0"
+                                                        Margin="{TemplateBinding Padding}"
+                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
+                                                        <TextBlock
+                                                            x:Name="PlaceholderTextBlock"
+                                                            Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
+                                                            Text="{TemplateBinding PlaceholderText}" />
+                                                    </ContentPresenter>
+                                                    <TextBox
+                                                        x:Name="EditableText"
+                                                        Grid.Row="1"
+                                                        Grid.Column="0"
+                                                        Grid.ColumnSpan="2"
+                                                        Margin="0,0,0,0"
+                                                        Padding="10,3,30,5"
+                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                        x:Load="False"
+                                                        AutomationProperties.Name="{TemplateBinding AutomationProperties.Name}"
+                                                        BorderBrush="Transparent"
+                                                        Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
+                                                        Header="{TemplateBinding Header}"
+                                                        PlaceholderText="{TemplateBinding PlaceholderText}"
+                                                        Style="{StaticResource ComboBoxTextBoxStyle}"
+                                                        Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                                                        Visibility="Collapsed" />
+                                                    <Border
+                                                        x:Name="DropDownOverlay"
+                                                        Grid.Row="1"
+                                                        Grid.Column="1"
+                                                        Width="30"
+                                                        Margin="0,2,2,2"
+                                                        HorizontalAlignment="Right"
+                                                        x:Load="False"
+                                                        Background="Transparent"
+                                                        Visibility="Collapsed" />
+                                                    <FontIcon
+                                                        x:Name="DropDownGlyph"
+                                                        Grid.Row="1"
+                                                        Grid.Column="1"
+                                                        Margin="0,10,10,10"
+                                                        HorizontalAlignment="Right"
+                                                        VerticalAlignment="Center"
+                                                        AutomationProperties.AccessibilityView="Raw"
+                                                        FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                        FontSize="12"
+                                                        Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
+                                                        Glyph="&#xE0E5;"
+                                                        IsHitTestVisible="False" />
+                                                    <ContentPresenter
+                                                        x:Name="DescriptionPresenter"
+                                                        Grid.Row="2"
+                                                        Grid.Column="0"
+                                                        Grid.ColumnSpan="2"
+                                                        x:Load="False"
+                                                        Content="{TemplateBinding Description}"
+                                                        Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
+                                                    <Popup x:Name="Popup">
+                                                        <Border
+                                                            x:Name="PopupBorder"
+                                                            Margin="0,-1,0,-1"
+                                                            Padding="{ThemeResource ComboBoxDropdownBorderPadding}"
+                                                            HorizontalAlignment="Stretch"
+                                                            Background="{ThemeResource ComboBoxDropDownBackground}"
+                                                            BackgroundSizing="OuterBorderEdge"
+                                                            BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}"
+                                                            BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}">
+                                                            <ScrollViewer
+                                                                x:Name="ScrollViewer"
+                                                                MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}"
+                                                                AutomationProperties.AccessibilityView="Raw"
+                                                                BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
+                                                                Foreground="{ThemeResource ComboBoxDropDownForeground}"
+                                                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                                                HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
+                                                                IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                                                IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
+                                                                IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
+                                                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
+                                                                VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
+                                                                VerticalSnapPointsAlignment="Near"
+                                                                VerticalSnapPointsType="OptionalSingle"
+                                                                ZoomMode="Disabled">
+                                                                <ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
+                                                            </ScrollViewer>
+                                                        </Border>
+                                                    </Popup>
+
+                                                    <VisualStateManager.VisualStateGroups>
+                                                        <VisualStateGroup x:Name="CommonStates">
+                                                            <VisualState x:Name="Normal" />
+
+                                                            <VisualState x:Name="PointerOver">
+
+                                                                <Storyboard>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundPointerOver}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushPointerOver}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                </Storyboard>
+                                                            </VisualState>
+
+                                                            <VisualState x:Name="Pressed">
+
+                                                                <Storyboard>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundPressed}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushPressed}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                </Storyboard>
+                                                            </VisualState>
+
+                                                            <VisualState x:Name="Disabled">
+
+                                                                <Storyboard>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundDisabled}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushDisabled}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundDisabled}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundDisabled}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxForegroundDisabled}}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundDisabled}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                </Storyboard>
+                                                            </VisualState>
+
+                                                        </VisualStateGroup>
+                                                        <VisualStateGroup x:Name="FocusStates">
+                                                            <VisualState x:Name="Focused">
+
+                                                                <Storyboard>
+                                                                    <DoubleAnimation
+                                                                        Storyboard.TargetName="HighlightBackground"
+                                                                        Storyboard.TargetProperty="Opacity"
+                                                                        To="1"
+                                                                        Duration="0" />
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightBackground" Storyboard.TargetProperty="BorderBrush">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundBorderBrushFocused}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundFocused}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxForegroundFocused}}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundFocused}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                </Storyboard>
+                                                            </VisualState>
+                                                            <VisualState x:Name="FocusedPressed">
+
+                                                                <Storyboard>
+                                                                    <DoubleAnimation
+                                                                        Storyboard.TargetName="HighlightBackground"
+                                                                        Storyboard.TargetProperty="Opacity"
+                                                                        To="1"
+                                                                        Duration="0" />
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundFocusedPressed}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForegroundFocusedPressed}}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundFocusedPressed}" />
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                </Storyboard>
+                                                            </VisualState>
+                                                            <VisualState x:Name="Unfocused" />
+                                                            <VisualState x:Name="PointerFocused" />
+                                                            <VisualState x:Name="FocusedDropDown">
+
+                                                                <Storyboard>
+                                                                    <ObjectAnimationUsingKeyFrames
+                                                                        Storyboard.TargetName="PopupBorder"
+                                                                        Storyboard.TargetProperty="Visibility"
+                                                                        Duration="0">
+                                                                        <DiscreteObjectKeyFrame KeyTime="0">
+                                                                            <DiscreteObjectKeyFrame.Value>
+                                                                                <Visibility>Visible</Visibility>
+                                                                            </DiscreteObjectKeyFrame.Value>
+                                                                        </DiscreteObjectKeyFrame>
+                                                                    </ObjectAnimationUsingKeyFrames>
+                                                                </Storyboard>
+                                                            </VisualState>
+
+                                                        </VisualStateGroup>
+                                                        <VisualStateGroup x:Name="DropDownStates">
+                                                            <VisualState x:Name="Opened">
+
+                                                                <Storyboard>
+                                                                    <SplitOpenThemeAnimation
+                                                                        ClosedTargetName="ContentPresenter"
+                                                                        OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
+                                                                        OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
+                                                                        OpenedTargetName="PopupBorder" />
+                                                                </Storyboard>
+                                                            </VisualState>
+                                                            <VisualState x:Name="Closed">
+
+                                                                <Storyboard>
+                                                                    <SplitCloseThemeAnimation
+                                                                        ClosedTargetName="ContentPresenter"
+                                                                        OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
+                                                                        OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
+                                                                        OpenedTargetName="PopupBorder" />
+                                                                </Storyboard>
+                                                            </VisualState>
+
+                                                        </VisualStateGroup>
+
+                                                        <VisualStateGroup x:Name="EditableModeStates">
+                                                            <VisualState x:Name="TextBoxFocused">
+                                                                <VisualState.Setters>
+                                                                    <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource ComboBoxEditableDropDownGlyphForeground}" />
+                                                                    <Setter Target="DropDownOverlay.Margin" Value="0,3,2,2" />
+                                                                </VisualState.Setters>
+                                                            </VisualState>
+                                                            <VisualState x:Name="TextBoxFocusedOverlayPointerOver">
+                                                                <VisualState.Setters>
+                                                                    <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource ComboBoxEditableDropDownGlyphForeground}" />
+                                                                    <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxFocusedDropDownBackgroundPointerOver}" />
+                                                                    <Setter Target="DropDownOverlay.Margin" Value="0,3,2,2" />
+                                                                </VisualState.Setters>
+                                                            </VisualState>
+                                                            <VisualState x:Name="TextBoxFocusedOverlayPressed">
+                                                                <VisualState.Setters>
+                                                                    <Setter Target="DropDownGlyph.Foreground" Value="{ThemeResource ComboBoxEditableDropDownGlyphForeground}" />
+                                                                    <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxFocusedDropDownBackgroundPointerPressed}" />
+                                                                    <Setter Target="DropDownOverlay.Margin" Value="0,3,2,2" />
+                                                                </VisualState.Setters>
+                                                            </VisualState>
+                                                            <VisualState x:Name="TextBoxOverlayPointerOver">
+                                                                <VisualState.Setters>
+                                                                    <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxDropDownBackgroundPointerOver}" />
+                                                                </VisualState.Setters>
+                                                            </VisualState>
+                                                            <VisualState x:Name="TextBoxOverlayPressed">
+                                                                <VisualState.Setters>
+                                                                    <Setter Target="DropDownOverlay.Background" Value="{ThemeResource ComboBoxDropDownBackgroundPointerPressed}" />
+                                                                </VisualState.Setters>
+                                                            </VisualState>
+                                                            <VisualState x:Name="TextBoxUnfocused" />
+
+                                                        </VisualStateGroup>
+
+                                                    </VisualStateManager.VisualStateGroups>
+                                                </Grid>
+
+                                            </ControlTemplate>
+                                        </Setter.Value>
+                                    </Setter>
+                                </Style>-->
+                                <Style TargetType="AppBarElementContainer">
+                                    <Setter Property="VerticalAlignment" Value="Stretch" />
+                                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
+                                </Style>
+                            </ContentControl.Resources>
+                        </ContentControl>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs
new file mode 100644
index 00000000000..5dc727a0453
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs
@@ -0,0 +1,100 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// A <see cref="CommandBar"/> to be displayed in a <see cref="TabbedCommandBar"/>
+    /// </summary>
+    [TemplatePart(Name = "PrimaryItemsControl", Type = typeof(ItemsControl))]
+    [TemplatePart(Name = "MoreButton", Type = typeof(Button))]
+    public class TabbedCommandBarItem : CommandBar
+    {
+        private ItemsControl _primaryItemsControl;
+        private Button _moreButton;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="TabbedCommandBarItem"/> class.
+        /// </summary>
+        public TabbedCommandBarItem()
+        {
+            DefaultStyleKey = typeof(TabbedCommandBarItem);
+        }
+
+        /// <summary>
+        /// Identifies the <see cref="Header"/> property.
+        /// </summary>
+        public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(
+            nameof(Header),
+            typeof(string),
+            typeof(TabbedCommandBarItem),
+            new PropertyMetadata(string.Empty));
+
+        /// <summary>
+        /// Gets or sets the title of this ribbon tab.
+        /// </summary>
+        public string Header
+        {
+            get => (string)GetValue(HeaderProperty);
+            set => SetValue(HeaderProperty, value);
+        }
+
+        /// <summary>
+        /// Identifies the <see cref="Footer"/> property.
+        /// </summary>
+        public static readonly DependencyProperty FooterProperty = DependencyProperty.Register(
+            nameof(Footer),
+            typeof(UIElement),
+            typeof(TabbedCommandBarItem),
+            new PropertyMetadata(new Border()));
+
+        /// <summary>
+        /// Identifies the <see cref="IsContextual"/> property.
+        /// </summary>
+        public static readonly DependencyProperty IsContextualProperty = DependencyProperty.Register(
+            nameof(IsContextual),
+            typeof(bool),
+            typeof(TabbedCommandBarItem),
+            new PropertyMetadata(false));
+
+        /// <summary>
+        /// Gets or sets the <see cref="UIElement"/> to be displayed in the footer of the tab.
+        /// </summary>
+        public UIElement Footer
+        {
+            get => (UIElement)GetValue(FooterProperty);
+            set => SetValue(FooterProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets a value indicating whether this tab is contextual.
+        /// </summary>
+        public bool IsContextual
+        {
+            get => (bool)GetValue(IsContextualProperty);
+            set => SetValue(IsContextualProperty, value);
+        }
+
+        /// <inheritdoc/>
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            _primaryItemsControl = GetTemplateChild("PrimaryItemsControl") as ItemsControl;
+            if (_primaryItemsControl != null)
+            {
+                _primaryItemsControl.HorizontalAlignment = HorizontalAlignment.Left;
+            }
+
+            _moreButton = GetTemplateChild("MoreButton") as Button;
+            if (_moreButton != null)
+            {
+                _moreButton.HorizontalAlignment = HorizontalAlignment.Right;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItemTemplateSelector.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItemTemplateSelector.cs
new file mode 100644
index 00000000000..06712d3c65b
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItemTemplateSelector.cs
@@ -0,0 +1,37 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// <see cref="DataTemplateSelector"/> used by <see cref="TabbedCommandBar"/> for determining the style of normal vs. contextual <see cref="TabbedCommandBarItem"/>s.
+    /// </summary>
+    public class TabbedCommandBarItemTemplateSelector : DataTemplateSelector
+    {
+        /// <summary>
+        /// Gets or sets the <see cref="Style"/> of a normal <see cref="TabbedCommandBarItem"/>.
+        /// </summary>
+        public DataTemplate Normal { get; set; }
+
+        /// <summary>
+        /// Gets or sets the <see cref="Style"/> of a contextual <see cref="TabbedCommandBarItem"/>.
+        /// </summary>
+        public DataTemplate Contextual { get; set; }
+
+        /// <inheritdoc/>
+        protected override DataTemplate SelectTemplateCore(object item)
+        {
+            return ((TabbedCommandBarItem)item).IsContextual ? Contextual : Normal;
+        }
+
+        /// <inheritdoc/>
+        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+        {
+            return SelectTemplateCore(item);
+        }
+    }
+}
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml
index 8354174809c..e30898a6a9f 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml
@@ -29,6 +29,7 @@
         <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/ImageCropper/ImageCropper.xaml" />
         <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/Eyedropper/Eyedropper.xaml" />
         <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/Eyedropper/EyedropperToolButton.xaml" />
+        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml" />
         <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/TextToolbar/TextToolbar.xaml" />
         <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/TileControl/TileControl.xaml" />
         <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/TokenizingTextBox/TokenizingTextBox.xaml" />
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/VisualStudioToolsManifest.xml b/Microsoft.Toolkit.Uwp.UI.Controls/VisualStudioToolsManifest.xml
index b952e2ec958..479fe150be9 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls/VisualStudioToolsManifest.xml
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/VisualStudioToolsManifest.xml
@@ -31,6 +31,7 @@
       <Item Type="Microsoft.Toolkit.Uwp.UI.Controls.RotatorTile" />
       <Item Type="Microsoft.Toolkit.Uwp.UI.Controls.ScrollHeader" />
       <Item Type="Microsoft.Toolkit.Uwp.UI.Controls.StaggeredPanel" />
+      <Item Type="Microsoft.Toolkit.Uwp.UI.Controls.TabbedCommandBar" />
       <Item Type="Microsoft.Toolkit.Uwp.UI.Controls.TextToolbar" />
       <Item Type="Microsoft.Toolkit.Uwp.UI.Controls.TileControl" />
       <Item Type="Microsoft.Toolkit.Uwp.UI.Controls.UniformGrid" />
diff --git a/Windows Community Toolkit.sln b/Windows Community Toolkit.sln
index dbb8ef27886..cd5dc10041a 100644
--- a/Windows Community Toolkit.sln	
+++ b/Windows Community Toolkit.sln	
@@ -569,34 +569,6 @@ Global
 		{42CA4935-54BE-42EA-AC19-992378C08DE6}.Release|x64.Build.0 = Release|Any CPU
 		{42CA4935-54BE-42EA-AC19-992378C08DE6}.Release|x86.ActiveCfg = Release|Any CPU
 		{42CA4935-54BE-42EA-AC19-992378C08DE6}.Release|x86.Build.0 = Release|Any CPU
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|Any CPU.ActiveCfg = Debug|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|Any CPU.Build.0 = Debug|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|ARM.ActiveCfg = Debug|ARM
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|ARM.Build.0 = Debug|ARM
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|ARM64.ActiveCfg = Debug|ARM64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|ARM64.Build.0 = Debug|ARM64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|x64.ActiveCfg = Debug|x64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|x64.Build.0 = Debug|x64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|x86.ActiveCfg = Debug|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Debug|x86.Build.0 = Debug|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|Any CPU.ActiveCfg = Release|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|ARM.ActiveCfg = Release|ARM
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|ARM.Build.0 = Release|ARM
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|ARM64.ActiveCfg = Release|ARM64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|ARM64.Build.0 = Release|ARM64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|x64.ActiveCfg = Release|x64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|x64.Build.0 = Release|x64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|x86.ActiveCfg = Release|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Native|x86.Build.0 = Release|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|Any CPU.ActiveCfg = Release|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|ARM.ActiveCfg = Release|ARM
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|ARM.Build.0 = Release|ARM
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|ARM64.ActiveCfg = Release|ARM64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|ARM64.Build.0 = Release|ARM64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|x64.ActiveCfg = Release|x64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|x64.Build.0 = Release|x64
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|x86.ActiveCfg = Release|Win32
-		{A5E98964-45B1-442D-A07A-298A3221D81E}.Release|x86.Build.0 = Release|Win32
 		{5BF75694-798A-43A0-8150-415DE195359C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{5BF75694-798A-43A0-8150-415DE195359C}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{5BF75694-798A-43A0-8150-415DE195359C}.Debug|ARM.ActiveCfg = Debug|Any CPU
@@ -904,11 +876,6 @@ Global
 		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Debug|x86.ActiveCfg = Debug|x86
 		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Debug|x86.Build.0 = Debug|x86
 		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Debug|x86.Deploy.0 = Debug|x86
-		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Native|Any CPU.ActiveCfg = Release|x64
-		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Native|ARM.ActiveCfg = Release|ARM
-		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Native|ARM64.ActiveCfg = Release|ARM64
-		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Native|x64.ActiveCfg = Release|x64
-		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Native|x86.ActiveCfg = Release|x86
 		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Release|Any CPU.ActiveCfg = Release|x86
 		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Release|Any CPU.Build.0 = Release|x86
 		{05C83067-FA46-45E2-BEC4-EDEE84AD18D0}.Release|ARM.ActiveCfg = Release|ARM
@@ -933,11 +900,6 @@ Global
 		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Debug|x64.Build.0 = Debug|Any CPU
 		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Debug|x86.ActiveCfg = Debug|Any CPU
 		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Debug|x86.Build.0 = Debug|Any CPU
-		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Native|Any CPU.ActiveCfg = Debug|Any CPU
-		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Native|ARM.ActiveCfg = Debug|Any CPU
-		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Native|ARM64.ActiveCfg = Debug|Any CPU
-		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Native|x64.ActiveCfg = Debug|Any CPU
-		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Native|x86.ActiveCfg = Debug|Any CPU
 		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Release|Any CPU.Build.0 = Release|Any CPU
 		{5F720475-E263-4A5A-8C88-2B805B45B5BC}.Release|ARM.ActiveCfg = Release|Any CPU
@@ -958,11 +920,6 @@ Global
 		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Debug|x64.Build.0 = Debug|Any CPU
 		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Debug|x86.ActiveCfg = Debug|Any CPU
 		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Debug|x86.Build.0 = Debug|Any CPU
-		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Native|Any CPU.ActiveCfg = Debug|Any CPU
-		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Native|ARM.ActiveCfg = Debug|Any CPU
-		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Native|ARM64.ActiveCfg = Debug|Any CPU
-		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Native|x64.ActiveCfg = Debug|Any CPU
-		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Native|x86.ActiveCfg = Debug|Any CPU
 		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Release|Any CPU.Build.0 = Release|Any CPU
 		{C8182EF0-77FB-4B43-A588-C71748A309C7}.Release|ARM.ActiveCfg = Release|Any CPU

From 6a5399a637b694234f5a3258bed705dd1309d1c1 Mon Sep 17 00:00:00 2001
From: YoshiAsk <jjask7@gmail.com>
Date: Mon, 2 Nov 2020 16:05:10 -0600
Subject: [PATCH 2/5] Add very minimal sample [WIP]

---
 Microsoft.Toolkit.Uwp.SampleApp/App.xaml      |  34 +-
 .../Microsoft.Toolkit.Uwp.SampleApp.csproj    |  11 +
 .../TabbedCommandBar/TabbedCommandBar.bind    |  16 +
 .../TabbedCommandBarPage.xaml                 |  17 +
 .../TabbedCommandBarPage.xaml.cs              |  30 +
 ...soft.Toolkit.Uwp.UI.Controls.Design.csproj |   1 +
 .../TabbedCommandBarMetadata.cs               |  33 +
 .../TabbedCommandBar/TabbedCommandBar.xaml    | 590 ++++++++++++++++++
 .../TabbedCommandBar/TabbedCommandBarItem.cs  |   2 +-
 9 files changed, 716 insertions(+), 18 deletions(-)
 create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind
 create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml
 create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml.cs
 create mode 100644 Microsoft.Toolkit.Uwp.UI.Controls.Design/TabbedCommandBarMetadata.cs

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/App.xaml b/Microsoft.Toolkit.Uwp.SampleApp/App.xaml
index f7b74b15f8d..37bc22cada3 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/App.xaml
+++ b/Microsoft.Toolkit.Uwp.SampleApp/App.xaml
@@ -4,25 +4,25 @@
              xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
              RequiresPointerMode="Auto">
 
-  <Application.Resources>
-    <ResourceDictionary>
-      <!-- Color Resources -->
-      <ResourceDictionary.MergedDictionaries>
-        <ResourceDictionary Source="ms-appx:///Styles/Themes.xaml" />
-        <ResourceDictionary Source="ms-appx:///Styles/Generic.xaml" />
+    <Application.Resources>
+        <ResourceDictionary>
+            <!--  Color Resources  -->
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="ms-appx:///Styles/Themes.xaml" />
+                <ResourceDictionary Source="ms-appx:///Styles/Generic.xaml" />
 
-        <!-- WinUI -->
-        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
-      </ResourceDictionary.MergedDictionaries>
+                <!--  WinUI  -->
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+            </ResourceDictionary.MergedDictionaries>
 
-      <!-- Converters -->
-      <converters:BoolNegationConverter x:Key="BoolNegationConverter" />
+            <!--  Converters  -->
+            <converters:BoolNegationConverter x:Key="BoolNegationConverter" />
 
-      <converters:EmptyStringToObjectConverter x:Key="EmptyStringToObject"
-                                               EmptyValue="Collapsed"
-                                               NotEmptyValue="Visible" />
+            <converters:EmptyStringToObjectConverter x:Key="EmptyStringToObject"
+                                                     EmptyValue="Collapsed"
+                                                     NotEmptyValue="Visible" />
 
-      <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
-    </ResourceDictionary>
-  </Application.Resources>
+            <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
+        </ResourceDictionary>
+    </Application.Resources>
 </Application>
\ No newline at end of file
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
index c7acab21bfa..59b9063ee9d 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
@@ -515,6 +515,9 @@
     <Compile Include="SamplePages\FocusBehavior\FocusBehaviorPage.xaml.cs">
       <DependentUpon>FocusBehaviorPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="SamplePages\TabbedCommandBar\TabbedCommandBarPage.xaml.cs">
+      <DependentUpon>TabbedCommandBarPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\TilesBrush\TilesBrushPage.xaml.cs">
       <DependentUpon>TilesBrushPage.xaml</DependentUpon>
     </Compile>
@@ -1001,6 +1004,14 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.bind">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Content>
+    <Page Include="SamplePages\TabbedCommandBar\TabbedCommandBarPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="SamplePages\TilesBrush\TilesBrushPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind
new file mode 100644
index 00000000000..0132eb6dcd0
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind
@@ -0,0 +1,16 @@
+<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      mc:Ignorable="d">
+    <Grid>
+        <Border Margin="0">
+            <controls:TabbedCommandBar x:Name="TabbedCommandBarControl">
+                <controls:TabbedCommandBarItem Header="Home">
+                    <AppBarButton Icon="Cut" Label="Cut"/>
+                </controls:TabbedCommandBarItem>
+            </controls:TabbedCommandBar>
+        </Border>
+    </Grid>
+</Page>
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml
new file mode 100644
index 00000000000..43c51189031
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml
@@ -0,0 +1,17 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.TabbedCommandBarPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:Microsoft.Toolkit.Uwp.SampleApp.SamplePages"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+      mc:Ignorable="d">
+
+    <!--  Shallow Copy  -->
+    <Grid Visibility="Collapsed">
+        <controls:TabbedCommandBar>
+            <controls:TabbedCommandBarItem />
+        </controls:TabbedCommandBar>
+    </Grid>
+</Page>
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml.cs b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml.cs
new file mode 100644
index 00000000000..77e088b3dc4
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBarPage.xaml.cs
@@ -0,0 +1,30 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+// The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// An empty page that can be used on its own or navigated to within a Frame.
+    /// </summary>
+    public sealed partial class TabbedCommandBarPage : Page
+    {
+        public TabbedCommandBarPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.Design.csproj b/Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.Design.csproj
index 1201d323388..ada3759c203 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.Design.csproj
+++ b/Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.Design.csproj
@@ -122,6 +122,7 @@
     <Compile Include="RangeSelectorMetadata.cs" />
     <Compile Include="RotatorTileMetadata.cs" />
     <Compile Include="ScrollHeaderMetadata.cs" />
+    <Compile Include="TabbedCommandBarMetadata.cs" />
     <Compile Include="TextToolbarMetadata.cs" />
     <Compile Include="TileControlMetadata.cs" />
     <Compile Include="WrapPanelMetadata.cs" />
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls.Design/TabbedCommandBarMetadata.cs b/Microsoft.Toolkit.Uwp.UI.Controls.Design/TabbedCommandBarMetadata.cs
new file mode 100644
index 00000000000..44a2343c54b
--- /dev/null
+++ b/Microsoft.Toolkit.Uwp.UI.Controls.Design/TabbedCommandBarMetadata.cs
@@ -0,0 +1,33 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.Windows.Design.Metadata;
+using Microsoft.Windows.Design.PropertyEditing;
+using System.ComponentModel;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal class TabbedCommandBarMetadata : AttributeTableBuilder
+    {
+        public TabbedCommandBarMetadata()
+            : base()
+        {
+            AddCallback(typeof(TabbedCommandBar),
+                b =>
+                {
+                    b.AddCustomAttributes(nameof(TabbedCommandBar.Items),
+                        new PropertyOrderAttribute(PropertyOrder.Early),
+                        new CategoryAttribute(Properties.Resources.CategoryCommon),
+                        //The following is necessary because this is a collection of an abstract type, so we help
+                        //the designer with populating supported types that can be added to the collection
+                        new NewItemTypesAttribute(new System.Type[] {
+                            typeof(TabbedCommandBarItem),
+                        }),
+                        new AlternateContentPropertyAttribute()
+                    );
+                }
+            );
+        }
+    }
+}
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
index 75732830e3a..3db435ffd8b 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
@@ -440,4 +440,594 @@
             </Setter.Value>
         </Setter>
     </Style>
+
+    <ControlTemplate x:Name="ScrollViewerScrollBarlessTemplate"
+                     TargetType="ScrollViewer">
+        <Grid Background="{TemplateBinding Background}">
+            <ScrollContentPresenter x:Name="ScrollContentPresenter"
+                                    Margin="{TemplateBinding Padding}"
+                                    ContentTemplate="{TemplateBinding ContentTemplate}" />
+        </Grid>
+    </ControlTemplate>
+
+    <Style x:Key="BaseTextBlockStyle"
+           TargetType="TextBlock">
+        <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
+        <Setter Property="FontWeight" Value="SemiBold" />
+        <Setter Property="FontSize" Value="14" />
+        <Setter Property="TextTrimming" Value="None" />
+        <Setter Property="TextWrapping" Value="Wrap" />
+        <Setter Property="LineStackingStrategy" Value="MaxHeight" />
+        <Setter Property="TextLineBounds" Value="Full" />
+    </Style>
+    <Style x:Key="NavigationViewOverflowButtonStyleWhenPaneOnTop"
+           TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource TopNavigationViewItemForeground}" />
+        <Setter Property="Padding" Value="12,0" />
+        <Setter Property="Height" Value="{StaticResource PaneToggleButtonHeight}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+        <Setter Property="UseSystemFocusVisuals" Value="True" />
+        <Setter Property="FocusVisualMargin" Value="0" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid x:Name="RootGrid"
+                          Height="{TemplateBinding Height}"
+                          Background="{TemplateBinding Background}">
+                        <StackPanel Padding="{TemplateBinding Padding}"
+                                    Orientation="Horizontal">
+                            <ContentPresenter x:Name="ContentPresenter"
+                                              VerticalAlignment="Center"
+                                              AutomationProperties.AccessibilityView="Raw"
+                                              Content="{TemplateBinding Content}"
+                                              ContentTemplate="{TemplateBinding ContentTemplate}"
+                                              ContentTransitions="{TemplateBinding ContentTransitions}"
+                                              Foreground="{TemplateBinding Foreground}" />
+                            <FontIcon x:Name="Icon"
+                                      Margin="8,0,0,-4"
+                                      VerticalAlignment="Center"
+                                      AutomationProperties.AccessibilityView="Raw"
+                                      FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                      FontSize="8"
+                                      Foreground="{TemplateBinding Foreground}"
+                                      Glyph="&#xE96E;"
+                                      IsHitTestVisible="False" />
+                        </StackPanel>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="RootGrid.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPointerOver}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPointerOver}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPointerOver}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="RootGrid.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPressed}" />
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPressed}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPressed}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundDisabled}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundDisabled}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style x:Key="NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop"
+           TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource TopNavigationViewItemForeground}" />
+        <Setter Property="Height" Value="{StaticResource PaneToggleButtonHeight}" />
+        <Setter Property="Width" Value="{StaticResource PaneToggleButtonWidth}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="UseSystemFocusVisuals" Value="True" />
+        <Setter Property="FocusVisualMargin" Value="0" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid x:Name="RootGrid"
+                          Width="{TemplateBinding Width}"
+                          Height="{TemplateBinding Height}"
+                          Background="{TemplateBinding Background}">
+                        <Rectangle x:Name="PointerRectangle"
+                                   Fill="Transparent" />
+                        <FontIcon x:Name="Icon"
+                                  HorizontalAlignment="Center"
+                                  VerticalAlignment="Center"
+                                  AutomationProperties.AccessibilityView="Raw"
+                                  FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                  FontSize="16"
+                                  Foreground="{TemplateBinding Foreground}"
+                                  Glyph="&#xE70D;"
+                                  IsHitTestVisible="False" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="RootGrid.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPointerOver}" />
+                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPointerOver}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="RootGrid.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPressed}" />
+                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPressed}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundDisabled}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style x:Key="NavigationViewSettingsItemStyleWhenOnTopPane"
+           TargetType="NavigationViewItem">
+        <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
+        <Setter Property="Background" Value="{ThemeResource NavigationViewItemBackground}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource NavigationViewItemBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{StaticResource NavigationViewItemBorderThickness}" />
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+        <Setter Property="UseSystemFocusVisuals" Value="True" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="NavigationViewItem">
+                    <Grid x:Name="LayoutRoot"
+                          Background="{TemplateBinding Background}"
+                          Control.IsTemplateFocusTarget="True">
+                        <Rectangle x:Name="PointerRectangle"
+                                   Fill="Transparent" />
+                        <Grid x:Name="ContentGrid">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                            <Grid.RowDefinitions>
+                                <RowDefinition x:Name="IconRow"
+                                               Height="Auto" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <Viewbox x:Name="IconBox"
+                                     Grid.Row="1"
+                                     Grid.Column="1"
+                                     Width="48"
+                                     Height="16"
+                                     Margin="0,0,0,0"
+                                     HorizontalAlignment="Center"
+                                     VerticalAlignment="Center">
+                                <ContentPresenter x:Name="Icon"
+                                                  Content="{TemplateBinding Icon}"
+                                                  Foreground="{ThemeResource TopNavigationViewItemForeground}" />
+                            </Viewbox>
+                        </Grid>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="PointerStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPointerOver}" />
+                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundPointerOver}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPointerOver}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPressed}" />
+                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundPressed}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPressed}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Selected">
+                                    <VisualState.Setters>
+                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TopNavigationViewItemBackgroundSelected}" />
+                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundSelected}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundSelected}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="PointerOverSelected">
+                                    <VisualState.Setters>
+                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPointerOver}" />
+                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundSelectedPointerOver}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPointerOver}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="PressedSelected">
+                                    <VisualState.Setters>
+                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource TopNavigationViewItemBackgroundPressed}" />
+                                        <Setter Target="PointerRectangle.Fill" Value="{ThemeResource NavigationViewItemBackgroundSelectedPressed}" />
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundPressed}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="DisabledStates">
+                                <VisualState x:Name="Enabled" />
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="Icon.Foreground" Value="{ThemeResource TopNavigationViewItemForegroundDisabled}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style x:Key="NavigationViewItemHeaderTextStyle"
+           BasedOn="{StaticResource BaseTextBlockStyle}"
+           TargetType="TextBlock">
+        <Setter Property="FontWeight" Value="Bold" />
+        <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />
+        <Setter Property="TextWrapping" Value="NoWrap" />
+    </Style>
+    <Style x:Key="NavigationViewTitleHeaderContentControlTextStyle"
+           TargetType="ContentControl">
+        <Setter Property="FontWeight" Value="SemiLight" />
+        <Setter Property="FontSize" Value="24" />
+        <Setter Property="FontFamily" Value="XamlAutoFontFamily" />
+        <Setter Property="Margin" Value="12,5,0,11" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+    </Style>
+    <Style x:Key="RibbonTabNavigationViewStyle"
+           TargetType="NavigationView">
+        <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="NavigationView">
+                    <Grid x:Name="RootGrid">
+                        <!--<Grid x:Name="PaneToggleButtonGrid" HorizontalAlignment="Left" Margin="0,0,0,8" VerticalAlignment="Top" Canvas.ZIndex="100">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto"/>
+                                        <RowDefinition Height="Auto"/>
+                                    </Grid.RowDefinitions>
+                                    <Grid x:Name="TogglePaneTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
+                                    <Grid x:Name="ButtonHolderGrid" Grid.Row="1">
+                                        <Button x:Name="NavigationViewBackButton" IsEnabled="{TemplateBinding IsBackEnabled}" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" Visibility="{Binding TemplateSettings.BackButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
+                                            <ToolTipService.ToolTip>
+                                                <ToolTip x:Name="NavigationViewBackButtonToolTip"/>
+                                            </ToolTipService.ToolTip>
+                                        </Button>
+                                        <Button x:Name="TogglePaneButton" AutomationProperties.LandmarkType="Navigation" Style="{TemplateBinding PaneToggleButtonStyle}" VerticalAlignment="Top" Visibility="{Binding TemplateSettings.PaneToggleButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
+                                            <TextBlock x:Name="PaneTitleTextBlock" Grid.Column="0" HorizontalAlignment="Left" Style="{StaticResource NavigationViewItemHeaderTextStyle}" Text="{TemplateBinding PaneTitle}" VerticalAlignment="Center"/>
+                                        </Button>
+                                    </Grid>
+                                </Grid>-->
+                        <Grid>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="*" />
+                            </Grid.RowDefinitions>
+                            <StackPanel x:Name="TopNavArea"
+                                        Grid.Row="0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Top"
+                                        Background="{ThemeResource NavigationViewTopPaneBackground}"
+                                        Canvas.ZIndex="1"
+                                        XYFocusKeyboardNavigation="Enabled">
+                                <Grid x:Name="TopNavTopPadding"
+                                      Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                      Visibility="{Binding TemplateSettings.TopPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                <Grid x:Name="TopNavGrid"
+                                      Height="{ThemeResource NavigationViewTopPaneHeight}"
+                                      Visibility="{Binding TemplateSettings.TopPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
+                                    <Grid.ColumnDefinitions>
+                                        <!--<ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}"/>-->
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition Width="*"
+                                                          MinWidth="48" />
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition Width="Auto" />
+                                    </Grid.ColumnDefinitions>
+                                    <Grid x:Name="TopNavLeftPadding"
+                                          Grid.Column="1"
+                                          Width="0" />
+                                    <ContentControl x:Name="PaneHeaderOnTopPane"
+                                                    Grid.Column="2"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    VerticalContentAlignment="Stretch"
+                                                    IsTabStop="False" />
+                                    <NavigationViewList x:Name="TopNavMenuItemsHost"
+                                                        Grid.Column="3"
+                                                        AutomationProperties.LandmarkType="Navigation"
+                                                        IsItemClickEnabled="True"
+                                                        ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
+                                                        ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}"
+                                                        ItemTemplate="{TemplateBinding MenuItemTemplate}"
+                                                        ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}"
+                                                        ScrollViewer.HorizontalScrollBarVisibility="Hidden"
+                                                        ScrollViewer.HorizontalScrollMode="Disabled"
+                                                        ScrollViewer.VerticalScrollBarVisibility="Hidden"
+                                                        ScrollViewer.VerticalScrollMode="Disabled"
+                                                        SelectionMode="Single"
+                                                        SingleSelectionFollowsFocus="{Binding TemplateSettings.SingleSelectionFollowsFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}">
+                                        <NavigationViewList.ItemsPanel>
+                                            <ItemsPanelTemplate>
+                                                <ItemsStackPanel Orientation="Horizontal" />
+                                            </ItemsPanelTemplate>
+                                        </NavigationViewList.ItemsPanel>
+                                        <NavigationViewList.ItemContainerTransitions>
+                                            <TransitionCollection />
+                                        </NavigationViewList.ItemContainerTransitions>
+                                    </NavigationViewList>
+                                    <Button x:Name="TopNavOverflowButton"
+                                            Grid.Column="4"
+                                            Content="More"
+                                            Style="{StaticResource NavigationViewOverflowButtonStyleWhenPaneOnTop}"
+                                            Visibility="{Binding TemplateSettings.OverflowButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
+                                        <Button.Flyout>
+                                            <Flyout Placement="Bottom"
+                                                    ShouldConstrainToRootBounds="False">
+                                                <Flyout.FlyoutPresenterStyle>
+                                                    <Style TargetType="FlyoutPresenter">
+                                                        <Setter Property="Padding" Value="0,8" />
+                                                        <Setter Property="Margin" Value="0,-4,0,0" />
+                                                    </Style>
+                                                </Flyout.FlyoutPresenterStyle>
+                                                <NavigationViewList x:Name="TopNavMenuItemsOverflowHost"
+                                                                    IsItemClickEnabled="True"
+                                                                    ItemContainerStyle="{TemplateBinding MenuItemContainerStyle}"
+                                                                    ItemContainerStyleSelector="{TemplateBinding MenuItemContainerStyleSelector}"
+                                                                    ItemTemplate="{TemplateBinding MenuItemTemplate}"
+                                                                    ItemTemplateSelector="{TemplateBinding MenuItemTemplateSelector}"
+                                                                    SingleSelectionFollowsFocus="False">
+                                                    <NavigationViewList.ItemContainerTransitions>
+                                                        <TransitionCollection />
+                                                    </NavigationViewList.ItemContainerTransitions>
+                                                </NavigationViewList>
+                                            </Flyout>
+                                        </Button.Flyout>
+                                    </Button>
+                                    <ContentControl x:Name="PaneCustomContentOnTopPane"
+                                                    Grid.Column="5"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    VerticalContentAlignment="Stretch"
+                                                    IsTabStop="False" />
+                                    <!--<Grid x:Name="TopPaneAutoSuggestArea" Grid.Column="6" Height="{ThemeResource NavigationViewTopPaneHeight}">
+                                                <ContentControl x:Name="TopPaneAutoSuggestBoxPresenter" HorizontalContentAlignment="Stretch" IsTabStop="False" MinWidth="48" Margin="12,0,12,0" VerticalContentAlignment="Center"/>
+                                            </Grid>-->
+                                    <ContentControl x:Name="PaneFooterOnTopPane"
+                                                    Grid.Column="7"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    VerticalContentAlignment="Stretch"
+                                                    IsTabStop="False" />
+                                    <!--<NavigationViewItem x:Name="SettingsTopNavPaneItem" Grid.Column="8" Icon="Setting" Style="{ThemeResource NavigationViewSettingsItemStyleWhenOnTopPane}"/>-->
+                                </Grid>
+                                <Border x:Name="TopNavContentOverlayAreaGrid"
+                                        Child="{TemplateBinding ContentOverlay}" />
+                            </StackPanel>
+                            <SplitView x:Name="RootSplitView"
+                                       Grid.Row="1"
+                                       Background="{TemplateBinding Background}"
+                                       CompactPaneLength="{TemplateBinding CompactPaneLength}"
+                                       DisplayMode="Inline"
+                                       IsPaneOpen="{Binding IsPaneOpen, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                       IsTabStop="False"
+                                       OpenPaneLength="{TemplateBinding OpenPaneLength}"
+                                       PaneBackground="{ThemeResource NavigationViewDefaultPaneBackground}">
+                                <SplitView.Pane>
+                                    <Grid x:Name="PaneContentGrid"
+                                          Visibility="{Binding TemplateSettings.LeftPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
+                                        <Grid.RowDefinitions>
+                                            <RowDefinition Height="Auto" />
+                                            <RowDefinition Height="0" />
+                                            <RowDefinition x:Name="PaneContentGridToggleButtonRow"
+                                                           Height="Auto" />
+                                            <RowDefinition Height="Auto" />
+                                            <RowDefinition Height="Auto" />
+                                            <RowDefinition Height="8" />
+                                            <RowDefinition Height="*" />
+                                            <RowDefinition Height="Auto" />
+                                            <RowDefinition Height="Auto" />
+                                            <RowDefinition Height="8" />
+                                        </Grid.RowDefinitions>
+                                        <Grid x:Name="ContentPaneTopPadding"
+                                              Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                        <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" Height="{ThemeResource NavigationViewTopPaneHeight}" Grid.Row="3" VerticalAlignment="Center">
+                                                    <ContentControl x:Name="PaneAutoSuggestBoxPresenter" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}" VerticalContentAlignment="Center"/>
+                                                    <Button x:Name="PaneAutoSuggestButton" Style="{ThemeResource NavigationViewPaneSearchButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
+                                                </Grid>-->
+                                        <ContentControl x:Name="PaneCustomContentBorder"
+                                                        Grid.Row="4"
+                                                        HorizontalContentAlignment="Stretch"
+                                                        VerticalContentAlignment="Stretch"
+                                                        IsTabStop="False" />
+                                        <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 TemplateSettings.SingleSelectionFollowsFocus, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                        <ContentControl x:Name="FooterContentBorder"
+                                                        Grid.Row="7"
+                                                        HorizontalContentAlignment="Stretch"
+                                                        VerticalContentAlignment="Stretch"
+                                                        IsTabStop="False" />
+                                        <!--<NavigationViewItem x:Name="SettingsNavPaneItem" Icon="Setting" Grid.Row="8"/>-->
+                                    </Grid>
+                                </SplitView.Pane>
+                                <Grid x:Name="ContentGrid">
+                                    <Grid.RowDefinitions>
+                                        <RowDefinition Height="Auto" />
+                                        <RowDefinition Height="Auto" />
+                                        <RowDefinition Height="*" />
+                                    </Grid.RowDefinitions>
+                                    <Grid x:Name="ContentTopPadding"
+                                          Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                          Visibility="{Binding TemplateSettings.LeftPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                    <ContentControl x:Name="HeaderContent"
+                                                    Grid.Row="1"
+                                                    MinHeight="{StaticResource PaneToggleButtonHeight}"
+                                                    HorizontalContentAlignment="Stretch"
+                                                    VerticalContentAlignment="Stretch"
+                                                    Content="{TemplateBinding Header}"
+                                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                                    IsTabStop="False"
+                                                    Style="{StaticResource NavigationViewTitleHeaderContentControlTextStyle}" />
+                                    <ContentPresenter Grid.Row="2"
+                                                      AutomationProperties.LandmarkType="Main"
+                                                      Content="{TemplateBinding Content}" />
+                                </Grid>
+                            </SplitView>
+                        </Grid>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="DisplayModeGroup">
+                                <VisualState x:Name="Compact" />
+                                <VisualState x:Name="Expanded">
+                                    <VisualState.Setters>
+                                        <Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource NavigationViewExpandedPaneBackground}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Minimal">
+                                    <VisualState.Setters>
+                                        <Setter Target="HeaderContent.Margin" Value="48,5,0,0" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="TopNavigationMinimal" />
+                                <VisualState x:Name="MinimalWithBackButton">
+                                    <VisualState.Setters>
+                                        <Setter Target="HeaderContent.Margin" Value="104,5,0,0" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <!--<VisualStateGroup x:Name="TogglePaneGroup">
+                                        <VisualState x:Name="TogglePaneButtonVisible"/>
+                                        <VisualState x:Name="TogglePaneButtonCollapsed">
+                                            <VisualState.Setters>
+                                                <Setter Target="PaneContentGridToggleButtonRow.Height" Value="4"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                    </VisualStateGroup>-->
+                            <VisualStateGroup x:Name="HeaderGroup">
+                                <VisualState x:Name="HeaderVisible" />
+                                <VisualState x:Name="HeaderCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="HeaderContent.Visibility" Value="Collapsed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <!--<VisualStateGroup x:Name="SettingsGroup">
+                                        <VisualState x:Name="SettingsVisible"/>
+                                        <VisualState x:Name="SettingsCollapsed">
+                                            <VisualState.Setters>
+                                                <Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed"/>
+                                                <Setter Target="SettingsTopNavPaneItem.Visibility" Value="Collapsed"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                    </VisualStateGroup>
+                                    <VisualStateGroup x:Name="AutoSuggestGroup">
+                                        <VisualState x:Name="AutoSuggestBoxVisible"/>
+                                        <VisualState x:Name="AutoSuggestBoxCollapsed">
+                                            <VisualState.Setters>
+                                                <Setter Target="AutoSuggestArea.Visibility" Value="Collapsed"/>
+                                                <Setter Target="TopPaneAutoSuggestArea.Visibility" Value="Collapsed"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                    </VisualStateGroup>
+                                    <VisualStateGroup x:Name="PaneStateGroup">
+                                        <VisualState x:Name="NotClosedCompact"/>
+                                        <VisualState x:Name="ClosedCompact">
+                                            <VisualState.Setters>
+                                                <Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed"/>
+                                                <Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                    </VisualStateGroup>-->
+                            <VisualStateGroup x:Name="PaneStateListSizeGroup">
+                                <VisualState x:Name="ListSizeFull" />
+                                <VisualState x:Name="ListSizeCompact">
+                                    <VisualState.Setters>
+                                        <Setter Target="MenuItemsHost.HorizontalAlignment" Value="Left" />
+                                        <Setter Target="MenuItemsHost.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                        <Setter Target="SettingsNavPaneItem.HorizontalAlignment" Value="Left" />
+                                        <Setter Target="SettingsNavPaneItem.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                        <Setter Target="PaneTitleTextBlock.Visibility" Value="Collapsed" />
+                                        <Setter Target="PaneHeaderContentBorder.Visibility" Value="Collapsed" />
+                                        <Setter Target="PaneCustomContentBorder.HorizontalAlignment" Value="Left" />
+                                        <Setter Target="PaneCustomContentBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                        <Setter Target="FooterContentBorder.HorizontalAlignment" Value="Left" />
+                                        <Setter Target="FooterContentBorder.Width" Value="{Binding CompactPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="TitleBarVisibilityGroup">
+                                <VisualState x:Name="TitleBarVisible" />
+                                <VisualState x:Name="TitleBarCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PaneContentGrid.Margin" Value="0,32,0,0" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="OverflowLabelGroup">
+                                <VisualState x:Name="OverflowButtonWithLabel" />
+                                <VisualState x:Name="OverflowButtonNoLabel">
+                                    <VisualState.Setters>
+                                        <Setter Target="TopNavOverflowButton.Style" Value="{ThemeResource NavigationViewOverflowButtonNoLabelStyleWhenPaneOnTop}" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <!--<VisualStateGroup x:Name="BackButtonGroup">
+                                        <VisualState x:Name="BackButtonVisible"/>
+                                        <VisualState x:Name="BackButtonCollapsed">
+                                            <VisualState.Setters>
+                                                <Setter Target="BackButtonPlaceholderOnTopNav.Width" Value="0"/>
+                                            </VisualState.Setters>
+                                        </VisualState>
+                                    </VisualStateGroup>-->
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs
index 5dc727a0453..9d53cb88861 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.cs
@@ -32,7 +32,7 @@ public TabbedCommandBarItem()
             nameof(Header),
             typeof(string),
             typeof(TabbedCommandBarItem),
-            new PropertyMetadata(string.Empty));
+            new PropertyMetadata("Test"));
 
         /// <summary>
         /// Gets or sets the title of this ribbon tab.

From b79e75e5a07d2d109eb58b9493ad88479fcf24eb Mon Sep 17 00:00:00 2001
From: YoshiAsk <jjask7@gmail.com>
Date: Mon, 2 Nov 2020 18:50:31 -0600
Subject: [PATCH 3/5] Update samples.json

---
 .../SamplePages/samples.json                           | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
index 1a5c5303b40..37b737ea939 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
@@ -433,6 +433,16 @@
         "XamlCodeFile": "TokenizingTextBoxXaml.bind",
         "Icon": "/SamplePages/TokenizingTextBox/TokenizingTextBox.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TokenizingTextBox.md"
+      },
+      {
+        "Name": "TabbedCommandBar",
+        "Type": "TabbedCommandBarPage",
+        "Subcategory": "Layout",
+        "About": "A text input control that makes suggestions and keeps track of data token items",
+        "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar",
+        "XamlCodeFile": "TabbedCommandBar.bind",
+        "Icon": "/SamplePages/TokenizingTextBox/TokenizingTextBox.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TabbedCommandBar.md"
       }
     ]
   },

From 9303c405a4acffe3f497fe847e11aecf65bea9c8 Mon Sep 17 00:00:00 2001
From: Joshua Askharoun <jjask7@gmail.com>
Date: Mon, 2 Nov 2020 19:45:04 -0600
Subject: [PATCH 4/5] Add thumbnail for TabbedCommandBar and update doc link
 (even though docs don't exist yet)

---
 .../Microsoft.Toolkit.Uwp.SampleApp.csproj       |   1 +
 .../TabbedCommandBar/TabbedCommandBar.png        | Bin 0 -> 2590 bytes
 .../SamplePages/samples.json                     |   4 ++--
 3 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.png

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
index 59b9063ee9d..6b37565291a 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
+++ b/Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj
@@ -272,6 +272,7 @@
     <Content Include="Icons\More.png" />
     <Content Include="Icons\Notifications.png" />
     <Content Include="Icons\Services.png" />
+    <Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.png" />
     <Content Include="SamplePages\TilesBrush\TilesBrush.png" />
     <Content Include="SamplePages\Eyedropper\Eyedropper.png" />
     <Content Include="SamplePages\OnDevice\OnDevice.png" />
diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.png b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.png
new file mode 100644
index 0000000000000000000000000000000000000000..9761391a31c4ad3f84e7ee66d5efcfef8dfef95f
GIT binary patch
literal 2590
zcmd^B`%@EF6y7Kmlq!gd_^LaLG7cr#JS37e3nBqQO`sAG)KQmY6IPOJnq5r52NV@w
z_^zV}=(N73RTQ-rE!I~RsA5q^i!CZDO2<ciR4qZP^zH@$1??ZuA9iQ&{l0VVIo~<=
zBunEo<9hZO*aL!~o-xs?Nf0D}!S`{GZs5JG<mmSh<aUVCCb3ECiI|QyiwHfPLW&$_
zE5IR08RoDOx-^o7Q%ECa!I4L0#}Js(<H+P-wODP9AXBO6OdA=WsnO~(({u_w5*FG+
z>A-*kGszOL!)&rJm;*<6zZm%DwowG;DQp^!B&p-z2--%%!J=T17zynGD{XoMHc1uL
zVhmO|lFG7H3`OmByT~pR(KaJ0Q79CsSc*!eLckC*85Wjs2rZ01=fdSfMKU@YWo0Sa
z0&_lz6gr*75d`3Hi*wRJwRyKNE$IUxP!2&QA~D*Y&QgZ=&^e?7-I_|XG?PkOTN8Ne
zh*r3RA&{?g69-}KjI36Fm~J+|l?KB`&IUrXi27DcZw_Fz8CDXVL^5=`O-Dw~CM~Q#
zuLP$H7DqWqQ<91@lNJW3izCvIkay7JcBn)lZ9^ky6K#tJZAIdUgx}`0!(z;Yk(^BF
z+0-^~ZNNm*V&srFo_K_d&XmrTH^D-Id|Zd{P*NL)BQmiVbQV{29!u^VYpn*xN2sRt
zAV3*!)&|8yM8w%>17!jjGilsdI3_YeE>XzkLaE4=3@9B2Y$-#AieLdtDwc|c5{XbO
z)k+kYOoB;93B__u><WlygBzhISmM9<TwlXVV4+rH(G<hdwhVsD)$H-)=dP7&X`=Wp
zhhe_f7@^~2!V#;D)~D-8J)ahE=Rz6Uz}g8L8Eyn+#*uJ?fdYbNz~BN=Mhj_!C87{f
z@Y^=_RFbRvd$U7ZVnex`_a-<c+97-;PiS{lft_m)i~ul8(AHrB7Omrmw16381H<N#
zd6N<hwHyi*rb9s>XvCWIHPxT0KI>Z%CW|<=B!wWJTr82?9;Y@1Ma}Q$D~laqx~_a0
zaW1cB4t-I-%hYeUe7?}>c_lDy`;sqr2kl<kGxHbOtYM6$@oM#}>x`yxv*+~St;XVI
zmdXZ`Ogb>pkaA%BW&eZD$8qY#JEoTFS=IL4KVFO8b|qow)LnD09!o4+UBW)rdV1Z<
zr94-4j}5BLJzH>6ojGNycc^c#O}6lxX_Hs=Z~FO;c1_qc`Q=J)$DoDlFQF@&Q*g6k
z(VaVP`}2>yW`;Hnf331$foZ#{e1niYpD3b`$o07JQ?}E)=-I{LqtD#7XZ;boZ`k1<
z91FSxEZ-Kb>(e(Fz1(MiKxAxXWt{b8bLrm1{d-H3t_{sS<6e<LE%>&lbDF)dab87}
z5~{-s?~HGnFz0-8;ET){&j({)1r`==_|EBDxF`H+(O3Dum)>4?R~>M($>Uzic}MqP
z=Je)Qg^a`V-m<xuKQcWUQ+BGRI!gdAGL}zCGZ%rMjqcXyWCnsn{@f#QY!90aL0#v^
zsKT|5!auL=)AS98vTrJGuAPwWvv&E4e#1g@*T>%7>huekPLCMzg(hdn*OC)gg)iq^
zZ%pX>ph}x%2q^vSv|oKa<Z<Mi{?On(^~S8MAv&ejQ_!pYf?xftycu1eiOZdvgWN-+
zSI!(0m7Sdj2?hwdNV~Y{-8?EiyjS;zVgE7hfC{wv?DC^(akr8!*B|~>GNdD;)inRs
zhVxSuVPSQ5n+ggBJw0+uDPDZq*+ey<y0S+(=I4Rs_4W1gRd{lcZ$rlEj2o!=X<+#i
zzxr2xAe3l6l>7%iFK*pBsce1>Y#;axbfSkAcKdrBB*;&Gn61%h8a5iP*40%@y~Hb$
zyRdfqsEU#E_3m@Zdw*P6wZAKd<3+lGGpnn7V7u)2mXI7iwb4UQh){HAl6%QwdBHhN
zb*<pT8Mo&1t`waD`9;U_UX<0=)_T>{)XdoVN&nR1n)|yB95_%Nzmjr)pQ@d@`d}UY
zhZa>&E_D@cIBUQEJo6s$#TDD(xuc$MT<4y8aLT+X#fkA=p8qT!eBw<5kFFD#<prhj
zL2e<++3g$ny~0(`h{De#3I?y;`K!|Fd_sx$jci4ZAb;qFhR_`&i<kLuf9ql*HL5*h
HXXgA1=Ob$G

literal 0
HcmV?d00001

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
index 37b737ea939..4eabf24be86 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
@@ -438,10 +438,10 @@
         "Name": "TabbedCommandBar",
         "Type": "TabbedCommandBarPage",
         "Subcategory": "Layout",
-        "About": "A text input control that makes suggestions and keeps track of data token items",
+        "About": "A control for displaying multiple CommandBars in the same space, like Microsoft Office's ribbon.",
         "CodeUrl": "https://github.com/windows-toolkit/WindowsCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar",
         "XamlCodeFile": "TabbedCommandBar.bind",
-        "Icon": "/SamplePages/TokenizingTextBox/TokenizingTextBox.png",
+        "Icon": "/SamplePages/TabbedCommandBar/TabbedCommandBar.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TabbedCommandBar.md"
       }
     ]

From 4b96f431f9d1198bf9adb3d901da93394835ae72 Mon Sep 17 00:00:00 2001
From: YoshiAsk <jjask7@gmail.com>
Date: Tue, 3 Nov 2020 13:10:31 -0600
Subject: [PATCH 5/5] Added slightly mroe detailed sample

---
 .../TabbedCommandBar/TabbedCommandBar.bind    | 81 +++++++++++++++++--
 .../TabbedCommandBar/TabbedCommandBar.xaml    | 75 +----------------
 2 files changed, 77 insertions(+), 79 deletions(-)

diff --git a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind
index 0132eb6dcd0..690e3e93bd7 100644
--- a/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind
+++ b/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TabbedCommandBar/TabbedCommandBar.bind
@@ -5,12 +5,79 @@
       xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
       mc:Ignorable="d">
     <Grid>
-        <Border Margin="0">
-            <controls:TabbedCommandBar x:Name="TabbedCommandBarControl">
-                <controls:TabbedCommandBarItem Header="Home">
-                    <AppBarButton Icon="Cut" Label="Cut"/>
-                </controls:TabbedCommandBarItem>
-            </controls:TabbedCommandBar>
-        </Border>
+        <controls:TabbedCommandBar>
+            <controls:TabbedCommandBar.Footer>
+                <CommandBar Background="Transparent" DefaultLabelPosition="Right">
+                    <AppBarButton Label="Share" Icon="Share"/>
+                    <AppBarButton Label="Comments" Icon="Message"/>
+                </CommandBar>
+            </controls:TabbedCommandBar.Footer>
+            <controls:TabbedCommandBar.Resources>
+                <StaticResource x:Key="NavigationViewTopPaneBackground" ResourceKey="SystemControlChromeMediumLowAcrylicWindowMediumBrush" />
+                <StaticResource x:Key="TabbedCommandBarContentBackground" ResourceKey="SystemControlChromeLowAcrylicWindowBrush" />
+            </controls:TabbedCommandBar.Resources>
+            <controls:TabbedCommandBarItem Header="Home">
+                <AppBarButton Icon="Undo" Label="Undo"/>
+                <AppBarButton Icon="Redo" Label="Redo"/>
+                <AppBarButton Icon="Paste" Label="Paste"/>
+                <AppBarSeparator />
+                <AppBarElementContainer>
+                    <ComboBox SelectedIndex="0">
+                        <ComboBoxItem Content="Arial" />
+                        <ComboBoxItem Content="Calibri" />
+                        <ComboBoxItem Content="JetBrains Mono" />
+                        <ComboBoxItem Content="Roboto" />
+                        <ComboBoxItem Content="Sergio UI" />
+                        <ComboBoxItem Content="Sergio UI Semibold" />
+                    </ComboBox>
+                </AppBarElementContainer>
+                <AppBarToggleButton Icon="Bold" Label="Bold" />
+                <AppBarToggleButton Icon="Italic" Label="Italic" />
+                <AppBarToggleButton Icon="Underline" Label="Underline" />
+            </controls:TabbedCommandBarItem>
+            <controls:TabbedCommandBarItem Header="Insert">
+                <AppBarButton Icon="Pictures" Label="Pictures">
+                    <AppBarButton.Flyout>
+                        <MenuFlyout Placement="BottomEdgeAlignedLeft">
+                            <MenuFlyoutItem Text="This Device">
+                                <MenuFlyoutItem.Icon>
+                                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEC4E;" />
+                                </MenuFlyoutItem.Icon>
+                            </MenuFlyoutItem>
+                            <MenuFlyoutItem Text="Stock Images">
+                                <MenuFlyoutItem.Icon>
+                                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE721;" />
+                                </MenuFlyoutItem.Icon>
+                            </MenuFlyoutItem>
+                            <MenuFlyoutItem Icon="Globe" Text="Online Pictures" />
+                        </MenuFlyout>
+                    </AppBarButton.Flyout>
+                </AppBarButton>
+                <AppBarButton Label="Shapes">
+                    <AppBarButton.Icon>
+                        <FontIcon FontFamily="Segoe UI Symbol" Glyph="&#x25A1;" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+                <AppBarButton Label="Icons">
+                    <AppBarButton.Icon>
+                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xED58;" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+                <AppBarButton Label="3D Models">
+                    <AppBarButton.Icon>
+                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF158;" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+                <AppBarSeparator/>
+                <AppBarButton Label="Add-ins">
+                    <AppBarButton.Icon>
+                        <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xECAA;" />
+                    </AppBarButton.Icon>
+                </AppBarButton>
+                <controls:TabbedCommandBarItem.SecondaryCommands>
+                    <AppBarButton Icon="Add" Label="New item" />
+                </controls:TabbedCommandBarItem.SecondaryCommands>
+            </controls:TabbedCommandBarItem>
+        </controls:TabbedCommandBar>
     </Grid>
 </Page>
diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
index 3db435ffd8b..ba203b27af1 100644
--- a/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
+++ b/Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml
@@ -14,7 +14,7 @@
         <Setter Property="DefaultLabelPosition" Value="Right" />
         <Setter Property="Background" Value="{ThemeResource TabbedCommandBarContentBackground}" />
         <!--
-            Also, is there a way to prevent the overflow button from showing if there aren't any buttons to send to the overflow menu?
+            Is there a way to prevent the overflow button from showing if there aren't any buttons to send to the overflow menu?
             (See my message in the WinUI channel: https://discord.com/channels/372137812037730304/671870147354427422/771057634203402300 )
             Hardcoding the height of the CommandBar does work, but it's a bit of a hack.
         -->
@@ -700,27 +700,11 @@
         <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
         <Setter Property="IsTabStop" Value="False" />
         <Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
+        <Setter Property="Background" Value="{ThemeResource SystemControlChromeMediumLowAcrylicWindowMediumBrush}" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="NavigationView">
                     <Grid x:Name="RootGrid">
-                        <!--<Grid x:Name="PaneToggleButtonGrid" HorizontalAlignment="Left" Margin="0,0,0,8" VerticalAlignment="Top" Canvas.ZIndex="100">
-                                    <Grid.RowDefinitions>
-                                        <RowDefinition Height="Auto"/>
-                                        <RowDefinition Height="Auto"/>
-                                    </Grid.RowDefinitions>
-                                    <Grid x:Name="TogglePaneTopPadding" Height="{Binding TemplateSettings.TopPadding, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
-                                    <Grid x:Name="ButtonHolderGrid" Grid.Row="1">
-                                        <Button x:Name="NavigationViewBackButton" IsEnabled="{TemplateBinding IsBackEnabled}" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top" Visibility="{Binding TemplateSettings.BackButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
-                                            <ToolTipService.ToolTip>
-                                                <ToolTip x:Name="NavigationViewBackButtonToolTip"/>
-                                            </ToolTipService.ToolTip>
-                                        </Button>
-                                        <Button x:Name="TogglePaneButton" AutomationProperties.LandmarkType="Navigation" Style="{TemplateBinding PaneToggleButtonStyle}" VerticalAlignment="Top" Visibility="{Binding TemplateSettings.PaneToggleButtonVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
-                                            <TextBlock x:Name="PaneTitleTextBlock" Grid.Column="0" HorizontalAlignment="Left" Style="{StaticResource NavigationViewItemHeaderTextStyle}" Text="{TemplateBinding PaneTitle}" VerticalAlignment="Center"/>
-                                        </Button>
-                                    </Grid>
-                                </Grid>-->
                         <Grid>
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="Auto" />
@@ -730,7 +714,7 @@
                                         Grid.Row="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Top"
-                                        Background="{ThemeResource NavigationViewTopPaneBackground}"
+                                        Background="{TemplateBinding Background}"
                                         Canvas.ZIndex="1"
                                         XYFocusKeyboardNavigation="Enabled">
                                 <Grid x:Name="TopNavTopPadding"
@@ -740,7 +724,6 @@
                                       Height="{ThemeResource NavigationViewTopPaneHeight}"
                                       Visibility="{Binding TemplateSettings.TopPaneVisibility, RelativeSource={RelativeSource Mode=TemplatedParent}}">
                                     <Grid.ColumnDefinitions>
-                                        <!--<ColumnDefinition x:Name="BackButtonPlaceholderOnTopNav" Width="{ThemeResource NavigationBackButtonWidth}"/>-->
                                         <ColumnDefinition Width="Auto" />
                                         <ColumnDefinition Width="Auto" />
                                         <ColumnDefinition Width="Auto" />
@@ -815,15 +798,11 @@
                                                     HorizontalContentAlignment="Stretch"
                                                     VerticalContentAlignment="Stretch"
                                                     IsTabStop="False" />
-                                    <!--<Grid x:Name="TopPaneAutoSuggestArea" Grid.Column="6" Height="{ThemeResource NavigationViewTopPaneHeight}">
-                                                <ContentControl x:Name="TopPaneAutoSuggestBoxPresenter" HorizontalContentAlignment="Stretch" IsTabStop="False" MinWidth="48" Margin="12,0,12,0" VerticalContentAlignment="Center"/>
-                                            </Grid>-->
                                     <ContentControl x:Name="PaneFooterOnTopPane"
                                                     Grid.Column="7"
                                                     HorizontalContentAlignment="Stretch"
                                                     VerticalContentAlignment="Stretch"
                                                     IsTabStop="False" />
-                                    <!--<NavigationViewItem x:Name="SettingsTopNavPaneItem" Grid.Column="8" Icon="Setting" Style="{ThemeResource NavigationViewSettingsItemStyleWhenOnTopPane}"/>-->
                                 </Grid>
                                 <Border x:Name="TopNavContentOverlayAreaGrid"
                                         Child="{TemplateBinding ContentOverlay}" />
@@ -867,10 +846,6 @@
                                                             VerticalContentAlignment="Stretch"
                                                             IsTabStop="False" />
                                         </Grid>
-                                        <!--<Grid x:Name="AutoSuggestArea" Height="{ThemeResource NavigationViewTopPaneHeight}" Grid.Row="3" VerticalAlignment="Center">
-                                                    <ContentControl x:Name="PaneAutoSuggestBoxPresenter" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="{ThemeResource NavigationViewAutoSuggestBoxMargin}" VerticalContentAlignment="Center"/>
-                                                    <Button x:Name="PaneAutoSuggestButton" Style="{ThemeResource NavigationViewPaneSearchButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
-                                                </Grid>-->
                                         <ContentControl x:Name="PaneCustomContentBorder"
                                                         Grid.Row="4"
                                                         HorizontalContentAlignment="Stretch"
@@ -893,7 +868,6 @@
                                                         HorizontalContentAlignment="Stretch"
                                                         VerticalContentAlignment="Stretch"
                                                         IsTabStop="False" />
-                                        <!--<NavigationViewItem x:Name="SettingsNavPaneItem" Icon="Setting" Grid.Row="8"/>-->
                                     </Grid>
                                 </SplitView.Pane>
                                 <Grid x:Name="ContentGrid">
@@ -940,14 +914,6 @@
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
-                            <!--<VisualStateGroup x:Name="TogglePaneGroup">
-                                        <VisualState x:Name="TogglePaneButtonVisible"/>
-                                        <VisualState x:Name="TogglePaneButtonCollapsed">
-                                            <VisualState.Setters>
-                                                <Setter Target="PaneContentGridToggleButtonRow.Height" Value="4"/>
-                                            </VisualState.Setters>
-                                        </VisualState>
-                                    </VisualStateGroup>-->
                             <VisualStateGroup x:Name="HeaderGroup">
                                 <VisualState x:Name="HeaderVisible" />
                                 <VisualState x:Name="HeaderCollapsed">
@@ -956,33 +922,6 @@
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
-                            <!--<VisualStateGroup x:Name="SettingsGroup">
-                                        <VisualState x:Name="SettingsVisible"/>
-                                        <VisualState x:Name="SettingsCollapsed">
-                                            <VisualState.Setters>
-                                                <Setter Target="SettingsNavPaneItem.Visibility" Value="Collapsed"/>
-                                                <Setter Target="SettingsTopNavPaneItem.Visibility" Value="Collapsed"/>
-                                            </VisualState.Setters>
-                                        </VisualState>
-                                    </VisualStateGroup>
-                                    <VisualStateGroup x:Name="AutoSuggestGroup">
-                                        <VisualState x:Name="AutoSuggestBoxVisible"/>
-                                        <VisualState x:Name="AutoSuggestBoxCollapsed">
-                                            <VisualState.Setters>
-                                                <Setter Target="AutoSuggestArea.Visibility" Value="Collapsed"/>
-                                                <Setter Target="TopPaneAutoSuggestArea.Visibility" Value="Collapsed"/>
-                                            </VisualState.Setters>
-                                        </VisualState>
-                                    </VisualStateGroup>
-                                    <VisualStateGroup x:Name="PaneStateGroup">
-                                        <VisualState x:Name="NotClosedCompact"/>
-                                        <VisualState x:Name="ClosedCompact">
-                                            <VisualState.Setters>
-                                                <Setter Target="PaneAutoSuggestBoxPresenter.Visibility" Value="Collapsed"/>
-                                                <Setter Target="PaneAutoSuggestButton.Visibility" Value="Visible"/>
-                                            </VisualState.Setters>
-                                        </VisualState>
-                                    </VisualStateGroup>-->
                             <VisualStateGroup x:Name="PaneStateListSizeGroup">
                                 <VisualState x:Name="ListSizeFull" />
                                 <VisualState x:Name="ListSizeCompact">
@@ -1016,14 +955,6 @@
                                     </VisualState.Setters>
                                 </VisualState>
                             </VisualStateGroup>
-                            <!--<VisualStateGroup x:Name="BackButtonGroup">
-                                        <VisualState x:Name="BackButtonVisible"/>
-                                        <VisualState x:Name="BackButtonCollapsed">
-                                            <VisualState.Setters>
-                                                <Setter Target="BackButtonPlaceholderOnTopNav.Width" Value="0"/>
-                                            </VisualState.Setters>
-                                        </VisualState>
-                                    </VisualStateGroup>-->
                         </VisualStateManager.VisualStateGroups>
                     </Grid>
                 </ControlTemplate>