diff --git a/hub/apps/develop/data-binding/bind-to-hierarchical-data-and-create-a-master-details-view.md b/hub/apps/develop/data-binding/bind-to-hierarchical-data-and-create-a-master-details-view.md new file mode 100644 index 0000000000..a5ef45e459 --- /dev/null +++ b/hub/apps/develop/data-binding/bind-to-hierarchical-data-and-create-a-master-details-view.md @@ -0,0 +1,209 @@ +--- +ms.assetid: 6c563dd4-3dd0-4175-a1ab-7a1103fc9559 +title: Bind hierarchical data and create a master/details view +description: You can make a multi-level master/details (also known as list-details) view of hierarchical data by binding items controls to CollectionViewSource instances that are bound together in a chain. +ms.date: 12/13/2022 +ms.topic: article +keywords: windows 10, windows 11, winui, windows app sdk, windows ui, xBind +ms.localizationpriority: medium +--- + +# Bind hierarchical data and create a master/details view + +> [!NOTE] +> Also see the [Master/detail UWP sample](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlMasterDetail). + +You can make a multi-level master/details (also known as list-details) view of hierarchical data by binding items controls to [**CollectionViewSource**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.collectionviewsource) instances that are bound together in a chain. In this topic we use the [{x:Bind} markup extension](/windows/uwp/xaml-platform/x-bind-markup-extension) where possible, and the more flexible (but less performant) [{Binding} markup extension](/windows/uwp/xaml-platform/binding-markup-extension) where necessary. + +One common structure for Windows App SDK apps is to navigate to different details pages when a user makes a selection in a master list. This is useful when you want to provide a rich visual representation of each item at every level in a hierarchy. Another option is to display multiple levels of data on a single page. This is useful when you want to display a few simple lists that let the user quickly drill down to an item of interest. This topic describes how to implement this interaction. The [**CollectionViewSource**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.collectionviewsource) instances keep track of the current selection at each hierarchical level. + +We'll create a view of a sports team hierarchy that is organized into lists for leagues, divisions, and teams, and includes a team details view. When you select an item from any list, the subsequent views update automatically. + +![master/details view of a sports hierarchy](images/xaml-masterdetails.png) + +## Prerequisites + +This topic assumes that you know how to create a basic Windows App SDK app. For instructions on creating your first Windows App SDK app, see [Create your first WinUI 3 (Windows App SDK) project](/windows/apps/winui/winui3/create-your-first-winui3-app). + +## Create the project + +Create a new **Blank App, Packaged (WinUI 3 in Desktop)** project. Name it "MasterDetailsBinding". + +## Create the data model + +Add a new class to your project, name it **ViewModel.cs**, and add this code to it. This will be your binding source class. + +```cs +using System; +using System.Collections.Generic; +using System.Linq; +using System.Text; +using System.Threading.Tasks; + +namespace MasterDetailsBinding +{ + public class Team + { + public string Name { get; set; } + public int Wins { get; set; } + public int Losses { get; set; } + } + + public class Division + { + public string Name { get; set; } + public IEnumerable Teams { get; set; } + } + + public class League + { + public string Name { get; set; } + public IEnumerable Divisions { get; set; } + } + + public class LeagueList : List + { + public LeagueList() + { + AddRange(GetLeague().ToList()); + } + + public IEnumerable GetLeague() + { + return from x in Enumerable.Range(1, 2) + select new League + { + Name = "League " + x, + Divisions = GetDivisions(x).ToList() + }; + } + + public IEnumerable GetDivisions(int x) + { + return from y in Enumerable.Range(1, 3) + select new Division + { + Name = String.Format("Division {0}-{1}", x, y), + Teams = GetTeams(x, y).ToList() + }; + } + + public IEnumerable GetTeams(int x, int y) + { + return from z in Enumerable.Range(1, 4) + select new Team + { + Name = String.Format("Team {0}-{1}-{2}", x, y, z), + Wins = 25 - (x * y * z), + Losses = x * y * z + }; + } + } +} +``` + +## Create the view + +Next, expose the binding source class from the class that represents your page of markup. We do that by adding a property of type `LeagueList` to **MainWindow**. + +```cs +namespace MasterDetailsBinding +{ + public sealed partial class MainWindow : Window + { + public MainWindow() + { + this.InitializeComponent(); + ViewModel = new LeagueList(); + } + public LeagueList ViewModel { get; set; } + } +} +``` + +Finally, replace the contents of the **MainWindow.xaml** file with the following markup, which declares three [**CollectionViewSource**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.collectionviewsource) instances and binds them together in a chain. The subsequent controls can then bind to the appropriate `CollectionViewSource`, depending on its level in the hierarchy. + +``` xaml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +Note that by binding directly to the [**CollectionViewSource**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.collectionviewsource), you're implying that you want to bind to the current item in bindings where the path cannot be found on the collection itself. There's no need to specify the `CurrentItem` property as the path for the binding, although you can do that if there's any ambiguity. For example, the [**ContentControl**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.contentcontrol) representing the team view has its [**Content**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.contentcontrol.content) property bound to the `Teams` `CollectionViewSource`. However, the controls in the [**DataTemplate**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.datatemplate) bind to properties of the `Team` class because the `CollectionViewSource` automatically supplies the currently selected team from the teams list when necessary. + +## See also + +- [Data binding overview](data-binding-overview.md) +- [Data binding in depth](data-binding-in-depth.md) diff --git a/hub/apps/develop/data-binding/data-binding-and-mvvm.md b/hub/apps/develop/data-binding/data-binding-and-mvvm.md new file mode 100644 index 0000000000..92a568f39e --- /dev/null +++ b/hub/apps/develop/data-binding/data-binding-and-mvvm.md @@ -0,0 +1,58 @@ +--- +ms.assetid: b7a8ec88-3013-4e5a-a110-fab3f20ee4bf +title: Data binding and MVVM +description: Data binding is at the core of the Model-View-ViewModel (MVVM) UI architectural design pattern, and enables loose coupling between UI and non-UI code. +ms.date: 12/13/2022 +ms.topic: article +keywords: windows 10, windows 11, windows app sdk, winui, windows ui, mvvm +ms.localizationpriority: medium +--- + +# Data binding and MVVM + +Model-View-ViewModel (MVVM) is a UI architectural design pattern for decoupling UI and non-UI code. With MVVM, you define your UI declaratively in XAML and use data binding markup to link it to other layers containing data and commands. The data binding infrastructure provides a loose coupling that keeps the UI and the linked data synchronized and routes user input to the appropriate commands. + +Because it provides loose coupling, the use of data binding reduces hard dependencies between different kinds of code. This makes it easier to change individual code units (methods, classes, controls, etc.) without causing unintended side effects in other units. This decoupling is an example of the *separation of concerns*, which is an important concept in many design patterns. + +## Benefits of MVVM + +Decoupling your code has many benefits, including: + +* Enabling an iterative, exploratory coding style. Change that is isolated is less risky and easier to experiment with. +* Simplifying unit testing. Code units that are isolated from one another can be tested individually and outside of production environments. +* Supporting team collaboration. Decoupled code that adheres to well-designed interfaces can be developed by separate individuals or teams, and integrated later. +* Improving maintainability. Fixing bugs in decoupled code is less likely to cause regressions in other code. + +In contrast with MVVM, an app with a more conventional "code-behind" structure typically uses data binding for display-only data, and responds to user input by directly handling events exposed by controls. The event handlers are implemented in code-behind files (such as MainWindow.xaml.cs), and are often tightly coupled to the controls, typically containing code that manipulates the UI directly. This makes it difficult or impossible to replace a control without having to update the event handling code. With this architecture, code-behind files often accumulate code that isn't directly related to the UI, such as database-access code, which ends up being duplicated and modified for use with other windows. + +## App layers + +When using the MVVM pattern, an app is divided into the following layers: + +* The **model** layer defines the types that represent your business data. This includes everything required to model the core app domain, and often includes core app logic. This layer is completely independent of the view and view-model layers, and often resides partially in the cloud. Given a fully implemented model layer, you can create multiple different client apps if you so choose, such as Windows App SDK and web apps that work with the same underlying data. +* The **view** layer defines the UI using XAML markup. The markup includes data binding expressions (such as [x:Bind](/windows/uwp/xaml-platform/x-bind-markup-extension)) that define the connection between specific UI components and various view-model and model members. Code-behind files are sometimes used as part of the view layer to contain additional code needed to customize or manipulate the UI, or to extract data from event handler arguments before calling a view-model method that performs the work. +* The **view-model** layer provides data binding targets for the view. In many cases, the view-model exposes the model directly, or provides members that wrap specific model members. The view-model can also define members for keeping track of data that is relevant to the UI but not to the model, such as the display order of a list of items. The view-model also serves as an integration point with other services such as data access code. For simple projects, you might not need a separate model layer, but only a view-model that encapsulates all the data you need. + +## Basic and advanced MVVM + +As with any design pattern, there is more than one way to implement MVVM, and many different techniques are considered part of MVVM. For this reason, there are several different third-party MVVM frameworks supporting the various XAML-based platforms, including Windows App SDK. However, these frameworks generally include multiple services for implementing decoupled architecture, making the exact definition of MVVM somewhat ambiguous. + +Although sophisticated MVVM frameworks can be very useful, especially for enterprise-scale projects, there is typically a cost associated with adopting any particular pattern or technique, and the benefits are not always clear, depending on the scale and size of your project. Fortunately, you can adopt only those techniques that provide a clear and tangible benefit, and ignore others until you need them. + +In particular, you can get a lot of benefit simply by understanding and applying the full power of data binding and separating your app logic into the layers described earlier. This can be achieved using only the capabilities provided by the Windows App SDK, and without using any external frameworks. In particular, the [{x:Bind} markup extension](/windows/uwp/xaml-platform/x-bind-markup-extension) makes data binding easier and higher performing than in previous XAML platforms, eliminating the need for a lot of the boilerplate code required earlier. + +For additional guidance on using basic, out-of-the-box MVVM, check out the [Customers Orders Database UWP sample](https://github.com/Microsoft/Windows-appsample-customers-orders-database) on GitHub. Many of the other [UWP app samples](https://github.com/Microsoft?q=windows-appsample +) also use a basic MVVM architecture, and the [Traffic App UWP sample](https://github.com/Microsoft/Windows-appsample-trafficapp) includes both code-behind and MVVM versions, with notes describing the [MVVM conversion](https://github.com/Microsoft/Windows-appsample-trafficapp/blob/MVVM/MVVM.md). + +## See also + +### Topics + +[Data binding in depth](data-binding-in-depth.md) +[{x:Bind} markup extension](/windows/uwp/xaml-platform/x-bind-markup-extension) + +### UWP MVVM Samples + +[Customers Orders Database sample](https://github.com/Microsoft/Windows-appsample-customers-orders-database) +[VanArsdel Inventory sample](https://github.com/Microsoft/InventorySample) +[Traffic App sample](https://github.com/Microsoft/Windows-appsample-trafficapp) diff --git a/hub/apps/develop/data-binding/data-binding-in-depth.md b/hub/apps/develop/data-binding/data-binding-in-depth.md new file mode 100644 index 0000000000..848502b276 --- /dev/null +++ b/hub/apps/develop/data-binding/data-binding-in-depth.md @@ -0,0 +1,634 @@ +--- +ms.assetid: 2a50c798-6244-4fda-9091-a10a9e87fae2 +title: Data binding in depth +description: Learn how to use data binding in Windows App SDK applications +ms.date: 12/12/2022 +ms.topic: article +keywords: windows 10, windows 11, windows app sdk, winui, windows ui +ms.localizationpriority: medium +dev_langs: + - csharp + - cppwinrt +--- + +# Data binding in depth + +In this article, we will describe the Windows App SDK data binding features for the APIs that reside in the [**Microsoft.UI.Xaml.Data** namespace](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data). + +> [!NOTE] +> This topic describes data binding features in detail. For a short, practical introduction, see [Data binding overview](data-binding-overview.md). + +## Important APIs + +- [**{x:Bind} markup extension**](/windows/uwp/xaml-platform/x-bind-markup-extension) +- [**Binding class**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.binding) +- [**DataContext**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement.datacontext) +- [**INotifyPropertyChanged**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.inotifypropertychanged) + +## Introduction + +Data binding is a way for your app's UI to display data, and optionally to stay in sync with that data. Data binding allows you to separate the concern of data from the concern of UI, and that results in a simpler conceptual model as well as better readability, testability, and maintainability of your app. + +You can use data binding to simply display values from a data source when the UI is first shown, but not to respond to changes in those values. This is a mode of binding called *one-time*, and it works well for a value that doesn't change during run-time. Alternatively, you can choose to "observe" the values and to update the UI when they change. This mode is called *one-way*, and it works well for read-only data. Ultimately, you can choose to both observe and update, so that changes that the user makes to values in the UI are automatically pushed back into the data source. This mode is called *two-way*, and it works well for read-write data. Here are some examples. + +- You could use the one-time mode to bind an [**Image**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.image) to the current user's photo. +- You could use the one-way mode to bind a [**ListView**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.listview) to a collection of real-time news articles grouped by newspaper section. +- You could use the two-way mode to bind a [**TextBox**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.textbox) to a customer's name in a form. + +Independent of mode, there are two kinds of binding, and they're both typically declared in UI markup. You can choose to use either the [{x:Bind} markup extension](/windows/uwp/xaml-platform/x-bind-markup-extension) or the [{Binding} markup extension](/windows/uwp/xaml-platform/binding-markup-extension). And you can even use a mixture of the two in the same app—even on the same UI element. `{x:Bind}` was new in UWP for Windows 10 and it has better performance. All the details described in this topic apply to both kinds of binding unless we explicitly say otherwise. + +### UWP Sample apps that demonstrate {x:Bind} + +- [{x:Bind} sample](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlBind). +- [QuizGame](https://github.com/microsoft/Windows-appsample-networkhelper). +- [XAML UI Basics sample](https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlUIBasics). + +### UWP Sample apps that demonstrate {Binding} + +- Download the [UWP Bookstore1](https://codeload.github.com/MicrosoftDocs/windows-topic-specific-samples/zip/Bookstore1Universal_10) app. +- Download the [Bookstore2](https://codeload.github.com/MicrosoftDocs/windows-topic-specific-samples/zip/Bookstore2Universal_10) app. + +## Every binding involves these pieces + +- A *binding source*. This is the source of the data for the binding, and it can be an instance of any class that has members whose values you want to display in your UI. +- A *binding target*. This is a [**DependencyProperty**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.dependencyproperty) of the [**FrameworkElement**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement) in your UI that displays the data. +- A *binding object*. This is the piece that transfers data values from the source to the target, and optionally from the target back to the source. The binding object is created at XAML load time from your [{x:Bind}](/windows/uwp/xaml-platform/x-bind-markup-extension) or [{Binding}](/windows/uwp/xaml-platform/binding-markup-extension) markup extension. + +In the following sections, we'll take a closer look at the binding source, the binding target, and the binding object. And we'll link the sections together with the example of binding a button's content to a string property named `NextButtonText`, which belongs to a class named `HostViewModel`. + +### Binding source + +Here's a very rudimentary implementation of a class that we could use as a binding source. + +``` csharp +public class HostViewModel +{ + public HostViewModel() + { + NextButtonText = "Next"; + } + + public string NextButtonText { get; set; } +} +``` + +That implementation of `HostViewModel`, and its property `NextButtonText`, are only appropriate for one-time binding. But one-way and two-way bindings are extremely common, and in those kinds of binding the UI automatically updates in response to changes in the data values of the binding source. In order for those kinds of binding to work correctly, you need to make your binding source *observable* to the binding object. So in our example, if we want to one-way or two-way bind to the `NextButtonText` property, then any changes that happen at run-time to the value of that property need to be made observable to the binding object. + +One way of doing that is to derive the class that represents your binding source from [**DependencyObject**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.dependencyobject), and expose a data value through a [**DependencyProperty**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.dependencyproperty). That's how a [**FrameworkElement**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.frameworkelement) becomes observable. A `FrameworkElement` is a good binding source right out of the box. + +A more lightweight way of making a class observable—and a necessary one for classes that already have a base class—is to implement [**System.ComponentModel.INotifyPropertyChanged**](/dotnet/api/system.componentmodel.inotifypropertychanged). This really just involves implementing a single event named `PropertyChanged`. An example using `HostViewModel` is below. + +``` csharp +... +using System.ComponentModel; +using System.Runtime.CompilerServices; +... +public class HostViewModel : INotifyPropertyChanged +{ + private string nextButtonText; + + public event PropertyChangedEventHandler PropertyChanged = delegate { }; + + public HostViewModel() + { + NextButtonText = "Next"; + } + + public string NextButtonText + { + get { return nextButtonText; } + set + { + nextButtonText = value; + OnPropertyChanged(); + } + } + + public void OnPropertyChanged([CallerMemberName] string propertyName = null) + { + // Raise the PropertyChanged event, passing the name of the property whose value has changed. + PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); + } +} +``` + +Now the `NextButtonText` property is observable. When you author a one-way or a two-way binding to that property (we'll show how later), the resulting binding object subscribes to the `PropertyChanged` event. When that event is raised, the binding object's handler receives an argument containing the name of the property that has changed. That's how the binding object knows which property's value to go and read again. + +So that you don't have to implement the pattern shown above multiple times, if you're using C# then you can just derive from the `BindableBase` base class that you'll find in the [QuizGame](https://github.com/microsoft/Windows-appsample-networkhelper) sample (in the "Common" folder). Here's an example of how that looks. + +``` csharp +public class HostViewModel : BindableBase +{ + private string nextButtonText; + + public HostViewModel() + { + NextButtonText = "Next"; + } + + public string NextButtonText + { + get { return nextButtonText; } + set { SetProperty(ref nextButtonText, value); } + } +} +``` + +Raising the `PropertyChanged` event with an argument of [**String.Empty**](/dotnet/api/system.string.empty) or `null` indicates that all non-indexer properties on the object should be re-read. You can raise the event to indicate that indexer properties on the object have changed by using an argument of "Item\[*indexer*\]" for specific indexers (where *indexer* is the index value), or a value of "Item\[\]" for all indexers. + +A binding source can be treated either as a single object whose properties contain data, or as a collection of objects. In C# code, you can one-time bind to an object that implements [**List<T>**](/dotnet/api/system.collections.generic.list-1) to display a collection that doesn't change at run-time. For an observable collection (observing when items are added to and removed from the collection), one-way bind to [**ObservableCollection<T>**](/dotnet/api/system.collections.objectmodel.observablecollection-1) instead. To bind to your own collection classes, use the guidance in the following table. + +| Scenario | C# (CLR) | C++/WinRT | +|-|-|-| +| Bind to an object. | Can be any object. | Can be any object. | +| Get property change notifications from a bound object. | Object must implement [**INotifyPropertyChanged**](/dotnet/api/system.componentmodel.inotifypropertychanged). | Object must implement [**INotifyPropertyChanged**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.inotifypropertychanged). | +| Bind to a collection. | [**List<T>**](/dotnet/api/system.collections.generic.list-1) | [**IVector**](/uwp/api/windows.foundation.collections.ivector_t_) of [**IInspectable**](/windows/win32/api/inspectable/nn-inspectable-iinspectable), or [**IBindableObservableVector**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.interop.ibindableobservablevector). See [XAML items controls; bind to a C++/WinRT collection](/windows/uwp/cpp-and-winrt-apis/binding-collection) and [Collections with C++/WinRT](/windows/uwp/cpp-and-winrt-apis/collections). | +| Get collection change notifications from a bound collection. | [**ObservableCollection<T>**](/dotnet/api/system.collections.objectmodel.observablecollection-1)|[**IObservableVector**](/uwp/api/windows.foundation.collections.iobservablevector_t_) of [**IInspectable**](/windows/win32/api/inspectable/nn-inspectable-iinspectable). For example, [**winrt::single_threaded_observable_vector<T>**](/uwp/cpp-ref-for-winrt/single-threaded-observable-vector). | +| Implement a collection that supports binding. | Extend [**List<T>**](/dotnet/api/system.collections.generic.list-1) or implement [**IList**](/dotnet/api/system.collections.ilist), [**IList**](/dotnet/api/system.collections.generic.ilist-1)<[**Object**](/dotnet/api/system.object)>, [**IEnumerable**](/dotnet/api/system.collections.ienumerable), or [**IEnumerable**](/dotnet/api/system.collections.generic.ienumerable-1)<Object>. Binding to generic `IList` and `IEnumerable` is not supported. | Implement [**IVector**](/uwp/api/windows.foundation.collections.ivector_t_) of [**IInspectable**](/windows/win32/api/inspectable/nn-inspectable-iinspectable). See [XAML items controls; bind to a C++/WinRT collection](/windows/uwp/cpp-and-winrt-apis/binding-collection) and [Collections with C++/WinRT](/windows/uwp/cpp-and-winrt-apis/collections). | +| Implement a collection that supports collection change notifications. | Extend [**ObservableCollection<T>**](/dotnet/api/system.collections.objectmodel.observablecollection-1) or implement (non-generic) [**IList**](/dotnet/api/system.collections.ilist) and [**INotifyCollectionChanged**](/dotnet/api/system.collections.specialized.inotifycollectionchanged). | Implement [**IObservableVector**](/uwp/api/windows.foundation.collections.iobservablevector_t_) of [**IInspectable**](/windows/win32/api/inspectable/nn-inspectable-iinspectable), or [**IBindableObservableVector**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.interop.ibindableobservablevector). | +| Implement a collection that supports incremental loading. | Extend [**ObservableCollection<T>**](/dotnet/api/system.collections.objectmodel.observablecollection-1) or implement (non-generic) [**IList**](/dotnet/api/system.collections.ilist) and [**INotifyCollectionChanged**](/dotnet/api/system.collections.specialized.inotifycollectionchanged). Additionally, implement [**ISupportIncrementalLoading**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.isupportincrementalloading). | Implement [**IObservableVector**](/uwp/api/windows.foundation.collections.iobservablevector_t_) of [**IInspectable**](/windows/win32/api/inspectable/nn-inspectable-iinspectable), or [**IBindableObservableVector**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.interop.ibindableobservablevector). Additionally, implement [**ISupportIncrementalLoading**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.isupportincrementalloading) | + +You can bind list controls to arbitrarily large data sources, and still achieve high performance, by using incremental loading. For example, you can bind list controls to Bing image query results without having to load all the results at once. Instead, you load only some results immediately, and load additional results as needed. To support incremental loading, you must implement [**ISupportIncrementalLoading**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.isupportincrementalloading) on a data source that supports collection change notifications. When the data binding engine requests more data, your data source must make the appropriate requests, integrate the results, and then send the appropriate notifications in order to update the UI. + +### Binding target + +In the two examples below, the `Button.Content` property is the binding target, and its value is set to a markup extension that declares the binding object. First [{x:Bind}](/windows/uwp/xaml-platform/x-bind-markup-extension) is shown, and then [{Binding}](/windows/uwp/xaml-platform/binding-markup-extension). Declaring bindings in markup is the common case (it's convenient, readable, and toolable). But you can avoid markup and imperatively (programmatically) create an instance of the [**Binding**](/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.data.binding) class instead if you need to. + +``` xaml +