Change SolidColorBrush to AcrylicBrush in MainPage.xaml

[AlejandroBlanco2001]

Summary of the Pull Request

In the MainPage.xaml, change the SolidColorBrush to AcrylicBrush to be able to alter the color of the panel when it cannot be rendered

References and Relevant Issues

• Give our NavigationView's acrylic a fallback color #9752 Original implementaion
• Settings UI tweaks #12973 Modifying this change

Detailed Description of the Pull Request / Additional comments

In #12973, we changed the way of rendering the panel to use a SolidColorBrush with a transparent background. However, when this cannot be rendered, it causes an error of overlapping. Therefore, this change is to revert this panel to the original implementation introduced in #9752, using AcrylicBrush and setting the color to 'SystemChromeMediumLowColor' when it cannot be rendered.

Validation Steps Performed

1. Open the Windows terminal App
2. Set the width to <= 500px
3. Open the Settings tab
4. Check that the background is not longer overlapping.

PR Checklist

• Closes Sidebar and settings are shown at the same time #16906
• Tests added/passed
• Documentation updated
  • If checked, please file a pull request on our docs repo and link it here: #xxx
• Schema updated (if necessary)

[AlejandroBlanco2001]

@AlejandroBlanco2001 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@microsoft-github-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@microsoft-github-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@microsoft-github-policy-service agree company="Microsoft"

Contributor License Agreement

@microsoft-github-policy-service agree

[AlejandroBlanco2001]

@carlos-zamora Any news on this PR? 😄

[DHowett]

Hey @AlejandroBlanco2001! I'm so sorry that we let this sit - I think we marked it up to be discussed by the team, and I'm the one who had an objection. We forgot to take notes, follow up, and help you get this in.

That's on me.

My main concern is that it will make the settings look out of place on Windows 11. It's better than it being broken on Windows 10, but I was wondering if there was a way for us to use "Conditional Xaml" to make these resources work properly and look native on both 10 and 11.

[DHowett]

@zadjii-msft has a thought as well: "Does the transparent background also cause an overlap on Windows 11? Because if so, condition XAML won't help"

[AlejandroBlanco2001]

Hey @DHowett, I don't have Windows 11 on any of my machines, but I could check on a friend's PC today if you need that feedback.