[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 意見:
張貼留言