Running a function from the viewmodel on view load in Avalonia using the MVVM pattern

[matthew-west-unity]

Hello!

As per the title, I am writing an MVVM application (I'm relatively new to MVVM as a pattern). I have a "Submit" button on the main window that will open a new user control with a progress bar for the submission to take place. I have everything hooked up to open the control but was unsure how to make it so that "When the control is initialised, immediately run the submission function on the controls ViewModel."

So far, I've used commands and interactions to 'react' to user input, but in this case, as soon as the View/ViewModel initialises it, I wanted to start this process without any direct interaction from the user.

I would normally put this in the constructor if it needed to pull some information from a service before rendering the component or hook it up as a command to a button, but in this case, I want it to be an asynchronous process that updates the progress percent property of the ViewModel as it progresses.

Any help or guidance is appreciated. Thanks for your time!

I've removed/changed names and other functions/properties for brevity but roughly it is as follows:

public class SubmitDialogViewModel : ViewModelBase
{
    private int _progressPercent;

    
    public SubmitDialogViewModel()
    {
        ProgressPercent = 0;
    }

    public async Task Submit()
    {
        //Do something
        ProgressPercent = 50;

        //Do something else
        ProgressPercent = 100;

        //Finish
    }
    
    public int ProgressPercent
    {
        get => _progressPercent;
        set => this.RaiseAndSetIfChanged(ref _progressPercent, value);
    }
}

public partial class SubmitDialogView : UserControl
{
    public SubmitDialogView()
    {
        InitializeComponent();
    }
}

User Control XAML:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:viewModels="clr-namespace:MyNamespace.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="MyNamespace.Views.SubmitDialogView"
             x:DataType="viewModels:SubmitDialogViewModel">
    <StackPanel>
        <CircleProgressBar Height="130" StrokeWidth="11" Value="{Binding ProgressPercent}" Width="130" Margin="15" />
    </StackPanel>
</UserControl>

[thevortexcloud]

If you are using ReactiveUI, there is built in functionality to trigger things when the view is activated. You just need to make your control inherit from ReactiveUserControl and make your viewmodel implement IActivatableViewModel.

https://www.reactiveui.net/docs/handbook/when-activated.html

Async can get a bit more annoying though, but there are ways to do it.

Otherwise, there is nothing in the MVVM pattern preventing your view from directly calling your view model (the view is allowed to know about the viewmodel, the viewmodel is not allowed to know about the view). It's just generally considered to be a bad idea since it can make your code less portable. But you could just have an async event handler that calls a method on your view model when the view is first loaded.

[matthew-west-unity]

Thanks! I am using ReactiveUI and I'll look into swapping it over to using the ReactiveUserControl / IActivatableViewModel.

I originally had it working by calling the view model directly but wanted to improve my knowledge on MVVM and do it 'properly'.

Thanks for your insights!

[timunie]

Also worth a look: https://github.com/AvaloniaUI/Avalonia.Samples?tab=readme-ov-file#view-interaction-samples