How to add an AcrylicBrush to the toolbar only in UWP

Question

How to make apply an acrylic material to the TitleBar only in UWP (Just like Microsoft Edge). In scenarios like Pivots. You use extend the view to the title bar. But what If it's just an ordinary Single page app and you want to make the title bar acrylic

Answer 1

You use extend the view to the title bar. But what If it's just an ordinary Single page app and you want to make the title bar acrylic

Your understanding is correct. For title bar acrylic, it is only suitable for single page. For Edge design, it set TitleBar ButtonBackgroundColor,ButtonInactiveBackgroundColor as transparent. And set ExtendViewIntoTitleBar property true for extending your content into TitleBar. Then make a same height acrylic element place the bottom area.

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    CoreApplication.GetCurrentView().TitleBar.LayoutMetricsChanged += (s,e) => {
       Header.Height = s.Height;
   };

    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

<Rectangle Name="Header"
Stretch="UniformToFill" 
Fill="{ThemeResource SystemControlChromeHighAcrylicWindowMediumBrush}" 
VerticalAlignment="Top"/>