Add new Horizontal ContentAlignment for SettingsCard

[ProJend]

Fixes #577

PR Type

What kind of change does this PR introduce?
Other: Feature added

What is the current behavior?

What is the new behavior?

PR Checklist

Please check if your PR fulfills the following requirements:

• Created a feature/dev branch in your fork (vs. submitting directly from a commit on main)
• Based off latest main branch of toolkit
• Tested code with current supported SDKs
• New component
  • Documentation has been added
  • Sample in sample app has been added
  • Analyzers are passing for documentation and samples
  • Icon has been created (if new sample) following the Thumbnail Style Guide and templates
• Tests for the changes have been added (if applicable)
• Contains NO breaking changes

Other information

[ProJend]

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

@dotnet-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.

@dotnet-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.

@dotnet-policy-service agree company="Microsoft"

Contributor License Agreement

@dotnet-policy-service agree

[niels9001]

@ProJend Just to be sure, have you tried this change with the different SettingsCard samples in the Gallery app?

There are a couple of alignment settings you could set that might already achieve the same result (see the Gallery samples)?

[ProJend]

@niels9001 Not yet. This is my first time to request pull. It should take more time to test more samples.

And the couple of alignment settings is not working for settings content. I think it's better to use VisualState to stretch automatically both settings header and settings content in SettingsCard

[niels9001]

@ProJend Your proposed changes break the correct wrapping of the subtitle:

What this should look like:

[ProJend]

@niels9001 I have reverted back to default style. It should repair the breaking wrapping layout.

Unfortunately I don't know how to test them in the gallery, so not sure whether ContentAlignment="Horizontal" and SettingsCardHeaderPanelMaxWidth both work properly.