feat: Add XAML Fundamentals section with pages and examples #1661
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.
Zakariathr22
changed the title
…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.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
@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.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
… `Function` Co-authored-by: Jay <[email protected]>
Co-authored-by: Jay <[email protected]>
Co-authored-by: Jay <[email protected]>
…nges to enhance readability
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Co-authored-by: Jay <[email protected]>
…sections + make a minor adjustment in the templates section
There was a problem hiding this comment.
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?
WinUIGallery/ControlPages/XamlFundamentals/XamlResourcesPage.xaml
Outdated
Show resolved
Hide resolved
|
/azp run |
|
/azp run |
There was a problem hiding this comment.
Thank you for making the changes, @Zakariathr22! Ive left a few comments. Also given that @AndrewKeepCoding PR for the file scoped namespaces was merged, can you please adjust the CS files to match this change in our project?
|
/azp run |
Description
This pull request introduces the "XAML Fundamentals" section, including pages and examples for XAML Resources, XAML Styles, Binding, and Templates, main changes are:
Addedsample code files for XAML Resources, XAML Styles, Binding, and Templates.Addednew assets for theme resource examples and updated control images.UpdatedControlInfoData.jsonto include the new "XAML Fundamentals" section.Addedpages for XAML Resources, XAML Styles, Binding, and Templates, each with practical examples.Updatednavigation 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