Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update get-started-counter-csharp-mvux.md #18679

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -89,20 +89,20 @@ Also, for more information on all the template options, see [Using the Uno Platf

## Data Binding

Now that we have the **`MainViewModel`** class, we can update the **`MainPage`** to use data binding to connect the UI to the application logic.
Now that we have the **`MainModel`** class, we can update the **`MainPage`** to use data binding to connect the UI to the application logic.

- Let's add the **`DataContext`** to our page. To do so, add `.DataContext(new MainViewModel(), (page, vm) => page` before `.Background(...)`. Remember to close the **`DataContext`** expression with a `)` at the end of the code. It should look similar to the code below:
- Let's add the **`DataContext`** to our page. To do so, add `.DataContext(new MainModel(), (page, vm) => page` before `.Background(...)`. Remember to close the **`DataContext`** expression with a `)` at the end of the code. It should look similar to the code below:

```csharp
this.DataContext(new MainViewModel(), (page, vm) => page
this.DataContext(new MainModel(), (page, vm) => page
.Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
.Content(
...
)
);
```

- Update the **`TextBlock`** by removing its current text content and replacing it with a binding expression for the **`Countable.Count`** property of the **`MainViewModel`**. Modify the existing **`Text`** property with `() => vm.Countable.Count, txt => $"Counter: {txt}"`. The adjusted code is as follows:
- Update the **`TextBlock`** by removing its current text content and replacing it with a binding expression for the **`Countable.Count`** property of the **`MainModel`**. Modify the existing **`Text`** property with `() => vm.Countable.Count, txt => $"Counter: {txt}"`. The adjusted code is as follows:

```csharp
new TextBlock()
Expand All @@ -112,7 +112,7 @@ Now that we have the **`MainViewModel`** class, we can update the **`MainPage`**
.Text(() => vm.Countable.Count, txt => $"Counter: {txt}")
```

- Update the **`TextBox`** by binding the **`Text`** property to the **`Countable.Step`** property of the **MainViewModel**. The **`Mode`** of the binding is set to **`TwoWay`** so that the **`Countable.Step`** property is updated when the user changes the value in the **`TextBox`**.
- Update the **`TextBox`** by binding the **`Text`** property to the **`Countable.Step`** property of the **MainModel**. The **`Mode`** of the binding is set to **`TwoWay`** so that the **`Countable.Step`** property is updated when the user changes the value in the **`TextBox`**.

```csharp
new TextBox()
Expand All @@ -123,7 +123,7 @@ Now that we have the **`MainViewModel`** class, we can update the **`MainPage`**
.Text(x => x.Binding(() => vm.Countable.Step).TwoWay())
```

- Update the **`Button`** to add a **`Command`** property that is bound to the **`IncrementCounter`** task of the **`MainViewModel`**.
- Update the **`Button`** to add a **`Command`** property that is bound to the **`IncrementCounter`** task of the **`MainModel`**.

```csharp
new Button()
Expand All @@ -142,7 +142,7 @@ Now that we have the **`MainViewModel`** class, we can update the **`MainPage`**
{
public MainPage()
{
this.DataContext(new MainViewModel(), (page, vm) => page
this.DataContext(new MainModel(), (page, vm) => page
.Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
.Content(
new StackPanel()
Expand Down
Loading