I picked Avalonia UI for a side project without the intention to spend too much time learning the framework itself. When I realised I needed to spend a bit more than planned in order to do things reasonably well, I got a little overwhelmed. Your tutorial helped me get a nice looking Split View design for my app without having to spend days learning everything from scratch, plus it taught me a few basics I was missing, as you show all the code (and I learn better by reading other people's code) Very well done !
Great stuff! Small tip: Hold control while using the arrows to navigate code, in order to skip entire words. That way you won't need to go 1 letter at a time Doing that has saved me immeasurable amounts of time
I don't have [ObservableProperty] and [RelayCommand]. I tried to add the Community ToolKit via using, but I got an error. I created a regular Avalonia project. Maybe I missed something?
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?
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.
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.
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
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.
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!
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?
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.
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.
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!
First of all, I would like to say thank you. I'm enjoying the video. In this video, GeometryIcon cannot be used because the Icon link on GitHub has disappeared. So I tried to use a png file, but Bitmap doesn't work and Image doesn't work as StaticResouce. Please tell me how to load an image as StaticResource.
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
@@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.
@@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.
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.
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()'.
I picked Avalonia UI for a side project without the intention to spend too much time learning the framework itself. When I realised I needed to spend a bit more than planned in order to do things reasonably well, I got a little overwhelmed. Your tutorial helped me get a nice looking Split View design for my app without having to spend days learning everything from scratch, plus it taught me a few basics I was missing, as you show all the code (and I learn better by reading other people's code)
Very well done !
Great stuff!
Small tip: Hold control while using the arrows to navigate code, in order to skip entire words. That way you won't need to go 1 letter at a time
Doing that has saved me immeasurable amounts of time
Dude keep posting awesome videos, you are among very few available video resources.
This is a really useful tutorial - thank you so much!
I don't have [ObservableProperty] and [RelayCommand]. I tried to add the Community ToolKit via using, but I got an error. I created a regular Avalonia project. Maybe I missed something?
I solved my problem. I forgot to install Avalonia Templates
Thank you for your video.
Thank you so much for your help
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?
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.
mrc pour cette video , thanks for this videos
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.
Thanks for the kind words.
If the view can't be found, try to double check file/class names:
- view => HomePageView
- view model => HomePageViewModel
Hi, Is it possible to create a sub item under each list box item and display them once selected?
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
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.
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!
@@MammaMiaDev it worked, thank you very much!!!
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?
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.
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.
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!
First of all, I would like to say thank you. I'm enjoying the video. In this video, GeometryIcon cannot be used because the Icon link on GitHub has disappeared. So I tried to use a png file, but Bitmap doesn't work and Image doesn't work as StaticResouce. Please tell me how to load an image as StaticResource.
I have one small problem, either it doesn't bind to the page, or something else, because my Border is empty
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
@@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.
@@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.
very good
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.
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.
Happy that you solved it!
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()'.
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 :)
Guys, if someone runs into the same problem, then the fact is that you don't have an internet connection for Rider