使用 Avalonia UI 在 C# 中查询导航视图

Question

所以，我刚刚启动了一个测试 Avalonia UI 的 C# 项目，我正在开发一个基本的菜单导航系统，但我遇到了导航系统无法正确切换的问题，而不是切换视图，它只是显示一个视图位置的字符串。

这是我的 MainWindowViewModel.cs 代码：

using AvaloniaApplication.ViewModels;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System;
using System.Collections.ObjectModel;

namespace AvaloniaApplication.ViewModels;

public partial class MainWindowViewModel : ViewModelBase
{
#pragma warning disable CA1822 // Mark members as static

    [ObservableProperty]
    private ViewModelBase _currentPage = new HomePageViewModel();

    [ObservableProperty]
    private ListItemTemplate? _selectedListItem;

    partial void OnSelectedListItemChanged(ListItemTemplate? value)
    {
        if (value is null) return;
        var instance = Activator.CreateInstance(value.ModelType);
        if (instance is null) return;
        CurrentPage = (ViewModelBase)instance;
    }
    public ObservableCollection<ListItemTemplate> Items { get; } = new()
    {
        new ListItemTemplate(typeof(HomePageViewModel)),
        new ListItemTemplate(typeof(RosterViewModel))
    };

}

public class ListItemTemplate
{
public ListItemTemplate(Type type)
{
    ModelType = type;
    Label = type.Name.Replace("PageViewModel", "");
}

public string Label { get; }
public Type ModelType { get; }
}

这是我的 MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:AvaloniaApplication.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="AvaloniaApplication.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="AvaloniaApplication">

    <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>

  <SplitView IsPaneOpen="True"
             OpenPaneLength="100"
             Background="White"
             PaneBackground="Purple">
    <SplitView.Pane>

      <ListBox ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedListItem}">
        <ListBox.ItemTemplate>
          <DataTemplate DataType="{x:Type vm:ListItemTemplate}">
            <StackPanel>
              <TextBlock Text="{Binding Label}"/>
            </StackPanel>
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>
   

    </SplitView.Pane>

    <SplitView.Content>
      <TransitioningContentControl Content="{Binding CurrentPage}"/>
      
    </SplitView.Content>
  </SplitView>

</Window>

如果有人对我可能出错的地方有任何建议，我将不胜感激！谢谢！

Answer 1

我查了一下，因为我或多或少有相同的问题，但是关于步骤导航视图中的待办事项列表教程。

我使用 ViewLocator（来自 documentation 的 ViewLocator）让它工作，并按照其中有关如何确保使用它的指南进行操作。

基本上复制文档的类并将以下内容添加到App.axaml：

应用程序标记属性的本地定义（请参阅xmlns:local）和作为DataTemplate的定位器，以便您的App.axaml可能如下所示：

<Application xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:AvaloniaTodoList.ViewModels"
             x:Class="AvaloniaTodoList.App"
             xmlns:local="using:AvaloniaTodoList"
             RequestedThemeVariant="Default">
  <!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. -->

  <Application.DataTemplates>
    <local:ViewLocator />
  </Application.DataTemplates>

  <Application.Styles>
    <FluentTheme />
  </Application.Styles>
</Application>

如果（在我的例子中）MainWindowViewModel 现在有一个 ViewModelBase 作为属性，如下所示：

 public class MainWindowViewModel : ViewModelBase
 {
     private ViewModelBase _contentViewModel;

     //this has a dependency on the ToDoListService

     public MainWindowViewModel()
     {
         var service = new ToDoListService();
         ToDoList = new ToDoListViewModel(service.GetItems());
         _contentViewModel = ToDoList;
     }

     public ToDoListViewModel ToDoList { get; }

     public ViewModelBase ContentViewModel
     {
         get => _contentViewModel;
         private set => this.RaiseAndSetIfChanged(ref _contentViewModel, value);
     }

     public void AddItem()
     {
         ContentViewModel = new AddItemViewModel();
     }
 }

现在可以使用 DataType 和 Content 属性将内容设置为 MainWindow.axaml 中的内容：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaTodoList.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:views="clr-namespace:AvaloniaTodoList.Views"
        mc:Ignorable="d" 
        Width="250"
        Height="450"
        x:Class="AvaloniaTodoList.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="Avalonia Todo List"
        Content="{Binding ContentViewModel}">  
        <!--<views:ToDoListView/>-->
</Window>

类似的东西对您的情况有帮助吗？