How to open a child window without needing to update app.axaml?

[Shadowblitz16]

1. How do I connect IWindowManager to IWindowFactory?
2. How do I get the view from the view model?
3. Do I even need to get the view from the view model or can I pass it in somehow?
4. Where do I construct their concrete implimentation?
5. Is it possible to do this without editing App.xaml or App.xaml.cs for every window implementation?
6. Is it possible to do this without passing it manually to the view model constructor?
7. Is there a better way to do this then what I am trying to get help with here?

public interface IWindowManager
{
    public void ShowWindow    (ViewModelBase viewModel);
    public void CloseWindow   (ViewModelBase viewModel);
    public void ToggleWindow  (ViewModelBase viewModel);
    public void ActivateWindow(ViewModelBase viewModel);

    public void ShowDialog    (ViewModelBase viewModel);
}

public interface IWindowFactory
{
    Window CreateWindow(ViewModelBase viewModel);
}

public abstract partial class ViewModelBase : ObservableObject
{
  
}

I am trying to do mvvm child window's.

[stevemonaco]

1. How do I connect IWindowManager to IWindowFactory?

In your concrete implementation, one will have a constructor to take the other. Likely public WindowManager(IWindowFactory windowFactory).

2. How do I get the view from the view model?

You can create a mapping in your View layer. Cleanup to prevent leaks may be difficult.

You can also use DI scoping to create a scope per window and register certain services as scoped. When the service is injected, it will be associated with the right window behind-the-scenes as long as the ViewModel doesn't get transferred across windows. I found that approach to be very challenging, but I also had several other wiring concerns. It does work very well though.

3. Do I even need to get the view from the view model or can I pass it in somehow?

It's hard to resolve which Window a VM is associated with. IClassicDesktopStyleApplicationLifetime contains a Windows member which you could crawl to locate the VM. Hard to do performantly, AFAIK.

4. Where do I construct their concrete implimentation?

When you setup of your IoC container: before MainWindow is shown in OnFrameworkInitializationCompleted.

5. Is it possible to do this without editing App.xaml or App.xaml.cs for every window implementation?

You'll only have one App. I have separate Window implementations because we want different customizations for each Window, but not because it can't be wired otherwise.

6. Is it possible to do this without passing it manually to the view model constructor?

Without passing the WindowManager to the VM? Technically, you can use events or messages which the associated View's code-behind will respond to. Events are a pain, but they are direct-coupling (means you don't have to worry about windowing). Messages are easier, but you either need scoped DI or to pass something from View to ViewModel so the Messenger knows which View should receive it. In the case where you have multiple Windows of a similar type. It could be passing a preconfigured Messenger itself.

7. Is there a better way to do this then what I am trying to get help with here?

You can try a third-party library like https://github.com/mysteryx93/HanumanInstitute.MvvmDialogs.

https://github.com/irihitech/Ursa.Avalonia has a decent-looking in-app / external dialog system.

I've written a few and it's painful every time for me. The wiring can get really tricky. The current system I wrote is the only one that really handles external Windows well. As in, if I open a dialog with multiple windows open, it will open above the correct Window.

If that's not a big issue, just grab the app lifetime and then the MainWindow from your service and use that to launch the dialog/window.

[thevortexcloud]

How do I get the view from the view model?

If you are following MVVM strictly, you don't. View Models are not allowed to directly interact (or even be aware of) with the view. Instead you can use something like a view interaction/raising an event to the view. I explained this sort of thing a long time ago here: #13484 (reply in thread)

Is it possible to do this without editing App.xaml or App.xaml.cs for every window implementation?

I assume you are talking about a template? They need to be defined somewhere. You can either do that with a view locator or by manually specifying the template somewhere.

https://docs.avaloniaui.net/docs/concepts/view-locator

[Shadowblitz16]

So what about something like this instead of a window manager?

public partial class WindowHost : UserControl
{
    private Window? _window;
    public WindowHost()
    {
        Loaded += (sender, args) =>
        {
            if (_window == null && DataContext is WindowHostViewModel context)
            {
                _window = new() {
                    Content   = Content,
                    IsVisible = false
                };
                _window.DataContext = context;
                _window.Bind(Window.IsVisibleProperty, new Binding()
                {
                    Source = context,
                    Path = nameof(WindowHostViewModel.Visible)
                });
                _window.Activate();
            }
        };
    }
}

public partial class WindowHostViewModel : ViewModelBase, IWindowHost
{
    [ObservableProperty] private bool _visible;
    public void Toggle()
    {
        Visible = !Visible;
    }

    public void Show()
    {
        Visible = true;
    }

    public void Hide()
    {
        Visible = false;
    }
}

public interface IWindowHost
{
    public void Toggle();
    public void Show();
    public void Hide();
}

And then putting this into the main view...

        <local:WindowHost>
            <local:CheckBoxListView DataContext ="{Binding Layers}"/>
        </local:WindowHost>

The only issue with this approach is views can only have one content item.

[thevortexcloud]

I am not sure that is the right approach either. Typically you have a top level window that all other windows are parented to.

The only issue with this approach is views can only have one content item.

You could do a router style pattern instead. But that's typically used for Single window applications. Although there is no reason you can't do it for multi window applications. The basic concept is you create a top level view that binds to a "Page", and then your view models can raise events to a router which changes what gets displayed on the page (EG to display a different view model). Although in your case I guess it would just display a new window. Here is part of the code for a router I never finished (although it does work) that uses URL routing which might get you close:

   public class MainViewModel : ViewModelBase {
        #region Private readonly variables
        private readonly Router<ViewModelBase> _router;
        private string _currentRoute;
        #endregion

        #region Public properties
        public ViewModelBase CurrentPage => this._router.CurrentPage;
        public ICommand GoBackCommand { get; }

        public string CurrentRoute => this._router.CurrentRoute;

        public ICommand GoToPageCommand { get; }
        #endregion

        #region Constructors
        public MainViewModel(Router<ViewModelBase> router) {
            this._router = router;
            this._router.PropertyChanged += (sender, args) => {
                this.OnPropertyChanged(nameof(this.CurrentPage));
                this.OnPropertyChanged(nameof(this.CurrentRoute));
            };

            this.GoToPageCommand = new RelayCommand<string>(this.GoToPageHandler);
            this.GoBackCommand = new RelayCommand(this.GoBackHandler);
        }
        #endregion

        #region Private methods
        private void GoBackHandler() {
            this._router.GoBack();
        }

        private void GoToPageHandler(string obj) {
            this._router.GoTo(obj);
        }
        #endregion
    }

Main window

 <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="Back"
                      Command="{CompiledBinding GoBackCommand}"
                       />
        </Menu>
        <TextBlock Text="{CompiledBinding CurrentRoute}"
                   DockPanel.Dock="Top"
                   HorizontalAlignment="Center"/>
        <Grid ColumnDefinitions="auto *">
            <StackPanel Orientation="Vertical" Margin="10">
                <StackPanel.Styles>
                    <Style Selector="Button">
                        <Setter Property="Width" Value="100" />
                        <Setter Property="HorizontalContentAlignment" Value="Center" />
                    </Style>
                </StackPanel.Styles>
                <Button Content="Main" Command="{CompiledBinding GoToPageCommand}" CommandParameter="ViewModels/First" />
                <Button Content="Test" Command="{CompiledBinding GoToPageCommand}" CommandParameter="ViewModels/Second" />

            </StackPanel>

            <ContentControl Grid.Column="1" Content="{CompiledBinding CurrentPage}" />
        </Grid>
    </DockPanel>

etc.

You can also change that to use View Model routing instead of URL routing. Which makes it strongly typed. Which is how ReactiveUI does it

https://docs.avaloniaui.net/docs/concepts/reactiveui/routing

[Shadowblitz16]

I am not sure that is the right approach either. Typically you have a top level window that all other windows are parented to.

The only issue with this approach is views can only have one content item.

You could do a router style pattern instead. But that's typically used for Single window applications. Although there is no reason you can't do it for multi window applications. The basic concept is you create a top level view that binds to a "Page", and then your view models can raise events to a router which changes what gets displayed on the page (EG to display a different view model). Although in your case I guess it would just display a new window. Here is part of the code for a router I never finished (although it does work) that uses URL routing which might get you close:

   public class MainViewModel : ViewModelBase {
        #region Private readonly variables
        private readonly Router<ViewModelBase> _router;
        private string _currentRoute;
        #endregion

        #region Public properties
        public ViewModelBase CurrentPage => this._router.CurrentPage;
        public ICommand GoBackCommand { get; }

        public string CurrentRoute => this._router.CurrentRoute;

        public ICommand GoToPageCommand { get; }
        #endregion

        #region Constructors
        public MainViewModel(Router<ViewModelBase> router) {
            this._router = router;
            this._router.PropertyChanged += (sender, args) => {
                this.OnPropertyChanged(nameof(this.CurrentPage));
                this.OnPropertyChanged(nameof(this.CurrentRoute));
            };

            this.GoToPageCommand = new RelayCommand<string>(this.GoToPageHandler);
            this.GoBackCommand = new RelayCommand(this.GoBackHandler);
        }
        #endregion

        #region Private methods
        private void GoBackHandler() {
            this._router.GoBack();
        }

        private void GoToPageHandler(string obj) {
            this._router.GoTo(obj);
        }
        #endregion
    }

Main window

 <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="Back"
                      Command="{CompiledBinding GoBackCommand}"
                       />
        </Menu>
        <TextBlock Text="{CompiledBinding CurrentRoute}"
                   DockPanel.Dock="Top"
                   HorizontalAlignment="Center"/>
        <Grid ColumnDefinitions="auto *">
            <StackPanel Orientation="Vertical" Margin="10">
                <StackPanel.Styles>
                    <Style Selector="Button">
                        <Setter Property="Width" Value="100" />
                        <Setter Property="HorizontalContentAlignment" Value="Center" />
                    </Style>
                </StackPanel.Styles>
                <Button Content="Main" Command="{CompiledBinding GoToPageCommand}" CommandParameter="ViewModels/First" />
                <Button Content="Test" Command="{CompiledBinding GoToPageCommand}" CommandParameter="ViewModels/Second" />

            </StackPanel>

            <ContentControl Grid.Column="1" Content="{CompiledBinding CurrentPage}" />
        </Grid>
    </DockPanel>

etc.

You can also change that to use View Model routing instead of URL routing. Which makes it strongly typed. Which is how ReactiveUI does it

https://docs.avaloniaui.net/docs/concepts/reactiveui/routing

Idk I have been trying to find a good way to do it I understand and have yet to find something.
I would just attach the window as a child of the mainview and bind to it's viewmodel but windows can't have windows as content.
The WindowHost idea was what I came up when thinking about it when trying to goto sleep last night.

There really needs to be a better solution to this.
I have looked at other libraries too and they are either undocumented, have errors, or don't do what I want.

[Shadowblitz16]

@thevortexcloud Is it possible to register control content in the view without specifically putting it in the content/layout section of the axaml?

Like maybe putting it as a resource instead?

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:Quest.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="Quest.Views.MainView"
        x:DataType="vm:MainViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="Quest">
    
    <Window.Resources>
        <WindowHost Title="My Window" Width="320" Height="240">
            <!-- Content here -->
        </WindowHost>
    </Window.Resources>

public class WindowHost : ???
{
    private Window? _window;
    
    // Bind or set these in parent window
    public string Title { get; set; } = "New Window";
    public uint Width { get; set; } = 600;
    public uint Height { get; set; } = 480;
    
    // Bind viewmodel isvisble to these
    private void ShowWindow()
    {
        if (_window == null)
        {
            _window = new Window();
            _window.Content =  ???;
            _window.Title = Title;
            _window.Width = Width;
            _window.Height = Height;
        }

        _window.Show();
    }

    private void HideWindow()
    {
        _window?.Hide();
    }
}

public partial class WindowHostModel : BaseViewModel
{
    [ObservableProperty] private bool _isVisible = false;

    [RelayCommand]
    private void Show()
    {
        IsVisible = true;
    }
    
    [RelayCommand]
    private void Hide()
    {
        IsVisible = false;
    }

    [RelayCommand]
    private void Toggle()
    {
        IsVisible = !IsVisible;
    }
}

[thevortexcloud]

It sort of depends on what you mean by content. You could probably do it via a style. You could also do a similar thing with a static resource and binding the resource to the content property of the control. You can also set the content in the code behind for a control. Although it's a bit of a pain to do. There is this library which makes it easier though.

https://github.com/AvaloniaUI/Avalonia.Markup.Declarative

But it actually sounds like you want to use a DataTemplate. In which case you can just use a ContentControl and bind it to what ever view model you want, and then Avalonia will try to workout which template to use for you (the template is the view content that gets used for the view model). Which is what the sample code I provided earlier does. DataTemplates can be registered at the top level of the view, the application level or the control level. Avalonia will search up from the content control until it finds a matching template. You can also have dynamic DataTemplates if you are willing to implement IDataTemplate yourself.

https://docs.avaloniaui.net/docs/get-started/wpf/datatemplates
https://github.com/AvaloniaUI/Avalonia.Samples/tree/main/src/Avalonia.Samples/DataTemplates/IDataTemplateSample

[Shadowblitz16]

Both the things you linked don't really help me.

I don't understand what these things are and how it related to the code I posted above.

I have been trying to find a way to do multiple windows or dockable windows for the past 3 weeks and have come up with nothing.

I either don't understand how things work and how to structure them, they don't work when I try the examples, or they have no documentation.

Avalonia needs a way to do multiple windows badly, I suggested you guys make a docking window controls but you guys shut it down telling me if it was done it would be a paid product.

Your library seems to be really basic or require a high level of understanding of mvvm and itself to do anything.

This is not a good way to get people to use avalonia.

You guys need to provide some sort of WindowHost control that binds to a IWindowService in the view model.
Multiple windows are basic things that your library lacks.

I am not saying you guys need to do dockable windows but you should at least have some way to do child windows, and dialogs.