Skip to content

Commit

Permalink
Update reactive-view-model.md
Browse files Browse the repository at this point in the history
I had great difficulty and confusion to properly use ReactiveUI with Avalonia. Due to the felxible nature of Avalonia, there was many different ways I found in the forums and even the current docs that is not really great for ReactiveUI. I have provided a simple example that works elegantly with the 11.x Avalonia and ReactiveUI.
  • Loading branch information
dbchandra23 authored Apr 28, 2024
1 parent e3e1482 commit 6238113
Showing 1 changed file with 62 additions and 0 deletions.
62 changes: 62 additions & 0 deletions docs/concepts/reactiveui/reactive-view-model.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,65 @@ Any change to the view model description property is achieved using the `set` ac
When _Avalonia UI_ uses the binding to **Update** the view model, the `set` accessor ensures that any parts of the view model that depend on the description property can also react to the change if necessary.

On the next page, you will learn how a reactive command acts as a special case of the view model update.

## Performing Data Validation
ReactiveUI provides the ability to perform data validation from the ViewModel that integrates well with the Avalonia fluent controls. The example shows how this can be done. The example is for a ViewModel that exposes a directory path string that is bounded to a TextBox control on the View.

Steps to enable data validation on the ViewModel:
1. Download the ReactiveUI.Validation nuget package (for desktop applications)
2. Change the inheritance of the ViewModel to ReactiveValidationObject
3. Include a this.ValidationRule in the ViewModel constructor, which provides the validation check for the ViewModel property and corresponding validation error message.

The code below shows the MainWindowViewModel.cs and MainWindow.axaml
```C#
using System.IO;
using ReactiveUI;
using ReactiveUI.Validation.Extensions;
using ReactiveUI.Validation.Helpers;

namespace AvaloniaApplication3.ViewModels;

public class MainWindowViewModel : ReactiveValidationObject
{
private string _directoryPath = string.Empty;

public string DirectoryPath
{
get => _directoryPath;
set => this.RaiseAndSetIfChanged(ref _directoryPath, value);
}

public MainWindowViewModel()
{
DirectoryPath = "C:\\BogusPath\\";
this.ValidationRule(
vm => vm.DirectoryPath,
path => Directory.Exists(path),
"You must specify a valid directory path.");

}
}
```
```xaml
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="using:AvaloniaApplication3.ViewModels"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaApplication3.Views.MainWindow"
x:DataType="vm:MainWindowViewModel"
Width="800" Height="300" WindowStartupLocation="CenterScreen"
Icon="/Assets/avalonia-logo.ico"
Title="AvaloniaApplication3">

<TextBox
Name="DirectoryPathTextBox"
VerticalAlignment="Top"
Text="{Binding DirectoryPath}"/>

</Window>
```
Below is the output:

![Avalonia-ReactiveUI-DataValidation](https://github.com/AvaloniaUI/avalonia-docs/assets/130417839/75aede6b-f8cc-4bb8-8520-f9a8f24aa779)

0 comments on commit 6238113

Please sign in to comment.