FluentAvalonia NavigationView Events

[houstonhaynes]

So - I got excited about incorporating the FluentAvalonia Theme, Control & Font libraries into my app. In fact, I was going to update the example app to use it and post a PR or leave a branch showing it. However the honeymoon is already over... OK, actually my newb-ness with the conventions in Avalonia are showing. I can't seem to get my head (or more aptly - the code) wrapped around the actual use of the NavigationView - which events to trigger and how to bind them to the ViewModel selection. Honestly - I was expecting this to be a bit more direct.

I've been looking at the API and I see a handful of Events that are good candidates but I just can't quite seem to get over the hump. Here's where I stand at the moment.

I've mainly been wrestling with SelectionChanged and ItemInvoked and keep getting the same type of error at compile-time (it's not lighting up in Rider beforehand)

0>MainView.axaml(24,22): Error AVLN:0004 Avalonia: Unable to find suitable setter or adder for property SelectionChanged of type FluentAvalonia:FluentAvalonia.UI.Controls.NavigationView for argument Avalonia.Markup.Xaml:Avalonia.Markup.Xaml.MarkupExtensions.CompiledBindingExtension, available setter parameter lists are:
System.EventHandler`1<FluentAvalonia.UI.Controls.NavigationViewSelectionChangedEventArgs> Line 24, position 22.

<Window 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:con="using:FluentAvalonia.UI.Controls"
        mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="850"
        Width="1200" Height="850"
        x:Class="AidenDesktop.Views.MainView"
        Icon="/Assets/SpeakEZ.ico"
        xmlns:vm="using:AidenDesktop.ViewModels"
        Design.DataContext="{Binding Source={x:Static vm:MainViewModel.DesignVM}}"
        x:DataType="vm:MainViewModel"
        Title="SpeakEZ.ai :: Aiden Prototype">

 <DockPanel LastChildFill="true">
  <Grid DockPanel.Dock="Top" Classes="nav">
  </Grid>
  <con:NavigationView AlwaysShowHeader="True"
                     PaneDisplayMode="Left"
                     Name="NavView"
                     IsSettingsVisible="False"
                     IsBackEnabled="False"
                     MenuItems="{Binding NavigationViewItems}"
                     ItemInvoked="{Binding ItemInvokedCommand}">
  </con:NavigationView>
  <Panel>
   <SplitView IsPaneOpen="True"  DockPanel.Dock="Right" PanePlacement="Right" PaneBackground="Aqua" >
    <SplitView.Content>
     <ContentControl Content="{Binding ContentView}" />
    </SplitView.Content>
    <SplitView.Pane>
     <ContentControl Content="{Binding ChatView}" />
    </SplitView.Pane>
   </SplitView>
  </Panel>
 </DockPanel>

</Window>

namespace AidenDesktop.ViewModels

open ReactiveElmish
open ReactiveElmish.Avalonia
open App
open FluentAvalonia.UI.Controls
open ReactiveUI
open System.Threading.Tasks

type MainViewModel(root: CompositionRoot) as self =
    inherit ReactiveElmishViewModel()
    
    let itemInvokedCommand : ReactiveCommand<NavigationViewItem, System.Reactive.Unit> =
        ReactiveCommand.CreateFromTask<NavigationViewItem>(self.Show)
    member self.ItemInvokedCommand with get() = itemInvokedCommand

    member self.ChatView = root.GetView<ChatViewModel>()
    member self.ContentView =
        self.BindOnChanged (app, _.View, fun m ->
            match m.View with
            | CounterView -> root.GetView<CounterViewModel>()
            | DoughnutView -> root.GetView<DoughnutViewModel>()
            | ChartView -> root.GetView<ChartViewModel>()
            | FilePickerView -> root.GetView<FilePickerViewModel>()
            | AboutView -> root.GetView<AboutViewModel>()
        )

    member self.NavigationViewItems =
        [
            NavigationViewItem(Content = "Basic Counter", Tag = "CounterViewModel" )
            NavigationViewItem(Content = "Time Series", Tag = "ChartViewModel")
            NavigationViewItem(Content = "Map Dashboard", Tag = "DoughnutViewModel")
            NavigationViewItem(Content = "File Picker", Tag = "FilePickerViewModel")
            NavigationViewItem(Content = "About", Tag = "AboutViewModel")
        ]

    member self.Show(item: NavigationViewItem) =
        match item.Tag with
        | :? string as tag ->
            match tag with
            | "CounterViewModel" -> app.Dispatch (SetView CounterView)
            | "ChartViewModel" -> app.Dispatch (SetView ChartView)
            | "DoughnutViewModel" -> app.Dispatch (SetView DoughnutView)
            | "FilePickerViewModel" -> app.Dispatch (SetView FilePickerView)
            | "AboutViewModel" -> app.Dispatch (SetView AboutView)
            | _ -> ()
        | _ -> ()
        Task.CompletedTask

    static member DesignVM = new MainViewModel(Design.stub)

I put a branch with the current state of things here

[houstonhaynes]

Nevermind - I just saw a TON of code-behind in the actual navigation code for the sample app. It's not mentioned anywhere in the documentation - makes me wonder if there's a more elegant way to handle this in ReactiveUI but I don't have the exp for it. I'm just going to do my best at C# to F# translation and get things to work.

[JordanMarr]

The fancy sliding sidebar is always nice. I agree that it would be beneficial to have as a sample as other people will likely want to use it as well.

It sounds like it is definitely worth checking out as long as you do it as a "spike" with a time limit. That way, if it's a quagmire, you limit the amount of time stuck. Hopefully this implementation "just works".

It also depends on how nice (or not nice) that API is. I found it to be very convoluted and maybe a bit to "OOP" in MAUI for my tastes. I also dislike having to spend too much effort in the code-behind to get things working.

[houstonhaynes]

I agree. I'm of the mind to try to "pay it down for the demo" and then see if it really gains traction with users. If this app (or company) sees enough funding to cold-start a library that doesn't have the same OO hang-ups, I'd love to open-source is and make it available to the community.

[houstonhaynes]

@Jamie-Rower is doing some fine work in stitching things together with that Navigation View - no code-behind yet.

[houstonhaynes]

[JordanMarr]

That looks great!