Incorporating Fluent Design in WinUI applications

It is time to incorporate a few of the Fluent Design principles into the application and polish the UI a little. Most of the WinUI controls are already designed to meet Fluent standards, but there were a few attributes we added without understanding Fluent Design.

Updating the title bar

Before we even get into the XAML to improve the styles, let's fix the application's title bar. Until now, the title bar always read MyMediaCollection without any spaces or indication of the current page:

1. First, to fix the spacing, open Package.appmanifest from the Solution Explorer window. On the page that opens, update Display name to My Media Collection. If you like, you can also change Description.

   Figure 7.2 – Updating information in Package.appmanifest

   Updating Display name will change the application's title bar text.

2. Optionally, you can also update the AssemblyTitle, AssemblyDescription, and AssemblyProduct...