Title Bar with Fluent Design System - UWP App

Question

I am develop an new UWP app with Fluent Design System, and I want that my background with Acrylic material and I am using <Grid Background="{ThemeResource SystemControlBaseHighAcrylicWindowBrush}"> my I also want that the Title Bar of my UWP app be transparent (with Fluent Design System) and I am use this:

var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;

but the minimizing, maximizing, and closing butts do not become transparent, why?

I want the title bar of my application to be the same as the Windows 10 calculator!

Answer 1

You can do that using properties of the ApplicationViewTitleBar class:

 var view = ApplicationView.GetForCurrentView();

 // active
 view.TitleBar.BackgroundColor = Color.FromArgb(255, 8, 87, 180);
 view.TitleBar.ForegroundColor = Colors.White;

 // inactive  
 view.TitleBar.InactiveBackgroundColor = Color.FromArgb(255, 8, 87, 180);
 view.TitleBar.InactiveForegroundColor = Colors.Black;

 // button
 view.TitleBar.ButtonBackgroundColor = Color.FromArgb(255, 8, 87, 180);
 view.TitleBar.ButtonForegroundColor = Colors.White;

 view.TitleBar.ButtonHoverBackgroundColor = Colors.Blue;
 view.TitleBar.ButtonHoverForegroundColor = Colors.White;

 view.TitleBar.ButtonPressedBackgroundColor = Colors.Blue;
 view.TitleBar.ButtonPressedForegroundColor = Colors.White;

 view.TitleBar.ButtonInactiveBackgroundColor = Colors.DarkGray;
 view.TitleBar.ButtonInactiveForegroundColor = Colors.Gray;

Documentation references:

1. ApplicationViewTitleBar Class
2. Title bar customization