The adaptive magnetic paste template and Toast notification XML document structure in Win 10 development

XML document structure of adaptive magnetic paste template in Win 10 development

In the same way, you can still use the 8.1-time magnetic paste template, in the win 10 API is also supported, in addition, WIN10 app also supports a new adaptive tile template, this article will give you a first talk about the basic structure, the next article we say a complex typesetting.


The application's icons can be divided into two categories: the first category is dedicated to the App Store, which is the icon that your application will show to the user after it is submitted to the store, and the other is to apply some of its own icons or tiles.

There are so many kinds of tiles, we just need to know that a few sizes can be.

1, 44 times 44, displayed in the list of all applications icon, which is the smallest size.

2, 71 times 71, display the small icon on the start screen.

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

4, 310 times 150, the wide icon displayed on the Start screen.

5, 310 times 310, the large icon displayed on the Start screen.


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

\scale-100

\scale-200

SCALE-XX represents scaling, this will be automatically recognized by the system, and then the two directories in the corresponding size of the picture, the image must have the same file name.


Use PS to make the icon, you can size first, because the picture shrink will not blur, but amplification may be blurred. To do 44x44 as an example, I first do 200% proportions, 44 times 2 is equal to 88, so 200% size of the picture is 88x88.

After 200% of the picture and exported to the PNG file, and then press the shortcut key in PS Ctrl + ALT + I, the image size to shrink, scaled down to 50%, so that the 44x44 image is obtained. Then you can export PNG. So the actual each icon we do only once.

The Organized resource directory is shown in the following figure.

It is then done in the manifest file because the official version of the SDK already has a list 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 version of the magnetic paste, so it is complete.

Next we begin to understand the adaptive magnetic paste, which is said to be a magnetic paste, naturally its root node is tile (so toast the root node of the notification is toast).

<tile> ...
</tile>

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

<tile>
<visual>
</visual>
</tile>

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

<tile>   <visual>     <binding
 template= "Tilesmall" >            </binding>     <binding template= "Tilemedium" >             </binding>     <binding template= "Tilewide" >             </binding>     <binding  Template= "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 when you enter it, the capitalization cannot be lost incorrectly. There are 1 to 4 binding under the visual element, and you need the size of the icons to declare how many binding. The

can place text and image elements under each binding element, text to represent literals, and image to represent images.



such as this:

<tile>
<visual>
<binding template= "Tilesmall" >
<text> Small icon </text>
</binding>
<binding template= "Tilemedium" >
<text> icon </text>
</bin     ding>
<binding template= "Tilewide" >
<text> wide icon </text>
</binding>
<binding template= "Tilelarge" >
<text> Large icon </text>
</binding>
</vis Ual>
</tile>

Update the tiles as shown below.

We can also use images inside.

<tile>
<visual>
<binding template= "Tilewide" >
<text> is fun. </text>
<image src= "ms-appx:///assets/images/2.png"/>
</binding>
</visual> ;
</tile>

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

The magnets are updated as follows.

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

<tile>
<visual>
<binding template= "Tilewide" >
<image src= "ms-appx:///assets/i Mages/bg1.png "placement=" background "/>
<text> look at the background map. </text>
</binding>
</visual>
</tile>

The updated magnetic paste is shown below.

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

<tile>
<visual>
<binding template= "Tilelarge" >
<text hint-wrap= "true" > Look, In front of the hillside sat a silly two leng, open his garbage shovel the same big mouth, no one knows what he is shouting. I don't know the language of that planet. The sound was like the old donkey pulling the stone. </text>
</binding>
</visual>
</tile>

The Hint-wrap property is a Boolean value, true if the line wraps, or false. The updated tiles are shown in the following illustration.

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

<tile>
<visual>
<binding template= "Tilewide" >
<text hint-align= "left" > Left-Hand alignment & lt;/text>
<text hint-align= "center" > Center align </text>
<text hint-align= "right" > Align </ text>
</binding>
</visual>
</tile>

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

left--left-aligned.

center--Center Alignment

right--Align Right

The tiles are updated as shown in the following figure.

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

Align Top of top--

center--Center Alignment

bottom--Bottom Alignment

For example, the text is aligned to the top of the tile.

<tile>
<visual>
<binding template= "Tilemedium" hint-textstacking= "Top" >
<text > Text alignment to top </text>
</binding>
</visual>
</tile>

The tiles are updated as shown in the following figure.

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

<tile>
<visual>
<binding template= "Tilelarge" >
<image src= "ms-appx:///assets/ Images/7.png "hint-crop=" Circle "/>
</binding>
</visual>
</tile>

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

The results of the magnetic paste update are shown in the following figure.

See, Lord Di and Yuan Fang go to the cell phone store to buy a mobile phone.

Okay, today we show you some new features of adaptive magnetic paste



XML document structure of adaptive toast notification in win 10 development

1. Automatic initialization of properties. This declaration attribute was introduced in C # 4.0:

public int VVVV {get; set;}

Previously, a property wraps a field, as long as you assign a value to the field when the property is initialized, the omitted syntax naturally takes into account the initialization problem, which, although it is possible but not concise enough in the constructor, naturally appears:

public int VVVV {get; set;} = 1000;

Therefore, the expression initialized by this attribute is not to be learned and is assigned the same value as a normal variable.


2, the new string format. Previously, ABC {0} CCCC {1}, formatted placeholders with ordinal numbers, starting with 0, and so on. You can do this now:

$ "ABC {x} CCC {y}", so that the serial number also ignored, directly to the corresponding variable as a placeholder on the line, in order to and the past ordinal placeholder difference, preceded by a $ symbol.


3, indexing initialization, such as initialization dictionary type, you can:

New Dictionary<int, string> {
[7] = "Seven",
[9] = "Nine",
[+] = "Thirteen"
};

This is not hard to remember, like JSON, but JSON uses a colon (:) to represent a field/property assignment, and the C # team is smart enough to use a colon or a back = number, because the = number is the universal assignment operator, so it is actually omitted from the following code:

D[7] = "Seven"

Assignment syntax and variable assignment syntax are unified, so it's not confusing.


4. Properties and methods can be written as lambda expressions. Like this.

public string NID () => "Hi," + mname;

As long as you learn a good lambda expression, you can see () => ... is the return string, and then the declaration of the previous public string Nid is obviously an attribute, so combining the two together is a read-only property. Equivalent:

get{return "Hi," + mname;}

The same is true for method declarations:

private int Dosome (int a, int b) => a+b;

Equivalent:

private int Dosome (int a, int b)

{

return a+b;

}

Same as the lambda expression configured by the Func<int,int,int> delegate.

So, if you're a lambda base, these are all gadgets.


5. Non-null inspection. For example, test? ToString (); if test is null do not execute code, in 4.0 there

bool? b

int x;

int b= x?? 100;

If you have a solid foundation for the past, this one is basically not to be learned.

Note: If you are using the Windows SDK tool like the old week, you will have to wait until number 29th, the SDK is officially released, to install VS2015 official version, these days, we still continue to experience the RC version.

Well, if you think about it, can you handle it in 20 seconds?

=======================================================



When the story is finished, you don't need to clap. The last piece of bad article has said that from this article to give you a look at the win app for the toast Notification and operation center-related content. Of course, the official document is not complete, because the SDK has not yet been released, so the old weeks to talk about these content only to participate, however, the official version should not have too much discrepancy, the most is the notification of the XML document to do some normative treatment.

The first thing to note is that the toast notification method in the previous 8.1 times is still supported in win 10, and the corresponding API protocol is included in the UWP API. Therefore, you can still use the 8.1 notification mode, that is, through the Toastnotificationmanager.gettemplatecontent (Toasttemplatetype) method to get the corresponding notification template, Then use the XmlDocument object to load and modify the XML, and of course you can construct the XML document directly and then load it with the XmlDocument object.

There is the operation center, in fact it and Toast is a gang, that is, we do not need to use a special API to operate it, because the toast notice itself can be displayed in the Operation Center.

To the WIN10 app,toast notification template is no longer divided into n a variety of, and only one, unified named Toastgeneric, that is, universal notification, this new toast notice also called adaptive toast Notice, translation for adaptive Bar.

The entire XML document is structured as follows:

<toast>     <visual>        <binding>             <text>.....</text>              &nbsp of the ....               <image ... />              &nbsp ...        </binding. >     </visual>     <audio />      <actions>           <input id= "SnoozeTime " type=" Selection " defaultselection=" >                     &nbsp of the ....             </input>            <action  ...>            <action .....>      </actions> </toast>

The root node is, of course, toast, and this is nothing to explain, just as the root node of the notice of the tile is tile.

The root node contains two guys, and in fact the two brothers have described the interface structure of the toast notice.

The first part: visual, is the content area of the notification, can contain text and images.

The second part: actions, that is, under the notice can display buttons, input boxes, Drop-down select list of these can let users manipulate the control. Just like the quick reply message in WP10. After receiving the message, will display the toast notice at the top of the handset screen, then the user click the Drop-down symbol, can enter the reply information directly on the toast notice, then send.

Under the toast element, there is also a audio element that configures the sound when the toast notification is displayed, and the use of the audio element is the same as 8.1.


A binding element needs to be placed under the visual element, as before. And the focus is binding elements of the template attribute, this is different from the previous, in the UWP application, template reunification is called "toastgeneric", you do not have to consider which template, now a name.

Similarly, the binding element can contain two elements below:

<text&gt: Represents a line of text, two-text elements represent two lines of text, three represent three rows, and the first text element is usually the caption of the notification. As for the maximum number of text elements can be added, it is not sure, usually not more than four lines, after all, the notification content should not be too long. If you want to add a blank line to the content of the notification, you can write a <text/> (an empty text element) directly.

<image&gt: Represents an image. Other properties like 8.1, I'll focus on two new properties here.

>> A, placement, which is an optional attribute, if set to inline, means that the image and text are inline together; if set to Applogooverride, replace the default icon that is applied, and the image appears in the upper-left corner of the notification.

In addition, the official blog has such a sentence: You can have up to 1 image of each placement value. The values of the placement attribute can only occur once, and if there is an image element with the placement attribute of inline, then if there is an image element in the notification, then the placement property of the other element can only be applogooverride.

>> B, Hint-crop, this is also an optional property, the default is None, if set to circle, then the icon will become a circle, if you are accustomed to the square icon, then do not set this property.


Well, don't talk too much, lest we can't absorb it. Leave it to the next piece of bad writing about the actions. Let's give you a visual display of the new toast notice.

Let's show you a toast with three lines of text and an image. Look at the code:

            string xml =  "<toast  lang=\ "zh-cn\" > " +                               "<visual>"  +                                   "<binding  Template=\ "toastgeneric\" > " +                                        "<text> High-end application </text>"  +                                        "<text> Look, Peach blossom opened." </text> " +                                        "<image placement=\" inline\ " src=\" ms-appx:///assets/1.jpg\ " />"  +                                        "<text> is this peach blossom beautiful?" </text> " +                                   " </binding> " +                               "</visual>"  +                          
  "</toast>";             //  Create XML document    
         xmldocument doc = new xmldocument ();             //  Loading XML              doc.
Loadxml (XML);             //  Create notification Instance              ToastNotification notification = new 
Toastnotification (DOC);             //  Display Notification        &nbsP;     toastnotifier nt = toastnotificationmanager.createtoastnotifier
();             nt. Show (notification);

The resulting toast notice is shown in the following figure.

Then open the Notification center, you will see the notice, click the "down" arrow below the notice, you can see the full contents of the notification.

If the notification does not appear, check the settings to see if the application notification is turned on. The following figure.

Do you want to see how it works on the phone?

Open the phone's notification center, you can also see the notice just now.

Below look at the plain text toast notification.

          string xml =  "<toast lang=\ "Zh-cn\" > " +                               "<visual>"  +                                    "<binding template=\" Toastgeneric\ ">"  +                                        "<text> to the two </text>"  +                                        "<text> wind, rain, reading, sound in the ear </text>"  +                                        "<text> Affairs, Family Affairs, World affairs, everything Care </text> " +                                    "</binding>"  +                               "</visual>"  +                  
         "</toast>";             //  Create XML document             XmlDocument 
Doc = new xmldocument ();             //  Loading XML              doc.
Loadxml (XML);             //  Create notification Instance              ToastNotification notification = new 
Toastnotification (DOC);             //  Display Notification              ToastNotifier nt = 
Toastnotificationmanager.createtoastnotifier ();             nt. Show (notification);

The notification effect is as follows.