Improve UI of MUXControlsTestApp

[marcelwgn]

Description

This PR aims to improve the visuals and code of the MUXControlsTestApp

Motivation and Context

Even though designed for tests, having devs use the MUXControlsTestApp should not be impossible or unpleasant due to unreadable text and other UI (and code) that is not optimal to use.

How Has This Been Tested?

Started app. Tests should not be affected by this.

Screenshots (if appropriate):

Additional comments:

• NavigationView: "BlankPage" is unused. Should we remove it?
• ButtonInteractionPage and SliderInteractionPage are (at least for me) not visible in the MUXControlsTestApp. Are they expected to not be viewable?
• Pivot: The CommandBar on the test page does nothing, can it be removed?
• ScrollBar: The test page seems to have nothing rendered visible.
• ProgressBar: Since we now have the NumberBox, should we switch away from the "Set ... Value" buttons and instead use bindings? Interactiontests did not work, thus lets leave it the way it currently is
• Happy new year! 🎉

[mdtauk]

• Increase and Improve Spacing between control property controls;

• Increase Margins on pages and container regions;

• Proper separation between example controls and the property forms;

• Consistent layout for all test pages (perhaps include template XAML for developers and testers;

[marcelwgn]

• Increase and Improve Spacing between control property controls;
• Increase Margins on pages and container regions;

This is something I already did on some pages,but not on all. If you find any pages that need improvement, feel free to tell me, and I will take a look 😊

• Proper separation between example controls and the property forms;

I agree, however I don't know how you would do that without having pages contain weird layouts e.g. the NavigationView pages, where we use the NavigationView as root of the page. Do you have any ideas for this?

• Consistent layout for all test pages (perhaps include template XAML for developers and testers;

Unfortunately, there are rarely any layouts/patterns that are used more than once or twice. This is due the fact that different controls have different ways to test them. So having a consistent layout among all pages might be quite difficult. But if you have an idea feel free to comment them :)

[mdtauk]

• Increase and Improve Spacing between control property controls;
• Increase Margins on pages and container regions;

This is something I already did on some pages,but not on all. If you find any pages that need improvement, feel free to tell me, and I will take a look 😊

• Proper separation between example controls and the property forms;

I agree, however I don't know how you would do that without having pages contain weird layouts e.g. the NavigationView pages, where we use the NavigationView as root of the page. Do you have any ideas for this?

• Consistent layout for all test pages (perhaps include template XAML for developers and testers;

Unfortunately, there are rarely any layouts/patterns that are used more than once or twice. This is due the fact that different controls have different ways to test them. So having a consistent layout among all pages might be quite difficult. But if you have an idea feel free to comment them :)

Its not about making each page the same layout, but the same separation between tests, properties, and the control example itself standing out from each other.

So it becomes obvious what the example is that you should be looking at.

What properties you can adjust.

What actions/tests you can perform

[kaiguo]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[kaiguo]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[marcelwgn]

Its not about making each page the same layout, but the same separation between tests, properties, and the control example itself standing out from each other.

Thats a good point. I will see if what pages that need improvements in that area.

@kaiguo Thanks for starting azure!

[kaiguo]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[kaiguo]

@chingucoding, there's one more AnimatedVisualPlayerTests.AccessibilityTest failing, could you take a look 😊?

[marcelwgn]

@chingucoding, there's one more AnimatedVisualPlayerTests.AccessibilityTest failing, could you take a look 😊?

Sure :)

[marcelwgn]

@kaiguo , I have reverted my changes for the AnimatedVIsualPlayer. Visual Studio did not want to run the test for the AnimatedVisualPlayer page, so I couldn't investigate the test failing.

[kaiguo]

@kaiguo Kai Guo FTE , I have reverted my changes for the AnimatedVIsualPlayer. Visual Studio did not want to run the test for the AnimatedVisualPlayer page, so I couldn't investigate the test failing.

I looked at the log, seems like some PropertyChangedEventWaiter timed out, I'm not sure why adding a column would make it time out. Reverting sounds fine to me, I'll re-run the tests.

[kaiguo]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[marcelwgn]

It seemed like that the test that was fixed with #1797 was failing, so I rebased this branch onto master. Hopefully that helps.

[StephenLPeters]

• Increase and Improve Spacing between control property controls;
• Increase Margins on pages and container regions;

This is something I already did on some pages,but not on all. If you find any pages that need improvement, feel free to tell me, and I will take a look 😊

• Proper separation between example controls and the property forms;

I agree, however I don't know how you would do that without having pages contain weird layouts e.g. the NavigationView pages, where we use the NavigationView as root of the page. Do you have any ideas for this?

• Consistent layout for all test pages (perhaps include template XAML for developers and testers;

Unfortunately, there are rarely any layouts/patterns that are used more than once or twice. This is due the fact that different controls have different ways to test them. So having a consistent layout among all pages might be quite difficult. But if you have an idea feel free to comment them :)

Its not about making each page the same layout, but the same separation between tests, properties, and the control example itself standing out from each other.

So it becomes obvious what the example is that you should be looking at.

What properties you can adjust.

What actions/tests you can perform

I've actually been wishing/hoping for this for a long time. I think the best example of a good test page whose layout could be the base line is the Scroller's Exercise Scroller API page which @RBrid wrote. The teaching tip, exercise swipe control api's, and RadioButtons test pages were built with this in mind. Personally I would love if all the pages got updated to look like this.

[StephenLPeters]

Looks like ProgressBar and TextCommandBarFlyoutTests are/were being reported as failing. Was this related to the AutoSuggestBoxTest?

What is the "Work Item" indicated in the log?

Link to Pipeline build:
https://dev.azure.com/ms/microsoft-ui-xaml/_build/results?buildId=56834&view=results

I think the work item here refers to the helix batch of work that the failing test was a part of. @kmahone is that right?

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[StephenLPeters]

@chingucoding These test failures look like real issue to me, will you be able to take a look?

[marcelwgn]

@chingucoding These test failures look like real issue to me, will you be able to take a look?

Since the tests are not failing on my machine for some reason, I mostly reverted the pages in question as they are usable and having the tests be reliable is most important.

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[ranjeshj]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[marcelwgn]

Since the last CI run was successful, I think it is the best to merge this PR now, as a lot of pages have been improved. I have merged the latest commits from master in this branch to resolve potential merge problems.

If the CI build started by @ranjeshj finishes and is successful, I think it is best to merge this PR and make a separate PR for additional improvements.

Regarding latter, should I create an issue for this to collect items not covered by this PR?

[ranjeshj]

Since the last CI run was successful, I think it is the best to merge this PR now, as a lot of pages have been improved. I have merged the latest commits from master in this branch to resolve potential merge problems.

If the CI build started by @ranjeshj finishes and is successful, I think it is best to merge this PR and make a separate PR for additional improvements.

Regarding latter, should I create an issue for this to collect items not covered by this PR?

Sure. Please do a follow up PR if it is getting too painful to merge.

[marcelwgn]

Sure. Please do a follow up PR if it is getting too painful to merge.

If this is something, the WinUI team think is worth investing more time, sure.

Currently I do not have too much time to work further on this, so instead of having to continuously merge master into this PR, it is easier to merge this.

[ranjeshj]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[StephenLPeters]

[StephenLPeters]

I would say merge it in, even if you don't plan on doing other test page updates these are still valuable. We will probably not get to this in the foreseeable future. I'll let @ranjeshj make the call though.

[ranjeshj]

I would say merge it in, even if you don't plan on doing other test page updates these are still valuable. We will probably not get to this in the foreseeable future. I'll let @ranjeshj make the call though.

I agree. This already cleans up a bunch and we can incrementally improve this. Thanks @chingucoding for making these updates.