Skip to content

Commit

Permalink
Update get-started-counter-csharp-mvux.md
Browse files Browse the repository at this point in the history
  • Loading branch information
JohannesMP authored Nov 4, 2024
1 parent ecc4884 commit 14ff2d9
Showing 1 changed file with 7 additions and 7 deletions.
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

0 comments on commit 14ff2d9

Please sign in to comment.