Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add XAML Fundamentals section with pages and examples #1661

Open
wants to merge 63 commits into
base: main
Choose a base branch
from

Conversation

Zakariathr22
Copy link
Contributor

@Zakariathr22 Zakariathr22 commented Nov 21, 2024

Description

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

  • Added sample code files for XAML 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 XAML 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: XAML 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:

XAML Resouces Page
image

XAML Styles
image

Binding
image

Templates
image

Search Page
image

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)

… and navigation updates

1. Added sample code files for Resources, ResourceDictionary, Theme Resources, XAML Styles, Binding, and Templates.
2. Added new assets for theme resource examples and updated control images.
3. Updated `ControlInfoData.json` to include the new "XAML Fundamentals" section.
4. Added pages for Resources, ResourceDictionary, Theme Resources, XAML Styles, Binding, and Templates, each with practical examples.
5. Updated navigation to include the new section and handle its items programmatically.
@Zakariathr22 Zakariathr22 changed the title **feat**: Add XAML Fundamentals section with pages and examples feat: Add XAML Fundamentals section with pages and examples Nov 21, 2024
@Zakariathr22 Zakariathr22 marked this pull request as draft November 22, 2024 11:38
@Zakariathr22 Zakariathr22 marked this pull request as ready for review November 22, 2024 18:18
@Jay-o-Way

This comment was marked as resolved.

@Zakariathr22
Copy link
Contributor Author

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

Adjusted as suggested.

@Jay-o-Way

This comment was marked as resolved.

Jay-o-Way

This comment was marked as resolved.

@Jay-o-Way
Copy link
Contributor

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

@Jay-o-Way
Copy link
Contributor

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
Copy link
Contributor Author

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

@Zakariathr22 Zakariathr22 marked this pull request as draft November 29, 2024 07:14
… theme resources.

- Simplified the comparison table between `x:Bind` and `Binding` and reduce repetition by using styles.
- Added the default binding mode for each type in the comparison table for better clarity.
- Removed hardcoded colors and replaced them with theme resources.
- Added two new examples:
* Demonstrating converters using `x:Bind`.
* Showing `Binding` with `FallbackValue` and `TargetNullValue`.
- Made minor design tweaks.
@Zakariathr22 Zakariathr22 marked this pull request as ready for review November 29, 2024 21:30
Jay-o-Way

This comment was marked as resolved.

Jay-o-Way

This comment was marked as resolved.

WinUIGallery/Assets/ControlImages/CodeTagIcon.png Outdated Show resolved Hide resolved
WinUIGallery/DataModel/ControlInfoData.json Show resolved Hide resolved
WinUIGallery/Navigation/NavigationRootPage.xaml Outdated Show resolved Hide resolved
WinUIGallery/Navigation/NavigationRootPage.xaml Outdated Show resolved Hide resolved
Copy link
Contributor

@niels9001 niels9001 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Amazing work @Zakariathr22!

@Zakariathr22
Copy link
Contributor Author

@niels9001
Thank you for your help and reviews; they made a significant difference.

@niels9001
Copy link
Contributor

@Zakariathr22 We've reviewed the PR and saw some (minor) improvements we could make.

Would you mind getting the latest changes from main and can I PR against your branch? It's probably faster that way :)!

@Zakariathr22
Copy link
Contributor Author

Zakariathr22 commented Dec 15, 2024

Would you mind getting the latest changes from main and can I PR against your branch? It's probably faster that way :)!

@niels9001

The latest changes from main have been retrieved

Sure, feel free to go ahead, thanks for helping out!

@Zakariathr22
Copy link
Contributor Author

@niels9001
I can also grant you a write access if you like :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants