Skip to content

Commit

Permalink
Merge pull request #18039 from unoplatform/dev/ks/update-docs-mvux-bi…
Browse files Browse the repository at this point in the history
…ndableProxyName

docs: update docs for MVUX generated class
  • Loading branch information
agneszitte authored Aug 27, 2024
2 parents 60c6101 + 04d68e8 commit c3e1971
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 13 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 **`BindableMainModel`** class, we can update the **`MainPage`** to use data binding to connect the UI to the application logic.
Now that we have the **`MainViewModel`** 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 BindableMainModel(), (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 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:

```csharp
this.DataContext(new BindableMainModel(), (page, vm) => page
this.DataContext(new MainViewModel(), (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 **`BindableMainModel`**. 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 **`MainViewModel`**. 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 **`BindableMainModel`** class, we can update the **`MainPag
.Text(() => vm.Countable.Count, txt => $"Counter: {txt}")
```

- Update the **`TextBox`** by binding the **`Text`** property to the **`Countable.Step`** property of the **BindableMainModel**. 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 **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`**.

```csharp
new TextBox()
Expand All @@ -123,7 +123,7 @@ Now that we have the **`BindableMainModel`** class, we can update the **`MainPag
.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 **`BindableMainModel`**.
- Update the **`Button`** to add a **`Command`** property that is bound to the **`IncrementCounter`** task of the **`MainViewModel`**.

```csharp
new Button()
Expand All @@ -142,7 +142,7 @@ Now that we have the **`BindableMainModel`** class, we can update the **`MainPag
{
public MainPage()
{
this.DataContext(new BindableMainModel(), (page, vm) => page
this.DataContext(new MainViewModel(), (page, vm) => page
.Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
.Content(
new StackPanel()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,17 @@ Also, for more information on all the template options, see [Using the Uno Platf

## Data Binding

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

- Add a **`DataContext`** element to the **`Page`** element in the **MainPage.xaml** file.

```xml
<Page.DataContext>
<local:BindableMainModel />
<local:MainViewModel />
</Page.DataContext>
```

- Update the **`TextBlock`** by removing the **`Text`** attribute, replacing it with two **`Run`** elements, and binding the **`Text`** property of the second **`Run`** element to the **`Countable.Count`** property of the **BindableMainModel**.
- Update the **`TextBlock`** by removing the **`Text`** attribute, replacing it with two **`Run`** elements, and binding the **`Text`** property of the second **`Run`** element to the **`Countable.Count`** property of the **MainViewModel**.

```xml
<TextBlock Margin="12"
Expand All @@ -109,7 +109,7 @@ Now that we have the **`BindableMainModel`** class, we can update the **`MainPag
</TextBlock>
```

- Update the **`TextBox`** by binding the **`Text`** property to the **`Countable.Step`** property of the **BindableMainModel**. 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 **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`**.

```xml
<TextBox Margin="12"
Expand All @@ -119,7 +119,7 @@ Now that we have the **`BindableMainModel`** class, we can update the **`MainPag
TextAlignment="Center" />
```

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

```xml
<Button Margin="12"
Expand All @@ -137,7 +137,7 @@ The final code for **MainPage.xaml** should look like this:
xmlns:local="using:Counter"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.DataContext>
<local:BindableMainModel />
<local:MainViewModel />
</Page.DataContext>
<StackPanel VerticalAlignment="Center">
<Image Width="150"
Expand Down

0 comments on commit c3e1971

Please sign in to comment.