Avalonia Prism 导航(视图切换)示例代码

3 篇文章 0 订阅

参考文档
https://blog.csdn.net/m0_44963654/article/details/129505258

一,新建一个avalonia MVVM工程AvaloniaAppPrismNavigateTest删掉MainWindow.xaml里的<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/> ,

二,创建两个UserControl用户控件(ViewA.axaml和ViewB.axaml),具体操作步骤:右键点击工程,选择“添加新项” -> c# -> Avalonia usercontrol,
ViewA.axaml文件内容如下: (ViewB.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="AvaloniaAppPrismNavigateTest.Views.ViewA">
    
    <Grid>
        <!-- 这里创建一个标签区分页面-->
        <TextBlock Text="ViewA" FontSize="32"></TextBlock>
    </Grid>
    
</UserControl>

三,按照参考文档,修改代码,以下是修改后的相关代码

1,MainWindowViewModel.cs

using AvaloniaAppPrismNavigateTest.Views;
using Prism.Commands;
using Prism.Mvvm;

namespace AvaloniaAppPrismNavigateTest.ViewModels
{
    //public class MainWindowViewModel : ViewModelBase
    public class MainWindowViewModel : BindableBase

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

        private object body;
        //2、数据绑定属性,保存当前显示的页面
        public object Body
        {
            get { return body; }
            set
            {
                this.body = value;
                RaisePropertyChanged();//属性改变通知
            }
        }

        //3、声明事件命令,传递一个string类型参数
        public DelegateCommand<string> OpenCommand { get; private set; }

        public MainWindowViewModel()
        {
            OpenCommand = new DelegateCommand<string>(OpenView);
        }

        //定义两个页面
        private ViewA mViewA = new ViewA();
        private ViewB mViewB = new ViewB();

        //4、切换页面逻辑代码
        private void OpenView(string obj)
        {
            switch (obj)
            {
                case "ViewA":
                    Body = mViewA;
                    break;
                case "ViewB":
                    Body = mViewB;
                    break;
            }
        }

#pragma warning restore CA1822 // Mark members as static
    }
}

2,MainWindow.axaml.cs

using Avalonia.Controls;
using AvaloniaAppPrismNavigateTest.ViewModels;

namespace AvaloniaAppPrismNavigateTest.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //指定上下文对象
            this.DataContext = new MainWindowViewModel();
        }
    }
}

3,MainWindow.axaml

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

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

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Grid.Row="0">
            <!-- Command:事件命令 -->
            <!-- CommandParameter:事件命令参数 -->
            <Button Content="ViewA" Margin="10,0,10,10" Command="{Binding OpenCommand}" CommandParameter="ViewA"></Button>
            <Button Content="ViewB" Margin="0,0,0,10" Command="{Binding OpenCommand}" CommandParameter="ViewB"></Button>
        </StackPanel>
        <!-- 这个容器负责显示UserControl页面 -->
        <ContentControl Content="{Binding Body}" Grid.Row="1"></ContentControl>
    </Grid>

    
</Window>


四, 其他参考文档
https://blog.csdn.net/u012563853/article/details/124995885

https://www.cnblogs.com/fanbal/articles/18191841

https://www.cnblogs.com/ddrsql/p/17181967.html

  • 14
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Avalonia是一种用于构建跨平台用户界面的开源框架。导航控件Avalonia中的一种重要控件,用于在不同页面之间进行导航操作。 Avalonia的导航控件允许我们在应用程序中创建多个页面,并且能够在这些页面之间进行平滑的切换导航控件提供了一种结构化的方式来组织和管理应用程序的不同界面。通过导航控件,我们可以通过简单的命令或代码逻辑来实现页面的导航和跳转。 导航控件通常由两个主要组件组成:导航器和页面容器。导航器负责维护当前页面的状态,并提供导航操作的方法和事件。页面容器用于显示和管理不同的页面。当我们进行页面导航时,导航器会负责加载、显示和销毁页面。 对于使用Avalonia导航控件的应用程序,我们可以在页面间使用导航器提供的方法来切换页面,这样可以实现应用程序的整体流程控制。例如,我们可以使用导航控件在登录页面和主页面之间进行导航,或者在主页面的不同子页面之间进行导航。 此外,Avalonia导航控件还可以与其他控件一起使用,以实现更复杂的用户界面。例如,我们可以将导航控件和菜单控件结合使用,以创建具有导航功能的应用程序菜单。我们也可以将导航控件和数据绑定一起使用,以实现基于数据驱动的页面导航。 总而言之,Avalonia导航控件是一种实用的工具,可以帮助我们在Avalonia应用程序中有效地管理和导航页面,提供良好的用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值