XML document structure for the "Win 10 app development" Adaptive tile Template

A few days ago, the old week gave you the adaptive Toast Notification XML template, so accordingly, today old week to introduce you to the new XML template Adaptive tile.

In the same way, you can still use the 8.1-time tile template, in the win 10 API is also supported, in addition, the Win10 app also supports the new Adaptive tile template, this article in the old week to give you first talk about the basic structure, the next article we talk about complex typesetting.

The application's icons can be divided into two categories: the first is the one that is dedicated to the store, which is the icon that your app presents to the user after it's submitted to the store, and some icons or tiles for the app itself.

Tile is actually so many, we just need to know that a few size can be.

1, 44 by 44, displays the icon in the list of all applications, which is the smallest size.

2, 71 by 71, displays the small icon on the start screen.

3, 150 by 150, displayed on the Start screen in the icon.

4, 310 by 150, displays the wide icon on the Start screen.

5, 310 by 310, displays the large icon on the start screen.

The image used for the icon should be in PNG format, the background can be transparent, the display is more crystal clear. If you want to use a variety of icons, you can put the icon in the directory, such as the default assets directory, under the directory to build two subdirectories

\scale-100

\scale-200

SCALE-XX represents the scale, this is automatically recognized by the system, and then the two directories are placed in the corresponding size of the picture, the picture must be the same file name.

When using PS to make the icon, you can enlarge the size, because the picture will not be blurred, but the magnification may be blurred. To do 44x44, for example, I first do 200% scale, 44 times 2 equals 88, so the picture of 200% size is 88x88.

After you finish 200% of the picture and export as a PNG file, and then press the shortcut key CTRL + ALT + I in PS, the image size is reduced, proportionally reduced to 50%, so that the 44x44 image is obtained. You can export PNG again. So the actual each icon we can only do once.

The resource directory is organized as shown in.

Then in the manifest file is good, because the official version of the SDK already has the manifest editor.

I will not say more.

In fact, in the actual development, you may not necessarily need all the size of the icon, I am here to demonstrate the size of the various versions of the tile, so it was complete.

Next we begin to understand the adaptive tile, which is the tile, and naturally its root node is tile (so the root node of the toast Notification is toast).

< Tile >    ... </ Tile >

Tiles are the display of text and images to the user, of course, is a visual element, so the tile below is the visual element.

< Tile >  < Visual >      </ Visual > </ Tile >

We also know that tiles have n sizes, and each size corresponds to a different view, and each view is wrapped with a binding element, such as my example, which supports tiles of all sizes and therefore should contain multiple binding elements.

<Tile>  <Visual>    <bindingTemplate= "Tilesmall">          </binding>    <bindingTemplate= "Tilemedium">          </binding>    <bindingTemplate= "Tilewide">          </binding>    <bindingTemplate= "Tilelarge">          </binding>  </Visual></Tile>

The template property of the binding element is now unified to four values:

Tilesmall: Small icon, 71x71

Tilemedium: Medium icon, 150x150

Tilewide: Wide icon, 310x150

Tilelarge: Large icon, 310x310

The name of the template is case sensitive, so the capitalization cannot be entered incorrectly. Visual elements can have between 1 and 4 binding, and the size of the icon you need to declare how many binding.

The text and image elements can be placed under each binding element, and text represents the image.

such as this:

<Tile>  <Visual>    <bindingTemplate= "Tilesmall">      <text>Small Icons</text>    </binding>    <bindingTemplate= "Tilemedium">      <text>icon in</text>    </binding>    <bindingTemplate= "Tilewide">      <text>Wide icon</text>    </binding>    <bindingTemplate= "Tilelarge">      <text>Large Icons</text>    </binding>  </Visual></Tile>

After you update the tile, the following appears.

We can also use the image inside.

<Tile>  <Visual>    <bindingTemplate= "Tilewide">      <text>It's fun.</text>      <Imagesrc= "Ms-appx:///assets/images/2.png" />    </binding>  </Visual></Tile>

The SRC attribute of the image element specifies the source of the images, either ms-appx: (within the installation directory), Ms-appdata: (Local Data directory), or images on the network.

The tiles are updated as follows.

Setting the placement property of the image element to background allows the picture to be used as the background of the tile.

<Tile>  <Visual>    <bindingTemplate= "Tilewide">      <Imagesrc= "Ms-appx:///assets/images/bg1.png"Placement= "Background" />      <text>Look at the background map.</text>    </binding>  </Visual></Tile>

The updated tile is like.

If the content of the text is too long, you can also consider letting it wrap. For example:

<Tile>  <Visual>    <bindingTemplate= "Tilelarge">      <textHint-wrap= "true">Look, in front of the hillside sits a silly two leng, open his trash shovel like big mouth, also no one knows what he is shouting. I don't know what the language of the planet is. Its voice was like the old donkey's stone.</text>    </binding>  </Visual></Tile>

The Hint-wrap property is a Boolean value that is true if the line wraps, otherwise false. The updated tile looks like the following.

You can also set the alignment of the text, and the valid alignment is left, middle, and right.

<Tile>  <Visual>    <bindingTemplate= "Tilewide">      <texthint-align= "Left">Align Left</text>      <texthint-align= "Center">Center Alignment</text>      <texthint-align= "Right">Align Right</text>    </binding>  </Visual></Tile>

The Hint-align property sets the horizontal alignment of the text, valid values are:

left--left-justified.

center--Center Alignment

right--Right Alignment

The tile is updated as shown.

The text element cannot be set vertically, only by the Hint-textstacking property of the binding element, and the value is valid;

top--Top Align

center--Center Alignment

bottom--Bottom Alignment

For example, the text aligns to the top of the tile.

<Tile>  <Visual>    <bindingTemplate= "Tilemedium"hint-textstacking= "Top">      <text>Align text to top</text>    </binding>  </Visual></Tile>

The tile is updated as shown.

If you like the round image, you can also choose to crop the image to a circle. Take a look at the following example:

<Tile>  <Visual>    <bindingTemplate= "Tilelarge">      <Imagesrc= "Ms-appx:///assets/images/7.png"Hint-crop= "Circle" />    </binding>  </Visual></Tile>

Hint-crop default to None, that is, do not crop, so if you do not want to crop the image without adding this property, if you want to cut the circle, set to circle.

The results of the tile update are as shown.

See, Monsieur di and Yuan Fang go to the cell phone store to buy a cell phone.

OK, today we show you some of the new features of adaptive tiles, and the next article describes how to lay out the tiles in a column.

This article sample source code download: Http://files.cnblogs.com/files/tcjiaan/AdaptiveTileDemoApp.zip

XML document structure for the "Win 10 app development" Adaptive tile Template