本文源参考 http://www.cnblogs.com/ListenFly/archive/2013/02/24/2923474.html 谢谢源作者
WPF中的Page相比Window来说更加的精简,因为他没有提供一个Show或者是Hide的方法,而是通过链接的方式进行页面切换。此外, 一般来说Page不设置自身的大小,因为页面的尺寸由包含它的宿主窗体来决定的。如果设置了页面的Width和Height大小,如果宿主的大小小于页面 的,则页面会被裁剪;如果宿主的大小大于页面的,则页面会居中显示。同时页面可以设置WindowWidth和WindowHeight以及 WindowTitle来设置宿主的宽度、高度、标题属性。
先看个例子:
NavigationWindow win = new NavigationWindow();
//未设置大小
//win.Content = new Page1();
//宿主大小大于Page尺寸
//win.Content = new Page1(300,300,500,500);
//宿主大小小于Page尺寸
win.Content = new Page1(500,300);
win.Show();
例子中设置了三种不同情况下页面和宿主窗体之间的大小关系,看到的三种情况如下
三张图片分别为,未对窗体进行大小设置,宿主大于页面,宿主小于页面.
下面介绍下Page页面的宿主问题:
Page的宿主包括浏览器,导航窗口(NavigationWindow)和Frame,上例子中已经使用了NavigationWindow。 后两种均为WPF提供的Page宿主窗口,提供了从一个Page导航到另一个Page的功能,同时可以记录历史导航,以及一系列的导航事件。其中 NavigationWindow继承自Window,所以在外观上与普通的窗口最大的区别是多了一个导航工具栏,不过可以通过设置 ShowsNavigationUI属性控制是否显示。
NavigationWindow为顶级窗口,不允许嵌入到其他的元素中。而 Frame则为轻量级,可以嵌入到其他元素中,如NavigationWindow或者Page,甚至Frame的嵌套。Frame默认没有导航栏,可以 设置NavigationUIVisibility属性为Visible使其显示。
例子,如下例子在NavigationWindow中放置了一个Page,然后在Page中嵌套了一个Frame:
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Title="Page1">
HorizontalAlignment="Center" VerticalAlignment="Center" >
同时设置App中的StartUrl为Page,效果如下:
可以看到,最外层是拥有导航的NavigationWindow,而内层还嵌套一个拥有导航的Frame.
细心的童鞋会发现,在上例子中我们并没有添加NavigationWindow的代码,可为什么还是有了效果呢?这是因为当设置了StartUri的对象为Page而不是Window,WPF就会为该Page创建一个NavigationWindow。
下面开始介绍Page之间的导航链接:
1.超链接(HyperLink)
上述代码使用了HyperLink的两种方式进行导航,一种是设置NavigateUri属性为目标页,另一种是使用NavigationService类的Navigate方法来进行导航页(当然,此方法不限于
HyperLink使用).
除了上述比较简单的使用外,HyperLink还可以在元素之间进行导航,例子如下:
<span style="color: #0000ff;"><<span style="color: #800000;">Grid<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">FlowDocumentReader<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">FlowDocument<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph <span style="color: #ff0000;">x:Name<span style="color: #0000ff;">="para"<span style="color: #ff0000;"> FontSize<span style="color: #0000ff;">="24"<span style="color: #ff0000;"> Background<span style="color: #0000ff;">="AliceBlue"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Figure <span style="color: #ff0000;">Width<span style="color: #0000ff;">="100"<span style="color: #ff0000;"> Height<span style="color: #0000ff;">="100"<span style="color: #ff0000;"> HorizontalAnchor<span style="color: #0000ff;">="ColumnRight"<span style="color: #ff0000;"> HorizontalOffset<span style="color: #0000ff;">="-10"<span style="color: #ff0000;"> VerticalAnchor<span style="color: #0000ff;">="ParagraphTop"<span style="color: #ff0000;"> VerticalOffset<span style="color: #0000ff;">="-30"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">BlockUIContainer<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Image <span style="color: #ff0000;">Source<span style="color: #0000ff;">="bee.png"<span style="color: #0000ff;">/>
<span style="color: #0000ff;"></<span style="color: #800000;">BlockUIContainer<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">Figure<span style="color: #0000ff;">><span style="color: #000000;">
路由事件(Routed Event)
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Section <span style="color: #ff0000;">FontFamily<span style="color: #0000ff;">="华文仿宋"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph<span style="color: #0000ff;">><span style="color: #000000;">
黄蓉凝目看去,只见那两只玉蜂双翅上也都有字,那六个字也是一模一样,右翅是“情谷底”,左翅是“我在绝”。黄蓉大奇,暗想:“造物虽奇,也决造不出这样一批蜜蜂来之理。其中必有缘故。” ……
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph<span style="color: #0000ff;">><span style="color: #000000;">
黄蓉不答,只是轻轻念着:“情谷底,我在绝。情谷底,我在绝。”她念了几遍,随即省悟:“啊!那是‘我在绝情谷底’。是谁在绝情谷底啊?难道是襄儿?”心中怦怦乱跳……
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph <span style="color: #ff0000;">TextAlignment<span style="color: #0000ff;">="Right"<span style="color: #0000ff;">><span style="color: #000000;">
——《神雕侠侣:第三十八回 生死茫茫》
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">Section<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Section <span style="color: #ff0000;">LineHeight<span style="color: #0000ff;">="25"<span style="color: #ff0000;"> FontSize<span style="color: #0000ff;">="15"<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph <span style="color: #0000ff;">><span style="color: #000000;">
这一段讲的是小龙女深陷绝情谷地,用花树上的细刺,在玉蜂翅上刺下‘我在绝情谷底’六字,盼望玉蜂飞上之后,能为人发现。结果蜂翅上的细字被周伯通发现,而给黄蓉隐约猜到了其中含义。本节<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a><a href="https://www.jb51.cc/tag/baokuo/" target="_blank" class="keywords">包括</a>:
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">List <span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Hyperlink <span style="color: #ff0000;">NavigateUri<span style="color: #0000ff;">="Page4.xaml#first"<span style="color: #0000ff;">>
<span style="color: #008000;"><!--<span style="color: #008000;"><Hyperlink Click="Hyperlink_Click"><span style="color: #008000;">--><span style="color: #000000;">
从玉蜂说起,回顾.Net事件模型
<span style="color: #0000ff;"></<span style="color: #800000;">Hyperlink<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Hyperlink <span style="color: #ff0000;">NavigateUri<span style="color: #0000ff;">="Page4.xaml#second"<span style="color: #0000ff;">><span style="color: #000000;">
什么是路由事件?
<span style="color: #0000ff;"></<span style="color: #800000;">Hyperlink<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph<span style="color: #0000ff;">><span style="color: #000000;">
CLR事件足够完美,为什么还需要路由事件?
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph<span style="color: #0000ff;">><span style="color: #000000;">
言归正传,话路由事件
<span style="color: #0000ff;"></<span style="color: #800000;">Paragraph<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">ListItem<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">Paragraph<span style="color: #0000ff;">><span style="color: #000000;">
路由事件的实例
</Paragraph>
</ListItem>
</List>
</Section>
<Paragraph x:Name="first" FontSize="20" Background="AliceBlue">
1. 从玉蜂说起,回顾.Net事件模型
</Paragraph>
<Paragraph>
木木熟悉神雕侠侣的故事,于是他根据“玉蜂传信”这样一个故事,信手画下这样一幅有趣的图。
</Paragraph>
<BlockUIContainer>
<Image Source="routedevent.jpg"/>
</BlockUIContainer>
<Paragraph>
其实这一幅“玉蜂传信图”暗合.Net的事件模型。小龙女是事件的发布者,她发布了事件“我在绝情谷底”;老顽童和黄蓉是事件的<a href="https://www.jb51.cc/tag/dingyue/" target="_blank" class="keywords">订阅</a>者,不过老顽童并没有处理该事件,而黄蓉处理了事件,隐约能猜出其中含义;至于可怜的小杨过,则根本没有<a href="https://www.jb51.cc/tag/dingyue/" target="_blank" class="keywords">订阅</a>事件,只是苦苦念叨“龙儿,龙儿,你在哪儿……”;而玉蜂正是传递信息的事件。事件,事件的发布者和事件的<a href="https://www.jb51.cc/tag/dingyue/" target="_blank" class="keywords">订阅</a>者构成了.Net事件模型的三个角色。在.Net当中,一个事件是用关键字event来表示的。如下<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>所示:
</Paragraph>
<Paragraph xml:space="preserve" Background="#88888888">
public delegate void WhiteBee(string param); //声明了玉蜂的委托
// 小龙女类
class XiaoLongnv
{
public event WhiteBee WhiteBeeEvent; //玉蜂事件
public void OnFlyBee()
{
Console.WriteLine("小龙女在谷底日复一日地放着玉蜂,希望杨过有一天能看到.....");
WhiteBeeEvent(msg);
}
private string msg = "我在绝情谷底";
}
// 老顽童类
class LaoWantong
{
public void ProcessBeeLetter(string msg)
{
Console.WriteLine("老顽童:小蜜蜂、小蜜蜂,别跑");
}
}
// 黄蓉类
class Huangrong
{
public void ProcessBeeLetter(string msg)
{
Console.WriteLine("黄蓉:\"{0}\",莫非......",msg);
}
}
// 杨过类
class YangGuo
{
public void ProcessBeeLetter(string msg)
{
Console.WriteLine("杨过:\"{0}\",我一定会找她!",msg);
}
public void Sign()
{
Console.WriteLine("杨过叹息:龙儿,你在哪儿....");
}
}
static void Main(string[] args)
{
// 第一步 人物介绍
XiaoLongnv longnv = new XiaoLongnv(); //小龙女
LaoWantong wantong = new LaoWantong(); //老顽童
Huangrong rong = new Huangrong(); //黄蓉
YangGuo guo = new YangGuo(); //杨过
// 第二步 <a href="https://www.jb51.cc/tag/dingyue/" target="_blank" class="keywords">订阅</a>事件,唯独没有<a href="https://www.jb51.cc/tag/dingyue/" target="_blank" class="keywords">订阅</a>杨过的ProcessBeeLetter;
longnv.WhiteBeeEvent += wantong.ProcessBeeLetter;
longnv.WhiteBeeEvent += rong.ProcessBeeLetter;
// longnv.WhiteBeeEvent += guo.ProcessBeeLetter; //杨过是没有<a href="https://www.jb51.cc/tag/dingyue/" target="_blank" class="keywords">订阅</a>小龙女的玉蜂事件
// 第三步 小龙女玉蜂传信
longnv.OnFlyBee();
// 第四步 杨过叹息
guo.Sign();
}
什么是路由事件呢?木木很快查看了一下MSDN,MSDN从功能和实现两种视角给出了路由事件的定义。
Functional definition: A routed event is a type of event that can invoke handlers on multiple listeners in an element tree,rather than just on the object that raised the event.
Implementation definition: A routed event is a CLR event that is backed by an instance of the RoutedEvent class and is processed by the Windows Presentation Foundation (WPF) event system.
虽然木木现在英语功底已经进步了很多,但是这两个定义还是让他看得一头雾水。看来必须得找个例子有点感性的认识(以大家都非常熟悉的Button的Click事件为例,该事件是个路由事件,可以通过Reflector查看ButtonBase的源码)。