feat: Add XAML Fundamentals section with pages and examples

WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml.cs

@@ -0,0 +1,173 @@
+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;
+
+namespace WinUIGallery.ControlPages
+{
+    public sealed partial class BindingPage : Page
+    {
+        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;
+
+            mvvmToolkitSampleAppHyperlinkButton.NavigateUri = new Uri("https://github.com/CommunityToolkit/MVVM-Samples");
+        }
+
+        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 Bold { Inlines = { new Run { Text = "OneWay" } } });
+                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 Bold { Inlines = { new Run { Text = "TwoWay" } } });
+                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 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));
+        }
+    }
+
+    public class BooleanToVisibilityConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            return (bool)value ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            return (Visibility)value == Visibility.Visible;
+        }
+    }
+}

WinUIGallery/ControlPages/XamlFundamentals/ResourceDictionaryPage.xaml

@@ -0,0 +1,163 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Page x:Class="WinUIGallery.ControlPages.ResourceDictionaryPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:local="using:WinUIGallery"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <ResourceDictionary>
+            <x:Double x:Key="HeaderFontSize">24</x:Double>
+            <Color x:Key="AccentColor">#4CAF50</Color>
+            <SolidColorBrush x:Key="AccentBrush"
+                             Color="{StaticResource AccentColor}" />
+            <x:String x:Key="AppTitle">WinUI 3 Gallery</x:String>
+
+            <x:String x:Key="WelcomeMessage">Welcome to this page</x:String>
+            <SolidColorBrush x:Key="PageBackgroundBrush"
+                             Color="#E8EAF6" />
+
+            <Color x:Key="SecondaryColor">#2196F3</Color>
+            <SolidColorBrush x:Key="SecondaryBrush"
+                             Color="{StaticResource SecondaryColor}" />
+        </ResourceDictionary>
+    </Page.Resources>
+
+    <StackPanel>
+        <Expander HorizontalAlignment="Stretch"
+                  HorizontalContentAlignment="Left"
+                  Margin="0 12 0 0">
+            <Expander.Header>
+                <TextBlock Text="Understanding and using resource dictionaries in WinUI 3"
+                           Margin="0 24" />
+            </Expander.Header>
+            <StackPanel>
+                <RichTextBlock Margin="0 0 0 12">
+                    <Paragraph>
+                        <Run Text="Where can you create a resource dictionary?"
+                             FontWeight="Bold" />
+                    </Paragraph>
+                    <Paragraph>
+                        <Run Text="1."
+                             FontWeight="Bold" />
+                        <Run Text="Inline (app-level):"
+                             FontWeight="Bold" />
+                        <Run Text="define it in" />
+                        <Run Text="App.xaml"
+                             FontFamily="Consolas"
+                             FontWeight="Bold" />
+                        <Run Text=" to make resources globally available across the entire app." />
+                    </Paragraph>
+                    <Paragraph>
+                        <Run Text="2."
+                             FontWeight="Bold" />
+                        <Run Text="Inline (page-level):"
+                             FontWeight="Bold" />
+                        <Run Text="define it in a specific page to limit the scope to that page." />
+                    </Paragraph>
+                    <Paragraph>
+                        <Run Text="3."
+                             FontWeight="Bold" />
+                        <Run Text="Standalone file:"
+                             FontWeight="Bold" />
+                        <Run Text="define it in a separate" />
+                        <Run Text=".xaml"
+                             FontFamily="Consolas"
+                             FontWeight="Bold" />
+                        <Run Text=" file to organize resources and reuse them in different parts of your app." />
+                    </Paragraph>
+                </RichTextBlock>
+
+                <RichTextBlock>
+                    <Paragraph>
+                        <Run Text="Why use resource dictionaries?"
+                             FontWeight="Bold" />
+                    </Paragraph>
+                    <Paragraph>
+                        <Run Text="1. "
+                             FontWeight="Bold" />
+                        <Run Text="Reusability: "
+                             FontWeight="Bold" />
+                        <Run Text="define once and use many times." />
+                    </Paragraph>
+                    <Paragraph>
+                        <Run Text="2. "
+                             FontWeight="Bold" />
+                        <Run Text="Organization: "
+                             FontWeight="Bold" />
+                        <Run Text="keeps resources modular and separated." />
+                    </Paragraph>
+                    <Paragraph>
+                        <Run Text="3. "
+                             FontWeight="Bold" />
+                        <Run Text="Maintainability: "
+                             FontWeight="Bold" />
+                        <Run Text="makes it easier to update values across the app." />
+                    </Paragraph>
+                </RichTextBlock>
+            </StackPanel>
+        </Expander>
+
+        <local:ControlExample HeaderText="Define and use ResourceDictionary inline in App.xaml"
+                              XamlSource="ResourceDictionary\ResourceDictionarySample1_xaml.txt">
+            <local:ControlExample.Example>
+                <Grid Background="{StaticResource AccentBrush}">
+                    <StackPanel HorizontalAlignment="Center"
+                                VerticalAlignment="Center">
+                        <TextBlock Text="{StaticResource AppTitle}"
+                                   FontSize="{StaticResource HeaderFontSize}"
+                                   Foreground="White" />
+                    </StackPanel>
+                </Grid>
+            </local:ControlExample.Example>
+            <local:ControlExample.CSharp>
+                <x:String xml:space="preserve">
+//YourPage.xaml.cs
+
+//You can retrieve resources defined at the ResourceDictionary like this
+var appTitle = (string)Application.Current.Resources["AppTitle"];
+var headerFontSize = (double)Application.Current.Resources["HeaderFontSize"];
+                </x:String>
+            </local:ControlExample.CSharp>
+        </local:ControlExample>
+
+        <local:ControlExample HeaderText="Define page-level ResourceDictionary"
+                              XamlSource="ResourceDictionary\ResourceDictionarySample2_xaml.txt">
+            <local:ControlExample.Example>
+                <Grid Background="{StaticResource PageBackgroundBrush}">
+                    <TextBlock Text="{StaticResource WelcomeMessage}"
+                               FontSize="20"
+                               Foreground="Black" />
+                </Grid>
+            </local:ControlExample.Example>
+            <local:ControlExample.CSharp>
+                <x:String xml:space="preserve">
+//YourPage.xaml.cs
+
+//You can retrieve the resource defined at the ResourceDictionary like this
+var welcomeMessage = (string)this.Resources["WelcomeMessage"];
+                </x:String>
+            </local:ControlExample.CSharp>
+        </local:ControlExample>
+
+        <local:ControlExample HeaderText="Define a separate ResourceDictionary file by adding a new .xaml file (e.g., Colors.xaml) to the project"
+                              XamlSource="ResourceDictionary\ResourceDictionarySample3_xaml.txt">
+            <local:ControlExample.Example>
+                <Grid Background="{StaticResource SecondaryBrush}">
+                    <TextBlock Text="Using colors from ResourceDictionary"
+                               Foreground="White" />
+                </Grid>
+            </local:ControlExample.Example>
+            <local:ControlExample.CSharp>
+                <x:String xml:space="preserve">
+//YourPage.xaml.cs
+
+//You can retrieve the resource defined at the ResourceDictionary like this
+var secondaryBrush = (SolidColorBrush)Application.Current.Resources["SecondaryBrush"];
+                </x:String>
+            </local:ControlExample.CSharp>
+        </local:ControlExample>
+    </StackPanel>
+</Page>

WinUIGallery/ControlPages/XamlFundamentals/ResourceDictionaryPage.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 ResourceDictionaryPage : Page
+    {
+        public ResourceDictionaryPage()
+        {
+            this.InitializeComponent();
+        }
+    }
+}