[Silverlight] 當麻許的Phone7筆記 - 4.全景應用程式(Panorama Application)
前幾天介紹如何開啟一個一般的專案,並且寫出一個很簡單的Hello World…
今天我們來談談一個Windows Phone 7 在設計上面跟其他手機不同的一個很酷的設計..
Panorama Application 全景應用程式…
這東西很酷,因為手機或是一般手持裝置因為太小,但是想要呈現的資料很多…
所以Windows Phone7 在設計體驗上面,新增這種功能讓你很像在使用Application的時候…
彷彿再看一本雜誌,通常可以呈現一個滿版的影像,其中也包涵了出血影像
(出血是印刷專有名詞,為印前作業之一。由於出版品的第一頁到最後一頁其版面會有些許誤差,
為避免印刷成品裁切失準或留下白邊,因此在設計時,通常會將製作內容(底圖、底色)超出實際版面大小。)
網路上看到的全景畫面:
![]()
Source : http://www.hackingsilverlight.net
![]()
Source : http://coresharp.net/blogs/frontpage/archive/2010/05/24/where2go-2-0-beta.aspx
其實現在開啟Windows Phone 7 專案的時候,就可以很簡單開啟一個 Panorama Application
![]()
開啟後畫面(在Blend 中展開)…
![]()
但是因為Visual Studio 的樣板是給你使用MVVM架構,他會預設給你一些有的沒的,
所以我們開一個新的專案來重新製作一個具有全景模式的APP…
首先我們開一個一般的Windows Phone Appication 並且專案名稱為 SamplePano
![]()
因為全景模式的控制像並不是預設的控制項,所以我們得在左側工具箱(ToolBox)按滑鼠右鍵點擊 ‘選取項目’
![]()
找到Panorama 選取後按下確定
![]()
我們來看一下左邊工具列…
![]()
這時候我們來看一下 XAML Code 我們先把預設 LayoutRoot 裡面的code 都拿掉…
並且將Panorama物件拖入LayoutRoot 之中..
![]()
放入 Panorama後的XAML Code :
<phone:PhoneApplicationPage x:Class="SamplePano.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" FontFamily="{StaticResource PhoneFontFamilyNormal}" FontSize="{StaticResource PhoneFontSizeNormal}" Foreground="{StaticResource PhoneForegroundBrush}" SupportedOrientations="Portrait" Orientation="Portrait" shell:SystemTray.IsVisible="True" xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"> <!--LayoutRoot is the root grid where all page content is placed--> <Grid x:Name="LayoutRoot" Background="Transparent"> <controls:Panorama Height="768" Width="480" HorizontalAlignment="Left" Name="panorama1" Title="panorama" VerticalAlignment="Top" > <controls:PanoramaItem Header="item1"> <Grid /> </controls:PanoramaItem> <controls:PanoramaItem Header="item2"> <Grid /> </controls:PanoramaItem> </controls:Panorama> </Grid> <!--Sample code showing usage of ApplicationBar--> <!--<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/> <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem Text="MenuItem 1"/> <shell:ApplicationBarMenuItem Text="MenuItem 2"/> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar>--> </phone:PhoneApplicationPage>
下圖我標示上比較常用的 Property
接下來就可以在PanoramaItem.Content 中放入您想要放的內容。
可以放入背景圖片,建議值在 480x800px 以及 1024x800(寬x長)可獲得最佳的性能表現
加入背景也很簡單 在 <controls:Panorama></controls:Panorama> 中加入
<controls:Panorama.Background> <ImageBrush ImageSource="hika.jpg" Opacity=".5" /> </controls:Panorama.Background>
感覺有沒有隨便作隨便好看…
這邊有一些需要注意:
1.背景圖盡量使用JPG
2.使用16:9 的全景應用程式會被分成4個區段
3.全景區段標題是可以移動的盡量避免動畫
4.在全景區段內,如果是垂直捲軸的物件也是可被支援的。
讚一下:
檔案下載:
標籤:
教學,
Silverlight,
Windows Phone 7
|
This entry was posted on 下午2:31
and is filed under
教學
,
Silverlight
,
Windows Phone 7
.
You can follow any responses to this entry through
the RSS 2.0 feed.
You can leave a response,
or trackback from your own site.
0 意見:
張貼留言