feat: Add XAML Fundamentals section with pages and examples

WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml

@@ -0,0 +1,226 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Page x:Class="WinUIGallery.ControlPages.BindingPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:core="using:WinUIGallery"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:WinUIGallery.ControlPages"
+      xmlns:c="using:WinUIGallery.Common"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <Page.Resources>
+        <c:EmptyStringToVisibilityConverter x:Key="EmptyStringToVisibilityConverter" />
+    </Page.Resources>
+
+    <StackPanel>
+        <StackPanel Spacing="12"
+                    Margin="0,12,0,0">
+            <RichTextBlock>
+                <Paragraph FontWeight="SemiBold">Key concepts:</Paragraph>
+                <Paragraph>• Target: The property of a control to which data is bound (e.g., Text, Background, Visibility).</Paragraph>
+                <Paragraph>• Source: The data being bound, such as a property in a class, another control, or a static resource.</Paragraph>
+                <Paragraph>• Binding Modes:</Paragraph>
+                <Paragraph xml:space="preserve">    ◦ OneWay updates the target when the source changes.</Paragraph>
+                <Paragraph xml:space="preserve">    ◦ TwoWay updates both the target and the source.</Paragraph>
+                <Paragraph xml:space="preserve">    ◦ OneTime sets the target once and does not update afterward.</Paragraph>
+            </RichTextBlock>
+
+            <RichTextBlock>
+                <Paragraph>
+                    <Run Text="Learn more about the differences between" />
+                    <Run FontFamily="Consolas"
+                         Text="x:Bind" />
+                    <Run Text="and" />
+                    <Run FontFamily="Consolas"
+                         Text="Binding" />
+                    <Run Text="by visiting" />
+                    <Hyperlink NavigateUri="https://learn.microsoft.com/windows/apps/develop/data-binding/data-binding-in-depth#xbind-and-binding-feature-comparison">
+                        Microsoft Learn
+                    </Hyperlink>.
+                </Paragraph>
+            </RichTextBlock>
+        </StackPanel>
+
+        <core:ControlExample HeaderText="Binding between controls"
+                             XamlSource="Binding\BindingSample1_xaml.txt">
+            <core:ControlExample.Example>
+                <StackPanel Spacing="12">
+                    <Grid ColumnSpacing="12">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="auto" />
+                            <ColumnDefinition Width="auto" />
+                            <ColumnDefinition Width="auto" />
+                        </Grid.ColumnDefinitions>
+
+                        <StackPanel Spacing="8"
+                                    Grid.Column="0">
+                            <TextBlock Text="OneWay binding"
+                                       FontWeight="SemiBold" />
+                            <TextBox x:Name="SourceTextBoxOneWay"
+                                     Width="200"
+                                     HorizontalAlignment="Left"
+                                     PlaceholderText="Enter text here" />
+                            <TextBox x:Name="TargetTextBoxOneWay"
+                                     Width="200"
+                                     HorizontalAlignment="Left"
+                                     PlaceholderText="Mirrors above text"
+                                     Text="{x:Bind SourceTextBoxOneWay.Text, Mode=OneWay}" />
+                        </StackPanel>
+
+                        <AppBarSeparator Grid.Column="1" />
+
+                        <StackPanel Spacing="8"
+                                    Grid.Column="2">
+                            <TextBlock Text="TwoWay binding"
+                                       FontWeight="SemiBold" />
+                            <TextBox x:Name="SourceTextBoxTwoWay"
+                                     Width="200"
+                                     HorizontalAlignment="Left"
+                                     PlaceholderText="Enter text here" />
+                            <TextBox x:Name="TargetTextBoxTwoWay"
+                                     Width="200"
+                                     HorizontalAlignment="Left"
+                                     PlaceholderText="Mirrors and edits above text"
+                                     Text="{x:Bind SourceTextBoxTwoWay.Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+                        </StackPanel>
+                    </Grid>
+                    <RichTextBlock>
+                        <Paragraph>
+                            <Run Text="In" />
+                            <Run Text="OneWay"
+                                 FontWeight="Semibold" />
+                            <Run Text="binding mode, changes in the source (SourceTextBox) are reflected in the target, but not vice versa." />
+                        </Paragraph>
+                        <Paragraph>
+                            <Run Text="In" />
+                            <Run Text="TwoWay"
+                                 FontWeight="Semibold" />
+                            <Run Text="binding mode, changes in either box update the other." />
+                        </Paragraph>
+                    </RichTextBlock>
+                </StackPanel>
+            </core:ControlExample.Example>
+        </core:ControlExample>
+
+        <core:ControlExample HeaderText="Binding to a property in code-behind">
+            <core:ControlExample.Example>
+                <StackPanel Spacing="8">
+                    <TextBlock Text="{x:Bind GreetingMessage}"
+                               FontSize="24"
+                               HorizontalAlignment="Center"
+                               VerticalAlignment="Center" />
+                </StackPanel>
+            </core:ControlExample.Example>
+            <core:ControlExample.Xaml>
+                <x:String xml:space="preserve">
+&lt;TextBlock
+    Text="{x:Bind GreetingMessage}"
+    FontSize="24"
+    HorizontalAlignment="Center"
+    VerticalAlignment="Center" /&gt;
+                </x:String>
+            </core:ControlExample.Xaml>
+            <core:ControlExample.CSharp>
+                <x:String xml:space="preserve">
+// Code-behind
+public string GreetingMessage { get; set; } = "Hello, WinUI 3!";
+                </x:String>
+            </core:ControlExample.CSharp>
+        </core:ControlExample>
+
+        <core:ControlExample HeaderText="Using a function in x:Bind"
+                             CSharpSource="Binding\BindingSample3_csharp.txt"
+                             XamlSource="Binding\BindingSample3_xaml.txt">
+            <core:ControlExample.Example>
+                <StackPanel Spacing="8">
+                    <DatePicker x:Name="DatePickerControl"
+                                Header="Select a date" />
+                    <TextBlock Text="{x:Bind FormatDate(DatePickerControl.SelectedDate), Mode=OneWay}" />
+                </StackPanel>
+            </core:ControlExample.Example>
+        </core:ControlExample>
+
+        <core:ControlExample HeaderText="Using a converter in Binding"
+                             CSharpSource="Binding\BindingSample4_csharp.txt"
+                             XamlSource="Binding\BindingSample4_xaml.txt">
+            <core:ControlExample.Example>
+                <StackPanel Spacing="8">
+                    <TextBox x:Name="InputTextBox" Header="Enter Text:" Width="300" />
+
+                    <TextBlock Text="The input is not empty."
+                               Visibility="{Binding Text, ElementName=InputTextBox, Converter={StaticResource EmptyStringToVisibilityConverter}}" />
+                </StackPanel>
+            </core:ControlExample.Example>
+        </core:ControlExample>
+
+        <core:ControlExample HeaderText="Binding to a view model"
+                             CSharpSource="Binding\BindingSample5_csharp.txt">
+            <core:ControlExample.Example>
+                <StackPanel Spacing="8">
+                    <TextBlock FontWeight="SemiBold"
+                               Text="Title:" />
+                    <TextBlock FontSize="16"
+                               Text="{Binding Title}" />
+
+                    <TextBlock FontWeight="SemiBold"
+                               Text="Description:" />
+                    <TextBlock FontSize="16"
+                               Text="{Binding Description}" />
+                </StackPanel>
+            </core:ControlExample.Example>
+            <core:ControlExample.Xaml>
+                <x:String xml:space="preserve">
+&lt;TextBlock Text="Title:" FontWeight="SemiBold" /&gt;
+&lt;TextBlock Text="{Binding Title}" FontSize="16" /&gt;
+
+&lt;TextBlock Text="Description:" FontWeight="SemiBold" /&gt;
+&lt;TextBlock Text="{Binding Description}" FontSize="16" /&gt;
+                </x:String>
+            </core:ControlExample.Xaml>
+        </core:ControlExample>
+        <InfoBar Title="MVVM Toolkit"
+                 Margin="0,8,0,0"
+                 IsClosable="False"
+                 IsOpen="True"
+                 Message="There is a library called the MVVM Toolkit, part of the Windows Community Toolkit, designed to simplify the implementation of the Model-View-ViewModel (MVVM) pattern in applications. The toolkit includes a sample app to demonstrate its features and usage."
+                 Severity="Informational">
+            <InfoBar.ActionButton>
+                <HyperlinkButton x:Name="mvvmToolkitSampleAppHyperlinkButton"
+                                 Content="Go to the MVVM Toolkit repository"
+                                 NavigateUri="https://github.com/CommunityToolkit/MVVM-Samples" />
+            </InfoBar.ActionButton>
+        </InfoBar>
+
+        <core:ControlExample HeaderText="Binding with FallbackValue and TargetNullValue">
+            <core:ControlExample.Example>
+                <StackPanel Spacing="8">
+                    <TextBlock Text="{Binding NonExistentProperty, FallbackValue='Default Text'}" />
+                    <TextBlock Text="{Binding NullString, TargetNullValue='Anonymous User'}" />
+                </StackPanel>
+            </core:ControlExample.Example>
+            <core:ControlExample.Xaml>
+                <x:String xml:space="preserve">
+&lt;!--FallbackValue and TargetNullValue properties help handle scenarios where the binding source is missing or null--&gt;
+&lt;TextBlock Text="{Binding NonExistentProperty, FallbackValue='Default Text'}" /&gt;
+&lt;TextBlock Text="{Binding NullString, TargetNullValue='Anonymous User'}" /&gt;
+                </x:String>
+            </core:ControlExample.Xaml>
+            <core:ControlExample.CSharp>
+                <x:String xml:space="preserve">
+public YourPage()
+{
+    this.InitializeComponent();
+
+    ViewModel = new ExampleViewModel
+    {
+        NullString = null
+    };
+
+    DataContext = ViewModel;
+}
+                </x:String>
+            </core:ControlExample.CSharp>
+        </core:ControlExample>
+    </StackPanel>
+</Page>

WinUIGallery/ControlPages/XamlFundamentals/BindingPage.xaml.cs

@@ -0,0 +1,90 @@
+using System;
+using Microsoft.UI.Xaml.Controls;
+using System.ComponentModel;
+
+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;
+    }
+
+    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));
+    }
+}