To change the tiles layout click on “Tiles”.
In the current release there is a new feature called the Live Tiles editor. In any Windows 10 App Studio app you can choose from:
Created on the logo page, are images of different sizes generated based on app logo.
You have 2 different options:
Static:The content is configured at design time and is included on the app package.
Dynamic:The content can be bound from one of the sections you have configured in your app (except menu and html). The tile will be refreshed every 30 minutes once the app is installed getting data directly from the data source of the sections you’d selected in the Tiles editor.
Select the tile view
You will be able to find the preview of the tiles on the right hand side of the screen.
Furthermore, you can customize your tiles layout in the ‘Edit your tiles’ section.
There are 2 properties you can configure here:
Branding: While a notification is being displayed, you can control the branding on the bottom of the live tile (display name and corner logo) via the branding attribute on the notification payload. You can choose to have “none” displayed, just the “name”, just the “logo”, or both “nameAndLogo”.
Display Name: This property overrides the display name while the notification is being shown. If not present Windows will show the app name.
Groups allow you to semantically declare that the content inside the group is related and must be displayed in its entirety for the content to make sense. You only can add 2 groups maximum.
Subgroups also allow you to divide data into semantic sections within a group. For live tiles, this visually translates to columns. You only can add 5 subgroups maximum.
The Weight property allows you to control the widths of columns. Is represented as percentage. For example, one subgroup with weight 80 takes the 80% of the total width.
Inside a subgroup you can include 1 of more elements of 2 types:
Used to display text. Contains the following configurable properties:
- Content: The text to display. In case the tile is dynamic you can select from 1 of the text fields of the section you selected.
- Wrap: Sets text wrapping on a text element.
- MaxLines: Maximun number of lines to dyplay
- Content: Makes the text 60% opaque, typically resulting in text that is more gray than white.
Style: Control the font size, color, and weight of text elements:
Used to display images. Contains the following configurable properties:
- Source: With the image uploader & cropper you can upload your own image. In case the tile is dynamic you can select from 1 of the image fields of the section you selected.
- Remove Margin: When selected removes an 8px margin between any content above or below the image.
- Crop: You can select circle if you want your image appears inside a circle.
- Overlay: Accepts integers from 0-100, with 0 being no overlay and 100 being full black overlay.
- Inline: The image appears mixed with the text elements.
- Background: Make the image appears as background of the current subgroup
- Peek: The peek image uses an animation to slide down/up from the top of the tile, “peeking” into view, and then later sliding back out to reveal the main content on the tile.
Additionally, you can select one of the predefined templates. And if you want customize it.