零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton

本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「HyperlinkButton」

附上简单的范例，请点击进行换页，并注意换页内容

范例请点我

?

跟着范例做做看吧!

01

使用小猴子附上的的范例档案，或是自己做一个类似下图的版面

?

(范例内的Home、News以及About皆是HyperlinkButton，该怎麽做出自己的HyperlinkButton请看这篇教学。)

02

在白色区块放入Frame

Asset->Controls->Frame

?

放入如下图的位置：

?

03

再来我们新增一个New Item->Page，命名为Home

?

并且放入文字或是其他内容，好让等等分辨是否换页了。

?

04

把Home这个Page的内容完成後，回到MainPage，我们要来做页面连结

在点选Frame的状态下，Properties->Common Properties->Source选取Home.xaml

(做这个动做是避免网页一开起时是空白的内容，所以必须让一开始载入时有画面)

?

05

HyperlinkButton的地方不要忘记也要做连结的动作!

?

当使用者按下 HyperlinkButton 时，可以浏览同专案中的内容或是外部网页

我们运用 NavigateUri 属性来设定 HyperlinkButton 的 URI

设定NavigateUri->Home.xaml

?

来看看设定後NavigateUri的Xaml

   1: <StackPanel Margin="0" Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">

   2:     <HyperlinkButton Content="Home" 

   3:         Style="{StaticResource HyperlinkButtonStyle1}" 

   4:         Width="71" Foreground="White" 

   5:         HorizontalContentAlignment="Center" 

   6:         VerticalContentAlignment="Center" 

   7:         NavigateUri="/full;component/Page/Home.xaml" 

   8:         Padding="0" ToolTipService.ToolTip="Home"/>

   9:     </StackPanel>

?

可以看到NavigateUri连结了Home这个Page

?

如果你是想要连到外部网页，就在NavigateUri放入连结的网址就行了

并且设定TargetName属性指定页面是在Frame内变换，或者是要开启新页面

   1: <HyperlinkButton Content="New Page"

   2:     NavigateUri="http://www.dotblogs.com.tw/yuan0716/" TargetName="_blank"/>

?

_blank：将连结的文件载入新的空白视窗

_self：将页面载入使用者在其中 (使用中视窗) 连结的视窗

?

按下F5看看我们的成果

?

06

把News跟About页面照刚刚的方法制作完成後，就会跟范例一模一样啦~

?

07

这边要注意一点，在按HyperlinkButton换页时，看起来没有换页的感觉，不过你的网址列偷偷在改变喔!

所以Frame可以做到换页时，网址跟着变动!

08

引用msdn可以很简单看出Frame的功能：

<以 URI 来巡览内容时，Frame 会传回包含该内容的物件>

本篇的教学就到此。

(若有任何错误的地方，请各位前辈或同好能不吝指教，小女子都会虚心接受；若是你喜欢我的教学，请给我点鼓励，谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您