Chat in Split View/Content Control - Singleton VMs and Elmish Store(s)?

[hhaynes-rower]

I'm curious about your thoughts on holding more than one "context" in a single app view. For instance - there will be a part of the viewing area of application that's transient - like navigating between multiple dashboard layouts. But there's also a "sidebar" with on-going chat which persists in the user's view regardless of transient view of data they're navigating/filtering. @Jamie-Rower and I were looking at the Split View but also "Grid Splitter" in column split mode.

What we're trying to get our collective heads wrapped around is how to persist the chat window/context while transitioning through multiple views/view-models to the side. Does my description make sense? Is this beyond the scope of "static" views in Avalonia?

It strikes me that this could easily be handled by multiple static views - but then leverage some clever context switching. I mean - isn't that what "MainView" does? Why not do it again - putting two VMs inside one UserControl - with one "side" of a side-by-side display of two VMs never changing?

[JordanMarr]

You should be able to embed a chat view within the MainView using the same technique used to load the navigated view (except that it will be fixed).

[hhaynes-rower]

That's great - I'll play with that this weekend. 👍

[JordanMarr]

namespace AvaloniaExample.ViewModels

open ReactiveElmish
open ReactiveElmish.Avalonia
open App

type MainViewModel(root: CompositionRoot) =
    inherit ReactiveElmishViewModel()

    member this.ChatView = root.GetView<ChatViewModel>()    

    member this.ContentView = 
        this.BindOnChanged (app, _.View, fun m -> 
            match m.View with
            | TodoListView -> root.GetView<TodoListViewModel>()
            | CounterView -> root.GetView<CounterViewModel>()
            | AboutView -> root.GetView<AboutViewModel>()
            | ChartView -> root.GetView<ChartViewModel>()
            | FilePickerView -> root.GetView<FilePickerViewModel>()
        )

    member this.ShowTodoList() = app.Dispatch (SetView TodoListView)
    member this.ShowChart() = app.Dispatch (SetView ChartView)
    member this.ShowCounter() = app.Dispatch (SetView CounterView)
    member this.ShowAbout() = app.Dispatch (SetView AboutView)
    member this.ShowFilePicker() = app.Dispatch (SetView FilePickerView)

    static member DesignVM = new MainViewModel(Design.stub)