WPF简单导航框架（Window与Page互相调用）

相当多的WPF程序都有着丰富的页面和功能，如何使程序在不同页面间转换并降低资源占用，选择适合自己的导航框架就很重要了。最近花了一点时间做了一个简单的导航框架，并在这个过程中对Window、Page、UserControl有了更多的认识。

---

1.“简单粗暴”的TabControl

如果你的应用程序很简单，各个页面间没有直接的联系，那么TabControl就完全可以满足要求。刚开始学WPF的时候，页面导航我只会用TabControl（其他不懂），自带Tab切换效果。

      <Window>
          <TabControl>
             <TabItem Header="页面A">
                 <Frame Source="PageA.xaml"></Frame>
             </TabItem>
             <TabItem Header="页面B">
                 <Frame Source="PageB.xaml"></Frame>
             </TabItem>
         </TabControl>
     </Window>

　　

效果如上图（设置Frame的属性NavigationUIVisibility=”Hidden”可以隐藏导航图标）。如果是再多一级子页面呢？那就再加一层TabControl。但使用TabControl做页面导航的问题是，绘制窗口时，所有子页面都将被实例化一遍，尤其是页面较多时加载速度会变慢，占用资源也相对较高。另外在样式上将TabItem的Header和Content分离也需要费很大一番功夫。

2.“专注导航”的Frame

WPF中提到页面导航切换就绝对绕不开Frame，它的导航特性使得其连接Window和Page更加自由。简单的Frame导航是几个按钮加上一个Frame，通过按钮事件控制Frame的Source属性。

 <Window>
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height=""></RowDefinition>
             <RowDefinition></RowDefinition>
         </Grid.RowDefinitions>
         <WrapPanel VerticalAlignment="Center">
             <Button Name="btnA" Height="" Width="" Margin="" Click="btnA_Click">页面A</Button>
             <Button Name="btnB" Height="" Width="" Click="btnB_Click">页面B</Button>
         </WrapPanel>
         <Frame Name="frmMain" NavigationUIVisibility="Hidden"></Frame>
     </Grid>
 </Window>

   private void btnA_Click(object sender, RoutedEventArgs e)
         {
             //注意：这里使用Navigate，不用Source,具体区别自己可以试试
             this.frmMain.Navigate(new Uri("PageA.xaml", UriKind.Relative));
         }

         private void btnB_Click(object sender, RoutedEventArgs e)
         {
             this.frmMain.Navigate(new Uri("PageA.xaml", UriKind.Relative));
         }

这样一个简单的Frame导航框架就完成了。但是仔细想一想，如果后期增加更多页面，后台代码岂不是要加很多Click事件，能不能把这些Click事件合在一起呢？答案是可以的。关键就在于执行Click事件时要知道是由哪个导航按钮触发的，可以利用控件的Tag属性实现这一点。代码修改如下：

  <Window>
      <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height=""></RowDefinition>
             <RowDefinition></RowDefinition>
         </Grid.RowDefinitions>
         <WrapPanel VerticalAlignment="Center">
             <Button Tag="PageA" Name="btnA" Height="" Width="" Margin="" Click="btnNav_Click">页面A</Button>
             <Button Tag="PageB" Name="btnB" Height="" Width="" Click="btnNav_Click">页面B</Button>
         </WrapPanel>
         <Frame Name="frmMain" NavigationUIVisibility="Hidden"></Frame>
     </Grid>
 </Window>

cs代码改为

 private void btnNav_Click(object sender, RoutedEventArgs e)
        {
            Button btn = sender as Button;
            this.frmMain.Navigate(new Uri(btn.Tag.ToString()+".xaml",UriKind.Relative));
        }

这样无论添加多少页面，不需要修改后台方法，只需为导航按钮添加相应的Tag就可以了。（使用Name属性或其他属性也是可以的，有兴趣的可以自己试试）

3.互相调用的Window和Page

在复杂一点的WPF程序里，我们往往不仅需要页面间切换浏览，有时也需要相互调用方法，比如说在PageA中调用MainWindow的方法，代码如下： 
在MainWindow.xaml.cs中有一个公共方法：

         public void CallFromChild(string name)
         {
             MessageBox.Show("Hello," + name + "!");
         }

在PageA.xam.cs中为其添加一个属性，使其在实例化后能访问MainWindow。

         private MainWindow _parentWin;
         public MainWindow ParentWindow
         {
             get { return _parentWin; }
             set { _parentWin = value; }
         }

当页面切换到PageAxaml，即PageA实例化后，使得ParentWindow=MainWindow;

     private void btnA_Click(object sender, RoutedEventArgs e)
         {
             PageA a = new PageA();
             this.frmMain.Content = a;
             a.ParentWindow = this;
         }

注意这里页面导航的方法由this.frmMain.Navigate换成了this.frmMain.Content。然后在PageA就可以添加方法来调用MainWindow中的CallFromChild()方法了。

         private void btnCall_Click(object sender, RoutedEventArgs e)
         {
             ParentWindow.CallFromChild("PageA");
         }

4.进阶的导航框架

上面我们已经实现了简单的导航框架，也实现了在Page中调用MainWindow中的方法，但问题也是显而易见的：每新增一个页面都要为其添加ParentWindow属性，而且只有在页面实例化后为其ParenWindow属性赋值，才能调用MainWindow中的CallFromChild方法；通用的导航事件btnNav_Click中拿到的只是页面的Uri字符串，必须将其实例化后作为frmMain的Content。 
上述两个问题从两个方面解决：创建继承于Page类的BasePage类，使所有页面都继承于BasePage，同时在BasePage中添加属性ParentWindow；使用反射将页面的Uri字符串转为Page实例，同时查找其ParentWindow属性并赋值为MainWindow。 
进阶后的全部代码如下: 
MainWindow.xaml

 <Window x:Class="WPFClient.App.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:WPFClient.App"
         mc:Ignorable="d"
         Title="MainWindow" Height="" Width="">
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height=""></RowDefinition>
             <RowDefinition></RowDefinition>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="1*"></ColumnDefinition>
             <ColumnDefinition Width="3*"></ColumnDefinition>
             <ColumnDefinition Width="1*"></ColumnDefinition>
         </Grid.ColumnDefinitions>
         <WrapPanel Grid.Row="" Grid.Column="" HorizontalAlignment="Center" VerticalAlignment="Center">
             <Button Tag="Home" Width="" Height="" Margin="" Click="btnNav_Click">首页</Button>
             <Button Tag="SimpleChat" Width="" Height="" Margin="0,0,5,0" Click="btnNav_Click">内容</Button>
         </WrapPanel>
         <Grid Grid.Row="" Grid.ColumnSpan="">
             <Frame Name="frmMain" NavigationUIVisibility="Hidden"></Frame>
         </Grid>
     </Grid>
 </Window>

MainWindow.xaml.cs

 namespace WPFClient.App
 {
     /// <summary>
     /// MainWindow.xaml 的交互逻辑
     /// </summary>
     public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             Navigate("Home");
         }

         #region 页面导航
         private void btnNav_Click(object sender, RoutedEventArgs e)
         {
             Button btn = sender as Button;
             Navigate(btn.Tag.ToString());
         }
         private void Navigate(string path)
         {
             string uri = "WPFClient.App.Views." + path;
             Type type = Type.GetType(uri);
             if (type != null)
             {
                 //实例化Page页
                 object obj = type.Assembly.CreateInstance(uri);
                 UserControl control = obj as UserControl;
                 this.frmMain.Content = control;
                 PropertyInfo[] infos = type.GetProperties();
                 foreach (PropertyInfo info in infos)
                 {
                     //将MainWindow设为page页的ParentWin
                     if (info.Name == "ParentWindow")
                     {
                         info.SetValue(control, this, null);
                         break;
                     }
                 }
             }
         }

         #endregion

         //公共方法
         public void CallFromChild(string name)
         {
             MessageBox.Show("Hello," + name + "!");
         }

     }
 }

BasePage.cs

 namespace WPFClient.App
 {
     public class BasePage : Page
     {
         #region 父窗体
         private MainWindow _parentWin;
         public MainWindow ParentWindow
         {
             get { return _parentWin; }
             set { _parentWin = value; }
         }
         #endregion

     }
 }

Home.xaml

 <base:BasePage x:Class="WPFClient.App.Views.Home"
              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:WPFClient.App.Views"
              xmlns:base="clr-namespace:WPFClient.App"
              mc:Ignorable="d" >
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height=""></RowDefinition>
             <RowDefinition></RowDefinition>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="3*"></ColumnDefinition>
             <ColumnDefinition Width="1*"></ColumnDefinition>
         </Grid.ColumnDefinitions>
         <WrapPanel Grid.Row="" Grid.Column="" VerticalAlignment="Center" HorizontalAlignment="Center">
             <TextBox Name="txtParam" Width="" Height=""></TextBox>
             <Button Name="btnCall" Width="" Height="" Margin="" Click="btnCall_Click">CallApiByGet</Button>
         </WrapPanel>
         <Grid Grid.Row="">

         </Grid>
     </Grid>
 </base:BasePage>

Home.xaml.cs

 namespace WPFClient.App.Views
 {
     /// <summary>
     /// Home.xaml 的交互逻辑
     /// </summary>
     public partial class Home : BasePage
     {
         public Home()
         {
             InitializeComponent();
         }

         private void btnCall_Click(object sender, RoutedEventArgs e)
         {
             string param = txtParam.Text;
             ParentWindow.CallFromChild(param);
         }

     }
 }

通过实验发现，使用这种方案使得Page页访问MainWindow中的公共属性、控件元素或公共变量也是可行的。此外将BasePage的基类从Page改成UserControl也是可以的，毕竟Page就是继承于UserControl，关于Page和UserControl的区别就不再赘述了。