From fa61254659cf6cfaeff0739c6cf1a824fc2275b2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 26 Aug 2025 19:19:55 +0000
Subject: [PATCH 1/3] Initial plan
From 3863ed4953ec387e8d44489ed51069f5a65cc97f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 26 Aug 2025 19:26:40 +0000
Subject: [PATCH 2/3] Add comprehensive example of x:Bind and Binding in
reusable Styles
Co-authored-by: alvinashcraft <73072+alvinashcraft@users.noreply.github.com>
---
.../data-binding/data-binding-in-depth.md | 191 ++++++++++++++++++
uwp/data-binding/data-binding-in-depth.md | 186 +++++++++++++++++
2 files changed, 377 insertions(+)
diff --git a/hub/apps/develop/data-binding/data-binding-in-depth.md b/hub/apps/develop/data-binding/data-binding-in-depth.md
index 99affd2070..697fd4b980 100644
--- a/hub/apps/develop/data-binding/data-binding-in-depth.md
+++ b/hub/apps/develop/data-binding/data-binding-in-depth.md
@@ -439,6 +439,197 @@ namespace ExampleNamespace
```
+### Mixing {x:Bind} and {Binding} in a reusable Style
+
+While the previous example showed using `{x:Bind}` in DataTemplates, you can also create reusable Styles that combine both `{x:Bind}` and `{Binding}` markup extensions. This is useful when you want to bind some properties to compile-time known values using `{x:Bind}` and other properties to runtime DataContext values using `{Binding}`.
+
+Here's an example that shows how to create a reusable Button style that uses both binding approaches:
+
+TemplatesResourceDictionary.xaml
+
+``` xaml
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+TemplatesResourceDictionary.xaml.cs
+
+``` csharp
+// TemplatesResourceDictionary.xaml.cs
+using Microsoft.UI;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Media;
+
+namespace ExampleNamespace
+{
+ public partial class TemplatesResourceDictionary
+ {
+ public TemplatesResourceDictionary()
+ {
+ InitializeComponent();
+ }
+
+ // Properties for x:Bind - these are compile-time bound
+ public SolidColorBrush DefaultIndicatorBrush { get; } =
+ new SolidColorBrush(Colors.Green);
+
+ public SolidColorBrush DefaultPressedBrush { get; } =
+ new SolidColorBrush(Colors.DarkGray);
+ }
+}
+```
+
+Usage in MainWindow.xaml with a ViewModel that provides runtime values:
+
+``` xaml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+ButtonThemeViewModel.cs (the DataContext that provides runtime binding values):
+
+``` csharp
+using System.ComponentModel;
+using Microsoft.UI;
+using Microsoft.UI.Xaml.Media;
+
+namespace ExampleNamespace
+{
+ public class ButtonThemeViewModel : INotifyPropertyChanged
+ {
+ private SolidColorBrush _buttonBackgroundBrush = new SolidColorBrush(Colors.LightBlue);
+ private SolidColorBrush _buttonForegroundBrush = new SolidColorBrush(Colors.DarkBlue);
+ private SolidColorBrush _buttonHoverBrush = new SolidColorBrush(Colors.LightCyan);
+
+ public SolidColorBrush ButtonBackgroundBrush
+ {
+ get => _buttonBackgroundBrush;
+ set
+ {
+ _buttonBackgroundBrush = value;
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonBackgroundBrush)));
+ }
+ }
+
+ public SolidColorBrush ButtonForegroundBrush
+ {
+ get => _buttonForegroundBrush;
+ set
+ {
+ _buttonForegroundBrush = value;
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonForegroundBrush)));
+ }
+ }
+
+ public SolidColorBrush ButtonHoverBrush
+ {
+ get => _buttonHoverBrush;
+ set
+ {
+ _buttonHoverBrush = value;
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonHoverBrush)));
+ }
+ }
+
+ public event PropertyChangedEventHandler PropertyChanged;
+ }
+}
+```
+
+In this example:
+
+- **`{Binding}`** is used for properties that depend on the DataContext (ButtonBackgroundBrush, ButtonForegroundBrush, ButtonHoverBrush)
+- **`{x:Bind}`** is used for properties that are compile-time known and belong to the ResourceDictionary itself (DefaultIndicatorBrush, DefaultPressedBrush)
+- The style is reusable and can be applied to any Button
+- Runtime theming is possible through the DataContext while still benefiting from the performance of `{x:Bind}` for static elements
+
## Event binding and ICommand
[{x:Bind}](/windows/uwp/xaml-platform/x-bind-markup-extension) supports a feature called event binding. With this feature, you can specify the handler for an event using a binding, which is an additional option on top of handling events with a method on the code-behind file. Let's say you have a `ListViewDoubleTapped` event handler on your `MainWindow` class.
diff --git a/uwp/data-binding/data-binding-in-depth.md b/uwp/data-binding/data-binding-in-depth.md
index 573970df80..1f14f4fffd 100644
--- a/uwp/data-binding/data-binding-in-depth.md
+++ b/uwp/data-binding/data-binding-in-depth.md
@@ -589,6 +589,192 @@ MainPage.xaml
```
+### Mixing {x:Bind} and {Binding} in a reusable Style
+
+While the previous example showed using {x:Bind} in DataTemplates, you can also create reusable Styles that combine both {x:Bind} and {Binding} markup extensions. This is useful when you want to bind some properties to compile-time known values using {x:Bind} and other properties to runtime DataContext values using {Binding}.
+
+Here's an example that shows how to create a reusable Button style that uses both binding approaches:
+
+TemplatesResourceDictionary.xaml
+
+``` xaml
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+TemplatesResourceDictionary.xaml.cs
+
+``` csharp
+using Windows.UI;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Media;
+
+namespace ExampleNamespace
+{
+ public partial class TemplatesResourceDictionary
+ {
+ public TemplatesResourceDictionary()
+ {
+ InitializeComponent();
+ }
+
+ // Properties for x:Bind - these are compile-time bound
+ public SolidColorBrush DefaultIndicatorBrush { get; } =
+ new SolidColorBrush(Colors.Green);
+
+ public SolidColorBrush DefaultPressedBrush { get; } =
+ new SolidColorBrush(Colors.DarkGray);
+ }
+}
+```
+
+Usage in MainPage.xaml with a ViewModel that provides runtime values:
+
+``` xaml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+ButtonThemeViewModel.cs (the DataContext that provides runtime binding values):
+
+``` csharp
+using System.ComponentModel;
+using Windows.UI;
+using Windows.UI.Xaml.Media;
+
+namespace ExampleNamespace
+{
+ public class ButtonThemeViewModel : INotifyPropertyChanged
+ {
+ private SolidColorBrush _buttonBackgroundBrush = new SolidColorBrush(Colors.LightBlue);
+ private SolidColorBrush _buttonForegroundBrush = new SolidColorBrush(Colors.DarkBlue);
+ private SolidColorBrush _buttonHoverBrush = new SolidColorBrush(Colors.LightCyan);
+
+ public SolidColorBrush ButtonBackgroundBrush
+ {
+ get => _buttonBackgroundBrush;
+ set
+ {
+ _buttonBackgroundBrush = value;
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonBackgroundBrush)));
+ }
+ }
+
+ public SolidColorBrush ButtonForegroundBrush
+ {
+ get => _buttonForegroundBrush;
+ set
+ {
+ _buttonForegroundBrush = value;
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonForegroundBrush)));
+ }
+ }
+
+ public SolidColorBrush ButtonHoverBrush
+ {
+ get => _buttonHoverBrush;
+ set
+ {
+ _buttonHoverBrush = value;
+ PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(ButtonHoverBrush)));
+ }
+ }
+
+ public event PropertyChangedEventHandler PropertyChanged;
+ }
+}
+```
+
+In this example:
+
+- **{Binding}** is used for properties that depend on the DataContext (ButtonBackgroundBrush, ButtonForegroundBrush, ButtonHoverBrush)
+- **{x:Bind}** is used for properties that are compile-time known and belong to the ResourceDictionary itself (DefaultIndicatorBrush, DefaultPressedBrush)
+- The style is reusable and can be applied to any Button
+- Runtime theming is possible through the DataContext while still benefiting from the performance of {x:Bind} for static elements
+
## Event binding and ICommand
[{x:Bind}](../xaml-platform/x-bind-markup-extension.md) supports a feature called event binding. With this feature, you can specify the handler for an event using a binding, which is an additional option on top of handling events with a method on the code-behind file. Let's say you have a **RootFrame** property on your **MainPage** class.
From 828fc0626ef519e57bb4a50a34a60b5c308b0870 Mon Sep 17 00:00:00 2001
From: Alvin Ashcraft <73072+alvinashcraft@users.noreply.github.com>
Date: Tue, 26 Aug 2025 15:40:57 -0400
Subject: [PATCH 3/3] Apply suggestions from code review
---
hub/apps/develop/data-binding/data-binding-in-depth.md | 2 +-
uwp/data-binding/data-binding-in-depth.md | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/hub/apps/develop/data-binding/data-binding-in-depth.md b/hub/apps/develop/data-binding/data-binding-in-depth.md
index 697fd4b980..e032c979c4 100644
--- a/hub/apps/develop/data-binding/data-binding-in-depth.md
+++ b/hub/apps/develop/data-binding/data-binding-in-depth.md
@@ -439,7 +439,7 @@ namespace ExampleNamespace
```
-### Mixing {x:Bind} and {Binding} in a reusable Style
+### Mixing {x\:Bind} and {Binding} in a reusable Style
While the previous example showed using `{x:Bind}` in DataTemplates, you can also create reusable Styles that combine both `{x:Bind}` and `{Binding}` markup extensions. This is useful when you want to bind some properties to compile-time known values using `{x:Bind}` and other properties to runtime DataContext values using `{Binding}`.
diff --git a/uwp/data-binding/data-binding-in-depth.md b/uwp/data-binding/data-binding-in-depth.md
index 1f14f4fffd..b78d85d76e 100644
--- a/uwp/data-binding/data-binding-in-depth.md
+++ b/uwp/data-binding/data-binding-in-depth.md
@@ -589,7 +589,7 @@ MainPage.xaml
```
-### Mixing {x:Bind} and {Binding} in a reusable Style
+### Mixing {x\:Bind} and {Binding} in a reusable Style
While the previous example showed using {x:Bind} in DataTemplates, you can also create reusable Styles that combine both {x:Bind} and {Binding} markup extensions. This is useful when you want to bind some properties to compile-time known values using {x:Bind} and other properties to runtime DataContext values using {Binding}.