Guidance on creating custom dialogs or showing dialogs in avalonia.

[wyndn]

I've been trying to open viewmodels from usercontrols but I've not any articles or documentation that simplifies the process for a newbie.

I am using MVVM Community Toolkit and most of the implementations are simply too sophisticated. Is there a step-wise procedure or explanation on how to go about understanding this? The Music Store tutorial simply doesn't cut it, as it has little to no explanation on how new windows are handled.

[kyuranger]

I suggest using this would be better: https://github.com/AvaloniaUtils/DialogHost.Avalonia/

[thevortexcloud]

The Music Store tutorial does explain it, albeit not in a straightforward way as most things in ReactiveUI are not straightforwards. The simplified tl;dr for it is:

1. Make an interaction on your VM
2. Register a handler for the interaction in your view
3. Trigger the interaction in your view model whenever you want to display the dialogue
4. Show a dialogue in your view when the interaction is fired
5. Return the result back to the view model via the interaction. This allows for the user to select something and return the value back to your view model.

The result is your interaction makes a full round trip from your viewmodel, to your view and back to your view model.

If it helps you can think of Interactions as possibly blocking events that allow for data to go two ways (EG from the view model to the view and back). This decouples your view model from your presentation logic, as your view model only cares about the result of the dialogue. Your view model can also just sit there and wait for a result to get back from the interaction. But for most simple dialogues you probably don't want to block. In which case your view would just instantly handle the interaction, show the dialogue and return some default value (likely Unit.Default).

If you need a more detailed example, let me know. It took me awhile to get my head around it too.

I personally would be in favour of the tutorial being expanded upon since it skips/badly explains lot of stuff like this.

That said, interactions are not the only way to display dialogues. There are many others. Some follow the MVVM pattern better than others.

[timunie]

I'm working on a tutorial covering this. Also MusicStore will get an update once I have to time to do.

For now, I can offer this as a preview version of the tutorials:

• Rx-UI: https://github.com/timunie/Avalonia.Samples/tree/feature/MVVM_Dialogs/src/Avalonia.Samples/MVVM/MvvmDialogSample
• Other MVVM Libs: https://github.com/timunie/Avalonia.Samples/tree/feature/MVVM_Dialogs/src/Avalonia.Samples/MVVM/AdvancedMvvmDialogSample (my favorite tbh, but some more work to first setup. After that easy going)

[timunie]

let me know your feedback :-)

[cirrusone]

I'm using a combination of CommunityToolkit.Mvvm and Prism.Avalonia to achieve this. A good starting point is this sample Prism SampleDialogApp

In the ViewModelBase.cs you can replace BindableBase from the Prism.Mvvm namespace and replace it with ObservableObject from the CommunityToolkit.Mvvm.ComponentModel namespace and then you can use both Prism and CommunityToolkit.Mvvm across your project.

Prism.Avalonia allows using both it's own inbuilt dialog window or you can use register your own custom window. Eg register multiple dialogs with names

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.Register<MainWindow>();
            containerRegistry.RegisterDialogWindow<Prism.Services.Dialogs.DialogWindow>(nameof(Prism.Services.Dialogs.DialogWindow)); // Optionally register default DialogWindow if want choice.
            containerRegistry.RegisterDialogWindow<DialogHostCustomWindow>(nameof(DialogHostCustomWindow)); // Give it windowName so can be located
            containerRegistry.RegisterDialog<NotificationDialogView, NotificationDialogViewModel>();
        }

and then call the dialog choosing which DialogWindow to use, eg

        public DelegateCommand CmdShowRegular => new DelegateCommand(() =>
        {
            DialogParameters dialogParameters = new DialogParameters
            {
                { "Title","customize title!" },
                { "CustomMessage","customize message!" }
            };

            _dialogService.Show("NotificationDialogView", dialogParameters, r =>
            {
                if (r is null)
                {
                    Title = "Try again";
                    ReturnedResult = "Null result returned";
                }

                ReturnedResult = r.Result.ToString();

                // Same as if-statements, just a switch-expression.
                Title = r.Result switch
                {
                    ButtonResult.None => "Result is None",
                    ButtonResult.OK => "Result is OK",
                    ButtonResult.Cancel => "Result is Cancel",
                    _ => "I Don't know what you did!?",
                };
            //}, nameof(Prism.Services.Dialogs.DialogWindow)); // Inbuilt DialogWindow
            }, nameof(DialogHostCustomWindow));  // Custom user DialogWindow
 
        });

There are lots of ways of achieving this hence lots of examples. I found these libraries easier to grasp as I've used similar with WPF in the past. I had some recent help from the Prism.Avalonia community on how to implement custom DialogWindow, see this discussion link for more help AvaloniaCommunity/Prism.Avalonia#94

[damonpkuml]

the prism.avalonia can't show the devtools of the dialogwindow

[damonpkuml]

the prism.avalonia can't show the devtools of the dialogwindow

prism 9 solved it by custom dialog window

[stephannn]

Sorry to hijack this post, but I feel like I face the same challenge. Not a real programmer, just doing it as a kind hobby and struggling with opening a new view.
Regarding the Music store app I have same trouble to understand the connection between the MusicStoreWindow, MusicStoreView and AlbumView.
When clicking the button in the main window, the MusicStoreWindow opens with embedded MusicStoreView?!? Why can I not just open directly MusicStoreView, why do I need the window.
Also in the MainWindowViewModel.cs is Interaction be used:
public Interaction<MusicStoreViewModel, AlbumViewModel?> ShowDialog { get; }
Why do I have to place two views, when I only want to open one additional view?

Sorry for the confusion, but I am confused as he**

[thevortexcloud]

A window is a top level view, it holds other views. A user control cannot be directly displayed, as it is not a top level view. As such to display it you need to put it inside a top level control such as a window. There are other types of top level controls as well, but windows are the main one used on desktop style platforms.

The interaction you show only directly deals with a view model. A view and a view model are two very different things. To quote Microsoft's docs:

The view is responsible for defining the structure, layout, and appearance of what the user sees on screen. Ideally, each view is defined in XAML, with a limited code-behind that does not contain business logic. However, in some cases, the code-behind might contain UI logic that implements visual behavior that is difficult to express in XAML, such as animations.

The view model implements properties and commands to which the view can data bind to, and notifies the view of any state changes through change notification events. The properties and commands that the view model provides define the functionality to be offered by the UI, but the view determines how that functionality is to be displayed.

...

The view model is also responsible for coordinating the view's interactions with any model classes that are required. There's typically a one-to-many relationship between the view model and the model classes. The view model might choose to expose model classes directly to the view so that controls in the view can data bind directly to them. In this case, the model classes will need to be designed to support data binding and change notification events.

Each view model provides data from a model in a form that the view can easily consume. To accomplish this, the view model sometimes performs data conversion. Placing this data conversion in the view model is a good idea because it provides properties that the view can bind to. For example, the view model might combine the values of two properties to make it easier to display by the view.

In this case: The code behind for your view decide what to do with the view model given to it when the interaction is raised by the view model. In this case it will open a dialogue for you. It could also do something else with the view model or do nothing. It really depends on how you set up the interaction. The main point is your view model is not responsible for how view models are presented. That's the view's job.

I will leave a link here for the last time I tried to explain interactions. I agree though, they can be extremely confusing if you have never used them before.

#13484 (reply in thread)

[danielanywhere]

Hello everyone. Unfortunately, this is a much larger industry-wide problem that is hindering everyone's progress (everyone who doesn't natively write XAML as a second language, that is).

My name is Daniel Patterson, and I am the author of the SvgTools repository at danielanywhere/SvgTools.

I have devised a comprehensive method by which people can once again design forms the way they did prior to the disappearance of widget-based form construction, where visual-first, code-second processes worked in a much simpler way that visual people like me could easily relate to. The functionality is still new, so I currently only support Inkscape SVGs and Avalonia output, but the selection of tools will grow as the feature becomes more sophisticated.

The method is named Implied Form Design and the basic process is to create a basic SVG image, draw rectangles and other basic shapes, like images, etc., set the Label and ID values of your controls, and then run a special action (ImpliedDesignToAvaloniaXaml) in the command-line SvgTools application to convert that SVG directly to a XAML form compatible with an Avalonia UI desktop application for any target platform.

You can see a full description of that process at the front page of the SvgTools repository. The functionality is in an early state. If and when you run into obstacles or other blockages, please create issues so I can get them fixed.