diff --git a/WinUIGallery/Assets/ControlImages/CodeTagIcon.png b/WinUIGallery/Assets/ControlImages/CodeTagIcon.png
new file mode 100644
index 000000000..d162f5876
Binary files /dev/null and b/WinUIGallery/Assets/ControlImages/CodeTagIcon.png differ
diff --git a/WinUIGallery/Assets/SampleMedia/Dark_Image.png b/WinUIGallery/Assets/SampleMedia/Dark_Image.png
new file mode 100644
index 000000000..14ff2e2ed
Binary files /dev/null and b/WinUIGallery/Assets/SampleMedia/Dark_Image.png differ
diff --git a/WinUIGallery/Assets/SampleMedia/Light_Image.png b/WinUIGallery/Assets/SampleMedia/Light_Image.png
new file mode 100644
index 000000000..7d2136a5a
Binary files /dev/null and b/WinUIGallery/Assets/SampleMedia/Light_Image.png differ
diff --git a/WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml b/WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml
new file mode 100644
index 000000000..6829fd54f
--- /dev/null
+++ b/WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml
@@ -0,0 +1,199 @@
+
+
+
+
+
+
+ Key concepts:
+ 1. Target: The property of a control to which data is bound (e.g., Text, Background, Visibility).
+ 2. Source: The data being bound, such as a property in a class, another control, or a static resource.
+ 3. Binding Modes:
+ - OneWay updates the target when the source changes.
+ - TwoWay updates both the target and the source.
+ - OneTime sets the target once and does not update afterward.
+
+
+
+ {x:Bind} and {Binding} feature comparison
+
+
+
+
+
+
+
+ Microsoft Learn
+ .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<TextBox x:Name="SourceTextBox" Width="200" PlaceholderText="Enter text here" />
+<TextBox Width="200" Text="{x:Bind SourceTextBox.Text, Mode=$(BindingMode)}" PlaceholderText="Mirrors above text" />
+
+
+
+
+ OneWay
+ TwoWay
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<TextBlock
+ Text="{x:Bind GreetingMessage}"
+ FontSize="24"
+ HorizontalAlignment="Center"
+ VerticalAlignment="Center" />
+
+
+
+
+// Code-behind
+public string GreetingMessage { get; set; } = "Hello, WinUI 3!";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<TextBlock Text="Title:" FontWeight="SemiBold" />
+<TextBlock Text="{Binding Title}" FontSize="16" />
+
+<TextBlock Text="Description:" FontWeight="SemiBold" />
+<TextBlock Text="{Binding Description}" FontSize="16" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!--FallbackValue and TargetNullValue properties help handle scenarios where the binding source is missing or null-->
+<TextBlock Text="{Binding NonExistentProperty, FallbackValue='Default Text'}" />
+<TextBlock Text="{Binding NullString, TargetNullValue='Anonymous User'}" />
+
+
+
+
+public YourPage()
+{
+ this.InitializeComponent();
+
+ ViewModel = new ExampleViewModel
+ {
+ NullString = null
+ };
+
+ DataContext = ViewModel;
+}
+
+
+
+
+
diff --git a/WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml.cs b/WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml.cs
new file mode 100644
index 000000000..1aa070ac0
--- /dev/null
+++ b/WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml.cs
@@ -0,0 +1,161 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Microsoft.UI.Xaml.Documents;
+using System.ComponentModel;
+using Microsoft.UI.Text;
+
+namespace WinUIGallery.ControlPages
+{
+ public sealed partial class BindingPage : Page
+ {
+ public string GreetingMessage { get; set; } = "Hello, WinUI 3!";
+
+ public ExampleViewModel ViewModel { get; set; }
+
+ public BindingPage()
+ {
+ this.InitializeComponent();
+
+ ViewModel = new ExampleViewModel
+ {
+ Title = "Welcome to WinUI 3",
+ Description = "This is an example of binding to a view model.",
+ NullString = null
+ };
+ DataContext = ViewModel;
+ }
+
+ private void BindingModeGroup_SelectionChanged(object sender, SelectionChangedEventArgs e)
+ {
+ if (sender is RadioButtons radioButtons)
+ {
+ switch (radioButtons.SelectedIndex)
+ {
+ case 0:
+ UpdateBindingAndDescription(BindingMode.OneWay);
+ break;
+ case 1:
+ UpdateBindingAndDescription(BindingMode.TwoWay);
+ break;
+ }
+ }
+ }
+
+ private void UpdateBindingAndDescription(BindingMode bindingMode)
+ {
+ var binding = new Binding
+ {
+ Source = SourceTextBox,
+ Path = new PropertyPath("Text"),
+ Mode = bindingMode,
+ };
+ TargetTextBox.SetBinding(TextBox.TextProperty, binding);
+
+ BindingModeDescription.Blocks.Clear();
+ var paragraph = new Paragraph();
+ if (bindingMode == BindingMode.OneWay)
+ {
+ paragraph.Inlines.Add(new Run
+ {
+ Text = "In ",
+ });
+ paragraph.Inlines.Add(new Run { Text = "OneWay", FontWeight = FontWeights.SemiBold });
+ paragraph.Inlines.Add(new Run
+ {
+ Text = " binding mode, changes in the source (SourceTextBox) are reflected in the target, but not vice versa."
+ });
+ }
+ else if (bindingMode == BindingMode.TwoWay)
+ {
+ paragraph.Inlines.Add(new Run
+ {
+ Text = "In ",
+ });
+ paragraph.Inlines.Add(new Run { Text = "TwoWay", FontWeight = FontWeights.SemiBold });
+ paragraph.Inlines.Add(new Run
+ {
+ Text = " binding mode, changes in either box update the other."
+ });
+ }
+
+ BindingModeDescription.Blocks.Add(paragraph);
+ }
+
+ public string FormatDate(DateTimeOffset? date)
+ {
+ if (date.HasValue)
+ {
+ return "Selected date is: " + date.Value.ToString("dddd, MMMM d, yyyy");
+ }
+ else
+ {
+ return "No date selected";
+ }
+ }
+ }
+
+ public partial class ExampleViewModel : INotifyPropertyChanged
+ {
+ private string _title;
+ private string _description;
+ private string _nullString;
+
+ public string Title
+ {
+ get => _title;
+ set
+ {
+ if (_title != value)
+ {
+ _title = value;
+ OnPropertyChanged(nameof(Title));
+ }
+ }
+ }
+
+ public string Description
+ {
+ get => _description;
+ set
+ {
+ if (_description != value)
+ {
+ _description = value;
+ OnPropertyChanged(nameof(Description));
+ }
+ }
+ }
+
+ public string NullString
+ {
+ get => _nullString;
+ set
+ {
+ if (_nullString != value)
+ {
+ _nullString = value;
+ OnPropertyChanged(nameof(_nullString));
+ }
+ }
+ }
+
+ public event PropertyChangedEventHandler PropertyChanged;
+
+ protected void OnPropertyChanged(string propertyName)
+ {
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+ }
+ }
+}
diff --git a/WinUIGallery/ControlPages/XamlFundamentals/TemplatesPage.xaml b/WinUIGallery/ControlPages/XamlFundamentals/TemplatesPage.xaml
new file mode 100644
index 000000000..0e70b2d95
--- /dev/null
+++ b/WinUIGallery/ControlPages/XamlFundamentals/TemplatesPage.xaml
@@ -0,0 +1,158 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Placement of Templates:
+ Templates can be defined at the app, page, or control level, similar to styles and resources. The placement is determined by the intended scope and reuse of the template.
+
+
+
+ There are 3 types of templates:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Item 01
+ Item 02
+ Item 03
+ Item 04
+ Item 05
+ Item 06
+ Item 07
+ Item 08
+ Item 09
+ Item 10
+ Item 11
+ Item 12
+ Item 13
+ Item 14
+ Item 15
+ Item 16
+ Item 17
+ Item 18
+ Item 19
+ Item 20
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/WinUIGallery/ControlPages/XamlFundamentals/TemplatesPage.xaml.cs b/WinUIGallery/ControlPages/XamlFundamentals/TemplatesPage.xaml.cs
new file mode 100644
index 000000000..c4996c344
--- /dev/null
+++ b/WinUIGallery/ControlPages/XamlFundamentals/TemplatesPage.xaml.cs
@@ -0,0 +1,50 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.Storage;
+
+namespace WinUIGallery.ControlPages
+{
+ public sealed partial class TemplatesPage : Page
+ {
+ public TemplatesPage()
+ {
+ this.InitializeComponent();
+ }
+
+ private void LayoutSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
+ {
+ if (e.AddedItems[0] is RadioButton selectedRadioButton)
+ {
+ // Check the tag of the selected RadioButton
+ if (selectedRadioButton.Tag.ToString() == "WrapGrid")
+ {
+ MyListView.ItemsPanel = (ItemsPanelTemplate)Resources["WrapGridTemplate"];
+ Example3.Xaml = ReadSampleCodeFileContent("TemplatesSample3_WrapGrid_xaml");
+ }
+ else if (selectedRadioButton.Tag.ToString() == "StackPanel")
+ {
+ MyListView.ItemsPanel = (ItemsPanelTemplate)Resources["StackPanelTemplate"];
+ Example3.Xaml = ReadSampleCodeFileContent("TemplatesSample3_StackPanel_xaml");
+ }
+ }
+ }
+
+ private static string ReadSampleCodeFileContent(string sampleCodeFileName)
+ {
+ StorageFolder folder = Windows.ApplicationModel.Package.Current.InstalledLocation;
+ return File.ReadAllText($"{folder.Path}\\ControlPagesSampleCode\\Templates\\{sampleCodeFileName}.txt");
+ }
+ }
+}
diff --git a/WinUIGallery/ControlPages/XamlFundamentals/XamlResourcesPage.xaml b/WinUIGallery/ControlPages/XamlFundamentals/XamlResourcesPage.xaml
new file mode 100644
index 000000000..c1205eb1b
--- /dev/null
+++ b/WinUIGallery/ControlPages/XamlFundamentals/XamlResourcesPage.xaml
@@ -0,0 +1,229 @@
+
+
+
+
+ #FF5733
+
+
+
+ 24
+ #4CAF50
+
+ WinUI 3 Gallery
+
+ Welcome to this page
+
+
+ #2196F3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ • App-level: Resources are defined globally, accessible throughout the application.
+ • Page-level: Resources are defined specific to a particular page.
+ • Control-level: Resources are defined local to a specific control, such as a Button or Grid.
+
+
+
+ Tips:
+ • Naming: descriptive keys should always be used for resources to make them easier to identify.
+ • Scope: Resources should be defined at the narrowest scope possible to improve maintainability.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 14
+ Using control-level resources
+
+
+
+
+
+
+
+
+
+
+ Definition of a Resource Dictionary:
+
+
+
+
+
+ • Inline (page-level): Defined in a specific page to limit the scope to that page.
+
+
+
+
+
+
+
+
+ Reasons for using resource dictionaries:
+ • Reusability: define once and use many times.
+ • Organization: keeps resources modular and separated.
+ • Maintainability: makes it easier to update values across the app.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ WinUI 3 includes built-in theme resources for commonly used colors. See all brushes on the Color page
+ .
+
+
+
+
+
+
+
+
+
+
+
+
+
+ • A fallback value should always be provided to ensure compatibility with undefined themes.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Light theme
+ ms-appx:///Assets/SampleMedia/Light_Image.png
+
+
+
+
+ Dark theme
+ ms-appx:///Assets/SampleMedia/Dark_Image.png
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/WinUIGallery/ControlPages/XamlFundamentals/XamlResourcesPage.xaml.cs b/WinUIGallery/ControlPages/XamlFundamentals/XamlResourcesPage.xaml.cs
new file mode 100644
index 000000000..0815be71d
--- /dev/null
+++ b/WinUIGallery/ControlPages/XamlFundamentals/XamlResourcesPage.xaml.cs
@@ -0,0 +1,36 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace WinUIGallery.ControlPages
+{
+ ///
+ /// An empty page that can be used on its own or navigated to within a Frame.
+ ///
+ public sealed partial class XamlResourcesPage : Page
+ {
+ public XamlResourcesPage()
+ {
+ this.InitializeComponent();
+ }
+
+ private void Hyperlink_Click(Microsoft.UI.Xaml.Documents.Hyperlink sender, Microsoft.UI.Xaml.Documents.HyperlinkClickEventArgs args)
+ {
+ NavigationRootPage.GetForElement(this).Navigate(typeof(ItemPage), "Color");
+ }
+ }
+}
diff --git a/WinUIGallery/ControlPages/XamlFundamentals/XamlStylesPage.xaml b/WinUIGallery/ControlPages/XamlFundamentals/XamlStylesPage.xaml
new file mode 100644
index 000000000..01cb55791
--- /dev/null
+++ b/WinUIGallery/ControlPages/XamlFundamentals/XamlStylesPage.xaml
@@ -0,0 +1,112 @@
+
+
+
+
+
+
+ The definition of styles is similiar to other resources: app-level, page-level, control-level.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ • Styles improve maintainability, consistency, and reduce repetition in XAML code.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/WinUIGallery/ControlPages/XamlFundamentals/XamlStylesPage.xaml.cs b/WinUIGallery/ControlPages/XamlFundamentals/XamlStylesPage.xaml.cs
new file mode 100644
index 000000000..6f83d29f0
--- /dev/null
+++ b/WinUIGallery/ControlPages/XamlFundamentals/XamlStylesPage.xaml.cs
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+namespace WinUIGallery.ControlPages
+{
+ public sealed partial class XamlStylesPage : Page
+ {
+ public XamlStylesPage()
+ {
+ this.InitializeComponent();
+ }
+ }
+}
diff --git a/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample3_csharp.txt b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample3_csharp.txt
new file mode 100644
index 000000000..b3975514d
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample3_csharp.txt
@@ -0,0 +1,11 @@
+public string FormatDate(DateTimeOffset? date)
+{
+ if (date.HasValue)
+ {
+ return "Selected date is: " + date.Value.ToString("dddd, MMMM d, yyyy");
+ }
+ else
+ {
+ return "No date selected";
+ }
+}
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample3_xaml.txt b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample3_xaml.txt
new file mode 100644
index 000000000..3dc528136
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample3_xaml.txt
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample4_csharp.txt b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample4_csharp.txt
new file mode 100644
index 000000000..29e725ef1
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample4_csharp.txt
@@ -0,0 +1,21 @@
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml;
+using System;
+
+namespace YourNamespace
+{
+ public class BooleanToVisibilityConverter : IValueConverter
+ {
+ // Converts the boolean value to Visibility (Visible or Collapsed)
+ public object Convert(object value, Type targetType, object parameter, string language)
+ {
+ return (bool)value ? Visibility.Visible : Visibility.Collapsed;
+ }
+
+ // Converts back from Visibility to boolean (not necessary for this example)
+ public object ConvertBack(object value, Type targetType, object parameter, string language)
+ {
+ return (Visibility)value == Visibility.Visible;
+ }
+ }
+}
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample4_xaml.txt b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample4_xaml.txt
new file mode 100644
index 000000000..6ab7b490c
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample4_xaml.txt
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample5_csharp.txt b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample5_csharp.txt
new file mode 100644
index 000000000..9f6ab87df
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Binding/BindingSample5_csharp.txt
@@ -0,0 +1,76 @@
+using System.ComponentModel; // For INotifyPropertyChanged interface.
+using Microsoft.UI.Xaml.Controls; // For Page and other WinUI controls.
+
+namespace YourNamespace
+{
+ // Main page class
+ public sealed partial class YourPage : Page
+ {
+ // Property to hold the ViewModel instance.
+ public ExampleViewModel ViewModel { get; set; }
+
+ public YourPage()
+ {
+ this.InitializeComponent();
+
+ // Initialize the ViewModel with sample data.
+ ViewModel = new ExampleViewModel
+ {
+ Title = "Welcome to WinUI 3", // Set initial value for Title.
+ Description = "This is an example of binding to a view model.", // Set initial value for Description.
+ };
+
+ // Set the DataContext of the page to the ViewModel.
+ // This makes the ViewModel properties available for binding in XAML.
+ DataContext = ViewModel;
+ }
+ }
+
+ // ViewModel class implementing INotifyPropertyChanged for data binding.
+ public class ExampleViewModel : INotifyPropertyChanged
+ {
+ // Backing field for Title property.
+ private string _title;
+
+ // Backing field for Description property.
+ private string _description;
+
+ // Property for Title with change notification.
+ public string Title
+ {
+ get => _title; // Return the current value of _title.
+ set
+ {
+ if (_title != value) // Check if the new value is different.
+ {
+ _title = value; // Update the backing field.
+ OnPropertyChanged(nameof(Title)); // Notify the UI of the change.
+ }
+ }
+ }
+
+ // Property for Description with change notification.
+ public string Description
+ {
+ get => _description; // Return the current value of _description.
+ set
+ {
+ if (_description != value) // Check if the new value is different.
+ {
+ _description = value; // Update the backing field.
+ OnPropertyChanged(nameof(Description)); // Notify the UI of the change.
+ }
+ }
+ }
+
+ // Event to notify subscribers (UI elements) of property changes.
+ public event PropertyChangedEventHandler PropertyChanged;
+
+ // Method to raise the PropertyChanged event.
+ // This notifies the UI to update the bound control.
+ protected void OnPropertyChanged(string propertyName)
+ {
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+ }
+ }
+}
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample1_xaml.txt b/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample1_xaml.txt
new file mode 100644
index 000000000..e9d4f2c55
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample1_xaml.txt
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample2_xaml.txt b/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample2_xaml.txt
new file mode 100644
index 000000000..bd6e1a787
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample2_xaml.txt
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample3_StackPanel_xaml.txt b/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample3_StackPanel_xaml.txt
new file mode 100644
index 000000000..6e5509163
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample3_StackPanel_xaml.txt
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+ Item 01
+ Item 02
+
+ Item 20
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample3_WrapGrid_xaml.txt b/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample3_WrapGrid_xaml.txt
new file mode 100644
index 000000000..0065d6a23
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/Templates/TemplatesSample3_WrapGrid_xaml.txt
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+ Item 01
+ Item 02
+
+ Item 20
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample1_csharp.txt b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample1_csharp.txt
new file mode 100644
index 000000000..5db6113a7
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample1_csharp.txt
@@ -0,0 +1,9 @@
+// Retrieve application-level resource
+var primaryColor = (Windows.UI.Color)Application.Current.Resources["PrimaryColor"];
+
+// Retrieve page-level resource
+var highlightBrush = (SolidColorBrush)this.Resources["HighlightBrush"];
+
+// Retrieve control-level resources
+var headerFontSize = (double)newGrid.Resources["HeaderFontSize"];
+var welcomeMessage = (string)newGrid.Resources["Description"];
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample1_xaml.txt b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample1_xaml.txt
new file mode 100644
index 000000000..c5787b5f5
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample1_xaml.txt
@@ -0,0 +1,38 @@
+
+
+
+
+ #FF5733
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 14
+ Using control-level resources
+
+
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample2_xaml.txt b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample2_xaml.txt
new file mode 100644
index 000000000..aa26e5ac6
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample2_xaml.txt
@@ -0,0 +1,53 @@
+
+
+
+
+
+ 24
+ #4CAF50
+
+ WinUI 3 Gallery
+
+
+
+
+
+
+
+
+
+
+
+
+ #2196F3
+
+
+
+
+
+
+
+
+ Welcome to this page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample3_xaml.txt b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample3_xaml.txt
new file mode 100644
index 000000000..bccdcd031
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample3_xaml.txt
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample4_xaml.txt b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample4_xaml.txt
new file mode 100644
index 000000000..a691dcd70
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlResources/XamlResourcesSample4_xaml.txt
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+ Light theme
+ ms-appx:///Assets/SampleMedia/Light_Image.png
+
+
+
+
+ Dark theme
+ ms-appx:///Assets/SampleMedia/Dark_Image.png
+
+
+
+
+
+
+
+
+
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample1_xaml.txt b/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample1_xaml.txt
new file mode 100644
index 000000000..6757e73c7
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample1_xaml.txt
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample2_xaml.txt b/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample2_xaml.txt
new file mode 100644
index 000000000..8b5352d0b
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample2_xaml.txt
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample3_xaml.txt b/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample3_xaml.txt
new file mode 100644
index 000000000..3f7b92c9e
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample3_xaml.txt
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample4_csharp.txt b/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample4_csharp.txt
new file mode 100644
index 000000000..4c96dc7c2
--- /dev/null
+++ b/WinUIGallery/ControlPagesSampleCode/XamlStyles/XamlStylesSample4_csharp.txt
@@ -0,0 +1,9 @@
+private void ApplyButtonStyle(Button myButton)
+{
+ var buttonStyle = new Style(typeof(Button));
+ buttonStyle.Setters.Add(new Setter(Button.BackgroundProperty, new SolidColorBrush(Microsoft.UI.Colors.LightGreen)));
+ buttonStyle.Setters.Add(new Setter(Button.ForegroundProperty, new SolidColorBrush(Microsoft.UI.Colors.Black)));
+ buttonStyle.Setters.Add(new Setter(Button.FontSizeProperty, 20));
+
+ myButton.Style = buttonStyle;
+}
\ No newline at end of file
diff --git a/WinUIGallery/DataModel/ControlInfoData.json b/WinUIGallery/DataModel/ControlInfoData.json
index f5755f1ca..b4fb29494 100644
--- a/WinUIGallery/DataModel/ControlInfoData.json
+++ b/WinUIGallery/DataModel/ControlInfoData.json
@@ -191,6 +191,128 @@
}
]
},
+ {
+ "UniqueId": "XamlFundamentalsItem",
+ "Title": "XAML fundamentals",
+ "IsSpecialSection": true,
+ "Folder": "XamlFundamentals",
+ "Items": [
+ {
+ "UniqueId": "XamlResources",
+ "Title": "Resources",
+ "Subtitle": "Reusable definitions for shared values to ensure consistency and maintainability.",
+ "BaseClasses": [
+ "Object",
+ "DependencyObject"
+ ],
+ "ApiNamespace": "Microsoft.UI.Xaml",
+ "ImagePath": "ms-appx:///Assets/ControlImages/CodeTagIcon.png",
+ "Description": "In WinUI 3, XAML resources are reusable objects like colors, brushes, or strings, defined once and used throughout your app to maintain consistency and simplify updates. These resources are typically stored in a ResourceDictionary for better organization and scalability. Special theme resources adapt automatically to light or dark modes, ensuring a seamless look across themes.",
+ "Docs": [
+ {
+ "Title": "ResourceDictionary and XAML resource references",
+ "Uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-resource-dictionary"
+ },
+ {
+ "Title": "ResourceDictionary - API",
+ "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.resourcedictionary"
+ },
+ {
+ "Title": "XAML theme resources",
+ "Uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-theme-resources"
+ }
+ ]
+ },
+ {
+ "UniqueId": "XamlStyles",
+ "Title": "Style",
+ "Subtitle": "A XAML style is a Reusable property settings to define consistent UI design elements.",
+ "BaseClasses": [
+ "Object",
+ "DependencyObject"
+ ],
+ "ApiNamespace": "Microsoft.UI.Xaml",
+ "ImagePath": "ms-appx:///Assets/ControlImages/CodeTagIcon.png",
+ "Description": "XAML Styles in WinUI 3 are reusable sets of property values that you can apply to multiple controls. They help maintain a consistent look and feel across your app. Instead of setting the same properties on every control, you define a style once and then reuse it wherever needed.",
+ "Docs": [
+ {
+ "Title": "Style - API",
+ "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.style"
+ },
+ {
+ "Title": "XAML styles",
+ "Uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-styles"
+ }
+ ]
+ },
+ {
+ "UniqueId": "Binding",
+ "Title": "Binding",
+ "Subtitle": "Connecting UI elements to data for automatic synchronization and updates.",
+ "BaseClasses": [
+ "Object",
+ "DependencyObject",
+ "BindingBase"
+ ],
+ "ApiNamespace": "Microsoft.UI.Xaml.Data",
+ "ImagePath": "ms-appx:///Assets/ControlImages/CodeTagIcon.png",
+ "Description": "Binding in WinUI 3 is a way to connect a property of a control to a source, such as another property, a data object, or a view model. It keeps the data synchronized between the source and the target control, enabling dynamic updates.",
+ "Docs": [
+ {
+ "Title": "Data binding",
+ "Uri": "https://learn.microsoft.com/windows/apps/develop/data-binding/"
+ },
+ {
+ "Title": "{x:Bind} markup extension",
+ "Uri": "https://learn.microsoft.com/windows/uwp/xaml-platform/x-bind-markup-extension"
+ },
+ {
+ "Title": "{Binding} markup extension",
+ "Uri": "https://learn.microsoft.com/windows/uwp/xaml-platform/binding-markup-extension"
+ },
+ {
+ "Title": "Binding - API",
+ "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.binding"
+ },
+ {
+ "Title": "IValueConverter Interface - API",
+ "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.ivalueconverter"
+ }
+ ]
+ },
+ {
+ "UniqueId": "Templates",
+ "Title": "Templates",
+ "Subtitle": "Customize controls' visuals, item layouts, and data presentation in XAML.",
+ "BaseClasses": [
+ "Object",
+ "DependencyObject",
+ "FrameworkTemplate"
+ ],
+ "ApiNamespace": "Microsoft.UI.Xaml.Controls",
+ "ImagePath": "ms-appx:///Assets/ControlImages/CodeTagIcon.png",
+ "Description": "A template defines the structure and appearance of a control. Unlike styles, which set properties, templates allow you to completely customize how a control looks by redefining its visual tree (the XAML elements that make up the control). Templates provide the flexibility to change the look of controls while maintaining their functionality.",
+ "Docs": [
+ {
+ "Title": "ControlTemplate - API",
+ "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.controltemplate"
+ },
+ {
+ "Title": "XAML Control Templates",
+ "Uri": "https://learn.microsoft.com/windows/apps/design/style/xaml-control-templates"
+ },
+ {
+ "Title": "ItemsPanelTemplate - API",
+ "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.itemspaneltemplate"
+ },
+ {
+ "Title": "DataTemplate - API",
+ "Uri": "https://learn.microsoft.com/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.datatemplate"
+ }
+ ]
+ }
+ ]
+ },
{
"UniqueId": "MenusAndToolbars",
"Title": "Menus & toolbars",
diff --git a/WinUIGallery/Navigation/NavigationRootPage.xaml b/WinUIGallery/Navigation/NavigationRootPage.xaml
index 25e6cc063..4ea0203b6 100644
--- a/WinUIGallery/Navigation/NavigationRootPage.xaml
+++ b/WinUIGallery/Navigation/NavigationRootPage.xaml
@@ -272,6 +272,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -153,6 +154,8 @@
+
+
@@ -282,12 +285,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
@@ -295,6 +310,10 @@
+
+
+
+
@@ -310,6 +329,7 @@
+
@@ -323,6 +343,8 @@
+
+
@@ -454,11 +476,29 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -555,6 +595,26 @@
+
+
+ MSBuild:Compile
+
+
+
+
+ MSBuild:Compile
+
+
+
+
+ MSBuild:Compile
+
+
+
+
+ MSBuild:Compile
+
+