Added IsContextual and OverflowButtonAlignment properties

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

@@ -19,7 +19,7 @@
                     <AppBarButton Icon="Paste" Label="Paste"/>
                     <AppBarSeparator />
                     <AppBarElementContainer>
-                        <ComboBox SelectedIndex="0">
+                        <ComboBox SelectedIndex="0" Width="175">
                             <ComboBoxItem Content="Arial" />
                             <ComboBoxItem Content="Calibri" />
                             <ComboBoxItem Content="JetBrains Mono" />
@@ -28,6 +28,9 @@
                             <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" />

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

@@ -32,6 +32,7 @@
         <Setter Property="IsTabStop" Value="False" />
         <Setter Property="CompactPaneLength" Value="{ThemeResource NavigationViewCompactPaneLength}" />
         <Setter Property="Background" Value="{ThemeResource SystemChromeMediumLowColor}" />
+        <!-- TODO: Despite being used in both the Border and RibbonContent, this background is nowhere to be seen. -->
         <Setter Property="ContentBackground" Value="{ThemeResource SystemChromeLowColor}" />
         <Setter Property="Template">
             <Setter.Value>

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

@@ -52,15 +52,6 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
             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>
@@ -70,6 +61,15 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
             set => SetValue(FooterProperty, 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>
@@ -79,6 +79,24 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
             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 whether this tab is contextual.
+        /// </summary>
+        public HorizontalAlignment OverflowButtonAlignment
+        {
+            get => (HorizontalAlignment)GetValue(OverflowButtonAlignmentProperty);
+            set => SetValue(OverflowButtonAlignmentProperty, value);
+        }
+
         /// <inheritdoc/>
         protected override void OnApplyTemplate()
         {
@@ -87,13 +105,13 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
             _primaryItemsControl = GetTemplateChild("PrimaryItemsControl") as ItemsControl;
             if (_primaryItemsControl != null)
             {
-                _primaryItemsControl.HorizontalAlignment = HorizontalAlignment.Left;
+                _primaryItemsControl.HorizontalAlignment = HorizontalAlignment.Stretch;
             }
 
             _moreButton = GetTemplateChild("MoreButton") as Button;
             if (_moreButton != null)
             {
-                _moreButton.HorizontalAlignment = HorizontalAlignment.Right;
+                _moreButton.HorizontalAlignment = OverflowButtonAlignment;
             }
         }
     }

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

@@ -15,6 +15,7 @@
             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="AcrylicTabbedCommandBarItemStyle" BasedOn="{StaticResource DefaultTabbedCommandBarItemStyle}" TargetType="controls:TabbedCommandBarItem">