Avalonia UI - 03 - Sidebar Menu

In this episode we'll see how to create a cool sidebar menu using the SplitView control and Avalonia fluent icons.
► GitHub repo: github.com/MammaMiaDev/avalon...
► Avalonia Fluent Icons avaloniaui.github.io/icons.html
0:00 Intro
0:58 SplitView design
5:07 SplitView interaction
9:05 Navigation logic
17:56 Icons
23:42 Conclusions

[@hippotizer]

This is a really useful tutorial - thank you so much!

[@st-hs2ve]

Dude keep posting awesome videos, you are among very few available video resources.

[@Lagrahhn]

Thank you for your video.

[@munggog6225]

Thank you so much for your help

[@user-jj8gu4ud1l]

mrc pour cette video , thanks for this videos

[@nedeilse6994]

very good

[@santiagoperman3804]

Thanks for these tutorials. When I come to the navigation logic portion I've an issue with the HomePageView not being found (but "Home" does appear in the pane). I suppose it has to do with the references between files, quite intricate to my mind until I get used to it.

[@MammaMiaDev]

Thanks for the kind words.
If the view can't be found, try to double check file/class names:
- view => HomePageView
- view model => HomePageViewModel

[@arif1984may]

Is there a way to change the SplitView orientation? It allows me to choose only from right to left, or from left to right. But not from top to bottom or bottom to top. Should I use another control for this purpose?

[@MammaMiaDev]

I don't think SplitView supports top/bottom placement at the moment. You might want to have a look at the Expander control for that docs.avaloniaui.net/docs/reference/controls/expander. You can place it at the top/bottom of the main window, and make it interactable in a way that changes the TransitioningContentControl when you click on it.

[@cool9first]

Hi, Is it possible to create a sub item under each list box item and display them once selected?

[@MammaMiaDev]

Probably what you're looking for is a TreeView. Try to use it instead of the simpler ListBox. Here's the documentation with some examples docs.avaloniaui.net/docs/reference/controls/detailed-reference/treeview-1

[@alessandromartinelli347]

Thank you very much for the video. Question: when creating ListItemTemplate, why using ViewModels as type instead of Views? View inherits from UserControl, thus it should work nevertheless, it would just require changing CurrentPage type etc.
So, why this approach?

[@MammaMiaDev]

Well, it all boils down to the fact that in the end you need a view model to be set inside the TransitioningContentControl, that way the ViewLocator will automatically load the corresponding view, starting from the view model. The selected view will also have the DataContext populated with the viewmodel you passed, which is another advantage.

[@giuseppepizzichemi5194]

Thanks for this video it was very useful to me. I struggled a little because I write the code with ReactiveUI. At the end the result is identical but considering how much easier is the community toolkit (in terms of writing the code) I'm wondering if make the things "Reactive" really worth the effort.

[@MammaMiaDev]

Glad that it helps you!! Yeah, it's the same thing I noticed at the beginning: the community toolkit requires way less boilerplate compared to ReactiveUI, although RUI has more functionalities (at the moment). But in the end, you achieve a reactive UI In both cases. Feel free to share any project you're working on!

[@arif1984may]

I dont have this viewlocator. I have created cross platform avalonia UI solution, and I don't have this file there. What should I assign to the currentPage variable then?
Nevertheless, thank you for the tutorial! Please make more tutorials for AvaloniaUI, especially with the release of this new 11 version, the number of tutorials you can find on youtube you can count with your one hand.

[@MammaMiaDev]

Hey! Thanks for your comment!
I might have taken some info for granted about the view locator, sorry for that. The easiest way is to create your own ViewLocator by following the documentation [here](docs.avaloniaui.net/docs/tutorials/todo-list-app/locating-views). It is composed by 2 parts: a C# class and a XAML tag. You can even create a test Avalonia application starting from the "Avalonia .NET MVVM App" template, and then copy-paste the code. It should be compatible with your cross-platform solution.
Let me know if it works!

[@arif1984may]

@@MammaMiaDev it worked, thank you very much!!!

[@eckmef3779]

I have one small problem, either it doesn't bind to the page, or something else, because my Border is empty

[@MammaMiaDev]

Make sure you have a ViewLocator.cs file in you project. It's crucial to navigate through pages using relative ViewModels.
It usually comes built-in the MVVM project template. Worst case, you can implement it on your own, by copy-pasting this ViewLocator code in your project github.com/AvaloniaUI/Avalonia.Samples/blob/main/src/Avalonia.Samples/Routing/BasicViewLocatorSample/ViewLocator.cs

[@blacklight9876]

​@@MammaMiaDev Looks like VS Avalonia Extension & Rider Avalonia Extension are nowhere near close in terms of development experience, the VS Extension does not add the view locator. Managed to get it to work thanks to you providing the link to view locator source code, thanks.

[@99MrX99]

​@@blacklight9876 The ViewLocator is only included if you create an avalonia app with the avalonia MVVM template. Also make sure you have the latest version of the templates installed.

[@tapstrafe69]

Can you help me, please? Do you understand that when I try to stock up on my project, this label appeared after adding _isPaneOpen = true;
An unhandled exception. System.MethodAccessException: An attempt using the 'CompiledAvaloniaXaml.XamlIlTrampolines.MVVMProject:MVVMProject' method.ViewModels.MainWindowViewModel+TriggerPaneCommand_0!The executetrampoline command(System.Object, System.Object)' to access the MVVMProject method.ViewModels.MainWindowViewModel.Failed to execute the trigger command()'.

[@MammaMiaDev]

Hey, I'm not really sure I understand what's going on. if you put the code somewhere online where we can take a look, it'd be easier :)

[@tapstrafe69]

Guys, if someone runs into the same problem, then the fact is that you don't have an internet connection for Rider

[@h_kings]

I did the same on the video but for me it stills shows the message "NotFound: AvaloniaApplicationMVVM.Views.HomePageView". The files are in their folders, but on the debbug the ViewLocator just don't find it.

[@h_kings]

Ok I found the problem. The automatically generated namespaces on the files was wrong and worked after the fix to namespace where views are in.

[@MammaMiaDev]

Happy that you solved it!