Fixes #936 by changing panel in BackstageTabControl to DockPanel

Author: batzen

Changelog.md

@@ -23,6 +23,7 @@
 
 - ### Enhancements/Features
   - [#935](../../issues/935) - Support MediumIcon (24x24) size in RibbonGroupBox (thanks @nishy2000)
+  - [#936](../../issues/936) - Add ability to vertically align items in Backstage
   - Added automation peers for `InRibbonGallery` and `GalleryItem`
   - Improved keyboard navigation for `InRibbonGallery`
 

Fluent.Ribbon.Showcase/TestContent.xaml

@@ -293,7 +293,8 @@ Pellentesque nec dolor sed lacus tristique rutrum sed vitae urna. Sed eu pharetr
                             <Fluent:Button Header="Exit"
                                            Icon="{iconPacks:Material Kind=ExitToApp}"
                                            KeyTip="X"
-                                           Command="{Binding ExitCommand}" />
+                                           Command="{Binding ExitCommand}"
+                                           VerticalAlignment="Bottom" />
                         </Fluent:BackstageTabControl>
                     </Fluent:Backstage>
 

Fluent.Ribbon/Themes/Controls/BackstageTabControl.xaml

@@ -83,6 +83,8 @@
                 Value="{DynamicResource Fluent.Ribbon.Brushes.IdealForegroundColorBrush}" />
         <Setter Property="Fluent:RibbonProperties.IconSize"
                 Value="Small" />
+        <Setter Property="DockPanel.Dock"
+                Value="Top" />
     </Style>
 
     <ControlTemplate x:Key="BackstageBackButtonTemplate"
@@ -159,6 +161,8 @@
                 Value="{DynamicResource Fluent.Ribbon.Brushes.Backstage.BackButton.Background}" />
         <Setter Property="Foreground"
                 Value="{DynamicResource Fluent.Ribbon.Brushes.Backstage.BackButton.Foreground}" />
+        <Setter Property="DockPanel.Dock"
+                Value="Top" />
     </Style>
 
     <Style TargetType="{x:Type Fluent:SeparatorTabItem}"
@@ -167,6 +171,8 @@
                 Value="25,10,20,10" />
         <Setter Property="Focusable"
                 Value="False" />
+        <Setter Property="DockPanel.Dock"
+                Value="Top" />
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="{x:Type Fluent:SeparatorTabItem}">
@@ -235,7 +241,7 @@
                       KeyboardNavigation.DirectionalNavigation="Cycle">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
-                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
                     </Grid.RowDefinitions>
                     <Fluent:WindowSteeringHelperControl Grid.RowSpan="2"
                                                         Height="{Binding SelectedContentMargin.Top, RelativeSource={RelativeSource TemplatedParent}}"
@@ -296,6 +302,13 @@
                 Value="{DynamicResource Fluent.Ribbon.Brushes.BackstageTabControl.ItemsPanelBackground}" />
         <Setter Property="ItemContainerStyleSelector"
                 Value="{x:Static styleSelectors:BackstageTabControlItemContainerStyleSelector.Instance}" />
+        <Setter Property="ItemsPanel">
+            <Setter.Value>
+                <ItemsPanelTemplate>
+                    <DockPanel />
+                </ItemsPanelTemplate>
+            </Setter.Value>
+        </Setter>
         <Setter Property="SelectedContentMargin">
             <Setter.Value>
                 <MultiBinding Converter="{x:Static converters:StaticConverters.ThicknessConverter}">

Fluent.Ribbon/Themes/Controls/BackstageTabItem.xaml

@@ -91,5 +91,7 @@
                 Value="{DynamicResource Fluent.Ribbon.Brushes.BackstageTabItem.Selected.Background}" />
         <Setter Property="Margin"
                 Value="0" />
+        <Setter Property="DockPanel.Dock"
+                Value="Top" />
     </Style>
 </ResourceDictionary>