Groups and Subgroups

Adaptive Tile templates in Windows 10 support groups and subgroups. A group semantically means that all the content in the group needs to be displayed together (otherwise the content will be dropped), which allows you to display more content on higher resolution screens (like more emails). Subgroups allow you to achieve vertical columns inside the tile.

Groups

The typical usage of groups is similar to the email scenario, where you have multiple emails that you can display on the tile, and you want more emails to be displayed if the device has a high enough density display.

In that case, it is recommended to have a separate method that generates the tile group content, so it can be used to generate two or more groups. For example, the method below generates the group content of a single email message.

private TileGroup GenerateEmailGroup(string from, string subject)
{
    return new TileGroup()
    {
        Children =
        {
            new TileSubgroup()
            {
                Children =
                {
                    new TileText()
                    {
                        Text = from
                    },

                    new TileText()
                    {
                        Text = subject,
                        Style = TileTextStyle.CaptionSubtle
                    }
                }
            }
        }
    };
}

Then, you create the actual binding content, adding the groups as children.

TileBindingContentAdaptive bindingContent = new TileBindingContentAdaptive()
{
    Children =
    {
        GenerateEmailGroup("Jennifer Parker", "Photos from our trip"),
        new TileText(), // For spacing
        GenerateEmailGroup("Steve Bosniak", "Build 2015 Dinner")
    }
};

When the above binding content is specified in a TileMedium binding (which is contained in a TileContent object), the generated XML looks like the following...

<?xml version="1.0" encoding="utf-8"?>
<tile>
    <visual>
        <binding template="TileMedium">
            <group>
                <subgroup>
                    <text>Jennifer Parker</text>
                    <text hint-style="captionSubtle">Photos from our trip</text>
                </subgroup>
            </group>
            <text />
            <group>
                <subgroup>
                    <text>Steve Bosniak</text>
                    <text hint-style="captionSubtle">Build 2015 Dinner</text>
                </subgroup>
            </group>
        </binding>
    </visual>
</tile>