#MSBAND – About #Tiles format, and how to create complex ones


Today I’m going to review a little deeper the way in which Tiles are defined. The Microsoft Band SDK explains in detail this topic in Chapter 8 “Customizing Tile Layouts”. This chapter explains the available controls, the available dimensions and much more information concerning the design of tiles.

After programming a little on this model, and perhaps by professional deformation, my instinct leads me to separate my code in a view and a model. With this in mind, the creation of a Tile could be split into 3 parts:

  • Tile Definition
    • It defines the Tile Id, name and images that will define it in the Band
  • Page Layout User Interface
    • It is the graphic representation of the elements that compose the page that is displayed when you press on the tile
  • Page Layout Data
    • Is the data associated with the previous graphic

In yesterday’s sample, the only control that was associated with a Page of the tile was a button. That’s why the separation is very simple. The comments indicate each of the parties

If we want to create a more complex model, we could add a little text and a bar code. The following design sample

  • A ScrollFlowPanel control with vertical orientation as the main container
  • A title in the header with a TextBlock
  • A control to display information from a barcode
  • A control ScrollFlowPanel with horizontal orientation for display 2 buttons

The code for the definition of this page would be as follows

It is important to emphasize, each control Ids are passed as parameter since they will be those using later data. The section of sample data would look like:

And finally, the Association of all elements together, including the ids of controls would look like:

When the tile is displayed in the band is ugly enough for me, but …

With a little scroll down, we can see how the controls are adjusted automatically and how we can interact with them.

In the next one, I’ll explain how to interact with this buttons.

GitHub source code: https://github.com/elbruno/Blog/tree/master/MSBand/App1

Saludos @ Madrid

/El Bruno



Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: