向视图添加一个按钮，使用 Community Toolkit 和 MVVM 将用户重新路由到 Avalonia 中的另一个视图

Question

我刚刚开始学习 Avalonia，我想知道如何创建一个按钮，将我从一个视图重新路由到另一个视图。

我有第一个视图，标题为 ValueSelectionPageView，我想向其中添加一个按钮，将我重新路由到标题为 TextPageView

的视图

ValueSelectionPageView.axaml的代码：

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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="AvaloniaApplication1.Views.ValueSelectionPageView"
             xmlns:vm="using:AvaloniaApplication1.ViewModels"
             x:DataType="vm:ValueSelectionPageViewModel"
             >
    
        
    
</UserControl>

TextPageView.axaml：

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             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="AvaloniaApplication1.Views.TextPageView"
             xmlns:vm="using:AvaloniaApplication1.ViewModels"
             x:DataType="vm:TextPageViewModel"
             >
    <StackPanel Spacing="10">
        <StackPanel.Styles>
            <Style Selector="TextBlock">
                <Setter Property="Foreground" Value="White"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            </Style>
        </StackPanel.Styles>
        <TextBlock>Hello and Welcome to the text page you can choose the border width below</TextBlock>
        <TextBox Width="150" Watermark="Enter something" Text="{Binding ThicknessValue}"></TextBox>
        <Button HorizontalAlignment="Center" Command="{Binding ChangeTextCommand}"> CLICK ME</Button>
        
        <Border Margin="0,50,0,0" Width="200" Background="{DynamicResource SystemAccentColorDark1}" BorderBrush="{DynamicResource SystemAccentColor}" BorderThickness="{Binding DefaultThickness}" CornerRadius="8" Padding="16">
            <TextBlock>Border</TextBlock>
        </Border>
        
    </StackPanel>

ValueSelectionPageViewModel.cs：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace AvaloniaApplication1.ViewModels;

    public class ValueSelectionPageViewModel : ViewModelBase
    {
        
    
    }

TextPageViewModel.cs：

using System;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

namespace AvaloniaApplication1.ViewModels;

public partial class TextPageViewModel : ViewModelBase
{
    [ObservableProperty] 
    private string _thicknessValue = "";
    [ObservableProperty] 
    private string _defaultThickness = "7";

    [RelayCommand]
    private void ChangeText()
    {
        DefaultThickness = ThicknessValue;
    }
}

Answer 1

我也在学习，所以如果有人有更好的方法，我会洗耳恭听。然而，这里要考虑的是数据上下文https://docs.avaloniaui.net/docs/basics/data/data-binding/data-context

当您将视图从一个视图更改为另一个视图时，您要做的是将父视图中的内容绑定从一个子视图更改为另一个子视图。

我创建了一个新的 Avalonia UI MVVM 项目并添加了视图和 ViewModel，然后将 MainWindow.axaml 更新为此

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

<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>
<ContentControl Content="{Binding CurrentView}"></ContentControl>

在 MainWindowViewModel 中我有这个

using CommunityToolkit.Mvvm.ComponentModel;

namespace TestAvaloniaApp.ViewModels;

public partial class MainWindowViewModel : ViewModelBase
{
    #pragma warning disable CA1822 // Mark members as static
    public string Greeting => "Welcome to Avalonia!";

    [ObservableProperty] 
    private ViewModelBase _currentView = new ValueSelectionPageViewModel();

    public void ChangeView()
    {
        TextPageViewModel textPageViewModel = new();

        CurrentView = textPageViewModel;
    }
#pragma warning restore CA1822 // Mark members as static
}

最后，我更新了 ValueSelectionPageView 以包含此内容

<UserControl xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:viewModels="using:TestAvaloniaApp.ViewModels"
         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
         x:Class="TestAvaloniaApp.Views.ValueSelectionPageView"
         x:DataType="viewModels:ValueSelectionPageViewModel">

<StackPanel>
    <Button x:CompileBindings="False"
            Command="{Binding $parent[Window].DataContext.ChangeView}"> Click Me</Button>
</StackPanel>

重要的部分是注意

$parent[Window].DataContext.ChangeView

。这允许您调用主窗口的 ChangeView() 方法来更新到新视图。