-
Notifications
You must be signed in to change notification settings - Fork 652
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
base: main
Are you sure you want to change the base?
Conversation
… 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.
…vs Binding comparison section
…xaml` with theme adaptability
This comment was marked as resolved.
This comment was marked as resolved.
Adjusted as suggested. |
This comment was marked as resolved.
This comment was marked as resolved.
@niels9001 @karkarl (off-topic) I feel issue #1542 is quickly getting more and more important! |
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 |
Co-authored-by: Jay <[email protected]>
@Jay-o-Way |
… 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.
… `Function` Co-authored-by: Jay <[email protected]>
Co-authored-by: Jay <[email protected]>
Co-authored-by: Jay <[email protected]>
…nges to enhance readability
Co-authored-by: Jay <[email protected]>
There was a problem hiding this 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!
@niels9001 |
@Zakariathr22 We've reviewed the PR and saw some (minor) improvements we could make. Would you mind getting the latest changes from |
The latest changes from Sure, feel free to go ahead, thanks for helping out! |
@niels9001 |
Yep, the hover state is not affected...
Good one!
We actually had that, but Niels wanted it changed #1661 (comment) |
Hi @marcelwgn, thanks for sharing this! Great idea! I’ll do it.
You’re right; it’s quite similar to the previous example. I have two ideas to fix this:
What do you think?
Yes, I didn’t realize that either. I think we should apply the style to a different type of control or a different type of styling. Do you have any suggestions?
I think by presenting non-key-based styles, the user understands how styles are automatically applied to specific control types. This helps the user grasp the concept of
Actually, the
Very good ideas.
As Jay mentioned, we actually had that setup before, but Niels wanted it changed, and I agree with Niels on this point.
|
Hi @AndrewKeepCoding, thanks for sharing your opinion,
Do you have any suggestions? @Jay-o-Way, I'd like also to know your thoughts on this. |
…sections + make a minor adjustment in the templates section
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for making those adjustments @Zakariathr22 ! Below my thoughts:
The blue styled button flashes white upon hovering (at least in dark theme)
I think this is addressed now?
I think by presenting non-key-based styles, the user understands how styles are automatically applied to specific control types. This helps the user grasp the concept of TargetType and see the connection between styles and controls more clearly.
I see your point, it is good to showcase how TargetType works. I guess we can leave it in.
Actually, the BasedOn property wasn’t implemented in the first example initially. We only added it to meet a11y requirements, as Niels requested #1661 (comment)
For that reason, I can modify the first example as I suggested earlier without needing to use BasedOn. Do you think that would be a good idea?
I think the A11Y issues could have been fixed without BasedOn but I think its still good practice to use based on. Can we merge the first and basedon sample to avoid this duplication maybe?
</RichTextBlock> | ||
|
||
<RichTextBlock> | ||
<Paragraph FontWeight="SemiBold">Reasons for using resource dictionaries:</Paragraph> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think most of these points are more accurate for resources. ResourceDictionaries on their own are generally only reusable, and I have not seen that very often (i.e. a ResourceDictionary used multiple times throughout one project). In my experience, most of the time RDs are created because XAML needs you to so you can define resources. I would argue we could remove the RD section given that the code sample is also very similar. @niels9001 what do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@marcelwgn @niels9001
I included the ResourceDictionary
part because it's very important for defining new theme resources, as it's explained in the next part, and it helps organize resources within a theme. However, if you think explaining it is not as necessary, I can remove it and focus on the core concept of using theme resources directly.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@niels9001 Should we keep the ResourceDictionary
part for its role in defining and organizing theme resources, or remove it?
Edit: I may not be available when you see this, but you still have write access to the branch, so please feel free to proceed with whatever you believe is best.
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
XAML Styles
Binding
Templates
Search Page
Types of changes