[WP7開發] 美化 Panorama 控制項的標頭

Windows Phone 7 中有一個很獨特的控制項--Panorama(全景),它在手機上的效果就像是這樣: 這是一個示意圖,手機畫面畫面一次會顯示一個區塊的內容,而使用者只需左拉右滑就可以看完全部的內容。 而在 Windows Phone SDK 中也提供了 Panorama 的專案範本,讓開發人員可以直接使用這個控制項來開發應用程式,但這個控制項原本是為英文字型設計的,所以如果直接修改成中文字,可能就會變成這樣: 你可以看到標題的中文字實在是太大了,而且還被 clip 掉一部份,有時候可能會造成閱讀的麻煩,這個時候只要使用 TitleTemplate 的方式就可以改變 Panorama 控制項的標題: <phone:PhoneApplicationPage.Resources> <DataTemplate x:Key="MyTitleTemplate"> <TextBlock FontSize="120″ Margin="0,60,0,20″ Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" /> </DataTemplate> </phone:PhoneApplicationPage.Resources> … <controls:Panorama Title="這是中文" TitleTemplate="{StaticResource MyTitleTemplate}"> 這樣一改之後,原本的畫面就會變成這樣: 這樣是不是好多了呢?而且如此一來,Panorama 控制項的標頭也不一定只能用純文字了喔 🙂

0

Windows Phone 7.5 (Mango) 線上教學資源

這篇文章主要是整理一下,目前由微軟官方所提供的線上教材、或是範例 Labs 檔案等等。其它內容可以參考 Windows Phone 開發人員中心。 官方訓練課程 Windows Phone 7 RTM 訓練教材 介紹 Windows Phone 7 的開發基礎,並且以各式各樣的範例來展示如何開發 Windows Phone 7 應用程式。 Windows Phone Mango 訓練教材 針對 Mango 更新的 API 部份,設計了更多範例程式來顯示如何在 Mango 上面使用者這新增的功能。 參考文件 Windows Phone 開發手冊 所有關於 Windows Phone 開發的說明文件都會在這裡,是開發中的參考或學習最完整的資源。 XNA Game Studio 4.0 Refresh 開發手冊 關於 XNA 開發的所有說明文件都在這裡。 Silverlight for Windows Phone (7.1) 介紹關於…

0

[WP7開發] 使用 Silverlight Toolkit 中的日期選擇器

在設計應用程式時,常常會用到選擇日期的欄位,這時可以利用 Silverlight for Windows Phone Toolkit 中提供的「日期選擇器」(DatePicker)控制項來做到方便輸入日期的介面。 不知道怎麼將 Silverlight for Windows Phone Toolkit 加入開發專案可以先參考這篇文章,加入 References 之後,在設計介面的 XAML 檔中只需要使用 <toolkit:DatePicker x:Name="TheDate" Value="5/31/2011″ /> 這個標籤就可以在應用程式中塞入日期選擇器了。 這個控制項有一個好處--它已經自動處理了不同語系的說明文字、年月日的排列,下面兩張圖就是 en-US 以及 zh-TW 的不同:   不過別忘了要從 Silverlight for Windows Phone Toolkit 中取出 ApplicationBar.Check.png 以及 ApplicationBar.Cancel.png 放置於專案中的 Toolkit.Content 目錄中(別忘了這兩個檔案的 Build Action 屬性都要設成 Content,Copy to Output 也要設成 Copy if newer),這樣介面才會正常出現下方的按鈕圖案。 而處理日期選擇更動的事件,只要處理 ValueChanged 事件即可: [XAML]…

0

開發試用版 Windows Phone 應用程式

在 Windows Phone 的 Marketplace 中,開發者可以為同一個 app 來開發試用版本(不必另外寫一個 lite 版本的 app 來處理),一般而言,提供試用下載的應用程式將更能吸引消費者來試用你的 app。 在 Windows Phone 的 app 開發中,不論你是要以 Silverlight 還是 XNA 為開發 app 的基礎,都有很簡單的方式來處理或模擬試用模式。 Silverlight 要判斷程式是在試用模式還是一般模式上執行,只需要下列的程式碼: using Microsoft.Phone.Marketplace; … LicenseInformation licenseInfo = new LicenseInformation(); if (licenseInfo.IsTrial) { // 試用模式 } else { // 一般模式 } 而在開發時期,要在模擬器上測試試用模式的設計是否正確,可以把判斷是否為試用模式的程式碼再包裝一下: bool IsTrial() { #if DEBUG return true; #else…

0

[WP7開發] 處理 JSON 字串

目前許多網路服務、API 都喜歡使用 JSON 格式的字串做為交換格式,在 Windows Phone 上開發網際網路應用程式時,幾乎不可避免地得處理 JSON 格式的字串,這時可以使用一套高效能的第三方套件--Json.NET 來處理。 安裝套件 要在 Windows Phone 專案中加入 Json.NET 這個套件十分容易,因為 Visual Studio 已經與 NuGet 套件工具整合,所以可以直接在 Solution Explorer 的視窗內,於專案下的 References 按滑鼠右鍵,選擇 Add Library Package Reference…: 這時便會開啟套件安裝對話盒,在左方選擇 Online,然後於搜尋框中輸入 Json.NET 便可以找到 Newtonsoft.Json 的套件了,這時再按下 Install 來安裝它。 等待它安裝完畢,就可以將安裝套件的對話盒關閉了。 不過,當它自動安裝完畢時,自動帶入 References 的函式庫並不是適合 Windows Phone 環境運作的,所以得先將原本自動帶入的 Newtonsoft.Json.Silverlight 移除掉,再到 References 上右鍵選擇 Add References…,從專案資料夾下找到 packages > Newtonsoft.Json.4.0.2…

0

為 Mango 更新的 Silverlight Toolkit

Silverlight Toolkit 是一套 Silverlight 控制項/元件的專案,除了提供功能更多的控制項之外,它還能讓你在 Visual Studio 中,在工具箱(Toolkit)中加入視覺化的拖拉元件,加速介面開發的速度。而基於 Silverlight 的 Windows Phone,這個專案也提供了一套 Silverlight for Windows Phone Toolkit,內容當然是針對 Windows Phone 上面的介面控制項,而在 Windows Phone 即將推出正式版的 Mango 版本開發工具時,Silverlight for Windows Phone Toolkit 也為 Mango 有了一次更新,提供更多的控制元件。 安裝方式很簡單,首先到這裡下載最新版本(或是透過 NuGet 工具來安裝),安裝完畢後,可以依照下列步驟在 Visual Studio 中加入控制項元件: 在開啟 Windows Phone 專案的時候,打開「Toolbox」(也就是拖拉介面控制項的地方),於下方空白處按下右鍵選擇「Add Tab」:   將新增出來的 tab 命名為「Silverlight for Windows Phone Toolkit」(這裡可以隨你高興):   在新增出來的 tab 中,按下右鍵選擇「Choose Items…」:   最後,將…

0

[WP7開發] 利用 SystemTray 做進度提示 (Mango)

Windows Phone 7 在 Mango 更新(Windows Phone 7.5)之後新增了不少 APIs,其中一個部份就是能在程式中操作 SystemTray 的控制項,這個控制項本身就有提供 ProgressIndicator 的物件設計,所以很適合用來做為讀取中的提示訊息。 使用 SystemTray 可以從設計介面的 XAML 檔案以及程式碼來下手,首先如果要在 XAML 中最上層的 <phone:PhoneApplicationPage>標籤中加入下列的屬性: <phone:PhoneApplicationpage … xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" … shell:SystemTray.BackgroundColor="<背景顏色>" shell:SystemTray.ForegroundColor="<前景顏色>" shell:SystemTray.Opacity="<透明度>" shell:SystemTray.IsVisible="<啟動時是否顯示>"> … </phone:phoneapplicationpage> 這些屬性是用來指定 SystemTray 控制項一些基本視覺元素,但光是這樣還沒辦法讓它成為讀取的提示,還需要在程式裡面指定 ProgressIndicator 才行,程式的操作範例如下: using Microsoft.Phone.Shell; … // 建立 ProgressIndicator 並設定給 SystemTray ProgressIndicator pi = new ProgressIndicator(); pi.Text = “Loading…"; pi.IsIndeterminate = true;…

0

[WP7開發] App 啟動時選擇不同的頁面

在建立 Windows Phone 專案時,專案範本都會建立一個預設啟動的頁面 — MainPage.xaml。但有的時候會希望能在 app 啟動時,根據一些邏輯判斷而選擇不同的頁面來啟動,這時可以採用以下的作法。 首先,將專案目錄中的 Properties\WMAppManifest.xml 檔案中的 <Tasks></Tasks> 標籤中的 <DefaultTask> 修改為 <Tasks> <DefaultTask Name="_default" /> </Tasks> 將原本設定的 TaskName="MainPage.xaml" 拿掉。 這樣的修改完畢後,再到 App.xaml.cs 檔案中,在 Application_Launching 事件中就可以自己決定要載入的畫面(Page1.xaml 或 Page2.xaml),程式範例如下: private void Application_Launching(object sender, LaunchingEventArgs e) { string target; if (判斷式1) { target = “Page1.xaml"; } else { target = “Page2.xaml"; } RootFrame.Navigate(new Uri(target, UriKind.Relative));…

0

利用 Microsoft Web Platform Installer 來安裝知名的 Web 應用程式

目前網路上有許多知名的 Web 應用程式,像是 WordPress、Drupal 或是 Joomla! 等,這些應用程式能夠很快速地架起一個部落格或是內容網站。而 Microsoft 推出了一個 Web Platform Installer (簡稱:WebPI)的工具,透過這個工具,你便能很快地在電腦上裝好這些應用程式,方便開發以及後續的部署(至伺服器上線)。 安裝好 WebPI 之後,執行的畫面像是這樣: 切換至「應用程式」的類別之後,便可以看到許多 web 應用程式的列表,選擇想要安裝的應用程式,只需要按下右側的「新增」按鈕,最後再按下「安裝」的按鈕,WebPI 就會自動幫忙安裝需要的檔案,例如:Drupal 是以 PHP 來開發的,WebPI 便會幫忙安裝需要的 PHP 函式庫以及資料庫系統。 接下來就是等待它從網路上下載這些套件來安裝: 安裝完成後,就可以使用開發環境來編修應用程式的內容了(下圖是以 WebMatrix 作為開發環境): 而在使用 WebMatrix 作開發環境時,也會自動執行一個 IIS Express 的伺服器來執行這個 Web 應用程式,開發時就可以在本機做測試了。 參考資料 Microsoft Web Platform: http://www.microsoft.com/web/

0

迎接 Internet Explorer 10 Platform Preview 1

雖然 Internet Explorer (IE) 9 最近才釋出正式版,不過 IE 的開發團隊可沒閒著,繼續推出了 Internet Explorer 10 的第一個預覽版本(IE10 PP1),有興趣的人可以前往這裡下載。 IE10 PP1 有幾項更新,主要是對於更多 CSS3 模組的支援,像是: 浮動式區塊排版(Flexible Box Layout) 這項功能主要是解決了不同區塊(block)在頁面上水平或垂直排版的問題。在這項支援之前,你只能將一個區塊設定成 inline、block、或是 inline-block(設定 CSS 的 display 屬性),但這樣還是不夠,比方說 inline 不能設定高度、block 一定會換行(水平不能接續其它區塊),而 inline-block 不能自動延展,更別提區塊間的對齊問題,過去總是要使用一堆奇技淫巧才能致始某個區塊能水平垂直置中。在有了 flexible box layout 之後,只需要調整 CSS 屬性便可。 格子對齊(Grid Alignment) 格子(Grid)有點像表格(table),但是它比表格更有彈性。你可以將一個區塊的 display 屬性設定成 -ms-grid(其它的瀏覽器可能是 -moz-grid 或 -webkit-grid,在標準尚未定案前,都得加上這些瀏覽器的綴字),然後就可以指定某個區塊佔有幾列(row)幾行(column)的大小,不必像表格那樣,使用 <td> 標籤只能有一列一行的大小。 多欄式排版(Multi-column) 如果你有讀過報紙、或是論文,可能有看過文章內容會分成多欄式呈現,這項支援將讓您可直接利用 CSS 來調整內容排版的欄數。 色彩漸層(Gradients)…

0