動手實驗
實驗7:磁貼和通知
2012年9月
簡介
磁貼是Windows市集應用使用者體驗的重要元素。當應用程式被安裝後,它的磁貼將在Windows 8開始畫面被建立。該磁貼(稱為主磁貼)作為啟動應用程式的捷徑。預設情況下,主磁貼的映像來自Logo.png檔案,它由Visual Studio包含在Window市集項目中。映像大小為150X150像素,並由它建立了一個正正方形磚。然而,通過向項目添加一個310X150的映像並在應用程式資訊清單中將它指定為“寬徽標”,您可以同時在應用程式中包含一個寬磁貼。如果應用程式支援寬磁貼,那麼使用者可以在開始畫面上在正正方形磚和寬磁貼之間進行切換。
Windows市集應用同時包含建立附加磁貼(稱為次要磚)的選項。次要磚作為啟動應用程式的捷徑,同時為應用程式提供預定義的位置和狀態。例如天氣應用程式會允許使用者為華盛頓州雷德蒙德和喬治亞州亞特蘭大等地理位置建立次要磚。使用者然後可以通過簡單地點擊次要磚啟動應用程式並查看雷德蒙德或亞特蘭大的天氣。
您可以通過使用Windows運行時中的Windows.UI.StartScreen.SecondaryTile類建立次要磚。磁貼建立通常由使用者發起,例如在應用程式列點擊某個命令。具備建立次要磚功能的應用程式提供了許多參數,包括磁貼背景映像的統一資源識別項 (URI)和一個包含啟用參數的字串。當應用程式從次要磚啟動時,作業系統將啟用參數傳遞給應用程式。這些參數提供了應用程式的初始化資訊。對於天氣應用程式,啟用參數也許僅僅是一個郵遞區號。
磁貼被建立後,它不必保持靜止狀態。Windows市集應用享有許多通過更新和推播通知使磁貼內容動態和令人信服的方法。例如應用程式可以使用Windows.UI.Notifications.TileUpdater類更新磁貼的內容。這些更新可以可選地被排隊。當啟用隊列後,作業系統每隔幾秒鐘輪換顯示最近的五個更新,這使磁貼顯得新鮮和生動。
當然應用程式需要在運行時刻才能使用TileUpdater類更新磁貼。但是磁貼甚至可以在應用程式未運行時被更新(通過Windows通知服務,WNS)。設想天氣應用程式即使在未運行時也需要顯示惡劣天氣警報。通過Windows通知服務,天氣應用程式的伺服器可以發送推播通知來更新開始畫面的磁貼。
推播通知並不局限於更新磁貼。它們也可以彈出包含使用者訊息的toast注視窗(例如“在您的地區檢測到惡劣天氣”),並且在磁貼上顯示徽章(數字或預定義的字形)。例如,設想一個提醒使用者在收件匣中有新訊息的郵件應用程式。
在本實驗中您將通過向Contoso Cookbook添加次要磚、推播通知和toast以獲得關於它們的第一手體驗。在結束時,使用者將能夠通過次要磚在開始畫面固定喜愛的食譜,通過Windows通知服務查看磁貼的更新和toast的運行。
譯者註:Toast指土司、麵包塊,這裡指在類似麵包塊形狀的長方形地區中顯示的訊息。
目標
本實驗將向您展示如何:
建立次要磚。
使用推播通知更新主磁貼。
使用計劃toast通知使用者,即使應用程式未運行。
系統要求
您需要下列軟體完成本實驗:
Microsoft Windows 8
Microsoft Visual Studio 2012
設定
您必須執行以下步驟來準備本實驗的電腦:
1、安裝 Microsoft Windows 8。
2、安裝 Microsoft Visual Studio 2012。
練習
本動手實驗包含以下練習:
1、合并(Incorporate)次要磚
2、合并推播通知
3、合并計劃toast
完成本實驗的預計時間:30至40分鐘。
練習 1: 合并次要磚
在本練習中您將向項-明細頁面的應用程式列添加命令以允許使用者在開始畫面使用次要磚固定喜愛的食譜。您還將向Contoso Cookbook添加邏輯,使得當應用程式從次要磚啟用時能夠顯示相應的食譜。
任務1 – 修改應用程式列
需要完成的第一項工作是嚮應用欄添加固定命令。然後我們為其編寫處理常式以建立次要磚,點擊該磁貼可以顯示當前顯示的食譜。
1、在Visual Studio中開啟您在實驗6中完成的ContosoCookbook項目。如果您尚未完成實驗6或希望從一個參考副本開始,您可以在開始材料中找到實驗已完成的版本。
2、開啟ItemDetailPage.xaml並在應用程式列“LeftCommands”部分的結束處添加以下語句。
XAML
<Button x:Name="PinRecipeButton" HorizontalAlignment="Left" Style="{StaticResource PinAppBarButtonStyle}" Click="OnPinRecipeButtonClicked" />
3、開啟StandardStyles.xaml並定位到被注釋的樣式元素中的關鍵字PinAppBarButtonStyle。取消注釋以使代碼如下所示。
XAML
<!-- <Style x:Key="RenameAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"> <Setter Property="AutomationProperties.AutomationId" Value="RenameAppBarButton" /> <Setter Property="AutomationProperties.Name" Value="Rename" /> <Setter Property="Content" Value="" /> </Style> --> <Style x:Key="PinAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"> <Setter Property="AutomationProperties.AutomationId" Value="PinAppBarButton" /> <Setter Property="AutomationProperties.Name" Value="Pin" /> <Setter Property="Content" Value="" /> </Style><!--<Style x:Key="MusicInfoAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
查看本欄目更多精彩內容:http://www.bianceng.cnhttp://www.bianceng.cn/Programming/net/