wpf中左侧导航的实现

2017-04-18 08:04:17来源:CSDN作者:jeryjeryjery人点击

wpf中要实现导航可以用Frame的Navigate函数实现,Navigate直译就是导航的意思。Navigate的参数是Uri类,指向page类的uri地址。下面我将用一个小例子来说明用法。

首先,先新建一个wpf项目,然后再MainWindow中添加两个button和一个Frame,其中的布局代码如下所示:

<Window x:Class="Navigatetest.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:Navigatetest"        mc:Ignorable="d"        Title="MainWindow" Height="300" Width="520">    <DockPanel Width="auto" Height="auto">        <Grid>            <GroupBox>                <Grid Width="120">                    <Grid.RowDefinitions>                        <RowDefinition/>                        <RowDefinition/>                    </Grid.RowDefinitions>                    <Button Grid.Row="0" Margin="20" Height="40" Click="page1Button">页面一</Button>                    <Button Grid.Row="1" Margin="20" Height="40" Click="page2Button">页面二</Button>                </Grid>            </GroupBox>        </Grid>        <Grid>            <GroupBox>                <Frame Name="mainFrame" NavigationUIVisibility="Hidden"></Frame>            </GroupBox>        </Grid>    </DockPanel></Window>

然后我们新建一个文件夹pages,并在里面新建两个Page,来展示导航的效果。其中文件结构,Page1代码和

Page2的代码截图如下所示:

Page1.xaml:

<Page x:Class="Navigatetest.pages.Page1"      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:Navigatetest.pages"      mc:Ignorable="d"       d:DesignHeight="300" d:DesignWidth="400"      Title="页面一">    <Grid>        <Label>这是页面一</Label>    </Grid></Page>
Page2.xaml:

<Page x:Class="Navigatetest.pages.Page2"      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:Navigatetest.pages"      mc:Ignorable="d"       d:DesignHeight="300" d:DesignWidth="400"      Title="页面二">    <Grid>        <Label>这是页面二</Label>    </Grid></Page>
然后在Mainwindow中添加两个button响应函数,在每个函数中让Frame调用相应的Uri来实现页面的导航,代码如下:

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 Navigatetest{    /// <summary>    /// MainWindow.xaml 的交互逻辑    /// </summary>    public partial class MainWindow : Window    {        private Dictionary<string, Uri> allViews = new Dictionary<string, Uri>(); //包含所有页面        public MainWindow()        {            InitializeComponent();            //添加页面的Uri地址,采用相对路径,根路径是项目名,实现allViews的初始化            allViews.Add("page1",new Uri("pages/Page1.xaml",UriKind.Relative));            allViews.Add("page2",new Uri("pages/Page2.xaml",UriKind.Relative));        }        /*        *页面一按钮的响应事件函数,实现导航到page1        */        public void page1Button(object sender, RoutedEventArgs e)        {            mainFrame.Navigate(allViews["page1"]);                    //Frame类的导航函数,参数时页面的Uri        }        /*        *页面二按钮的响应事件函数,实现导航到page2        */        public void page2Button(object sender,RoutedEventArgs e)        {            mainFrame.Navigate(allViews["page2"]);                    //Frame导航函数,导航到page2        }    }}

效果截图如下:

初始时:


点击按钮页面一后:


点击按钮页面二后:


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台