[Feature] Add TabbedCommandBar (ribbon) control (#3556)

<!-- 🚨 Please Do Not skip any instructions and information mentioned below as they are all required and essential to evaluate and test the PR. By fulfilling all the required information you will be able to reduce the volume of questions and most likely help merge the PR faster 🚨 -->

## Fixes #3259
<!-- Add the relevant issue number after the "#" mentioned above (for ex: Fixes #1234) which will automatically close the issue once the PR is merged. -->


<!-- Add a brief overview here of the feature/bug & fix. -->

## PR Type
What kind of change does this PR introduce?
<!-- Please uncomment one or more that apply to this PR. -->

<!-- - Bugfix -->
Feature
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
Sample app changes
<!-- - Other... Please describe: -->


## What is the current behavior?
There is no ribbon or ribbon-like control for UWP. The current solution is to put CommandBars inside of a Pivot.

## What is the new behavior?
Adds a TabbedCommandBar, which internally is almost identical to the current solutions, but provides a much friendlier developer experience.


## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tested code with current [supported SDKs](../readme.md#supported)
- [ ] Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link: https://github.com/MicrosoftDocs/WindowsCommunityToolkitDocs/pull/405
- [ ] Sample in sample app has been added / updated (for bug fixes / features)
    - [x] Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/windows-toolkit/WindowsCommunityToolkit-design-assets)
- [ ] Tests for the changes have been added (for bug fixes / features) (if applicable)
- [ ] Header has been added to all new source files (run *build/UpdateHeaders.bat*)
- [x] Contains **NO** breaking changes

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. 
     Please note that breaking changes are likely to be rejected within minor release cycles or held until major versions. -->


## Other information
I forgot to do my work on a feature branch, so this PR is basically a duplicate of #3551, with a little bit of cleanup.

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -267,6 +267,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\Animations\Effects\FadeBehavior.png" />
     <Content Include="SamplePages\ColorPicker\ColorPicker.png" />
     <Content Include="SamplePages\TilesBrush\TilesBrush.png" />
@@ -980,6 +981,9 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
+    <Content Include="SamplePages\TabbedCommandBar\TabbedCommandBar.bind">
+      <SubType>Designer</SubType>
+    </Content>
     <Page Include="SamplePages\CanvasPathGeometry\CanvasPathGeometryPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

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

@@ -0,0 +1,147 @@
+<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"
+      xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
+      mc:Ignorable="d">
+    <Page.Resources>
+      <converters:VisibilityToBoolConverter x:Key="VisBoolConverter"/>
+    </Page.Resources>
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
+            <RowDefinition/>
+        </Grid.RowDefinitions>
+        
+        <controls:TabbedCommandBar>
+            <controls:TabbedCommandBar.PaneFooter>
+                <CommandBar Background="Transparent" DefaultLabelPosition="Right">
+                    <AppBarButton Label="Share" Icon="Share"/>
+                    <AppBarButton Label="Comments" Icon="Message"/>
+                </CommandBar>
+            </controls:TabbedCommandBar.PaneFooter>
+            <controls:TabbedCommandBar.MenuItems>
+                <controls:TabbedCommandBarItem Header="Home">
+                    <AppBarButton Icon="Undo" Label="Undo"/>
+                    <AppBarButton Icon="Redo" Label="Redo"/>
+                    <AppBarButton Icon="Paste" Label="Paste"/>
+                    <AppBarSeparator />
+                    <AppBarElementContainer>
+                        <controls:ColorPickerButton SelectedColor="{ThemeResource Brand-Color}"/>
+                    </AppBarElementContainer>
+                    <AppBarElementContainer>
+                        <ComboBox SelectedIndex="0" MinWidth="175">
+                            <ComboBoxItem Content="Arial" />
+                            <ComboBoxItem Content="Calibri" />
+                            <ComboBoxItem Content="JetBrains Mono" />
+                            <ComboBoxItem Content="Roboto" />
+                            <ComboBoxItem Content="Sergio UI" />
+                            <ComboBoxItem Content="Sergio UI Semibold" />
+                        </ComboBox>
+                    </AppBarElementContainer>
+                    <AppBarElementContainer>
+                        <TextBox PlaceholderText="Size"/>
+                    </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="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xEC4E;" />
+                                    </MenuFlyoutItem.Icon>
+                                </MenuFlyoutItem>
+                                <MenuFlyoutItem Text="Stock Images">
+                                    <MenuFlyoutItem.Icon>
+                                        <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" 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="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xED58;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarButton Label="3D Models">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF158;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarSeparator/>
+                    <AppBarButton Label="Add-ins">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xECAA;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <controls:TabbedCommandBarItem.SecondaryCommands>
+                        <AppBarButton Icon="Add" Label="New item" />
+                    </controls:TabbedCommandBarItem.SecondaryCommands>
+                </controls:TabbedCommandBarItem>
+                <controls:TabbedCommandBarItem x:Name="PictureFormat"
+                                               Header="Picture Format"
+                                               IsContextual="True"
+                                               Visibility="Collapsed">
+                    <AppBarButton Label="Remove Background">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE706;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarButton Label="Picture Effects">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF158;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarButton Label="Rotate">
+                        <AppBarButton.Icon>
+                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7AD;" />
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                    <AppBarElementContainer>
+                        <SplitButton>
+                            <StackPanel Spacing="12" Orientation="Horizontal">
+                                <FontIcon FontSize="16" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7A8;" />
+                                <TextBlock FontSize="12" Text="Crop"/>
+                            </StackPanel>
+                            <SplitButton.Flyout>
+                                <MenuFlyout>
+                                    <MenuFlyoutItem Text="Crop">
+                                        <MenuFlyoutItem.Icon>
+                                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE7A8;" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Text="Crop to Shape">
+                                        <MenuFlyoutItem.Icon>
+                                            <FontIcon FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xF407;" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Text="Aspect Ratio" />
+                                    <MenuFlyoutSeparator/>
+                                    <MenuFlyoutItem Text="Fill" />
+                                    <MenuFlyoutItem Text="Fit" />
+                                </MenuFlyout>
+                            </SplitButton.Flyout>
+                        </SplitButton>
+                    </AppBarElementContainer>
+                </controls:TabbedCommandBarItem>
+            </controls:TabbedCommandBar.MenuItems>
+        </controls:TabbedCommandBar>
+
+        <Grid Grid.Row="1">
+            <ToggleSwitch x:Name="ContextualToggle" IsOn="{Binding Visibility, ElementName=PictureFormat, Converter={StaticResource VisBoolConverter}, Mode=TwoWay}"
+                          OffContent="Contextual Tab Off" OnContent="Contextual Tab On"/>
+        </Grid>
+    </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/XamlOnlyPage.xaml

@@ -3,6 +3,7 @@
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
       xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+      xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
       xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
@@ -17,6 +18,8 @@
     <!--  Put a copy of any controls/resources required for XAML Parsing within XAML Only Samples  -->
     <!--  This page is never loaded by the app, but used to trick the compiler...  -->
     <Page.Resources>
+        <converters:VisibilityToBoolConverter x:Key="VisibilityBoolConverter" />
+        <converters:BoolToVisibilityConverter x:Key="BoolVisibilityConverter" />
         <triggers:CompareStateTrigger x:Key="CompareStateTrigger" />
         <triggers:IsEqualStateTrigger x:Key="IsEqualStateTrigger" />
         <triggers:IsNotEqualStateTrigger x:Key="IsNotEqualStateTrigger" />
@@ -34,17 +37,17 @@
                 <ani:OpacityAnimation />
                 <ani:StartAnimationActivity />
                 <ani:InvokeActionsActivity />
-                <ani:ClipAnimation/>
-                <ani:BlurEffectAnimation/>
-                <ani:SaturationEffectAnimation/>
-                <ani:AnimationScope/>
-                <ani:ExposureEffectAnimation/>
+                <ani:ClipAnimation />
+                <ani:BlurEffectAnimation />
+                <ani:SaturationEffectAnimation />
+                <ani:AnimationScope />
+                <ani:ExposureEffectAnimation />
             </ani:AnimationSet>
         </ani:Explicit.Animations>
         <media:UIElementExtensions.VisualFactory>
             <media:PipelineVisualFactory>
                 <media:OpacityEffect />
-                <media:ExposureEffect/>
+                <media:ExposureEffect />
             </media:PipelineVisualFactory>
         </media:UIElementExtensions.VisualFactory>
 

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json

@@ -453,6 +453,15 @@
         "XamlCodeFile": "TokenizingTextBoxXaml.bind",
         "Icon": "/SamplePages/TokenizingTextBox/TokenizingTextBox.png",
         "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TokenizingTextBox.md"
+      },
+      {
+        "Name": "TabbedCommandBar",
+        "Subcategory": "Menus and Toolbars",
+        "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": "/SamplePages/TabbedCommandBar/TabbedCommandBar.bind",
+        "Icon": "/SamplePages/TabbedCommandBar/TabbedCommandBar.png",
+        "DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/controls/TabbedCommandBar.md"
       }
     ]
   },

Microsoft.Toolkit.Uwp.UI.Controls.Design/Controls/TabbedCommandBar.Metadata.cs

@@ -0,0 +1,28 @@
+// 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.ComponentModel;
+
+using Microsoft.Toolkit.Uwp.UI.Controls.Design.Properties;
+
+using Microsoft.VisualStudio.DesignTools.Extensibility;
+using Microsoft.VisualStudio.DesignTools.Extensibility.Metadata;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal class TabbedCommandBarMetadata : AttributeTableBuilder
+    {
+        public TabbedCommandBarMetadata()
+            : base()
+        {
+            AddCallback(ControlTypes.TabbedCommandBar,
+                b =>
+                {
+                    b.AddCustomAttributes(nameof(TabbedCommandBar.CollapsedState), new CategoryAttribute(Resources.CategoryAppearance));
+                    b.AddCustomAttributes(new ToolboxCategoryAttribute(ToolboxCategoryPaths.Toolkit, false));
+                }
+            );
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Design/Controls/TabbedCommandBar.Typedata.cs

@@ -0,0 +1,18 @@
+// 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;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal static partial class ControlTypes
+    {
+        internal const string TabbedCommandBar = RootNamespace + "." + nameof(TabbedCommandBar);
+    }
+
+    internal static class TabbedCommandBar
+    {
+        internal const string CollapsedState = nameof(CollapsedState);
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Design/Controls/TabbedCommandBarItem.Metadata.cs

@@ -0,0 +1,35 @@
+// 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.ComponentModel;
+
+using Microsoft.Toolkit.Uwp.UI.Controls.Design.Properties;
+
+using Microsoft.VisualStudio.DesignTools.Extensibility;
+using Microsoft.VisualStudio.DesignTools.Extensibility.Metadata;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal class TabbedCommandBarItemMetadata : AttributeTableBuilder
+    {
+        public TabbedCommandBarItemMetadata()
+            : base()
+        {
+            AddCallback(ControlTypes.TabbedCommandBarItem,
+                b =>
+                {
+                    // TODO
+                    // b.AddCustomAttributes(nameof(TabbedCommandBarItem.Header), new CategoryAttribute(Resources.CategoryCommon));
+                    // b.AddCustomAttributes(nameof(TabbedCommandBarItem.Footer), new CategoryAttribute(Resources.CategoryCommon));
+                    b.AddCustomAttributes(nameof(TabbedCommandBarItem.IsContextual), new CategoryAttribute(Resources.CategoryCommon));
+                    b.AddCustomAttributes(nameof(TabbedCommandBarItem.OverflowButtonAlignment),
+                        new CategoryAttribute(Resources.CategoryLayout),
+                        new EditorBrowsableAttribute(EditorBrowsableState.Advanced)
+                        );
+                    b.AddCustomAttributes(new ToolboxCategoryAttribute(ToolboxCategoryPaths.Toolkit, false));
+                }
+            );
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Design/Controls/TabbedCommandBarItem.Typedata.cs

@@ -0,0 +1,21 @@
+// 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;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls.Design
+{
+    internal static partial class ControlTypes
+    {
+        internal const string TabbedCommandBarItem = RootNamespace + "." + nameof(TabbedCommandBarItem);
+    }
+
+    internal static class TabbedCommandBarItem
+    {
+        internal const string Header = nameof(Header);
+        internal const string Footer = nameof(Footer);
+        internal const string IsContextual = nameof(IsContextual);
+        internal const string OverflowButtonAlignment = nameof(OverflowButtonAlignment);
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls.Design/Microsoft.Toolkit.Uwp.UI.Controls.DesignTools.csproj

@@ -119,6 +119,10 @@
     <Compile Include="Controls\RotatorTile.Typedata.cs" />
     <Compile Include="Controls\ScrollHeader.Metadata.cs" />
     <Compile Include="Controls\ScrollHeader.Typedata.cs" />
+    <Compile Include="Controls\TabbedCommandBar.Metadata.cs" />
+    <Compile Include="Controls\TabbedCommandBar.Typedata.cs" />
+    <Compile Include="Controls\TabbedCommandBarItem.Metadata.cs" />
+    <Compile Include="Controls\TabbedCommandBarItem.Typedata.cs" />
     <Compile Include="Controls\TextToolbar.Metadata.cs" />
     <Compile Include="Controls\TextToolbar.Typedata.cs" />
     <Compile Include="Controls\TileControl.Metadata.cs" />

Microsoft.Toolkit.Uwp.UI.Controls/Microsoft.Toolkit.Uwp.UI.Controls.csproj

@@ -32,6 +32,7 @@
         - RemoteDevicePicker: Remote Device Picker Control for Project Rome.
         - RotatorTile: Rotates through a set of items one-by-one like a live-tile.
         - StaggeredPanel: Layout of items in a column approach where an item will be added to whichever column has used the least amount of space.
+        - TabbedCommandBar: A ribbon-like control that displays a tabbed collection of CommandBars
         - TextToolbar: A Toolbar for Editing Text attached to a RichEditBox. It can format RTF, Markdown, or use a Custom Formatter.
         - TileControl: A ContentControl that show an image repeated many times.
         - TokenizingTextBox: An AutoSuggestBox like control which places entered input into easily removed containers for contacts or tags.

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

@@ -0,0 +1,101 @@
+// 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.Linq;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Markup;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Media.Animation;
+
+namespace Microsoft.Toolkit.Uwp.UI.Controls
+{
+    /// <summary>
+    /// A basic ribbon control that houses <see cref="TabbedCommandBarItem"/>s
+    /// </summary>
+    [ContentProperty(Name = nameof(MenuItems))]
+    [TemplatePart(Name = "PART_RibbonContent", Type = typeof(ContentControl))]
+    [TemplatePart(Name = "PART_RibbonContentBorder", Type = typeof(Border))]
+    [TemplatePart(Name = "PART_TabChangedStoryboard", Type = typeof(Storyboard))]
+    public class TabbedCommandBar : NavigationView
+    {
+        private ContentControl _ribbonContent = null;
+        private Border _ribbonContentBorder = null;
+        private Storyboard _tabChangedStoryboard = null;
+
+        /// <summary>
+        /// The last selected <see cref="TabbedCommandBarItem"/>.
+        /// </summary>
+        private TabbedCommandBarItem _previousSelectedItem = null;
+        private long _visibilityChangedToken;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="TabbedCommandBar"/> class.
+        /// </summary>
+        public TabbedCommandBar()
+        {
+            DefaultStyleKey = typeof(TabbedCommandBar);
+
+            SelectionChanged += SelectedItemChanged;
+        }
+
+        /// <inheritdoc/>
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            if (_ribbonContent != null)
+            {
+                _ribbonContent.Content = null;
+            }
+
+            // Get RibbonContent first, since setting SelectedItem requires it
+            _ribbonContent = GetTemplateChild("PART_RibbonContent") as ContentControl;
+            _ribbonContentBorder = GetTemplateChild("PART_RibbonContentBorder") as Border;
+            _tabChangedStoryboard = GetTemplateChild("TabChangedStoryboard") as Storyboard;
+
+            SelectedItem = MenuItems.FirstOrDefault();
+        }
+
+        private void SelectedItemChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
+        {
+            var item = sender.SelectedItem as TabbedCommandBarItem;
+            if (item == null || item.Visibility == Visibility.Collapsed)
+            {
+                // If the item is now hidden, select the first item instead.
+                // I can't think of any way that the visibiltiy would be null
+                // and still be selectable, but let's handle it just in case.
+                sender.SelectedItem = sender.MenuItems.FirstOrDefault();
+                return;
+            }
+
+            // Remove the visibility PropertyChanged handler from the
+            // previously selected item
+            if (_previousSelectedItem != null)
+            {
+                _previousSelectedItem.UnregisterPropertyChangedCallback(TabbedCommandBarItem.VisibilityProperty, _visibilityChangedToken);
+            }
+
+            // Register a new visibility PropertyChangedcallback for the
+            // currently selected item
+            _previousSelectedItem = item;
+            _visibilityChangedToken =
+            _previousSelectedItem.RegisterPropertyChangedCallback(TabbedCommandBarItem.VisibilityProperty, SelectedItemVisibilityChanged);
+
+            // Set the ribbon background and start the transition animation
+            _tabChangedStoryboard?.Begin();
+        }
+
+        private void SelectedItemVisibilityChanged(DependencyObject sender, DependencyProperty dp)
+        {
+            // If the item is not visible, default to the first tab
+            if (sender.GetValue(dp) is Visibility vis && vis == Visibility.Collapsed)
+            {
+                // FIXME: This will cause WinUI to throw an exception if run
+                // when the tabs overflow
+                SelectedItem = MenuItems.FirstOrDefault();
+            }
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBar.xaml

@@ -0,0 +1,276 @@
+<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">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml" />
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style BasedOn="{StaticResource DefaultTabbedCommandBarStyle}" TargetType="controls:TabbedCommandBar"/>
+
+    <Style x:Key="DefaultTabbedCommandBarStyle" TargetType="controls:TabbedCommandBar">
+        <Setter Property="MenuItemTemplateSelector" Value="{StaticResource DefaultTabbedCommandBarItemTemplateSelector}" />
+        <Setter Property="PaneDisplayMode" Value="Top" />
+        <Setter Property="PaneToggleButtonStyle" Value="{StaticResource PaneToggleButtonStyle}" />
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
+        <Setter Property="Background" Value="{ThemeResource SystemChromeMediumLowColor}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:TabbedCommandBar">
+                    <Grid>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+
+                        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
+                            <Grid>
+                                <StackPanel x:Name="TopNavArea"
+                                            Grid.Row="0"
+                                            HorizontalAlignment="Stretch"
+                                            VerticalAlignment="Top"
+                                            Background="{TemplateBinding Background}"
+                                            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 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>
+                                        <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="PaneFooterOnTopPane"
+                                                        Grid.Column="7"
+                                                        HorizontalContentAlignment="Stretch"
+                                                        VerticalContentAlignment="Stretch"
+                                                        IsTabStop="False"/>
+                                    </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}"
+                                           x:Load="False">
+                                    <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>
+                                            <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" />
+                                        </Grid>
+                                    </SplitView.Pane>
+                                </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="HeaderGroup">
+                                    <VisualState x:Name="HeaderVisible" />
+                                    <VisualState x:Name="HeaderCollapsed">
+                                        <VisualState.Setters>
+                                            <Setter Target="HeaderContent.Visibility" Value="Collapsed" />
+                                        </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>
+                            </VisualStateManager.VisualStateGroups>
+                        </Grid>
+
+
+                        <Border x:Name="PART_RibbonContentBorder" Grid.Row="1" Background="{Binding ElementName=PART_RibbonContent, Path=Content.Background}"
+                                VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+                            <ContentControl x:Name="PART_RibbonContent" Content="{TemplateBinding SelectedItem}"
+                                            HorizontalContentAlignment="Stretch">
+                                <ContentControl.Resources>
+                                    <Storyboard x:Name="TabChangedStoryboard">
+                                        <PopInThemeAnimation TargetName="PART_RibbonContent"/>
+                                    </Storyboard>
+                                    
+                                    <!--FIXME: Ideally, these resources would be set by the TabbedCommandBarItem,
+                                        but there isn't a way to do that without duplicating the CommandBar template.-->
+                                    <Style TargetType="AppBarElementContainer" BasedOn="{StaticResource TabbedCommandBarElementContainerStyle}"/>
+                                    <Style TargetType="SplitButton" BasedOn="{StaticResource AppBarSplitButtonStyle}"/>
+                                </ContentControl.Resources>
+                            </ContentControl>
+                        </Border>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <SolidColorBrush x:Key="TabbedCommandBarAcrylicBackground" Color="{ThemeResource SystemControlChromeMediumLowAcrylicWindowMediumBrush}"/>
+    <Style x:Key="TabbedCommandBarAcrylicStyle" TargetType="controls:TabbedCommandBar" BasedOn="{StaticResource DefaultTabbedCommandBarStyle}">
+        <Setter Property="Background" Value="{ThemeResource TabbedCommandBarAcrylicBackground}" />
+    </Style>
+    
+</ResourceDictionary>

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

@@ -0,0 +1,126 @@
+// 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(object),
+            typeof(TabbedCommandBarItem),
+            new PropertyMetadata(string.Empty));
+
+        /// <summary>
+        /// Gets or sets the text or <see cref="UIElement"/> to display in the header of this ribbon tab.
+        /// </summary>
+        public object Header
+        {
+            get => (object)GetValue(HeaderProperty);
+            set => SetValue(HeaderProperty, value);
+        }
+
+        /// <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 a value indicating whether this tab is contextual.
+        /// </summary>
+        public bool IsContextual
+        {
+            get => (bool)GetValue(IsContextualProperty);
+            set => SetValue(IsContextualProperty, value);
+        }
+
+        /// <summary>
+        /// Identifies the <see cref="OverflowButtonAlignment"/> property.
+        /// </summary>
+        public static readonly DependencyProperty OverflowButtonAlignmentProperty = DependencyProperty.Register(
+            nameof(OverflowButtonAlignment),
+            typeof(HorizontalAlignment),
+            typeof(TabbedCommandBarItem),
+            new PropertyMetadata(HorizontalAlignment.Left));
+
+        /// <summary>
+        /// Gets or sets a value indicating the alignment of the command overflow button.
+        /// </summary>
+        public HorizontalAlignment OverflowButtonAlignment
+        {
+            get => (HorizontalAlignment)GetValue(OverflowButtonAlignmentProperty);
+            set => SetValue(OverflowButtonAlignmentProperty, value);
+        }
+
+        /// <summary>
+        /// Identifies the <see cref="CommandAlignment"/> property.
+        /// </summary>
+        public static readonly DependencyProperty CommandAlignmentProperty = DependencyProperty.Register(
+            nameof(CommandAlignment),
+            typeof(HorizontalAlignment),
+            typeof(TabbedCommandBarItem),
+            new PropertyMetadata(HorizontalAlignment.Stretch));
+
+        /// <summary>
+        /// Gets or sets a value indicating the alignment of the commands in the <see cref="TabbedCommandBarItem"/>.
+        /// </summary>
+        public HorizontalAlignment CommandAlignment
+        {
+            get => (HorizontalAlignment)GetValue(CommandAlignmentProperty);
+            set => SetValue(CommandAlignmentProperty, value);
+        }
+
+        /// <inheritdoc/>
+        protected override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            _primaryItemsControl = GetTemplateChild("PrimaryItemsControl") as ItemsControl;
+            if (_primaryItemsControl != null)
+            {
+                _primaryItemsControl.HorizontalAlignment = CommandAlignment;
+                RegisterPropertyChangedCallback(CommandAlignmentProperty, (sender, dp) =>
+                {
+                    _primaryItemsControl.HorizontalAlignment = (HorizontalAlignment)sender.GetValue(dp);
+                });
+            }
+
+            _moreButton = GetTemplateChild("MoreButton") as Button;
+            if (_moreButton != null)
+            {
+                _moreButton.HorizontalAlignment = OverflowButtonAlignment;
+                RegisterPropertyChangedCallback(OverflowButtonAlignmentProperty, (sender, dp) =>
+                {
+                    _moreButton.HorizontalAlignment = (HorizontalAlignment)sender.GetValue(dp);
+                });
+            }
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls/TabbedCommandBar/TabbedCommandBarItem.xaml

@@ -0,0 +1,368 @@
+<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">
+
+    <SolidColorBrush x:Key="ContextualTabBackground" Color="{ThemeResource SystemAltMediumColor}"/>
+    <SolidColorBrush x:Key="NormalTabBackground" Color="{ThemeResource SystemChromeLowColor}"/>
+    <SolidColorBrush x:Key="NormalTabAcrylicBackground" Color="{ThemeResource SystemControlChromeLowAcrylicWindowBrush}"/>
+
+    <Style BasedOn="{StaticResource DefaultTabbedCommandBarItemStyle}" TargetType="controls:TabbedCommandBarItem"/>
+
+    <Style x:Key="DefaultTabbedCommandBarItemStyle" BasedOn="{StaticResource CommandBarRevealStyle}" TargetType="controls:TabbedCommandBarItem">
+        <!-- TODO: Copy CommandBarRevealStyle instead of referencing it -->
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="DefaultLabelPosition" Value="Right" />
+        <Setter Property="Background" Value="{ThemeResource NormalTabBackground}" />
+        <!--
+            Is there a way to prevent the overflow button from showing if there aren't any buttons to send to the overflow menu?
+            (See this message in the WinUI channel: https://discord.com/channels/372137812037730304/671870147354427422/771057634203402300 )
+            Hardcoding the height of the CommandBar works, but it's a bit of a hack.
+        -->
+        <Setter Property="Height" Value="40" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+    </Style>
+
+    <Style x:Key="TabbedCommandBarItemAcrylicStyle" BasedOn="{StaticResource DefaultTabbedCommandBarItemStyle}" TargetType="controls:TabbedCommandBarItem">
+        <Setter Property="Background" Value="{ThemeResource NormalTabAcrylicBackground}"/>
+    </Style>
+
+    <DataTemplate x:Key="NormalTabTemplate">
+        <NavigationViewItem Content="{Binding Header}" Visibility="{Binding Visibility}"/>
+    </DataTemplate>
+    <DataTemplate x:Key="ContextualTabTemplate">
+        <NavigationViewItem Content="{Binding Header}" Background="{StaticResource ContextualTabBackground}" Visibility="{Binding Visibility}">
+            <NavigationViewItem.Resources>
+                <!-- TODO: These should reference TabbedCommandBarItem-specific resources so they can overriden -->
+                <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}" />
+
+                <!-- TODO: Set BackgroundSelected to match ContextualTabBackground -->
+                <!--<StaticResource x:Key="TopNavigationViewItemBackgroundSelected" ResourceKey="ContextualTabBackgroundColor" />-->
+            </NavigationViewItem.Resources>
+        </NavigationViewItem>
+    </DataTemplate>
+    <controls:TabbedCommandBarItemTemplateSelector x:Key="DefaultTabbedCommandBarItemTemplateSelector"
+                                                   Contextual="{StaticResource ContextualTabTemplate}"
+                                                   Normal="{StaticResource NormalTabTemplate}" />
+
+    <Style x:Key="TabbedCommandBarElementContainerStyle" TargetType="AppBarElementContainer">
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Margin" Value="1,0" />
+    </Style>
+
+    <Style x:Key="AppBarSplitButtonStyle" TargetType="SplitButton">
+        <Setter Property="Background" Value="{ThemeResource AppBarButtonRevealBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource AppBarItemForegroundThemeBrush}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource SplitButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource SplitButtonBorderThemeThickness}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <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="-3" />
+        <Setter Property="IsTabStop" Value="True"/>
+        <Setter Property="Padding" Value="{ThemeResource ButtonPadding}"/>
+        <Setter Property="CornerRadius" Value="0" />
+        <Setter Property="Padding" Value="10"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="SplitButton">
+                    <Grid
+                        x:Name="RootGrid"
+                        Background="Transparent"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+
+                        <Grid.Resources>
+                            <!-- Override the style of the inner buttons so that they don't affect background/foreground/border colors -->
+                            <Style TargetType="Button">
+                                <Setter Property="Background" Value="{ThemeResource ButtonRevealBackground}" />
+                                <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
+                                <Setter Property="BorderBrush" Value="{ThemeResource ButtonRevealBorderBrush}" />
+                                <Setter Property="BorderThickness" Value="{ThemeResource ButtonRevealBorderThemeThickness}" />
+                                <Setter Property="HorizontalAlignment" Value="Left" />
+                                <Setter Property="VerticalAlignment" Value="Center" />
+                                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+                                <Setter Property="FontWeight" Value="Normal" />
+                                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+                                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+                                <Setter Property="FocusVisualMargin" Value="-3" />
+                                <Setter Property="Template">
+                                    <Setter.Value>
+                                        <ControlTemplate TargetType="Button">
+                                            <Grid x:Name="RootGrid" Background="Transparent">
+
+                                                <VisualStateManager.VisualStateGroups>
+                                                    <VisualStateGroup x:Name="CommonStates">
+                                                        <VisualState x:Name="Normal">
+                                                            <Storyboard>
+                                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
+                                                            </Storyboard>
+                                                        </VisualState>
+
+                                                        <VisualState x:Name="PointerOver">
+                                                            <VisualState.Setters>
+                                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver" />
+                                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}"/>
+                                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPointerOver}"/>
+                                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                                            </VisualState.Setters>
+                                                            <Storyboard>
+                                                                <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
+                                                            </Storyboard>
+                                                        </VisualState>
+
+                                                        <VisualState x:Name="Pressed">
+                                                            <VisualState.Setters>
+                                                                <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed" />
+                                                                <Setter Target="RootGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}"/>
+                                                                <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPressed}"/>
+                                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                                            </VisualState.Setters>
+                                                            <Storyboard>
+                                                                <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
+                                                            </Storyboard>
+                                                        </VisualState>
+
+                                                        <VisualState x:Name="Disabled">
+                                                            <VisualState.Setters>
+                                                                <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource SplitButtonForegroundDisabled}"/>
+                                                            </VisualState.Setters>
+                                                        </VisualState>
+                                                    </VisualStateGroup>
+                                                </VisualStateManager.VisualStateGroups>
+
+                                                <ContentPresenter x:Name="ContentPresenter"
+                                                                  BorderBrush="{TemplateBinding BorderBrush}"
+                                                                  BorderThickness="{TemplateBinding BorderThickness}"
+                                                                  Content="{TemplateBinding Content}"
+                                                                  ContentTransitions="{TemplateBinding ContentTransitions}"
+                                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
+                                                                  Padding="{TemplateBinding Padding}"
+                                                                  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                                                  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                                                  AutomationProperties.AccessibilityView="Raw" />
+                                            </Grid>
+                                        </ControlTemplate>
+                                    </Setter.Value>
+                                </Setter>
+                            </Style>
+                        </Grid.Resources>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+
+                                <VisualState x:Name="FlyoutOpen">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}"/>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPressed}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="TouchPressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}"/>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPressed}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="PrimaryPointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}"/>
+                                        <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPointerOver}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackground}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="PrimaryPressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}"/>
+                                        <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPressed}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackground}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="SecondaryPointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackground}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}"/>
+                                        <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPointerOver}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="SecondaryPressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonRevealBackground}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}"/>
+                                        <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushPressed}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Checked">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}"/>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="CheckedFlyoutOpen">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}"/>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="CheckedTouchPressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}"/>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="CheckedPrimaryPointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}"/>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPointerOver}"/>
+                                        <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPointerOver}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPointerOver}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="CheckedPrimaryPressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}"/>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}"/>
+                                        <Setter Target="PrimaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="CheckedSecondaryPointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}"/>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPointerOver}"/>
+                                        <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPointerOver}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPointerOver}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="CheckedSecondaryPressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="Border.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushChecked}"/>
+                                        <Setter Target="PrimaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundChecked}"/>
+                                        <Setter Target="PrimaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundChecked}"/>
+                                        <Setter Target="SecondaryBackgroundGrid.Background" Value="{ThemeResource SplitButtonBackgroundCheckedPressed}"/>
+                                        <Setter Target="SecondaryButton.BorderBrush" Value="{ThemeResource SplitButtonBorderBrushCheckedPressed}"/>
+                                        <Setter Target="SecondaryButton.Foreground" Value="{ThemeResource SplitButtonForegroundCheckedPressed}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+
+                            <VisualStateGroup x:Name="SecondaryButtonPlacementStates">
+                                <VisualState x:Name="SecondaryButtonRight"/>
+
+                                <VisualState x:Name="SecondaryButtonSpan">
+                                    <VisualState.Setters>
+                                        <Setter Target="SecondaryButton.(Grid.Column)" Value="0"/>
+                                        <Setter Target="SecondaryButton.(Grid.ColumnSpan)" Value="3"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition x:Name="PrimaryButtonColumn" Width="*" MinWidth="{ThemeResource SplitButtonPrimaryButtonSize}"/>
+                            <ColumnDefinition x:Name="Separator" Width="1" />
+                            <ColumnDefinition x:Name="SecondaryButtonColumn" Width="{ThemeResource SplitButtonSecondaryButtonSize}"/>
+                        </Grid.ColumnDefinitions>
+
+                        <Grid x:Name="PrimaryBackgroundGrid"
+                              Background="{TemplateBinding Background}"/>
+
+                        <Grid x:Name="SecondaryBackgroundGrid"
+                              Background="{TemplateBinding Background}"
+                              Grid.Column="2"/>
+
+                        <Grid x:Name="Border"
+                              Grid.ColumnSpan="3"
+                              BorderBrush="{TemplateBinding BorderBrush}"
+                              BorderThickness="{TemplateBinding BorderThickness}"
+                              CornerRadius="{TemplateBinding CornerRadius}"/>
+
+                        <Button x:Name="PrimaryButton"
+                                Grid.Column="0"
+                                Foreground="{TemplateBinding Foreground}"
+                                Background="{TemplateBinding Background}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                Content="{TemplateBinding Content}"
+                                ContentTransitions="{TemplateBinding ContentTransitions}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Command="{TemplateBinding Command}"
+                                CommandParameter="{TemplateBinding CommandParameter}"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                Padding="{TemplateBinding Padding}"
+                                IsTabStop="False"
+                                AutomationProperties.AccessibilityView="Raw"/>
+
+                        <Button x:Name="SecondaryButton"
+                                Grid.Column="2"
+                                Foreground="{TemplateBinding Foreground}"
+                                Background="{TemplateBinding Background}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                HorizontalContentAlignment="Stretch"
+                                VerticalContentAlignment="Stretch"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Padding="0,0,9,0"
+                                IsTabStop="False"
+                                AutomationProperties.AccessibilityView="Raw">
+                            <Button.Content>
+                                <TextBlock
+                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                    FontSize="12"
+                                    Text="&#xE70D;"
+                                    VerticalAlignment="Center"
+                                    HorizontalAlignment="Right"
+                                    AutomationProperties.AccessibilityView="Raw"/>
+                            </Button.Content>
+                        </Button>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>

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 item is TabbedCommandBarItem t && t.IsContextual ? Contextual : Normal;
+        }
+
+        /// <inheritdoc/>
+        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+        {
+            return SelectTemplateCore(item);
+        }
+    }
+}

Microsoft.Toolkit.Uwp.UI.Controls/Themes/Generic.xaml

@@ -31,6 +31,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" />

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" />