第五天session10磁貼和labcn tiles

概 練習(xí)1:增加翻轉(zhuǎn)磁 任務(wù)1–增加和更換 任務(wù)2–支持翻轉(zhuǎn)磁 任務(wù)3–測(cè)試翻轉(zhuǎn)磁貼支 練習(xí)2:增加循環(huán)磁 任務(wù)1–支持循環(huán)磁 任務(wù)2–測(cè)試循環(huán)磁 練習(xí)3:增加圖標(biāo)磁 任務(wù)1–改變 任務(wù)2–支持圖標(biāo)磁 任務(wù)3–測(cè)試圖標(biāo)磁貼支 總 概WindowsPhone8應(yīng)用可以在用戶的情況下在開始屏幕上訂上二級(jí)磁貼。二級(jí)磁貼可以跳轉(zhuǎn)WindowsPhone8中有四種動(dòng)態(tài)磁標(biāo)準(zhǔn)磁貼:在WindowsPho5，這是唯一的能顯示一個(gè)圖標(biāo)和標(biāo)題文字的磁貼。為了向后兼容，而使用這種磁貼。不像其他的磁貼，標(biāo)準(zhǔn)磁貼不支持寬磁貼的大小。如果開發(fā)商不提供另一種類型的磁貼，通過固定應(yīng)用程序到開始屏幕會(huì)使用默認(rèn)的標(biāo)準(zhǔn)磁貼。循環(huán)磁貼：循環(huán)顯示多個(gè)圖像和文字翻轉(zhuǎn)磁貼：自動(dòng)翻轉(zhuǎn)的雙面磁貼。除了支持標(biāo)準(zhǔn)大小，它也支持寬磁貼圖標(biāo)磁貼：靜態(tài)的數(shù)字徽章的圖標(biāo)來表示應(yīng)用程序的狀態(tài)。寬圖標(biāo)磁貼，還可以通過一開發(fā)人員可以指定在不同的情況下使用哪個(gè)磁貼類型，以及每種類型的磁貼提供的文字和圖像，給磁貼多種外觀。此外，WindowsP8允許用戶自定義三種尺寸：小，中，或?qū)挼拇刨N。因此，應(yīng)用程序可以在開始畫面上顯示不同的詳細(xì)程度的信息。我們想使用戶可以在ContosoCookbook應(yīng)用程序在“開始”屏幕的磁貼能顯示較具體的菜譜。每如何修改不同的代碼文件來支持二級(jí)磁貼，會(huì)在下面的練習(xí)中解釋目這個(gè)實(shí)驗(yàn)提供指令來支持以下目標(biāo)在一個(gè)應(yīng)用中支持磁支持不同類型的磁貼（循環(huán)，翻轉(zhuǎn)和圖標(biāo)需下面的需求是這個(gè)實(shí)驗(yàn)的先決條件 VisualStudioExpress2012forWindowsPhone或 VisualStudio2012withtheWindowsPhoneSDK一些WindowsPhone開發(fā)經(jīng)實(shí)驗(yàn)結(jié)本實(shí)驗(yàn)包括3個(gè)練習(xí)來完成以下任務(wù)增加增加循環(huán)磁貼的支增加翻轉(zhuǎn)磁貼的支增加圖標(biāo)磁貼的支測(cè)試應(yīng)估計(jì)完成時(shí)完成這個(gè)實(shí)驗(yàn)需要至少60分1:增加翻轉(zhuǎn)磁本練習(xí)中，我們會(huì)修改ContosoCookbook來支持二級(jí)磁貼，并由翻轉(zhuǎn)磁貼開始。我們會(huì)測(cè)試我們這個(gè)練習(xí)會(huì)集中在翻轉(zhuǎn)磁貼上，在隨后的練習(xí)中會(huì)展示其它兩種磁貼。任務(wù)1–增加和更換Assets在這個(gè)任務(wù)中，添加和更換我們應(yīng)用需要支持的磁貼圖像打開VisualStudio2012導(dǎo)航到EX1\begin文件夾打開ContosoBookbook.sln解決方案定位到主項(xiàng)目下的Assets文件夾資源瀏覽器里的項(xiàng)目選擇增加>已有項(xiàng)把下面文件添加進(jìn)定位到Assets/Icons文件把下面添加到Assets/Icons文件夾內(nèi)現(xiàn)在這些assets()加載到我們項(xiàng)目中了。并會(huì)在后面任務(wù)中使用2支持翻轉(zhuǎn)磁為了訂和取消訂這些磁貼，須代替并擴(kuò)展Common.Features類所提供的功能打開Features.cs文定位到Tile我們會(huì)使用一個(gè)翻轉(zhuǎn)磁貼的背面來顯示食譜細(xì)節(jié)信息。定位并代替SetTile方法里的內(nèi)Tile.Create(newTile.Create(newUri(navDataSource,UriKind.Relative),tileData,SFlipTileDatatileData=new{//FrontsquaredataTitle=BackgroundImage=newUri(item.GetImageUri(),UriKind.Relative),SmallBackgroundImage=newUri(item.GetImageUri(),//BacksquaredataBackTitle=item.Title,BackContent=MakeString(item.Ingredients),BackBackgroundImage=newUri(item.Group.GetImageUri(),//WidetileWideBackgroundImage=newUri(item.GetImageUri(),WideBackBackgroundImage=newWideBackContent=item.Directions注意WideBackgroundImageWideBackBackgroupImageWideBackContent屬性。通過使前面的SetTile方法使用的MakeString方法包含來的配方字符串作為寬模式下的屬性?，F(xiàn)在，我們來實(shí)現(xiàn)此方法。下面的方法添加到類privateprivatestaticstringMakeString(ObservableCollection<string>{stringres=foreach(varingredientin{res+=ingredient+}return}此外，在文件頂部增加”using”命名控件usingusing注意SetTile方法已經(jīng)被RecipeDetailPage.xaml.cs里的btnPinToStart_Click處理，并不需要做進(jìn)一步修改。果是，翻轉(zhuǎn)磁貼會(huì)被用來顯示每個(gè)用戶訂到開始菜單的食譜。3測(cè)試翻轉(zhuǎn)磁貼支我們的ContosoCookbook應(yīng)用已經(jīng)準(zhǔn)備好了。我們開始運(yùn)行應(yīng)用來測(cè)試編譯，部署，運(yùn)行應(yīng)用點(diǎn)擊一個(gè)食譜滾動(dòng)pivot控件到Recipes項(xiàng)。如果你看到一個(gè)空白的屏幕帶著"BuythisApp"按鈕，點(diǎn)擊按選擇食酸味香腸（SaureZipfel）點(diǎn)擊右下角的"…"按鈕。會(huì)出現(xiàn)”pin”按鈕。因?yàn)楝F(xiàn)在配方還沒訂到開始屏幕上點(diǎn)擊"pin"按鈕然后當(dāng)出現(xiàn)”SetasLockScreen”詢問的時(shí)候選擇"Yes"來確定鎖屏?xí)r應(yīng)用來作為背景提供者。檢查你所選擇的翻轉(zhuǎn)磁貼在成份配方和之間翻轉(zhuǎn)點(diǎn)擊返回按2次來返回食譜組并用同樣步驟訂另外一個(gè)食譜。按住一個(gè)磁貼，直到圖像上改變了外觀點(diǎn)擊磁貼右上角"unpin"（取消訂）圖標(biāo)。磁貼應(yīng)該會(huì)按住另外一個(gè)磁貼直到圖標(biāo)變化點(diǎn)擊右下的"Changesize"（更改尺寸）圖標(biāo)磁貼可以在不同尺寸之間變化（小，中，2:增加循環(huán)磁任務(wù)1–支持循環(huán)磁貼.一個(gè)循環(huán)磁貼顯示一系列的圖像。使用一個(gè)循環(huán)磁貼來顯示用戶所選擇的一組食譜組的譜圖像在之前，為了支持循環(huán)磁貼，替換一些常見的Common.Features類提供的功能打開Features.cs文件定位到Tile加入下面新方法publicpublicstaticvoidSetGroupTile(RecipeDataGroupgroup,string{List<Uri>list=newList<Uri>();foreach(varrecipeingroup.Items)list.Add(newUri(recipe.ImagePath.LocalPath,CycleTileDatatileData=new{Title=SmallBackgroundImage=newCycleImages= Tile.Create(newUri(navDataSource,UriKind.Relative),tileData,}前面的方法創(chuàng)建了一個(gè)循環(huán)磁貼，翻看所有的食譜配方中的組。一個(gè)循環(huán)磁貼配置，包括設(shè)置e,SgounImage,和cleImages屬性。接下來，我們支持用戶添加訂組到“開始”屏幕的功能打開GroupDetailPage.xaml文件定位并替換phone:PhoneApplicationPage.ApplicationBar元素如下:ApplicationBarIsVisible="True"Mode="Minimized" :ApplicationBarIconButtonx:Name="btnPinToStart"Click="btnPinToStart_Click"Text="PinTo打開GroupDetailPage.xaml.cs文件在文件頂部引入命名控件;在GroupDetailPage類中加入如下內(nèi)容privateprivateconststringRemoveFavUri="/Assets/Icons/unpin.png";privateconststringFavUri="/Assets/Icons/pin.png";這些常量被用來訂和取消訂的按鈕（）加入以下屬性publicpublicApplicationBarIconButton{{varappBar=(ApplicationBar)ApplicationBar;varcount=appBar.Buttons.Count;for(vari=0;i<count;{ApplicationBarIconButtonbtn=if(btn.IconUri.OriginalString.Contains("pin"))returnbtn;}return}}voidvoid{varvaruri=NavigationService.Source.ToString();if(Features.Tile.TileExists(uri)){pinBtn.IconUri=newUri(RemoveFavUri,UriKind.Relative);pinBtn.Text="Unpin";}{pinBtn.IconUri=newUri(FavUri,UriKind.Relative);pinBtn.Text="Pin";}}定位到OnNavigatedTo方法，并代替最后一行(base.OnNavigatedTo)為以下代碼最后，我們應(yīng)該加一個(gè)來訂和取消訂按鈕。如果用戶訂了組，我們應(yīng)該創(chuàng)建一個(gè)二級(jí)磁貼。如果用戶取消訂了，我們應(yīng)該刪除它。加入以下：privateprivatevoidbtnPinToStart_Click(objectsender,EventArgs{varuri=NavigationService.Source.ToString();if(Features.Tile.TileExists(uri))Features.Tile.SetGroupTile(group,}2測(cè)試循環(huán)磁我們的ContosoCookbook應(yīng)用已經(jīng)準(zhǔn)備好了。運(yùn)行并來進(jìn)試編譯，部署，然后運(yùn)行點(diǎn)擊一個(gè)食譜點(diǎn)擊右下角的"…"按鈕，”pin”按鈕會(huì)出現(xiàn)，因?yàn)楝F(xiàn)在組還沒訂到開始屏幕上點(diǎn)擊pin訂)按鈕。被選中組的循環(huán)圖標(biāo)就會(huì)出現(xiàn)在開始屏幕上。等幾秒，然后循環(huán)的圖片會(huì)定期替換。按住磁貼直到圖標(biāo)出現(xiàn)變化點(diǎn)擊右下的"Changesize"（更改尺寸）圖標(biāo)磁貼可以在不同尺寸之間變化（小，中，3:增加圖標(biāo)磁在這個(gè)練習(xí)中，我們會(huì)為ContosoCookbook增加圖標(biāo)磁貼。1–Manifest首先，我們更新應(yīng)用的磁貼模版來支持圖標(biāo)磁貼打開WMAppManifest.xml文件定位到"ApplicationUI"然后下來菜單到底部。在"TileTemte"復(fù)選框，選擇select"TemteIconic"：選擇TileTem在”TileTitle”中輸入"ContosoCookbook"點(diǎn)擊”Small”磁貼下的"…"按鈕，選擇Assets\SmallLogo.png文件增加一個(gè)小圖標(biāo)磁貼點(diǎn)擊”Medium”磁貼下的"…"按鈕，選擇Assets\MediumLogo.png文件增加一個(gè)中圖標(biāo)磁貼這個(gè)應(yīng)用現(xiàn)在能在開始屏幕上顯示自定義的圖標(biāo)磁貼了2支持圖標(biāo)磁osoook應(yīng)用將使用圖標(biāo)磁貼來顯示最近過的主食譜配方組的簡要信息。圖標(biāo)磁貼在中或者寬尺寸下支持顯示數(shù)字徽章，標(biāo)題以及寬尺寸下最多三行文本。為了把我們的應(yīng)用訂在主開始屏幕上，下滾已安裝的應(yīng)用列表，找到osoookbook,按住并點(diǎn)擊菜單中的”inort”。像之前一樣，為了支持圖標(biāo)磁貼，我們代替Common.Features類中的一些方法打開Features.cs文件在頂部的加入命名空間usingusing加入以下新方法publicpublicstaticvoidUpdateMainTile(RecipeDataGroup{//Getapplication'smainvarmainTile= if(null!={IconicTileDatatileData=new{Count=BackgroundColor=Color.FromArgb(255,195,61,39),Title="ContosoCookbook",IconImageIconImage=newSmallIconImage=newUri("/Assets/SmallLogo.png",WideContent1=