Fixed caption button padding in RTL and added FlowDirection inhereitance to window creation sample

Author: Avid29

components/TitleBar/samples/SamplePages/ShellPage.xaml

@@ -1,4 +1,4 @@
-<Page x:Class="TitleBarExperiment.Samples.ShellPage"
+<Page x:Class="TitleBarExperiment.Samples.ShellPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:controls="using:CommunityToolkit.WinUI.Controls"

components/TitleBar/samples/TitleBarFullSample.xaml.cs

@@ -44,7 +44,14 @@ await newView.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
         {
             SystemBackdrop = new MicaBackdrop()
         };
-        newWindow.Content = new ShellPage(newWindow);
+
+        // Create the content for the window to show
+        // and set the FlowDirection to match the current region.
+        newWindow.Content = new ShellPage(newWindow)
+        {
+            FlowDirection = this.FlowDirection
+        };
+
         newWindow.Activate();
 #endif
     }

components/TitleBar/src/TitleBar.WASDK.cs

@@ -14,7 +14,6 @@ namespace CommunityToolkit.WinUI.Controls;
 
 [TemplatePart(Name = nameof(PART_FooterPresenter), Type = typeof(ContentPresenter))]
 [TemplatePart(Name = nameof(PART_ContentPresenter), Type = typeof(ContentPresenter))]
-
 public partial class TitleBar : Control
 {
     WndProcHelper? WndProcHelper;
@@ -55,12 +54,23 @@ private void SetWASDKTitleBar()
                 };
             }
 
+            // Set the caption buttons to match the flow direction of the titlebar
+            UpdateCaptionButtonsDirection(this.FlowDirection);
+
             PART_ContentPresenter = GetTemplateChild(nameof(PART_ContentPresenter)) as ContentPresenter;
             PART_FooterPresenter = GetTemplateChild(nameof(PART_FooterPresenter)) as ContentPresenter;
 
             // Get caption button occlusion information.
             int CaptionButtonOcclusionWidthRight = Window.AppWindow.TitleBar.RightInset;
             int CaptionButtonOcclusionWidthLeft = Window.AppWindow.TitleBar.LeftInset;
+            
+            // Swap left/right if in RTL mode
+            if (this.FlowDirection == FlowDirection.RightToLeft)
+            {
+                (CaptionButtonOcclusionWidthRight, CaptionButtonOcclusionWidthLeft) = (CaptionButtonOcclusionWidthLeft, CaptionButtonOcclusionWidthRight);
+            }
+
+            // Set padding columns to match caption button occlusion.
             PART_LeftPaddingColumn!.Width = new GridLength(CaptionButtonOcclusionWidthLeft);
             PART_RightPaddingColumn!.Width = new GridLength(CaptionButtonOcclusionWidthRight);
 
@@ -101,9 +111,6 @@ private void UpdateCaptionButtons(FrameworkElement rootElement)
             Window.AppWindow.TitleBar.ButtonForegroundColor = Colors.Black;
             Window.AppWindow.TitleBar.ButtonInactiveForegroundColor = Colors.DarkGray;
         }
-
-        // Set the caption buttons to match the flow direction of the app
-        UpdateCaptionButtonsDirection(rootElement.FlowDirection);
     }
 
     private void UpdateCaptionButtonsDirection(FlowDirection direction)