Я только начал изучать Авалонию, и мне интересно, как создать кнопку, которая перенаправляет меня от одного представления к другому.
У меня есть первое представление под названием 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;
}
}
Я тоже учусь, поэтому, если у кого-то есть лучший способ сделать это, я внимательно слушаю. Однако здесь следует подумать о контексте данных 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>
до нового представления.