Windows Phone development (12): a personalized Tile

The Understanding of "tile" is not abstract at all. Why? As long as you are willing to start the WP system, whether you are in the simulator or in the real machine, yes, the things like the floor on the desktop are magnetic stickers.
(Figure: Tile)

In the middle, we can intuitively see the true face of the tile. In fact, it is obvious that this design is really personal. To be honest, when WP was just launched, many people say that they are actually just starting to get started.
I like the blocks on the desktop. This is the first time WP impressed me. After all, on Android and iOS, all we see is the icon display method of traditional mobile phones, and WP always makes me feel very personalized.

Okay. Let's take a look at some of them, okay? Don't underestimate the square blocks. There are many articles in it. Believe it? Let's take a look.

A tile consists of three elements: the background image, the title text, and the counter. Well, of course, the most interesting part of the tile is that it has both sides.
The structure of the front and back sides of the graph block.

 

=> Category of the tile.

The tile can be divided into application tile and secondary tile.
How can this problem be solved? Well, first let's look at the application tile, which means to pin the application to the "Start" screen by pressing the application in the User Application List.

 

So how to delete it? On the "Start" screen, find the block you want to remove and press it. A small icon will appear in the upper left corner of the block. Click this icon to remove the tile. Of course, if you want to move to another location, you only need to drag the icon to the corresponding location, and then click it on the desktop to complete the move operation.

 

The secondary tile is relative to the previous application tile. It is created by the application through specific parameters. Simply put, it is through our developers, it is created using code.

This is like the shortcut on the Windows desktop. Some direct points to executable programs, while some are created by applications, which are followed by command line parameters. For example, I often go to Sina Weibo and want to create an IE shortcut icon on the desktop, double-click IE to open the Sina Weibo homepage. How can this problem be solved? See.

 

In this way, you double-click the shortcut to start IE and then automatically open the Sina Weibo homepage. The secondary tile is similar to this one.

=> Hands-on practice.

Next, let's take a look at a more comprehensive example. Well, now, you can sit down, drink a few milk teas, start vs, and create a WP project. The interface layout is roughly as follows, so you can use it freely.

 

Prepare two Mets. You like the image content, but you can click here. The size is 173 * 1732.16.jpg or .png. One is the front background of the tile and the other is the back background of the tile.
Note: change the image generation operation to "content ".

 

Of course, in order to facilitate your reference, I have posted the XAML. I hope that you do not copy it directly, but seriously enter it in, you need to write more code and practice to find the feeling.

<Phone: phoneapplicationpage X: class = "shelltitleapp. 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 quota}" fontsize = "{staticresource quota}" foreground = "{staticresource quota}" supportedorientations = "portrait" orientation = "portrait" Shell: systemtray. isvisible = "true"> <Phone: phoneapplicationpage. resour CES> <style X: key = "textblstyle" targettype = "textblock"> <setter property = "fontsize" value = "28"/> <setter property = "margin" value = "0, 12, 5, 6 "/> <setter property =" horizontalalignment "value =" right "/> </style> <style X: key = "textboxstyle" targettype = "textbox"> <setter property = "fontsize" value = "28"/> <setter property = "width" value = "300"/> <setter property = "height" value = "Auto"/> <setter property = "horiz Ontalalignment "value =" Left "/> </style> </Phone: phoneapplicationpage. Resources> <! -- Layoutroot is the root mesh that contains all page content --> <grid X: Name = "layoutroot" background = "Transparent"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "*"/> </grid. rowdefinitions> <! -- Titlepanel contains the application name and page title --> <stackpanel X: Name = "titlepanel" grid. row = "0" margin = ","> <textblock X: name = "applicationtitle" text = "my application" style = "{staticresource phonetextnormalstyle}"/> <textblock X: name = "pagetitle" text = "sample program" margin = "9,-7,0, 0" style = "{staticresource phonetexttitle1style}"/> </stackpanel> <! -- Contentpanel-place other content here --> <grid X: Name = "contentpanel" margin = "0" grid. row = "1"> <grid. rowdefinitions> <rowdefinition Height = "*"/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <scrollviewer horizontalscrollbarvisibility = "Auto" grid. row = "0"> <grid margin = "1"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> <rowdefinition Height = "Auto"/> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "*"/> </grid. columndefinitions> <textblock grid. row = "0" grid. column = "0" text = "front title:" style = "{staticresource textblstyle}"/> <textbox X: name = "txtforetitle" style = "{staticresource textboxstyle}" grid. row = "0" grid. column = "1"/> <textblock text = "counter :" Style = "{staticresource textblstyle}" grid. row = "1" grid. column = "0"/> <textbox X: Name = "txtcount" grid. column = "1" grid. row = "1" style = "{staticresource textboxstyle}"> <! -- Only numbers can be entered --> <textbox. inputscope> <inputscopename namevalue = "Number"/> </inputscope> </textbox. inputscope> </textbox> <textblock text = "Back title:" grid. row = "2" grid. column = "0" style = "{staticresource textblstyle}"/> <textbox X: Name = "txtbacktitle" grid. row = "2" grid. column = "1" style = "{staticresource textboxstyle}"/> <textblock text = "Background:" grid. row = "3" grid. column = "0" style = "{staticresource Textblstyle} "/> <textbox X: Name =" txtbackcontent "grid. Row =" 3 "grid. Column =" 1 "style =" {staticresource textboxstyle} "/> <! -- Indicates how to start --> <checkbox X: Name = "chkstarttype" ischecked = "false" grid. row = "4" grid. column = "0" grid. columnspan = "2" fontsize = "30" content = "start" isenabled = "false"/> </GRID> </scrollviewer> <stackpanel grid. row = "1" orientation = "horizontal"> <button X: Name = "btnaddtoshelltitle" content = "add tile" Click = "btnaddtoshelltitle_click"/> <button X: name = "btnupdateshelltitle" content = "Update" Click = "btnupdateshelltitle_click"/> <button X: name = "btndeleteshelltitle" content = "delete" Click = "btndeleteshelltitle_click"/> </stackpanel> </GRID> </Phone: phoneapplicationpage>

Okay. In the end, of course, the C # code is also written.

Using system; using system. collections. generic; using system. LINQ; using system. net; using system. windows; using system. windows. controls; using system. windows. documents; using system. windows. input; using system. windows. media; using system. windows. media. animation; using system. windows. shapes; using Microsoft. phone. controls; using Microsoft. phone. shell; using system. windows. threading; namespace shelltitleapp {Publ IC partial class mainpage: phoneapplicationpage {// relative path of the image to be used: Private const string fore_pic = "images/a.png"; private const string back_pic = "images/B .png "; // constructor public mainpage () {initializecomponent ();} protected override void onnavigatedto (system. windows. navigation. navigationeventargs e) {base. onnavigatedto (E); // The start address of the created tile actually points to/mainpage. XAML? The S = 1 // S = 1 parameter is used to determine whether the user enters the current program through the tile created by the program, // as mentioned in the preceding example, the parameter of the IE desktop shortcut is specified as the homepage of Sina Weibo. // Check whether S = 1 exists to determine whether the application is started by using the magnetic paste created by the program. Shelltile mytitle = shelltile. activetiles. firstordefault (n => N. navigationuri. tostring (). Contains ("s = 1"); If (mytitle! = NULL) {This. chkstarttype. ischecked = true;} else {This. chkstarttype. ischecked = false ;}}// create a graph block private void btnaddtoshelltitle_click (Object sender, routedeventargs e) {// whether or not our program creates a "START" screen tile, the first element of activetiles must be the // application currently running on the foreground. Therefore, when obtaining the first shelltile, you must determine whether S = 1 exists. // This S = 1 parameter is random. Shelltile mytitle = shelltile. activetiles. firstordefault (M => M. navigationuri. tostring (). Contains ("s = 1"); // It is not created if it has already been created. If (mytitle! = NULL) {MessageBox. Show ("this application's tile already exists. ");} Else {// create a new tile int counter = 0; // standardtiledata is used to pass the shelltitle attribute parameters, // such as the Front background image Uri, title, counters. Standardtiledata mydata = new standardtiledata () {Title = string. isnullorempty (txtforetitle. Text) = true? String. Empty: txtforetitle. Text, Count = int. tryparse (txtcount. Text, Out Counter) = true? Counter: 0, backtitle = string. isnullorempty (txtbacktitle. Text) = true? String. Empty: txtbacktitle. Text, backcontent = string. isnullorempty (txtbackcontent. Text) = true? String. empty: txtbackcontent. text, backgroundimage = new uri (fore_pic, urikind. relative), backgroundimage = new uri (back_pic, urikind. relative)}; // shelltile. the first parameter of the create method is where we should navigate when starting the application. // Because the main page in this example has a page, of course, it is directed to the Home Page. // It is started from the created tile, so do not forget to include the S = 1 parameter. Shelltile. Create (New uri ("/mainpage. XAML? S = 1 ", urikind. Relative), mydata); MessageBox. Show (" tile block created successfully. ") ;}} // Update the tile information private void btnupdateshelltitle_click (Object sender, routedeventargs e) {// Similarly, first determine whether to start shelltile mytitle = shelltile from the created tile. activetiles. firstordefault (M => M. navigationuri. tostring (). contains ("s = 1"); If (mytitle! = NULL) {int counter = 0; standardtiledata DATA = new standardtiledata (); If (! String. isnullorempty (txtforetitle. text) {data. title = txtforetitle. text;} If (Int. tryparse (txtcount. text, Out Counter) {data. count = counter;} If (! String. isnullorempty (txtbacktitle. Text) {data. backtitle = txtbacktitle. Text;} If (! String. isnullorempty (txtbackcontent. Text) {data. backcontent = txtbackcontent. Text;} mytitle. Update (data); MessageBox. Show ("the tile data has been updated. ") ;}/// Delete the tile. // Note: only the secondary tile can be deleted using the code, that is, the tile created using the code. // do not delete the application tile, that is, it is created by long-pressing the application item. Private void btndeleteshelltitle_click (Object sender, routedeventargs e) {// remember, first determine whether the tile created through our code is found. Shelltile Title = shelltile. activetiles. firstordefault (x => X. navigationuri. tostring (). Contains ("s = 1"); If (title! = NULL) {Title. Delete (); MessageBox. Show ("tile block deleted successfully. ");}}}}

In this example, we focus on using the shelltile class, which is not complex and has a small number of Members. You will be familiar with it several times more times.

After running, we create our tile on the "Start" screen and return to the desktop. Let's keep an eye on it, and you will find that, its front and back will automatically switch back every few seconds.