Windows Phone: Amazing - 1 Feature = Windows Phone Toolkit

Windows Store: Re-Use your WP Isolated Storage Settings in Windows Store Apps

Android/Xamarin.Andriod: The APK Dilema: To Split or Not to Split Making Theme.Holo Look awesome with gradients Mono for Android AdMob6 BInding Mono for Android: GridView in my ScrollView Mono for Android: Swipe/Fling Tabs in List VIew Mono for Android: Fix the DatePickerDialog Month Mono for Android: Load more items in list view when scroll to end Mono for Android: Remove that empty text view Mono for Android: Theme your app: part 2 ListView Fast Scroll with SectionIndex in Mono for Android How to use Theme.Holo in Mono for Android

Misc: A broken process (A look at mobile development releases) Get your LINQ ordeby right WPF Background opacity magic

To me it is very odd that a lot of sites just don’t do this already. For instance Netflix on an iPod:

Not bad there is a button way down on the bottom of the page that opens up to the app store, but I wouldn’t have known it if I didn’t scroll all the way to the bottom. *Interesting though when pressing this button it actually throws an error then takes you to the store.

Let’s look at the Ceton My Media Center Page:

Boom right there, in your face, name, icon, and view right inside of the store. How did I do this? Easy, just add this bit of meta tag in the body o the page you want to display:

meta name="apple-itunes-app" content="app-id=556400658"

With on each side. All you need to change is your app id, which you can get in the dev center, or the URL for your app http://itunes.apple.com/us/app/my-media-center/id556400658?ls=1&mt=8

Alright well what about windows 8? Again here is netflix: Again nothing at all.. How about the Ceton site: Right down there we have a “get app for this site”!! Pressing it takes you right to the marketplace: To do this all you need to do is add some meta tags in the HEAD of your website:

meta name="msApplication-ID" content="Company.AppName"/

Why people aren’t doing this puzzles me!! Microsoft and Apple both have documentation as well!

Promote and market your app easily now!

From a developer point of view I never really thought of this because it is showing you content from the app and you should know. On Windows Phone this isn’t actually an issue since you only ever have 1 tile active and it flips between your live tile and main logo tile (back/front). The real issue was that only your small logo shows up on Windows 8 by default. So the name of your app wont come up… well there is a solution for that, and it is pretty simple. Tile Branding.

This is the easiest way to fix the problem, which is to show the name of your app instead of the logo on the app. Or perhaps depending on the live tile decide which to show. To do this after you create your live tile simply add the following:

tile.Branding = TileBranding.Name;
tileWide.Branding = TileBranding.Name;

In this example I said show the name, you can also say Logo, or None. And it will respect that:

Name: Logo: None: Additionally something else that you could do is actually create a new live tile with just your logo in it. Remember though you can only have 5 live tiles running at a time. Since you already have to include logos with your app, you can just do this:

var logoTile = TileContentFactory.CreateTileSquareImage();
var logoTileWide = TileContentFactory.CreateTileWideImage();
logoTile.Image.Src = "ms-appx:///Assets/Logo.png";
logoTileWide.Image.Src = "ms-appx:///Assets/WideLogo.png";
logoTile.Branding = TileBranding.Name;
logoTileWide.Branding = TileBranding.Name;

logoTileWide.SquareContent = logoTile;
updater.Update(logoTileWide.CreateNotification());

By using: “ms-appx:///Assets/” this means that you can actually reference this from your BackgroundTask as well and you do NOT need to include the images in that project as it is referencing the local directory to where your app was installed. Now you will have your logo and app name come up randomly :) Enjoy.

In this tutorial I am going to go through how I think you should do it, which is to update live tiles when people launch your app and then also how to create a maintenance task to run every few hours. Also how to do proper wide & square live tiles

Step 0 (optional)

If you want to have live tiles then you must specify a Wide Logo. I will be doing this!

Step 1

Download the NotificationsExtensions from Microsoft. This will make make live tiles about 100% easier to implement. Instead of microsoft just including this into the API they have some crazy xml way of managing live tiles, and this awesome extension wraps it. After you have it downloaded simply add the project to your solution.

Step 2

Add a new Project in your solution. It should be a Windows Runtime Component and to make it easy let’s call it “BackgroundTasks”

Step 3

Rename Class1.cs to TileUpdater.cs. Open it up and have your TileUpdaterClass Implement IBackgroundTask.

Step 4

Now before we implement some code let’s do some really important things. First add BackgroundTasks project as Reference to your main class. If you skip this it wont work.

Also open up your Package.appxmanifest and go to Declarations and add a new “Background Tasks” Declaration. Then check “System event” and for the Entry Point you should set it to “BackgroundTasks.TileUpdater”

Step 5: App.xaml.cs stuff

Open up your App.xaml.cs and we will want to add a few variables in here:

private const string TASK_NAME = "SomethingUniqueTileUpdater";
private const string TASK_ENTRY_POINT = "BackgroundTasks.TileUpdater"; //don't change
private const int MAINTENANCE_INTERVAL =  3 * 60; // Check for updates that need to be updated every 3 hours

You can change the maintenance interval as well i have it to 3 hours. Now we can add a little helper method which checks to see if we have the task registered:

private bool IsTaskRegistered()
{
  foreach (var task in BackgroundTaskRegistration.AllTasks.Values)
  {
    if (task.Name == TASK_NAME)
    {
      return true;
    }
  }
  return false;
}

Now in your App() constructor add this code under this.Suspending += OnSuspending;

if (!IsTaskRegistered())
{
  BackgroundTaskBuilder taskBuilder = new BackgroundTaskBuilder();
  MaintenanceTrigger trigger = new MaintenanceTrigger(MAINTENANCE_INTERVAL, false);
  taskBuilder.SetTrigger(trigger);
  taskBuilder.TaskEntryPoint = TASK_ENTRY_POINT;
  taskBuilder.Name = TASK_NAME;

  SystemCondition internetCondition = new SystemCondition(SystemConditionType.InternetAvailable);
  taskBuilder.AddCondition(internetCondition);

  taskBuilder.Register();
}

One stipulation here is that they must have internet. If for some reason you don’t need internet then remove that condition.

Step 6: Add normal live tile via In App

Alright now we can go ahead and create the live tiles. There are TONS for you to pick from. Microsoft has a great break down on their TileTemplateEnum msdn article. For each update you will want to pick out a Square and Wide Tile.

I am going to just do a simple tile inside of the on navigated to. What you will see here is I am using the TileContentFactory which is part of that NotificationsExtensions I told you to add earlier. All of the .CreateTile____() metods match the msdn article which is awesome.

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);
            //some work upfront
            var updater = TileUpdateManager.CreateTileUpdaterForApplication();
            updater.EnableNotificationQueue(true); //doing this means you can stack 5 tiles.

            updater.Clear(); //clear out any old ones

            var tile = TileContentFactory.CreateTileSquareText04();
            var tileWide = TileContentFactory.CreateTileWideText01();

            tile.TextBodyWrap.Text = "This came from In App.";
            tileWide.TextHeading.Text = "In App Update";
            tileWide.TextBody1.Text = "www.MotzCod.es";
            tileWide.TextBody2.Text = DateTime.Now.ToString();

            tileWide.SquareContent = tile;
            updater.Update(tileWide.CreateNotification());
        }

Make sure you set “tileWide.SquareContent = tile” as the user can switch between wide and small at any time. If you don’t do this it will throw an exception. Alright that is great, but let’s do some background updates. We can re-use all of that code from earlier but change it around a bit but we have to do something special in our TileUpdater.cs

So inside of Run method the first thing we will want to do is ass this piece of code:

var defferal = taskInstance.GetDeferral();

This is telling the system we are about do to some stuff. Now add in the code to update the tile, and then when you are all done add this code:

defferal.Complete();

This tells them we are all done. Here is what mine looks like now:

 public void Run(IBackgroundTaskInstance taskInstance)
        {
            var defferal = taskInstance.GetDeferral();
            //some work upfront
            var updater = TileUpdateManager.CreateTileUpdaterForApplication();
            updater.EnableNotificationQueue(true); //doing this means you can stack 5 tiles.

            updater.Clear(); //clear out any old ones

            var tile = TileContentFactory.CreateTileSquareText04();
            var tileWide = TileContentFactory.CreateTileWideText01();

            tile.TextBodyWrap.Text = "Background task";
            tileWide.TextHeading.Text = "Background task";
            tileWide.TextBody1.Text = "www.MotzCod.es";
            tileWide.TextBody2.Text = DateTime.Now.ToString();

            tileWide.SquareContent = tile;
            updater.Update(tileWide.CreateNotification());

            defferal.Complete();
        }

Now this is lovely, however you probably don’t want to wait around for 3 hours to let this thing run. (or 15 mins as it is the minimum). So you can actually force the debugger to invoke it. First add the “Debug Location” to your Visual Studio Tool bar: Now add in a break point in your Run method, and then run your application in Debug. Once it is up and running you will want to trigger the event manually. See screenshot: This will force the background task to trigger for your application. If for some reason your app closes and you lost your debug session that means you missed something… perphaps adding the reference from step 4?

Boom and now we have this:

I hope you enjoyed this and it helped in your development. I found live tiles to be really easy to implement as long as you don’t try to do a real background task as users would then need your permission to update the live tiles. The maintenance task allows you to get around this.

Note: The full source code download for this sample (LiveTileExample.zip) is no longer available.

This is where DataItemTemplates come in.

So first we will pretender I have a few items such as:

1. MovieItem
2. RecordedTVItem

I want to show the latest 5 or 6 from each category on my home screen of my app.

So the first thing you will want to do is construct up a DataSource:

var group1 = new StandardDataGroup("recent_movies", "Recent Movies", "Recent Movies", string.Empty, string.Empty, 0, movies);

var group2 = new StandardDataGroup("recent_recordings", "Recent Recordings", "Recent Recordings", string.Empty, string.Empty, 0, recordings);

DataSource.AllGroups.Add(group1);
DataSource.AllGroups.Add(group2);

If you don’t have/know about StandardDataGroup you can start up any new Window Store App sample and find them. They are a good basis for you to start.

Alright next up I am going to assume that you already created ItemTemplates for each. We will assume

1. MovieItemTemplate
2. RecordedTVItemTemplate

So now we will create a new class called “MainItemTemplateSelector.cs”

Now the key here is to derive from “DataTemplateSelector”

public class MainItemTemplateSelector : DataTemplateSelector
{
}

All you have to do is override 1 method here:

protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
    var movie = item as MovieDataItem;

    if (movie != null)
    {
        return Application.Current.Resources["MovieItemTemplate"] as DataTemplate;
    }

    var recorded = item as RecordedTVDataItem;

    if (recorded != null)
    {
        return Application.Current.Resources["RecordedTVItemTemplate"] as DataTemplate;
    }

    return null; //probably throw exception as this would be bad
}

Alright and now for the fun stuff in your XAML

First in the .Resources you will want to specify:

 common:MainItemTemplateSelector x:Key="MainItemTemplateSelector"

Then you will want to specify the ItemTemplateSelector in your grid view or itemsview:

<GridView ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplateSelector="{StaticResource MainItemTemplateSelector}"

Boom you are good to go!

Now you will want to do some custom work on the back end when you click one of these. you will have to do something similar as well for the item that is selected so you can navigate to the correct page.