[Silverlight] 當麻許的Phone7筆記 - 4.全景應用程式(Panorama Application)

2010/12/23

前幾天介紹如何開啟一個一般的專案,並且寫出一個很簡單的Hello World
今天我們來談談一個Windows Phone 7 在設計上面跟其他手機不同的一個很酷的設計..
Panorama Application 全景應用程式…
這東西很酷,因為手機或是一般手持裝置因為太小,但是想要呈現的資料很多…
所以Windows Phone7 在設計體驗上面,新增這種功能讓你很像在使用Application的時候…
彷彿再看一本雜誌,通常可以呈現一個滿版的影像,其中也包涵了出血影像
(出血印刷專有名詞,為印前作業之一。由於出版品的第一頁到最後一頁其版面會有些許誤差,
為避免印刷成品裁切失準或留下白邊,因此在設計時,通常會將製作內容(底圖、底色)超出實際版面大小。)



網路上看到的全景畫面:
PanoramaScreenShot
Source : http://www.hackingsilverlight.net


Panorama_513793F2
Source : http://coresharp.net/blogs/frontpage/archive/2010/05/24/where2go-2-0-beta.aspx

其實現在開啟Windows Phone 7 專案的時候,就可以很簡單開啟一個 Panorama Application

blog-66
開啟後畫面(在Blend 中展開)…
blog-65
但是因為Visual Studio 的樣板是給你使用MVVM架構,他會預設給你一些有的沒的,
所以我們開一個新的專案來重新製作一個具有全景模式的APP…

首先我們開一個一般的Windows Phone Appication 並且專案名稱為 SamplePano
blog-67

因為全景模式的控制像並不是預設的控制項,所以我們得在左側工具箱(ToolBox)按滑鼠右鍵點擊 ‘選取項目’
blog-68

找到Panorama 選取後按下確定

blog-69

我們來看一下左邊工具列…
blog-70

這時候我們來看一下 XAML  Code 我們先把預設 LayoutRoot 裡面的code 都拿掉…
並且將Panorama物件拖入LayoutRoot 之中..
blog-71

放入 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>


blog-72

下圖我標示上比較常用的 Property
blog-72

接下來就可以在PanoramaItem.Content 中放入您想要放的內容。

可以放入背景圖片,建議值在 480x800px 以及 1024x800(寬x長)可獲得最佳的性能表現
加入背景也很簡單 在 <controls:Panorama></controls:Panorama> 中加入


<controls:Panorama.Background>
              <ImageBrush ImageSource="hika.jpg" Opacity=".5" />
</controls:Panorama.Background>
預覽:
blog-73

感覺有沒有隨便作隨便好看…

這邊有一些需要注意:
1.背景圖盡量使用JPG
2.使用16:9 的全景應用程式會被分成4個區段
3.全景區段標題是可以移動的盡量避免動畫
4.在全景區段內,如果是垂直捲軸的物件也是可被支援的。


讚一下:


檔案下載:


0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.