zoukankan      html  css  js  c++  java
  • 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="40"></RowDefinition>
    <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <WrapPanel VerticalAlignment="Center">
    <Button Name="btnA" Height="30" Width="60" Margin="5" Click="btnA_Click">页面A</Button>
    <Button Name="btnB" Height="30" Width="60" Click="btnB_Click">页面B</Button>
    </WrapPanel>
    <Frame Name="frmMain" NavigationUIVisibility="Hidden"></Frame>
    </Grid>
    </Window> 
    cs代码

    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="40"></RowDefinition>
    <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <WrapPanel VerticalAlignment="Center">
    <Button Tag="PageA" Name="btnA" Height="30" Width="60" Margin="5" Click="btnNav_Click">页面A</Button>
    <Button Tag="PageB" Name="btnB" Height="30" Width="60" 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="480" Width="800">
    <Grid>
    <Grid.RowDefinitions>
    <RowDefinition Height="50"></RowDefinition>
    <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*"></ColumnDefinition>
    <ColumnDefinition Width="3*"></ColumnDefinition>
    <ColumnDefinition Width="1*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <WrapPanel Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Tag="Home" Width="40" Height="40" Margin="5" Click="btnNav_Click">首页</Button>
    <Button Tag="SimpleChat" Width="40" Height="40" Margin="0,0,5,0" Click="btnNav_Click">内容</Button>
    </WrapPanel>
    <Grid Grid.Row="1" Grid.ColumnSpan="3">
    <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="50"></RowDefinition>
    <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="3*"></ColumnDefinition>
    <ColumnDefinition Width="1*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <WrapPanel Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center">
    <TextBox Name="txtParam" Width="120" Height="30"></TextBox>
    <Button Name="btnCall" Width="90" Height="30" Margin="5" Click="btnCall_Click">CallApiByGet</Button>
    </WrapPanel>
    <Grid Grid.Row="1">

    </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的区别就不再赘述了。


    ————————————————
    版权声明:本文为CSDN博主「ludewig」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/lordwish/article/details/52667150

  • 相关阅读:
    python 结巴分词简介以及操作
    JWT(Json web token)简介
    为什么推荐前端使用Vue.js
    Vue 加载外部js文件
    Docker简介以及操作
    'QueryDict' object is not callable 错误解析
    django- Vue.js 操作
    django —— KindEditor
    websocket ----简介,以及demo
    python --商品评价---- 数据表结构以及理解
  • 原文地址:https://www.cnblogs.com/javalinux/p/14501697.html
Copyright © 2011-2022 走看看