Как реализовать постраничную навигацию в Avalonia UI MVVM?
Ссылка скопирована
MainWindow
MainWindow.axaml
<Window xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="using:MultiPageApp.ViewModels" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" x:Class="MultiPageApp.Views.MainWindow" x:DataType="vm:MainWindowViewModel" Icon="/Assets/avalonia-logo.ico" Title="{Binding CurrentPage.Title}"> <Design.DataContext> <!-- This only sets the DataContext for the previewer in an IDE, to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) --> <vm:MainWindowViewModel/> </Design.DataContext> <ContentPresenter Content="{Binding CurrentPage}"></ContentPresenter> </Window>
Нужно решить такую задачу?
Заказать помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Лучший ответ
1
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопроскомментарий
Вам также может быть интересно
VPN
Как правильно настроить vless для Android TV?
1 ответ
Pyrogram
Как правильно зарегистрировать юзер бота в Telegram?
1 ответ
печатные-платы
Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro?
1 ответ
Аккумуляторные батареи
Почему при зарядке автостарта слышен писк, где искать причину?
1 ответ

В Avalonia UI постраничную навигацию в MVVM обычно делают через главный ViewModel с текущей страницей. View не создаёт страницы напрямую, а привязывается к свойству
CurrentPage. Для каждого PageViewModel задаётся DataTemplate, который показывает нужный UserControl.Пример MainWindow.axaml:
<Window xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:views="using:MultiPageApp.Views" xmlns:vm="using:MultiPageApp.ViewModels"> <Window.DataTemplates> <DataTemplate DataType="{x:Type vm:HomePageViewModel}"> <views:HomePageView /> </DataTemplate> <DataTemplate DataType="{x:Type vm:SettingsPageViewModel}"> <views:SettingsPageView /> </DataTemplate> </Window.DataTemplates> <ContentControl Content="{Binding CurrentPage}" /> </Window>
MainWindowViewModel:
public class MainWindowViewModel : ViewModelBase { private ViewModelBase _currentPage; public ViewModelBase CurrentPage { get => _currentPage; set => this.RaiseAndSetIfChanged(ref _currentPage, value); } public MainWindowViewModel() { CurrentPage = new HomePageViewModel(); } public void OpenSettings() { CurrentPage = new SettingsPageViewModel(); } }
Если используете ReactiveUI, команды лучше делать через
ReactiveCommand. Если навигация большая, вынесите её в отдельный NavigationService, чтобы страницы не создавали друг друга напрямую. Тогда MainWindowViewModel будет только вызыватьNavigate(new SettingsPageViewModel()), а не знать детали создания всех экранов.Для кнопок навигации можно привязать команды в боковом меню или верхней панели. Важно, чтобы UserControl страницы не создавал MainWindow и не менял ContentControl напрямую — иначе MVVM быстро превратится в ручное управление окнами из code-behind.
Для нескольких страниц с историей можно хранить стек:
private readonly Stack<ViewModelBase> _history = new(); public void Navigate(ViewModelBase page) { _history.Push(CurrentPage); CurrentPage = page; }
Итог: делайте навигацию через
CurrentPage+ContentControl+ DataTemplates. Это чистый MVVM-подход для Avalonia: ViewModel выбирает состояние, Avalonia сама подставляет нужный View.