原文:零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton
本章将教大家如何以实作善用Blend4的内建功能-「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之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您