[UX] Adding links to control source code

[niels9001]

Description

This PR adds a direct link to the WinUI 3 control source code (addressing: #1388):

• A path to a control folder or XAML file (when the control is shipped with the OS) are defined in the ControlDataInfo.json
• On the item page, a link is shown (when available) in the Source flyout. If not, the button is hidden.

This makes it easy for developers to quickly go to the source code / default XAML file of a control.

When a path is configured in ControlDataInfo.json:

the link navigates to: https://github.com/microsoft/microsoft-ui-xaml/tree/winui3/release/1.4-stable/controls/dev//ParallaxView

If no link is configured, the button is hidden:

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

[marcelwgn]

I feel like the spacing on the flyout for the source code links seems a bit off, but I don't really know why. @niels9001 what are your thoughs on maybe increasing padding and alignment?

[niels9001]

I feel like the spacing on the flyout for the source code links seems a bit off, but I don't really know why. @niels9001 what are your thoughs on maybe increasing padding and alignment?

@chingucoding I've tweaked the margins/paddings a bit of both flyouts, so they are consistent with a typical Flyout (16px inner padding). The HyperlinkButton adds additional whitepace that makes things unaligned. Should be fixed now:

Docs flyout:

Source flyout:

Default flyout:

[karkarl]

I'm worried about this becoming quickly out of date with a new release. It will be easy to forget to update this link.

Can we dynamically create this uri string with SourcePath?

[niels9001]

True, the bigger question I guess is if the WinUI 3 branch should be the default branch on the repo :)? So we can just link to main?

That would solve microsoft/microsoft-ui-xaml#9055 and microsoft/microsoft-ui-xaml#9052

[karkarl]

I'll start an email thread to discuss this internally.

[karkarl]

While that's being discussed, we should still avoid hard coding the branch name.

[marcelwgn]

How about just storing the in repo location e.g. controls/dev/CommonStyles/Common_themeresources_any.xaml and use the current version of the WinApp SDK being used by the WinUI Gallery to determine the branch name?

[niels9001]

Yup agreed.

FYI, it's already out of date in the stable version.

@chingucoding I think what makes this a bit more complex is that all other URLs are defined in the .JSON and are not dynamically generated in the UI? But please correct me if I'm wrong!

[marcelwgn]

It wouldn't be the first time we do this dynamically. The links to the source code for the sample pages is also dynamically generated based on the page name (and so far it worked quite well). The place to implement this should also be fairly straightforward, either do it while parsing the JSON or do it when rendering.

[niels9001]

@karkarl @chingucoding Same here. Wish we could use a aka.ms/latestwinuipath instead and then append the SourcePath, but that does not seem to work :(

[marcelwgn]

The more I think about it, do we really want to link to the absolutly latest hot of the press release or the one people are seeing in the app? I would argue, if I see a control in the WinUI Gallery, I want to see the source code that made the control the way it is in the gallery and not the one inside the latest release. Otherwise, it might be a confusing experience when copying it over into one's own code and the control looking different then.