You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: uwp/data-binding/xaml-basics-data-binding.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
---
2
2
title: Create data bindings
3
3
description: Learn how to create data bindings using XAML and C# to form a direct link between your UI and data by following this tutorial.
4
-
keywords: XAML, UWP, Getting Started
5
-
ms.date: 08/20/2020
4
+
keywords: XAML, UWP, Getting Started, windows 10, windows 11
5
+
ms.date: 04/14/2023
6
6
ms.topic: article
7
7
ms.localizationpriority: medium
8
8
---
@@ -18,14 +18,14 @@ The PhotoLab sample app has two pages. The _main page_ displays a photo gallery
18
18
19
19

20
20
21
-
The *details page* displays a single photo after it has been selected. A flyout editing menu allows the photo to be altered, renamed, and saved.
21
+
The _details page_ displays a single photo after it has been selected. A flyout editing menu allows the photo to be altered, renamed, and saved.
22
22
23
23

24
24
25
25
## Prerequisites
26
26
27
-
+ Visual Studio 2019: [Download Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) (The Community edition is free.)
28
-
+ Windows 10 SDK (10.0.17763.0 or later): [Download the latest Windows SDK (free)](https://developer.microsoft.com/windows/downloads/windows-10-sdk)
27
+
+ Visual Studio 2019 or later: [Download Visual Studio](https://visualstudio.microsoft.com/downloads/) (The Community edition is free.)
28
+
+ Windows SDK (10.0.17763.0 or later): [Download the latest Windows SDK (free)](https://developer.microsoft.com/windows/downloads/windows-sdk/)
29
29
+ Windows 10, Version 1809 or later
30
30
31
31
## Part 0: Get the starter code from GitHub
@@ -142,8 +142,8 @@ Run the app to see how it looks so far. No more placeholders! We're off to a goo
142
142
143
143

144
144
145
-
> [!Note]
146
-
>If you want to experiment further, try adding a new TextBlock to the data template, and use the x:Bind IntelliSense trick to find a property to display.
145
+
>[!NOTE]
146
+
>If you want to experiment further, try adding a new TextBlock to the data template, and use the x:Bind IntelliSense trick to find a property to display.
147
147
148
148
## Part 2: Use binding to connect the gallery UI to the images
The `Images` property value never changes, but because the property is of type `ObservableCollection<T>`, the *contents* of the collection can change, and the binding will automatically notice the changes and update the UI.
201
+
The `Images` property value never changes, but because the property is of type `ObservableCollection<T>`, the _contents_ of the collection can change, and the binding will automatically notice the changes and update the UI.
202
202
203
203
To test this, we're going to temporarily add a button that deletes the currently-selected image. This button isn't in the final version because selecting an image will take you to a detail page. However, the behavior of `ObservableCollection<T>` is still important in the final PhotoLab sample because the XAML is initialized in the page constructor (through the `InitializeComponent` method call), but the `Images` collection is populated later in the `GetItemsAsync` method.
204
204
@@ -227,8 +227,8 @@ To test this, we're going to temporarily add a button that deletes the currently
227
227
228
228
Now run the app and use the button to delete a few images. As you can see, the UI is updated automatically, thanks to data binding and the `ObservableCollection<T>` type.
229
229
230
-
> [!Note]
231
-
>This code only deletes the `ImageFileInfo` instance from the `Images` collection in the running app. It does not delete the image file from the computer.
230
+
>[!NOTE]
231
+
>This code only deletes the `ImageFileInfo` instance from the `Images` collection in the running app. It does not delete the image file from the computer.
232
232
233
233
## Part 3: Set up the zoom slider
234
234
@@ -263,9 +263,9 @@ Did you notice that these are `Binding` expressions, and not `x:Bind` expression
263
263
`Binding` expressions don't recognize the `x:DataType` value, but these `Binding` expressions have `ElementName` values that work almost the same way. These tell the binding engine that **Binding Value** is a binding to the `Value` property of the specified element on the page (that is, the element with that `x:Name` value). If you want to bind to a property in code-behind, it would look something like ```{Binding MyCodeBehindProperty, ElementName=page}``` where `page` refers to the `x:Name` value set in the `Page` element in XAML.
264
264
265
265
> [!NOTE]
266
-
> By default, `Binding` expressions are one-*way*, meaning that they will automatically update the UI when the bound property value changes.
266
+
> By default, `Binding` expressions are one-_way_, meaning that they will automatically update the UI when the bound property value changes.
267
267
>
268
-
> In contrast, the default for `x:Bind` is one-*time*, meaning that any changes to the bound property are ignored. This is the default because it's the most high-performance option, and most bindings are to static, read-only data.
268
+
> In contrast, the default for `x:Bind` is one-_time_, meaning that any changes to the bound property are ignored. This is the default because it's the most high-performance option, and most bindings are to static, read-only data.
269
269
>
270
270
> The lesson here is that if you use `x:Bind` with properties that can change their values, be sure to add `Mode=OneWay` or `Mode=TwoWay`. You'll see examples of this in the next section.
271
271
@@ -280,7 +280,7 @@ Run the app and use the slider to change the image-template dimensions. As you c
280
280
281
281
In this part, you'll add a custom `ItemSize` property to code-behind and create one-way bindings from the image template to the new property. The `ItemSize` value will be updated by the zoom slider and other factors such as the **Fit to screen** toggle and the window size, making for a more refined experience.
282
282
283
-
Unlike built-in control properties, your custom properties do not automatically update the UI, even with one-way and two-way bindings. They work fine with one-*time* bindings, but if you want your property changes to actually show up in your UI, you need to do some work.
283
+
Unlike built-in control properties, your custom properties do not automatically update the UI, even with one-way and two-way bindings. They work fine with one-_time_ bindings, but if you want your property changes to actually show up in your UI, you need to do some work.
284
284
285
285
### Create the ItemSize property so that it updates the UI
description: This section describes how to use the Remote Systems platform to discover remote devices, launch an app on a remote device, and communicate with an app service on a remote device.
This section explains how to connect apps across devices and platforms using [Project Rome](https://developer.microsoft.com/windows/project-rome). To learn how to implement Project Rome in a cross-platform scenario, visit the [main docs page for Project Rome](/windows/project-rome/).
12
+
This section explains how to connect apps across devices and platforms using **Project Rome**. To learn how to implement Project Rome in a cross-platform scenario, visit the [main docs page for Project Rome](/windows/project-rome/).
13
13
14
14
Most users have multiple devices and often begin an activity on one device and finish it on another. To accommodate this, apps need to span devices and platforms. Project Rome allows you to discover remote devices, launch an app on a remote device, and communicate with an app service on a remote device.
15
15
16
-
The [Remote Systems APIs](/uwp/api/Windows.System.RemoteSystems)
17
-
introduced in Windows 10, version 1607 enable you to write apps that allow users to start a task on one device and finish it on another. The task remains the central focus, and users can do their work on the device that is most convenient. For example, a user might be listening to the radio on their phone in the car, but when they get home they may want to transfer playback to their Xbox One which is hooked up to the home stereo system.
16
+
The [Remote Systems APIs](/uwp/api/Windows.System.RemoteSystems) introduced in Windows 10, version 1607 enable you to write apps that allow users to start a task on one device and finish it on another. The task remains the central focus, and users can do their work on the device that is most convenient. For example, a user might be listening to the radio on their phone in the car, but when they get home they may want to transfer playback to their Xbox One which is hooked up to the home stereo system.
18
17
19
18
You can also use Project Rome for companion devices or remote control scenarios. Use the app service messaging APIs to create an app channel between two devices to send and receive custom messages. For example, you can write an app for your phone that controls playback on your TV, or a companion app that provides information about the characters on a TV show you are watching through another app.
20
19
21
20
Devices can be connected proximally through Bluetooth and wireless, or remotely through the cloud; they are linked by the Microsoft account (MSA) of the person using them.
22
21
23
-
See the [Remote Systems UWP sample](https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/RemoteSystems) for examples of how to discover remote system, launch an app on a remote system, and use app services to send messages between apps running on two systems.
22
+
See the [Remote Systems UWP sample](https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/RemoteSystems) for examples of how to discover remote system, launch an app on a remote system, and use app services to send messages between apps running on two systems.
24
23
25
-
For more information on Project Rome in general, including resources for cross-platform integration, go to [aka.ms/project-rome](https://developer.microsoft.com/windows/project-rome).
24
+
For more information on Project Rome in general, including resources for cross-platform integration, go to [aka.ms/project-rome](/windows/project-rome/).
26
25
27
26
| Topic | Description |
28
27
|-------|-------------|
@@ -31,4 +30,4 @@ For more information on Project Rome in general, including resources for cross-p
31
30
|[Communicate with a remote app service](communicate-with-a-remote-app-service.md)| Learn how to interact with an app on a remote device. |
32
31
|[Connect devices through remote sessions](remote-sessions.md)| Create shared experiences across multiple devices by joining them in a remote session. |
33
32
|[Continue user activity, even across devices](useractivities.md)| Help users resume what they were doing in your app, even across multiple devices.|
34
-
|[User Activities best practices](useractivities-best-practices.md)| Learn the recommended practices for creating and updating User Activities.|
33
+
|[User Activities best practices](useractivities-best-practices.md)| Learn the recommended practices for creating and updating User Activities.|
0 commit comments