Fix issue with titlebar sample setting caption button background to t…

…he wrong color (#1368)

<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
Closes #1355 
## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->
This fixes the issues mentioned in #1355 and also the fact that we
showed two titlebars in some cases.
## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->
- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

WinUIGallery/ControlPages/TitleBarPage.xaml

@@ -96,7 +96,7 @@
 
                         <TextBlock> Foreground Color</TextBlock>
                         <SplitButton x:Name="myFgColorButton" AutomationProperties.Name="Foreground color" Padding="0" MinHeight="0" MinWidth="0" VerticalAlignment="Top">
-                            <Border x:Name="ForegroundColorElement" Width="{StaticResource SwatchSize}" Height="{StaticResource SwatchSize}" Background="Black" Margin="0" CornerRadius="4,0,0,4"/>
+                            <Border x:Name="ForegroundColorElement" Width="{StaticResource SwatchSize}" Height="{StaticResource SwatchSize}" Background="Transparent" Margin="0" CornerRadius="4,0,0,4"/>
                             <SplitButton.Flyout>
                                 <Flyout Placement="Auto">
                                     <GridView ItemClick="FgGridView_ItemClick" IsItemClickEnabled="True">

WinUIGallery/ControlPages/TitleBarPage.xaml.cs

@@ -52,22 +52,24 @@ protected override void OnNavigatedFrom(NavigationEventArgs e)
         {
             ResetTitlebarSettings();
         }
-
-
-
+
         private void SetTitleBar(UIElement titlebar, bool forceCustomTitlebar = false)
         {
             var window = WindowHelper.GetWindowForElement(this as UIElement);
+            var titleBarElement = UIHelper.FindElementByName(this as UIElement, "AppTitleBar");
             if (forceCustomTitlebar || !window.ExtendsContentIntoTitleBar)
             {
+                titleBarElement.Visibility = Visibility.Visible;
                 window.ExtendsContentIntoTitleBar = true;
                 window.SetTitleBar(titlebar);
+                TitleBarHelper.SetCaptionButtonBackgroundColors(window, Colors.Transparent);
             }
             else
             {
+                titleBarElement.Visibility = Visibility.Collapsed;
                 window.ExtendsContentIntoTitleBar = false;
                 window.SetTitleBar(null);
-
+                TitleBarHelper.SetCaptionButtonBackgroundColors(window, null);
             }
             UpdateButtonText();
             UpdateTitleBarColor();
@@ -101,6 +103,7 @@ private void ClearClickThruRegions()
         public void UpdateButtonText()
         {
             var window = WindowHelper.GetWindowForElement(this as UIElement);
+
             if (window.ExtendsContentIntoTitleBar)
             {
                 customTitleBar.Content = "Reset to System TitleBar";
@@ -146,9 +149,32 @@ public void UpdateTitleBarColor()
         {
             var window = WindowHelper.GetWindowForElement(this);
             var titleBarElement = UIHelper.FindElementByName(this, "AppTitleBar");
+            var titleBarAppNameElement = UIHelper.FindElementByName(this, "AppTitle");
+
+            (titleBarElement as Border).Background = new SolidColorBrush(currentBgColor); // Changing titlebar uielement's color.
+
+            if(currentFgColor != Colors.Transparent)
+            {
+                (titleBarAppNameElement as TextBlock).Foreground = new SolidColorBrush(currentFgColor);
+            }
+            else
+            {
+                (titleBarAppNameElement as TextBlock).Foreground = Application.Current.Resources["TextFillColorPrimaryBrush"] as SolidColorBrush;
+            }
 
-            (titleBarElement as Border).Background = new SolidColorBrush(currentBgColor); // changing titlebar uielement's color
             TitleBarHelper.SetCaptionButtonColors(window, currentFgColor);
+
+            if(currentBgColor == Colors.Transparent)
+            {
+                // If the current background is null, we want to revert to the default titlebar which is achieved using null as color.
+                TitleBarHelper.SetBackgroundColor(window, null);
+            }
+            else
+            {
+                TitleBarHelper.SetBackgroundColor(window, currentBgColor);
+            }
+
+            TitleBarHelper.SetForegroundColor(window, currentFgColor);
         }
 
         private void customTitleBar_Click(object sender, RoutedEventArgs e)

WinUIGallery/Helper/TitleBarHelper.cs

@@ -46,5 +46,23 @@ public static void SetCaptionButtonColors(Window window, Windows.UI.Color color)
             res["WindowCaptionForeground"] = color;
             window.AppWindow.TitleBar.ButtonForegroundColor = color;
         }
+
+        public static void SetCaptionButtonBackgroundColors(Window window, Windows.UI.Color? color)
+        {
+            var titleBar = window.AppWindow.TitleBar;
+            titleBar.ButtonBackgroundColor = color;
+        }
+
+        public static void SetForegroundColor(Window window, Windows.UI.Color? color)
+        {
+            var titleBar = window.AppWindow.TitleBar;
+            titleBar.ForegroundColor = color;
+        }
+
+        public static void SetBackgroundColor(Window window, Windows.UI.Color? color)
+        {
+            var titleBar = window.AppWindow.TitleBar;
+            titleBar.BackgroundColor = color;
+        }
     }
 }