Merge pull request #50043 from ShawnKupfer/WB1749

AB#1044063: Create a UI that uses data binding in .NET MAUI

Author: PMEds28

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/1-introduction.yml

@@ -4,7 +4,7 @@ title: Introduction
 metadata:
   title: Introduction
   description: Move app logic to objects that are bound to the apps UI. Data bindings can make your code faster to read, easier to maintain, and more testable.
-  ms.date: 02/15/2024
+  ms.date: 04/16/2025
   author: adegeo
   ms.author: adegeo
   ms.topic: unit

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/2-compare-event-and-data-driven.yml

@@ -4,7 +4,7 @@ title: Compare an event-driven UI to a data-bound UI
 metadata:
   title: Compare an event-driven UI to a data-bound UI
   description: In this unit, you'll compare an event-driven UI to a data-bound UI.
-  ms.date: 02/15/2024
+  ms.date: 04/16/2025
   author: adegeo
   ms.author: adegeo
   ms.topic: unit
@@ -18,15 +18,15 @@ quiz:
     choices:
     - isCorrect: false
       content: "You never have to write code related to your UI again."
-      explanation: "While you could design a code-less UI, you don't have to, and it's not the most important feature of data binding. Data binding is beneficial because it provides a system where you have real-time updates to the UI when the underlying data changes."
+      explanation: "While you could design a codeless UI, you don't have to, and it's not the most important feature of data binding. Data binding is beneficial because it provides a system where you have real-time updates to the UI when the underlying data changes."
     - isCorrect: true
       content: "The UI is automatically kept in sync with the data."
-      explanation: "One benefit of adding data binding your UI, is that it keeps the UI elements in sync with the properties of the data object. It also helps separate app logic from app presentation."
+      explanation: "One benefit of adding data binding your UI is that it keeps the UI elements in sync with the properties of the data object. It also helps separate app logic from app presentation."
   - content: "In an app that retrieves the latest weather, a label control that represents the temperature is bound to the data object. When the user presses the \"Get Weather\" button, triggering the `Clicked` event, what would the event handler code do to update the UI?"
     choices:
     - isCorrect: true
       content: "From the event handler, invoke the weather service and update the weather data object with the latest information."
-      explanation: "Since the code-behind is only \"talking\" to the data object and not the label, it isn't tightly coupled to the label. The label automatically updates its text when the bound data object is changed."
+      explanation: "Because the code-behind is only \"talking\" to the data object and not the label, it isn't tightly coupled to the label. The label automatically updates its text when the bound data object is changed."
     - isCorrect: false
       content: "From the event handler, do nothing. The temperature label is data bound so it should update automatically."
       explanation: "Even though the text of the label is bound to the data object, something still needs to retrieve the latest data and put it into the data object. Otherwise, if the data object doesn't update, neither does the UI."

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/3-use-data-bindings-xaml.yml

@@ -4,7 +4,7 @@ title: Use data bindings in XAML
 metadata:
   title: Use data bindings in XAML
   description: In this unit, you'll learn about how to declare and use data bindings in XAML.
-  ms.date: 02/15/2024
+  ms.date: 04/16/2025
   author: adegeo
   ms.author: adegeo
   ms.topic: unit

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/4-exercise-replace-code-with-data-bindings.yml

@@ -4,7 +4,7 @@ title: Exercise - Replace code with .NET MAUI bindings
 metadata:
   title: Exercise - Replace code with .NET MAUI bindings
   description: Learn how to convert a XAML UI that uses event handlers to display data, to a UI that uses data binding.
-  ms.date: 02/15/2024
+  ms.date: 04/16/2025
   author: adegeo
   ms.author: adegeo
   ms.topic: unit

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/5-databinding-mismatched-types.yml

@@ -4,7 +4,7 @@ title: Data binding with mismatched types
 metadata:
   title: Data binding with mismatched types
   description: Learn how to data binding between two mismatched property types.
-  ms.date: 02/15/2024
+  ms.date: 04/16/2025
   author: adegeo
   ms.author: adegeo
   ms.topic: unit

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/6-exercise-create-converter.yml

@@ -4,7 +4,7 @@ title: Exercise - Create a .NET MAUI converter
 metadata:
   title: Exercise - Create a .NET MAUI converter
   description: Learn how to implement a converter that converts an enumeration to an image resource.
-  ms.date: 02/15/2024
+  ms.date: 04/16/2025
   author: adegeo
   ms.author: adegeo
   ms.topic: unit

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/7-summary.yml

@@ -4,7 +4,7 @@ title: Summary
 metadata:
   title: Summary
   description: Summary
-  ms.date: 02/15/2024
+  ms.date: 04/16/2025
   author: adegeo
   ms.author: adegeo
   ms.topic: unit

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/includes/1-introduction.md

@@ -1,22 +1,22 @@
 Data binding lets you declare relationships between your data and your user interface (UI) controls. They automatically stay in sync when either element changes. Data bindings can make your code faster to read, easier to maintain, and more testable.
 
-Data binding offers a way of coupling your UI directly to data instead of associating your UI with code in the UI's code-behind. When the UI is bound to data, the UI automatically updates when the data changes, staying in sync with the data. Oppositely If the user interacts with the UI, the data is kept in sync with the UI.
+Data binding offers a way of coupling your UI directly to data instead of associating your UI with code in the UI's code-behind. When the UI is bound to data, the UI automatically updates when the data changes, staying in sync with the data. Conversely, if the user interacts with the UI, the data stays in sync with the UI.
 
 ## Example scenario
 
-Imagine you're working on an app that presents users with weather information for a selected region or address. As the user inputs a location, the app loads the weather forecast data from an external weather service and updates the UI. The UI and the weather service data are tightly coupled via the XAML UI and the XAML code-behind file. The weather service is already abstracted to its own class, but your UI relies heavily on the code-behind to present that data to the UI.
+Imagine you're working on an app that presents users with weather information for a selected region or address. As the user inputs a location, the app loads the weather forecast data from an external weather service and updates the UI. The UI and the weather-service data are tightly coupled via the XAML UI and the XAML code-behind file. The weather service is already abstracted to its own class, but your UI relies heavily on the code-behind to present that data to the UI.
 
-Some time after your app is released, the weather service you use announces that they're going to be shutting down. Anticipating this, you start looking for a replacement service. Of the services you've evaluated, you notice that they all input and output data in different ways. Since your UI uses code-behind events for interaction with the service, your UI experience could be impacted by this change.
+Some time after your app is released, the weather service you use announces that they're shutting down. Anticipating this, you start looking for a replacement service. Of the services you've evaluated, you notice that they all input and output data in different ways. Because your UI uses code-behind events for interaction with the service, your UI experience could be impacted by this change.
 
-It would be useful to change how the UI synchronizes the weather updates, from code-behind events to data binding. This way, if a service change happens again, you have minimized the impact to your code.
+It would be useful to change how the UI synchronizes the weather updates, from code-behind events to data binding. This way, if a service change happens again, you've minimized the impact to your code.
 
-## What will you do
+## What you'll do
 
 This module demonstrates the differences between a code-based UI and a data-bound UI and shows you how to use data binding to update the UI instead of code-behind. Using a sample weather app, you'll convert UI updates from code-behind to data binding.
 
-## What do you learn
+## What you'll learn
 
-By the end of this module, you're able to use data binding to present data in the UI, and transform data when the UI types and data types don't match.
+By the end of this module, you'll be able to use data binding to present data in the UI, and transform data when the UI types and data types don't match.
 
 ## Prerequisites
 

learn-pr/dot-net-maui/separate-ui-and-logic-with-data-binding/includes/2-compare-event-and-data-bound.md

@@ -1,6 +1,6 @@
-An event-driven user interface (UI) is designed around the events a control exposes. These events can be associated with event handler code that's invoked when the event is triggered. For example, let's say you have a button that when clicked performs a long-running operation. The event handler assigned to the `Clicked` event could start the operation and then set the button's `IsEnabled` property to `false`, preventing the button from being clicked again while the operation is running.
+An event-driven user interface (UI) is designed around the events a control exposes. These events can be associated with event-handler code that's invoked when the event is triggered. For example, let's say you have a button that, when clicked, performs a long-running operation. The event handler assigned to the `Clicked` event could start the operation and then set the button's `IsEnabled` property to `false`, preventing the button from being clicked again while the operation is running.
 
-A data-bound UI uses data binding to present and interact with data. Properties of controls are bound to the data object's properties, and those bindings can detect changes in the properties. Using the previous example, consider the button that performs a long-running operation. Instead of disabling the button in code-behind, the `IsEnabled` property is bound to the data object's `IsBusy` property. Whenever the data object becomes "busy" the button's enabled state is automatically changed to match.
+A data-bound UI uses data binding to present and interact with data. Properties of controls are bound to the data object's properties, and those bindings can detect changes in the properties. Using the previous example, consider the button that performs a long-running operation. Instead of disabling the button in code-behind, the `IsEnabled` property is bound to the data object's `IsBusy` property. Whenever the data object becomes "busy," the button's enabled state is automatically changed to match.
 
 ## Pros and cons of using events and code-behind
 
@@ -27,7 +27,7 @@ There are three named controls in this example:
 - `Button` control named **RefreshWeatherButton**.
 - `Label` control named **Humidity**.
 
-The `RefreshWeatherButton` has an event handler declared for the `Clicked` event. When the button is clicked, the event handler queries a weather service for the latest weather forecast, using the data entered in the `PostalCode` entry control, and sets the `Humidity` label's text to the current humidity.
+The `RefreshWeatherButton` has an event handler declared for the `Clicked` event. When the button is clicked, the event handler queries a weather service for the latest weather forecast using the data entered in the `PostalCode` entry control, and sets the `Humidity` label's text to the current humidity.
 
 ```csharp
 private void RefreshWeatherButton_Clicked(object sender, EventArgs e)
@@ -40,11 +40,11 @@ private void RefreshWeatherButton_Clicked(object sender, EventArgs e)
 
 In this one event handler, three controls are tightly coupled to each other and the data through the code-behind.
 
-This design works great for small UIs, but as soon as the UI becomes complex, maintaining a tightly coupled code-behind can become troublesome. If you delete or change a control, you must clean up any code using those UI controls, which could include the event handler. If you decide to redesign the UI, you'll have lots of code to refactor too. And when the backing data structure changes, you have to dive into the code of each UI to stay in sync.
+This design works great for small UIs, but as soon as the UI becomes complex, maintaining a tightly coupled code-behind can become troublesome. If you delete or change a control, you must clean up any code using those UI controls, which could include the event handler. If you decide to redesign the UI, you'll have lots of code to refactor, too. And when the backing data structure changes, you have to dive into the code of each UI to stay in sync.
 
 ## Data binding helps
 
-Data bindings can be implemented in XAML or code, but are much more common in XAML where they help to reduce the size of the code-behind file. By replacing procedural code in event handlers with declarative code or markup, the app is simplified and clarified. Because the bindings don't require code-behind, you can easily create, alter, or redesign the UI to fit how you want to present the data.
+You can implement data bindings in XAML or code, but they're much more common in XAML, where they help to reduce the code-behind file size. By replacing procedural code in event handlers with declarative code or markup, the app is simplified and clarified. Because the bindings don't require code-behind, you can easily create, alter, or redesign the UI to fit how you want to present the data.
 
 Let's take the same example as in the previous section, but update it to use data binding:
 
@@ -59,30 +59,24 @@ Let's take the same example as in the previous section, but update it to use dat
 </VerticalStackLayout>
 ```
 
-You can spot the properties that are data bound, they use the XAML extension syntax `{Binding ...}` for the value of the property. Don't worry about the specifics yet, that is covered later in this module.
+You can spot the properties that are data bound, they use the XAML extension syntax `{Binding ...}` for the value of the property. Don't worry about the specifics yet; we cover that later in this module.
 
-The same three controls are declared in the XAML, but none of them are named, as a name isn't required:
+The same three controls are declared in the XAML, but none of them are named, because a name isn't required:
 
-- `Entry` control:
+- **`Entry` control**: This control's `Text` property is bound to a property named `Location`.
 
-  This control's `Text` property is bound to a property named `Location`.
+- **`Button` control**: The button's `Command` property is bound to a property named `RefreshWeather`. `Command` is a property on the button that invokes code when the button is pressed. It's an alternative to the `Clicked` event that's used in data binding.
 
-- `Button` control:
-
-  The button's `Command` property is bound to a property named `RefreshWeather`. `Command` is a property on the button that invokes code when the button is pressed. It's an alternative to the `Clicked` event that's used in data binding.
-
-- `Label` control:
-
-  This `Text` property is bound to a property named `Humidity`.
+- **`Label` control**: This `Text` property is bound to a property named `Humidity`.
 
 In this simple UI, all of the code-behind is eliminated. Removing all code-behind isn't the point of data binding, even though it's usually possible. Code-behind still has its place. How much data binding you implement is up to you.
 
-Now the UI is loosely coupled to a data object. Why is it loosely coupled instead of tightly coupled? Because of the way bindings are evaluated. Each control has a `BindingContext` property. If the context isn't set, the parent control's context is used, and so on, until the root of the XAML is evaluated. When bindings are evaluated, the context's object instance is checked for the required properties, like the label control's `Text` binding to the context's `Humidity` property. If `Humidity` doesn't exist on the context, nothing happens.
+Now, the UI is loosely coupled to a data object. Why is it loosely coupled instead of tightly coupled? Because of the way bindings are evaluated. Each control has a `BindingContext` property. If the context isn't set, the parent control's context is used, and so on, until the root of the XAML is evaluated. When bindings are evaluated, the context's object instance is checked for the required properties, like the label control's `Text` binding to the context's `Humidity` property. If `Humidity` doesn't exist on the context, nothing happens.
 
-Because the UI is loosely coupled, you can redesign the UI without the worry of breaking code. However, you can break functionality. For example, you can delete the button and the app still compiles and runs, but you don't have a way to refresh the weather. On the other hand, you could replace the `Entry` and `Button` controls with the single `SearchBar` control. This control lets you enter text and invoke a command.
+Because the UI is loosely coupled, you can redesign the UI worrying about breaking code. However, you can break functionality. For example, you can delete the button and the app still compiles and runs, but you don't have a way to refresh the weather. On the other hand, you could replace the `Entry` and `Button` controls with the single `SearchBar` control. This control lets you enter text and invoke a command.
 
 ```xaml
 <SearchBar Text="{Binding Location, Mode=OneWayToSource}" SearchCommand="{Binding RefreshWeather}" />
 ```
 
-As you can see, using data binding in your UI design can help you evolve and change your UI without much work. It keeps the UI synchronized with the data automatically and the app logic is separated from the UI.
+As you can see, using data binding in your UI design can help you evolve and change your UI without much work. It keeps the UI synchronized with the data automatically, and the app logic is separated from the UI.