Metro Nuggets

Bitesized tidbits for building Modern (Metro) apps.

Creating a Weather App Style Adaptive Tile

In Windows 10, we’ve seen apps that look to have different tile faces and they cycle between those tiles. It’s a really nice effect and can be a very powerful thing for your app to use, it allows you to present more data to the user without having to have your tile all cramped. A good example of this would be a weather app where you might want to allow the user to show the weather for different places. So, how do you go about creating a tile like this?

The Solution

Using my AdaptiveTileExtensions, this is actually rather simple.

Let’s say we want to make a tile that looks like this:
WeatherTile

It’s a fairly common sort of tile for a weather app, how would you go about doing that.

        private static TileBinding CreateTile(TemplateType size, Place place, int limit = 10)
        {
            var tileBinding = TileBinding.Create(size);
            tileBinding.DisplayName = place.PlaceName;
            tileBinding.Branding = Branding.Name;
            tileBinding.OverlayOpacity = 20;

            tileBinding.Add(new TileImage(ImagePlacement.Background) {Source = string.Format(WallpaperUriTemplate, place.OverallForecast)});

            foreach (var forecast in place.Forecast.Take(limit))
            {
                var subGroup = new SubGroup {Width = 1};
                subGroup.AddText(new Text(forecast.Day) {Alignment = Alignment.Center});
                subGroup.AddImage(new TileImage(ImagePlacement.Inline) {RemoveMargin = true, Source = string.Format(UriTemplate, forecast.Forecast)});
                subGroup.AddText(new Text($"{forecast.TemperatureHigh}°") {Alignment = Alignment.Center});
                subGroup.AddText(new Text($"{forecast.TemperatureLow}°") {Alignment = Alignment.Center, Style = TextStyle.Caption, IsSubtleStyle = true});

                tileBinding.AddSubgroup(subGroup);
            }
            return tileBinding;
        }

As you can see, for a starter, no xml! We basically take each forecast bit of information and construct the text and images accordingly. Note the Width=1 when creating the SubGroups, this is what allows you to have each subgroup taking up equal width.

What about creating the tile itself:

        private void WeatherTilesButtonTapped(object sender, TappedRoutedEventArgs e)
        {
            var updater = TileUpdateManager.CreateTileUpdaterForApplication();
            updater.Clear();
            updater.EnableNotificationQueue(true);
            

            foreach (var place in _places)
            {
                var tile = AdaptiveTile.CreateTile();
                var wideTile = CreateTile(TemplateType.TileWide, place);
                var mediumTile = CreateTile(TemplateType.TileMedium, place, 2);

                tile.Tiles.Add(wideTile);
                tile.Tiles.Add(mediumTile);

                var notification = tile.GetNotification();
                
                updater.Update(notification);
            }
        }

Now, for each tile face you want to show, that needs to be its own tile, you do not add multiple versions for each tile size. So in the code above, for each place we’re wanting to display a tile face for, we are creating the tile, then adding the wide tile UI and the medium tile UI to it and calling Update() on the app’s main TileUpdater.

Now, the key part to all of this, for displaying multiple faces on your tile, is you have to call EnableNotificationQueue() so that each time we call Update() we add the tile to the queue. If you don’t do this, then each time you call Update(), only the most recent tile will show.

And there you have it, you’ll end up with a tile that slides up and changes its face:
WeatherTileChanging

Full code and working app can be found at https://github.com/Ferret-Labs/MetroNuggetsCode/tree/master/NiceLookingTiles

SL

Advertisements

One response to “Creating a Weather App Style Adaptive Tile

  1. Pingback: Dew Dump – August 17, 2015 (#2070) | Morning Dew

Leave a Reply

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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: