Добавление кнопки в представление, которая перенаправляет пользователя в другое представление в Авалонии с помощью Community Toolkit и MVVM

Я только начал изучать Авалонию, и мне интересно, как создать кнопку, которая перенаправляет меня от одного представления к другому.

У меня есть первое представление под названием 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>

Валуаселектионпажевиевмодел.cs:

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

namespace AvaloniaApplication1.ViewModels;

    public class ValueSelectionPageViewModel : ViewModelBase
    {
        
    
    }

Текстпажевиевмодел.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;
    }
}
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
85
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я тоже учусь, поэтому, если у кого-то есть лучший способ сделать это, я внимательно слушаю. Однако здесь следует подумать о контексте данных https://docs.avaloniaui.net/docs/basics/data/data-binding/data-context

Когда вы меняете представления с одного на другое, вы пытаетесь изменить привязку содержимого в родительском представлении с одного дочернего представления на другое дочернее представление.

Я создал новый проект MVVM Avalonia UI и добавил ваши представления и модели представлений, а затем обновил 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() главного окна, чтобы обновить <ContentControl> до нового представления.

Другие вопросы по теме