feat: Add XAML Fundamentals section with pages and examples

[Zakariathr22]

Description

This pull request introduces the "XAML Fundamentals" section, including pages and examples for Resources, ResourceDictionary, Theme Resources, XAML Styles, Binding, and Templates, main changes are:

• Added sample code files for Resources, ResourceDictionary, Theme Resources, XAML Styles, Binding, and Templates.
• Added new assets for theme resource examples and updated control images.
• Updated ControlInfoData.json to include the new "XAML Fundamentals" section.
• Added pages for Resources, ResourceDictionary, Theme Resources, XAML Styles, Binding, and Templates, each with practical examples.
• Updated navigation to include the new section and handle its items programmatically.

Motivation and Context

I noticed that many learners, especially those new to WinUI 3, often turn to the WinUI 3 Gallery application as their starting point. While the app provides excellent explanations of controls and code samples, it sometimes introduces concepts that may be unfamiliar to beginners.

To address this, I had created a dedicated section in the application called XAML Fundamentals. This section is organized into key topics, including: Resources, ResourceDictionary, Theme Resources, XAML Styles, Binding, and Templates.

The goal is to help learners better understand these foundational concepts by providing clear explanations, practical examples, and links to relevant documentation.

How Has This Been Tested?

This code was tested manually, and no issues were encountered during the testing. The changes are isolated to the new section and do not affect other areas of the app.

Screenshots:

Resouces Page

ResouceDictionary

Theme resources

XAML Styles

Binding

Templates

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)

[Jay-o-Way]

Nit: note the unnecessary use of Capital letters for a number of Words.

[Zakariathr22]

Nit: note the unnecessary use of Capital letters for a number of Words.

Adjusted as suggested.

[Jay-o-Way]

In the XAML, I see a couple of different values, based on 5 or 10. This doesn't fit within the general recommendation to use multiples of four. Is there a reason for this? Also, something like a CornerRadius can be set with ControlCornerRadius, right?
Examples:

CornerRadius="5"
Padding="10"
Margin="5"

[Jay-o-Way]

My thought: printing elements and properties in bold (or values in italic) is good practice in documentation, but might not be needed in this app. If this formatting would be removed, it would greatly simplify the XAML. Third opinion (from core developers) is welcome, though.

Same idea for these parts - it's just very crowded:

[Jay-o-Way]

@niels9001 @karkarl (off-topic) I feel issue #1542 is quickly getting more and more important!

[Jay-o-Way]

Did you know?

Note

Starting in Windows 10, version 1607, the XAML framework provides a built in Boolean to Visibility converter. The converter maps true to the Visible enumeration value and false to Collapsed so you can bind a Visibility property to a Boolean without creating a converter. Note that this is not a feature of function binding, only property binding. To use the built in converter, your app's minimum target SDK version must be 14393 or later. You can't use it when your app targets earlier versions of Windows 10. For more info about target versions, see Version adaptive code.

https://learn.microsoft.com/windows/uwp/xaml-platform/x-bind-markup-extension#remarks

[Zakariathr22]

@Jay-o-Way
Thank you for your review and insightful feedback; I’ll work on implementing your suggestions.
Please let me know if there’s anything else I should address.

[Jay-o-Way]

Getting better :) just a couple more things...

• Let's remove those localizers like en-us/ or en-gb/ in URLs.

[Jay-o-Way]

Few more things.
Still think both the amount of bold text - and the formatting - can be significantly reduced, but again, opinion from a developer is welcome here!

• Besides: semibold must be used. This is used on all other pages, and also in the Type Ramp. (Bold is a bit hard on the eyes)
• Example: <Paragraph FontWeight="SemiBold">Text</> is also valid (omits the Run)
• Check consistency in the lists: sometimes the number is bold, sometimes it's not; sometimes there's a dash, sometimes a bullet...

[Zakariathr22]

Few more things. Still think both the amount of bold text - and the formatting - can be significantly reduced, but again, opinion from a developer is welcome here!

• Besides: semibold must be used. This is used on all other pages, and also in the Type Ramp. (Bold is a bit hard on the eyes)
• Example: <Paragraph FontWeight="SemiBold">Text</> is also valid (omits the Run)
• Check consistency in the lists: sometimes the number is bold, sometimes it's not; sometimes there's a dash, sometimes a bullet...

I used bold to highlight the important points, it seems a good idea if we replace it with semibold.
I agree with the other points you mentioned.

I'll work on it, thank you for your effort :)

[Jay-o-Way]

In order to not spam the PR with suggestions, I thought I'd give you some of my ideas via these files, for example:
ThemeResourcesPage.zip

[Zakariathr22]

In order to not spam the PR with suggestions, I thought I'd give you some of my ideas via these files, for example: ThemeResourcesPage.zip

I’ve granted you write access.
The remaining changes are minor, so feel free to apply them directly if you prefer.