How to switch to another page by clicking a button in Avalonia Community.Toolkit?

[Zakarayaev]

Actually the whole question is in the title.
In general, I have a Press Me button in my project! and when you click this button, the contents of the window should switch to another page, namely HomePageView, how to do this?

here is the link to the github project if needed
https://github.com/Zakarayaev/avproj1

[timunie]

please have a look at the data template samples here: https://github.com/AvaloniaUI/Avalonia.Samples

[jaskij]

As far as I know, the only router example in there uses the discouraged reflector-based ViewLocator.

[thevortexcloud]

You don't need the view locator at all. Just define the templates manually, everything else is the same.

[thevortexcloud]

As I mentioned in the last issue you opened, it sounds like you want a router

[Zakarayaev]

I understand you, but is there any information on how to do it in Community.Toolkit?

[thevortexcloud]

Concept is the same no matter what MVVM framework you are using. You can find plenty of routers available online for things like WPF that will work just as well as in Avalonia. You can write a simple router in ~10 lines of code. I wrote my own awhile back that worked using URLs (kind of like a website path). But that would be considered to be a fairly advanced router. Also as Tim pointed out there is already a minimal Routing sample.

https://github.com/AvaloniaUI/Avalonia.Samples/tree/main/src/Avalonia.Samples/Routing/BasicViewLocatorSample

Although it uses ReactiveUI, but it should be fairly simple to port.

[Zakarayaev]

and one more question, why is this router needed at all and how does it even work? I just don't understand it at all

[thevortexcloud]

You can technically do it without a "router" (EG directly setting the active VM everywhere you need it) but it can quickly get fairly messy. It's just a way to manage all your views/VMs and navigate between them. I will show you some sample code from my custom router to help explain:

In the below XAML my active page is bound to the content control. When one of the buttons is pressed, the CurrentPage property is updated to match what ever VM is mapped to value the button passed to my router.

        <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}" />

The important part of my main view model looks like this:

        #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);
        }

The router itself implements INotifyPropertyChanged which I am using to update some info on my views. When the route changes, I update the CurrentPage value which updates the view, and a view locator uses the view model to work out which view (in this case a user control) to display.

I should also mention my Router was implemented in a framework agnostic way. It will work on any MVVM .NET framework and has no dependencies on ReactiveUI, CommunityMVVM or Avalonia.