WPF 在同一窗口区域实现界面切换

WPF 在同一窗口区域实现界面切换

实现类似 TabControl 控件的效果，在同一区域实现界面的切换。

关键词：ContentControl , Frame , Page

实现方法

Step1

在界面布局的预定区域放置一个ContentControl , e.g. :

Grid.Row="1" Grid.Column="2" x:Name="ContentControl">

Step2

在项目中添加多个 Page，用于设计不同界面，设名称为page1，page2 …

Step3 （重点）

在响应的事件响应代码中（如Button点击事件代码），实现界面的显示与切换。

// 窗体变量的定义
Page1 p1;
Page2 p2;

//事件响应代码
{   // 切换为Page1
    if(p1 == null)
    {
        p1 = new Page1();
    }
    ContentControl.Content = new Frame(){
        Content = p1
    };
}

{   // 切换为Page2
    if(p2 == null)
    {
        p2 = new Page2();
    }
    ContentControl.Content = new Frame(){
        Content = p2
    };
}

重点：
不同的Page，需要使用不同的Frame，也可以将多个Frame预定义为窗体变量frame1，frame2， …
如果所有Page使用一个Frame，切换界面之后，将在Frame顶部出现一个导航栏。如这里所示。

–更新–

对于frame显示导航栏的问题，如果不想要，设置Frame的NavigationUIVisibility属性为Hidden即可，也就是说，不需要使用多个frame。

扩展链接

AvalonDock使用心得