在wpf中登录成功之后怎么设置主页布局及点击不同的菜单跳转到不同的页面，这个是我们做wpf项目必要会的一个功能

news2024/10/24 0:07:58

通过frame与page实现在mvvm下的页面跳转

在wpf中登录成功之后怎么设置主页布局及点击不同的菜单跳转到不同的页面_哔哩哔哩_bilibili

1、MainWindow代码

 <DockPanel>
     <StackPanel DockPanel.Dock="Top" Height="40">
         <Grid>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="1.5*"></ColumnDefinition>
                 <ColumnDefinition Width="0.5*"></ColumnDefinition>
                 <ColumnDefinition Width="0.5*"></ColumnDefinition>
             </Grid.ColumnDefinitions>
             <TextBlock Text="AGV调度管理系统" FontSize="25" Grid.Column="0" ></TextBlock>
             <TextBlock Text="欢迎您:" FontSize="20" Grid.Column="1"  HorizontalAlignment="Right"></TextBlock>
             <TextBlock Text="{Binding  UserName, Mode=OneWay}" FontSize="20" Grid.Column="2" HorizontalAlignment="Left" Foreground="Red" ></TextBlock>
         </Grid>
        
     </StackPanel>
     <Border
   Width="100"
   Margin="0,0,10,0"
   Panel.ZIndex="1"
   Background="#2f3336"
   BorderBrush="#1d2125"
   BorderThickness="3"
   DockPanel.Dock="Left">
         <StackPanel Margin="0,0,10,0" Orientation="Vertical">
             <Border BorderBrush="#3c5254" BorderThickness="3">
                 <Button
               Margin="0,2"
               HorizontalAlignment="Stretch"
               Background="#2f3336"
               Command="{Binding HomeCmd}"
               Content="主页"
               Cursor="Hand"
               Foreground="White" />
             </Border>

             <Border BorderBrush="#3c5254" BorderThickness="3">
                 <Button
               Margin="0,3"
               HorizontalAlignment="Stretch"
               Background="#2f3366"
               Command="{Binding NavView}"
               CommandParameter="task"
               Content="任务"
               Cursor="Hand"
               Foreground="White" />
             </Border>

             <Border BorderBrush="#3c5254" BorderThickness="3">
                 <Button
               Margin="0,3"
               HorizontalAlignment="Stretch"
               Background="#2f3366"
               Command="{Binding NavView}"
               CommandParameter="queue"
               Content="队列"
               Cursor="Hand"
               Foreground="White" />
             </Border>
         </StackPanel>
     </Border>
     <Grid>
         <Frame Name="MainFrame" NavigationUIVisibility="Hidden" Grid.Row="1"/>
     </Grid>
 </DockPanel>

2、创建一个TaskPage的页。

a、首先在项目下创建一个Pages的文件夹。

b、添加一个页文件，命名为TaskPage.html

c、选择添加页。

在这个页面上添加三个页面，我们后面会在项目中用到

3、在ViewModels下的MainWindowViewModel中添加如下代码，为每个页面定义导航命令。


    public class MainWindowViewModel : INotifyPropertyChanged
    {
        private Frame _frame;
        public event PropertyChangedEventHandler PropertyChanged;

        public MainWindowViewModel(Frame frame) {
        _frame = frame;
           
        }
        /// <summary>
        /// 跳转到TaskPage
        /// </summary>
        private ICommand _navigateToTaskPageCommand;

        public ICommand NavigateToTaskPageCommand
        {
            get
            {
                return _navigateToTaskPageCommand ?? new RelayCommand(param => NavigateToTaskPage());
            }
        }
        /// <summary>
        /// 跳转到QueuePage
        /// </summary>
        private ICommand _navigateToQueuePageCommand;

        public ICommand NavigateToQueuePageCommand
        {
            get
            {
                return _navigateToQueuePageCommand ?? new RelayCommand(param => NavigateToQueuePage());
            }
        }

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private void NavigateToTaskPage()
        {
            _frame.Navigate(new Uri("Pages/TaskPage.xaml",UriKind.Relative));
        }

        private void NavigateToQueuePage()
        {
            _frame.Navigate(new Uri("Pages/QueuePage.xaml", UriKind.Relative));
        }



        /// <summary>
        /// 登录之后用户名
        /// </summary>
        public string? UserName
        {
            get
            {
                return UserInfoService.USER_NAME;
            }

        }
    }
}

4、在MainWindows文件的Cs文件里修改代码如下：


    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
           
            InitializeComponent();
            DataContext = new MainWindowViewModel(this.MainFrame);
            this.Loaded += MainWindow_Loaded;
           

        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            MainFrame.Navigate(new Uri("Pages/MainPage.xaml", UriKind.Relative));
        }
    }