当前位置：首页 > article >正文

WPF开发之页面切换

article 2024/10/22 14:14:27

WPF开发之页面切换

对大多数需要在同一窗口内进行视图切换的 WPF 应用，使用 Page 和 Frame 组合通常是更优选择。这种组合提供了良好的导航支持和用户体验，同时能够有效管理内存和资源。如果应用中确实需要多个独立窗口，可以选择使用 Window。

Window

功能

用户通过Window与 Windows Presentation Foundation (WPF) 独立应用程序进行交互。Window的主要用途是承载可视化数据并使用户可以与数据进行交互的内容。独立 WPF 应用程序使用 Window 类来提供它们自己的窗口。
具体表现为两个功能：
一、承载可视化数据。
二、使用户可以与可视化数据进行交互。

使用场景

1、独立窗口：Window 适合需要独立窗口的情况，例如弹出对话框、设置窗口等。在这种情况下，可能不适合使用导航框架。
2、特定场景：如果你的应用需要多个完全独立的窗口进行交互，那么使用 Window 是合适的。

Page

功能

在 C# 的 WPF（Windows Presentation Foundation）应用程序中，Page 是一种特定的用户界面（UI）元素，专门设计用于在导航框架中使用。Page 允许创建可导航的内容，适合应用程序的多个视图或页面切换。
具体有以下四个特性：
1、导航支持：Page 可以在 Frame 或 NavigationWindow 中被加载，这使得用户可以在不同的页面之间进行导航，支持前进和后退操作。
2、历史记录：使用 Page 通过 Frame 进行导航时，WPF 会自动管理导航历史记录，用户可以使用后退和前进按钮来浏览历史记录。
3、数据绑定：Page 支持数据绑定，可以与 ViewModel 配合使用，这符合 MVVM 模式。
4、布局和内容：Page 允许定义 XAML 布局，包含控件、样式等，用以构建复杂的用户界面。

使用场景

Page 是用于创建可导航内容的理想选择。通过 Page，可以轻松地在应用程序中实现视图的切换。

使用Page进行导航栏切换

创建两个Page

1、第一个Page
IntegratedMonitor.xaml

<Page x:Class="ReliabilityTestingV3._0.IntegratedMonitor"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:ReliabilityTestingV3._0"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="IntegratedMonitor">

    <Grid>
        <StackPanel>
            <TextBlock Text="Welcome to Page 1!" FontSize="24" />
            <Button Content="Go to Page 2" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Page>

IntegratedMonitor.xaml.cs

using ReliabilityTestingV3._0.View;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ReliabilityTestingV3._0
{
    /// <summary>
    /// IntegratedMonitor.xaml 的交互逻辑
    /// </summary>
    public partial class IntegratedMonitor : Page
    {
        public IntegratedMonitor()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // 使用 NavigationService 导航到 Page2
            NavigationService.Navigate(new SingleMonitor());
        }
    }
}

2、第二个Page
SingleMonitor.xaml

<Page x:Class="ReliabilityTestingV3._0.View.SingleMonitor"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:ReliabilityTestingV3._0.View"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="SingleMonitor">

    <Grid>
        <TextBlock Text="You are now on Page 2!" FontSize="24" />
        <Button Content="Go back" Click="Button_Click"/>
    </Grid>
</Page>

SingleMonitor.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ReliabilityTestingV3._0.View
{
    /// <summary>
    /// SingleMonitor.xaml 的交互逻辑
    /// </summary>
    public partial class SingleMonitor : Page
    {
        public SingleMonitor()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // 使用 NavigationService 返回到上一页
            NavigationService.GoBack();
        }
    }
}

主窗口使用Frame加载Page

MainWindow.xaml

<Window x:Class="ReliabilityTestingV3._0.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:ReliabilityTestingV3._0"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Frame x:Name="MainFrame" NavigationUIVisibility="Hidden"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ReliabilityTestingV3._0
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // 启动时加载IntegratedMonitor
            MainFrame.Navigate(new IntegratedMonitor());
        }
    }
}