Windowsphone custom tile Layout

Someone once asked how to customize the tile layout. Here I can only answer: This layout has been defined by Microsoft and cannot be customized, all you can do is assign values to several standardtiledata attributes.

However, we can use other methods to create a custom Layout tile. The principle is very simple. We only assign background images to standardtiledata. Then we can make this background image show any layout we want, so we only need to generate this image and it will be OK.

First, let's look at the effect of this image. We can see a tile with three rows of data. In fact, I just assigned this tile an image that I generated beforehand.

First, enterProgramLet's start the interface. The effect is as follows.

Code

 

 <  Grid  X: Name  = "Layoutroot"  Background  = "Transparent"  >          < Button  X: Name  = "Btnone"  Content  = "Layout 1"  Horizontalalignment  = "Left"  Margin  ="  Verticalalignment  = "TOP"  Click  = "Btnone_click"  />          <  Button X: Name  = "Btntwo"  Content  = "Layout 2"  Horizontalalignment  = "Left"  Margin  = "36,371"  Verticalalignment  = "TOP"  Click  = "Btntwo_click"  />          <  Stackpanel  X: Name = "Ui1"  Horizontalalignment  = "Left"  Height  = "173"  Margin  = "232,46, 0, 0"  Verticalalignment  = "TOP"  Width  = "173"  >              <  Grid  Height  = "58" Background  = "Red"  >                  <  Textblock  Text  = "Three rows horizontally"  Verticalalignment  = "Center"  Horizontalalignment  = "Center"  />              </  Grid  >              <  Grid Height  = "58"  Background  = "Blue"  >                  <  Textblock  Text  = "Custom layout"  Verticalalignment  = "Center"  Horizontalalignment  = "Center"  />              </  Grid  >             <  Grid  Height  = "57"  Background  = "Yellow"  >                  <  Textblock  Text  = "Custom content"  Foreground  = "Red"  Verticalalignment  = "Center"  Horizontalalignment  = "Center" />              </  Grid  >          </  Stackpanel  >          <  Grid  X: Name  = "Ui2"  Horizontalalignment  = "Left"  Height  = "173"  Margin = "232,321"  Verticalalignment  = "TOP"  Width  = "173"  >              <  Image  Source  = "Psu.png"  />          </  Grid  >      </  Grid  > 

 

Then the background code:

 Private   Void Btnone_click ( Object  Sender, routedeventargs e ){  Bool B = savetileimage ( "  Img1.jpg  "  , Ui1); standardtiledata std = New  Standardtiledata () {backgroundimage = New Uri ("  Isostore:/shared/shellcontent/  " + "  Img1.jpg  "  )}; Createtile (  "  /Mainpage. XAML? Id = 1  "  , STD );}  Private   Void Btntwo_click ( Object  Sender, routedeventargs e ){ Bool B = savetileimage ( "  Img2.jpg  "  , Ui2); standardtiledata std = New  Standardtiledata () {backgroundimage = New Uri ( "  Isostore:/shared/shellcontent/  " + "  Img2.jpg  " )}; Createtile (  "  /Mainpage. XAML? Id = 2  "  , STD );}  ///   <Summary>          ///  Combine the UI and save the tile background image.  ///   </Summary>          ///   <Param name = "imagename">  Saved name  </Param>         ///   <Param name = "UI">  Ui combination of the image to be generated  </Param>          ///   <Returns>  Successful or not  </Returns>          Private   Bool Savetileimage ( String  Imagename, uielement UI) {bitmapimage img = New  Bitmapimage ();  Using (Isolatedstoragefile appstorage = Isolatedstoragefile. getuserstoreforapplication () {writeablebitmap WB = New Writeablebitmap ( 173 , 173  ); WB. Render (ui,  Null  ); WB. invalidate ();  Using ( VaR Newfile = appstorage. createfile ( "  /Shared/shellcontent/ " + Imagename) {WB. savejpeg (newfile, WB. pixelwidth, WB. pixelheight,  0 , 100  );  Return   True  ;}}}  ///   <Summary>          ///  Create Tile  ///   </Summary>         ///   <Param name = "Uri">  A unique tile ID and navigation  </Param>          ///   <Param name = "tiledata">  Tile data  </Param>          Public   Void Createtile ( String  Uri, standardtiledata tiledata) {shelltile oldtile = Shelltile. activetiles. firstordefault (E =>E. navigationuri. tostring (). Contains (URI ));  If (Oldtile! = Null  ) {Oldtile. Delete ();} shelltile. Create (  New  Uri (Uri, urikind. relativeorabsolute), tiledata );} 

 

It is noted that the Image Location of the isolated storage that can be read by the tile background is/shared/shellcontent /.

I used to share a full list of tile operations.

Http://www.cnblogs.com/wildfeng/archive/2012/12/07/2807028.html