Windows Phone Windows 8 Resources

I have done this before in previous posts but I wanted to have an easy way to point developers to great resources when you are building Windows Phone or Windows 8 applications. If you ever want to get back to this page you can just go to http://bit.ly/wpw8resources  (Standing for Windows Phone Windows 8 Resources). I will add to this page often and keep building on it. In addition, I will have one set or resources going forward and will only notate when it is specific to either.

Icons

Modern UI Icons (FREE) http://modernuiicons.com/ 

Design Help

MetroGridHelper. A visual guide overlaid on your application – http://www.jeff.wilcox.name/2011/10/metrogridhelper/

MetroGrid Component for Windows Phone (Based on code above)  http://www.windowsphonegeek.com/articles/MetroGrid-component-for-Windows-Phone

Advertising

Advertising sizes available for Windows 8 using Microsoft Advertising http://msdn.microsoft.com/en-US/library/hh506361(v=msads.10).aspx

 

Transferring Phones

Free Contacts Transfer application for Nokia phones

http://www.markspace.com/welcomehome/nokia/

Windows store Now open for Developers

imageThis is a great time for Developers.  We are at a great time to make an impact with Windows 8.  If you want to get in on the action, read below.

At every major Windows 8 development milestone – Release Preview, Consumer Preview, RTM – we’ve added markets toward our commitment to a truly global offering. We often hear from those who don’t yet have support in their market, and we’ve said we’ll keep expanding. Today’s 82 additional markets more than doubles our support toward enabling developer opportunity everywhere there’s a developer with desire. And as we’ve said before, we will just keep going. You can check out the complete list of supported markets on the Dev Center.

We’re also announcing a number of additional subscription program offerings that recognize and thank developers for their interest and commitment to Windows. All eligible MSDN subscribers receive a free, one-year Windows Store developer account as part of their MSDN benefits. (Eligible subscriptions include Visual Studio Professional, Test Professional, Premium, Ultimate, and BizSpark.) We have a program for students—DreamSpark—that similarly waives the subscription fee. And we have an offer for businesses in our BizSpark program, as well.

Throughout the Windows Store preview stages,

READ MORE

Daniel Egan- The Sociable Geek

$200,000 in Win8 App Prizes

Windows RT App Developer Contest

Developers: send us your most innovative, creative, and original Windows RT-style apps for the 2012 Windows RT App Developer Contest by Qualcomm.

Five winners will be chosen for $200,000 in prizes and marketing support from Qualcomm. One overall and four individual categories offer developers the chance to be recognized for work in the areas of connectivity, gaming, productivity, and peer-to-peer.

Together with Microsoft, Qualcomm is leading the way to create a rich new set of experiences for Windows RT devices. Be a part of it.

HURRY Submission Deadline is October 1st

You can register here. http://bit.ly/qualcommWinRT 

The categories are below

  1. Best Overall App – $100,000 Prize
    Judging Criteria:
    • Highest scoring app overall
  1. Best Connectivity Use Case – $20,000 Prize
    Judging Criteria:
    • Unique use of an always-on, always-connected solution
    • Ease of access
    • Incorporation of roaming user profiles
  1. Best Gaming App$20,000 Prize
    Judging Criteria:
    • Originality of game concept
    • Fun to play and addictive (player wants to keep playing)
  1. Best Produtivity App – $20,000 Prize
    Judging Criteria:
    • Efficient streamlining of process or task
    • Performs a single task in a new or interesting way or creates a natural mashup of tasks
  1. Best Use of AllJoyn – $40,000 Prize
    Download the AllJoyn SDK (Beta) for Windows RT
    Judging Criteria:
    • Most innovative use of AllJoyn (proximity-based peer-to-peer)

HURRY Submission Deadline is October 1st

You can register here. http://bit.ly/qualcommWinRT

Modifying Live Tiles in a Background Process

LiveTiles_thumb7_thumb1_thumbIf you are developing an application or game  for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must.  I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile.  A live tile is a unique way to engage the consumer while they are not using your application.  It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again.  In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.

  1. Creating A Live Tile that is Engaging and Inviting
  2. Working with Live Tiles Locally
  3. Rotating Live Tiles to keep interest
  4. Modifying Live Tiles in a Background Process (This Post)
  5. Using Azure and Push Notifications with Live Tiles

Continuous updating with background processes

In the previous posts we talked about the best practices for what to put on live tiles and also how to use the TileUpdateManager to change the tiles.  In this and the Using Azure and Push Notifications with Live Tiles we will discuss how to make changes to your live tiles when the user is not using your application.

As we learned in the last post, rotating your tiles is a great way to keep visual interest in your application or game but if the user is busy and does not have time to use your application for a week or two, the tiles that you updated will start to get stale quickly.  Imagine the Sports, News, or Stocks application that has week old data.  Updating your tiles with a background trigger is one way to keep it fresh.

We are going to use the same project we used for the last post. If you did not create it in the last post and want to follow along, you can create a new project create a new WideLogo (See this post to find out how).

Creating Rotating Live Tiles from a Background Trigger

1. In the Solution Explorer, right click on the Solution (NOT Project) and select Add à New Project

2. Select the Windows Runtime Component , name it TileBackground and click OK

3. The Class1.cs file from that project will open, for simplicity we will leave it named Class1 (you would want to rename this in a real project of course)

4. At the top of the Class1.cs file, add the following Using statements

using Windows.ApplicationModel.Background;using Windows.Data.Xml.Dom;using Windows.UI.Notifications;using System.Net.Http;using Windows.Data.Xml.Dom;using System.IO;

5. Next, have class one implement the IBackgroundTask interface and delete the thrown exception that is generated. When you are done, your class should look like the image

below.

image

6. Above the Run method add the follow declaration for TileUpdater

TileUpdater tileUpdater;

7. Underneath the run method, add the AddTileNotification Method.  This is the same code we have used in the other posts… only now it is going to be run in a background process.

private void AddTileNotification(string content, string tag)        {            var templateType = TileTemplateType.TileWideSmallImageAndText04;            var xml = TileUpdateManager.GetTemplateContent(templateType);

            var textNodes = xml.GetElementsByTagName("text");            textNodes[0].AppendChild(xml.CreateTextNode("A message"));            textNodes[1].AppendChild(xml.CreateTextNode(content));

            var imageNodes = xml.GetElementsByTagName("image");            var elt = (XmlElement)imageNodes[0];            elt.SetAttribute("src", "ms-appx:///_Images/Coffee03.jpg");

            var tile = new TileNotification(xml);            tile.Tag = tag;

            //tile.ExpirationTime = DateTimeOffset.Now.Add(new TimeSpan(0, 0, 20));

            tileUpdater.Update(tile);        }

 

8. Now we want to add something a little different to our project.  Since you would want to pull data from somewhere outside of your project, we will simulate this by pulling a random quote from the IHeartQuotes API to show on our tile. Add the two methods below to your class. (These are the same ones we used previously with the Yahoo API  (Since this post is about the tiles, we will not comment on the code below, we will do another post on calling REST APIs in the near future)

private async void GetData()        {

            String _url = "http://www.iheartquotes.com/api/v1/random?format=json&max_lines=2&source=joel_on_software";

            var _Result = await CallService(new Uri(_url));            if (_Result != null)                AddTileNotification(_Result.quote, "tag new");

        }

        private async Task<RootObject> CallService(Uri uri)        {            string _JsonString = string.Empty;

            // fetch from rest service            var _HttpClient = new System.Net.Http.HttpClient();            try            {                HttpResponseMessage _HttpResponse = _HttpClient.GetAsync(uri.ToString()).Result;                _HttpResponse.EnsureSuccessStatusCode();                _JsonString = await _HttpResponse.Content.ReadAsStringAsync();            }            catch (Exception ex)            {

                string test = ex.ToString();            }

            // deserialize json to objects            var _JsonBytes = Encoding.Unicode.GetBytes(_JsonString);            using (MemoryStream _MemoryStream = new MemoryStream(_JsonBytes))            {                var _JsonSerializer = new DataContractJsonSerializer(typeof(RootObject));                var _Result = (RootObject)_JsonSerializer.ReadObject(_MemoryStream);                return _Result;            }

        }

 

9. Next, we want to add the code we want to run in the Run method. Add the following code INSIDE the Run(IBackgroundTaskInstance taskInstance) method.

BackgroundTaskDeferral deferral = taskInstance.GetDeferral();

            tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();            tileUpdater.EnableNotificationQueue(true);

            AddTileNotification("Hey Everyone... Whats up", "tag1");            AddTileNotification("Come see the new coffee shops", "tag2");            AddTileNotification("I need caffine", "tag3");            AddTileNotification("I drink coffee therfore I live", "tag4");            AddTileNotification("Caffine Drip please", "tag5");

            GetData();            deferral.Complete();

 

10. Now all we have left is to add the class that the json that is returned will be deserialized into. We once again used json2csharp.com to create a class. Add the code BELOW Class1 inside the Namespace bracket. (We could have put this in a separate file but will do this for simplicity.

public sealed class RootObject{    public string json_class { get; set; }    public IList<string> tags { get; set; }    public string quote { get; set; }    public string link { get; set; }    public string source { get; set; }}

 

That completes the project that will run in the background with the trigger is fired.

Call your background trigger from your application.

Now we are going to set up our project to allow background triggers and call the trigger from our project.

1. Right click on the References folder in your windows 8 project and click on Add Reference.

2. When the Reference Manager comes up, Select Solution and Projects on the left and click on the TileBackground project, and then click on OK

image

3. Now, double click on Package_appmanifest in the solution exploer and open it to the Declarations Tab

4. From the Available Declarations dropdown select Background Tasks

5. Click on ADD

image

6. Under Properties (on this page) check the Timer Task, and add the text TileBackground.Class1 to the EntryPoint section (This is the Namespace and Class for our

background process which we just referenced)

image

7. Now click on the Application UI tab (should have a red x next to it) and scroll down to the Notification section.

8. Change the Lock screen notification dropdown to Badge

9. Change the Badge logo to Assets\<TheNameOfYourLogo>.png

YOU WILL NEED TO CREATE THIS IMAGE.  Please see this post on how to modify an image.  The image size will need to be 24 X 24. The name of your logo may be different, obviously change this to what you named your logo.

image

10. Open up App.xaml.cs (from solution explorer) and add the following using statement to the top of the file.

using Windows.ApplicationModel.Background;

 

SPECIAL NOTE :  We are placing this in the App.xaml.cs file for simplicity.  This may or may not be where you want to launch your background task. Other options are the OnNavigatedTo method of your first page.

11. Now add the RegisterBackgroundTasks() method to the class. This calls the BackgroundTaskBuilder and adds our trigger to the OS.

private void RegisterBackgroundTasks()        {            BackgroundTaskBuilder builder = new BackgroundTaskBuilder();

            // Friendly string name identifying the background task            builder.Name = "BackgroundLiveTiles";            // Class name             builder.TaskEntryPoint = "TileBackground.Class1";

            IBackgroundTrigger trigger = new TimeTrigger(15, true);            builder.SetTrigger(trigger);            IBackgroundCondition condition = new SystemCondition(SystemConditionType.InternetAvailable);            builder.AddCondition(condition);

            IBackgroundTaskRegistration task = builder.Register();

            //YOu have the option of implementing these events to do something upon completion            //task.Progress += task_Progress;            //task.Completed += task_Completed;        }

NOTE: Make sure you named your project and class with the same case sensitivity as I instructed, TileBackground.Class1 , if you did not you will need to change it in the code above. Since it is just a string you will NOT get an error here.

12. Finally, make a call to the RegisterBackgroundTasks() method inside the OnLaunched()

Method as shown below.

image

That is all that is needed to set up our trigger to change out live tile in the background while we are not running.

How to Run your background trigger during debug.

Now we are going to show you how you can get your trigger to run while you are debugging your application.

1. Build and run the project

2. While the project is still running, switch back to Visual Studio

3. From the Suspend dropdown menu (if you set everything up correctly) you will see your

background process trigger. Select this and it will fire your trigger.

image

If you don’t see this toolbar, in Visual Studio, go to View –> Toolbars and make sure Debug and Debug Location are checked.

4. If you now look at your tile on the start page, it should show you rotating quotes, including one from the quotes service as below. (Quotes will vary)

image

 

That’s it for this post, in the next post we will show you how to use Azure and Push notifications to accomplish this same thing.

Happy Programming

Daniel Egan – The Sociable Geek

 

 

Rotating Live Tiles to keep interest

LiveTiles_thumb7_thumb1If you are developing an application or game  for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must.  I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile.  A live tile is a unique way to engage the consumer while they are not using your application.  It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again.  In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.

  1. Creating A Live Tile that is Engaging and Inviting
  2. Working with Live Tiles Locally
  3. Rotating Live Tiles to keep interest (This Post)
  4. Modifying Live Tiles in a Background Process
  5. Using Azure and Push Notifications with Live Tiles

Change the Scenery

In addition to inviting them into your application, you want to make sure that the information on your live tile does not become static. While it may engage them once, fresh content is important to keep them engaged.  You can rotate up to 5 different tiles at a time. To begin, we will use the project we created in the last post (if you don’t have that, you can create a new project and follow along)

This time we will be adding the code that goes behind the Rotate Tiles button.

image

Double click on the Rotate Tiles button to get to the button click handler. Add the following code inside the click handler.

AddTileNotification("Title 1", "This is the message for number 1","1");AddTileNotification("Title 2", "This is the message for number 2", "2");AddTileNotification("Title 3", "This is the message for number 3", "3");AddTileNotification("Title 4", "This is the message for number 4", "4");AddTileNotification("Title 5", "This is the message for number 5", "5");

 

For now, you will get an error stating that AddTileNotification does not exist.  We will add that shortly.  First add the following declaration to the top of your class.

TileUpdater tileUpdater;

 

Now in the constructor add the following code

tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();tileUpdater.EnableNotificationQueue(true);

 

This will new up an instance of the TileUpdateManager and will enable notification queuing.

Now lets add the AddTileNotification method.

private void AddTileNotification(string title, string message, string tag){    var templateType = TileTemplateType.TileWideSmallImageAndText04;    var xml = TileUpdateManager.GetTemplateContent(templateType);

    var textNodes = xml.GetElementsByTagName("text");    textNodes[0].AppendChild(xml.CreateTextNode(title));    textNodes[1].AppendChild(xml.CreateTextNode(message));

    //IMPORTANT if the image is not found, this update will fail SILENTLY    var imageNodes = xml.GetElementsByTagName("image");    var elt = (XmlElement)imageNodes[0];    elt.SetAttribute("src", "ms-appx:///Assets/SmallLogo.png");

    var tile = new TileNotification(xml);    tile.Tag = tag;    tileUpdater.Update(tile);

}

 

Since we already covered most of this code in the previous post (http://thesociablegeek.com/windows-8/livetiles/working-with-live-tiles-locally/) we will just discuss what is different

DON’T PAST THIS CODE.. IT IS ALL ABOVE, THIS IS JUST FOR DISCUSSION

If  we look at the method signature we can see that we are taking in a title, message, and a tag,

private void AddTileNotification(string title, string message, string tag)

 

The title and message will be used to hydrate the xml we are using for the tile (again see last post for more detail).  Since you are only able to rotate 5 tiles at any given time, the tag property allows us to have a reference to the tile we want to replace.  If you don’t use the tag property, it will replace the first tile that was added (FIFO). You can see where we apply the tag here

tile.Tag = tag;

 

If you run the project and click the Rotate Tiles button, you can see that it will rotate through all of the tiles we created. If you want to replace a tile, add another button to the form and add the following to its button click handler.

AddTileNotification("Title 6", "This is the message for number 6", "2");
This will replace the second tile (tagged as 2) with this tile.
That’s all there is to it, there is of course added complexity if you want to create different types of tiles (which you can). You would just need to modify your method to take into account the different Tile Types and adjust the needed data accordingly.
In the next post, we we look at how you can do all of this from a background process so that changes can be made while the user is not using the program.
Happy Programming,
Daniel Egan – The Sociable Geek

Working with Live Tiles Locally

 

LiveTiles_thumb7If you are developing an application or game  for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must.  I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile.  A live tile is a unique way to engage the consumer while they are not using your application.  It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again.  In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.

  1. Creating A Live Tile that is Engaging and Inviting
  2. Working with Live Tiles Locally (This Post)
  3. Rotating Live Tiles to keep interest
  4. Modifying Live Tiles in a Background Process
  5. Using Azure and Push Notifications with Live Tiles

Working with the TileUpdateManager

To show you the concepts of working with tile locally, we will be using a very simple application which consists of a simple form and two buttons.

image

In the Change Tile button click we will add the following code. First we want to make a reference to the template we would like to use for our tile.

var templateType = TileTemplateType.TileWideSmallImageAndText04;
var xml = TileUpdateManager.GetTemplateContent(templateType);

You will need to add the following using statement to the top of your page.

using Windows.UI.Notifications;

So what is the content we are grabbing with the TileUpdateManager? Its an XML document. In order to see what the tile we are working with looks like, place your cursor under TileTemplateType and hit the F1 key on your keyboard. This will bring you to the TileTemplateType enumeration documentation.  http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype(v=win.10).aspx

as you can see from the code, we have chosen to use TileWideSmallImageAndText04 for our tile.  If we look on the page, you can get a reference image for what will be rendered.

image

This is helpful but since the tile utilizes XML to render the tile, we need to know the XML Representation of this tile. If you scroll up to the top of the TileTemlplateType enumeration page we referenced above you will see a link to the Tile Template Catalog which will bring you here http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx.  If we search for our TileWideSmallImageAndText04 you will see the image along with the XML representation of that image.

image

We can see that this tile has one Image element and two text elements, so in order to modify them we need to get a reference to those nodes.  Add the following code below the template code you just pasted (in the button click)

var textNodes = xml.GetElementsByTagName("text");textNodes[0].AppendChild(xml.CreateTextNode("A message"));textNodes[1].AppendChild(xml.CreateTextNode("This text should wrap on max 3 lines, see if this fits on the tile!"));
The following code looks for any  xml nodes in our template that are named “text”.  Since we know from the template that there are two, we just add the text we want to show to each of those nodes as shown above.
We also need to find and modify the Image node in the XML.
var imageNodes = xml.GetElementsByTagName("image");var elt = (XmlElement)imageNodes[0];elt.SetAttribute("src", "ms-appx:///Assets/SmallLogo.png");
And since we are using XmlElement we need to add the following using statement
using Windows.Data.Xml.Dom;

 

Just like the text elements, we know there is only one image node so we set its “src” to an image we have in our project.
IMPORTANT NOTE:  If it does not find the image, the WHOLE thing will fail silently. I repeat, it will fail SILENTLY, so you will not  get an error, it will just not show up.
Now we use the TileUpdateManager to update the tile to the xml we just specified.
var tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();var tile = new TileNotification(xml);tileUpdater.Update(tile);

 

Before this will work, since we are using a Wide layout, we need a Wide Logo.  Right click on the Logo.png found in your Assets folder and select OpenWith.
From the list select Paint (or another graphics program of you choice)
image
When paint opens, click on the resize button and set the size to 310 X150 (in pixels) while unchecking the “Maintain aspect ratio” checkbox.
paint
Save the image back into the Assets folder and call it WideLogo.png.
widelogo
Make sure you include it in your project (Click show all files, right click on WideLogo.png and select include in project)
image
Next, double click on your Package_appmanifest file in your Solution Explorer and modify the WideLogo section to point to your image.
image
Run your project and click on the button.  When it completes, return to your start screen.  Your live tile should show you the image and two text nodes you inserted.
image
As talked about in our last post, you would want to repeat this for a small tile layout so that you still can get a dynamic tile even when it is small.
That is it for basic tiles.  In the next post, we will talk about how to rotate 5 different tiles to keep your users interested.
Happy Programing
Daniel Egan – The Sociable Geek

Creating a live tile that is engaging and inviting

LiveTilesIf you are developing an application or game  for Windows 8, making sure you have an engaging, inviting, or informative live tile is an absolute must.  I am always surprised when I see the amount of effort a developer puts into their application, but then neglects to spend any time on their live tile.  A live tile is a unique way to engage the consumer while they are not using your application.  It is not only a way to entertain, but done right, it will drive them back into your application or game time and time again.  In this series, we will discuss the many aspects of Live Tiles, from what should be placed on your live tile, to utilizing Azure and Push Notifications to send data to your application.

  1. Creating A Live Tile that is Engaging and Inviting (This Post)
  2. Working with Live Tiles Locally
  3. Rotating Live Tiles to keep interst
  4. Modifying Live Tiles in a Background Process
  5. Using Azure and Push Notifications with Live Tiles

 

Getting the Shelf Space

image

In almost every business endeavor, placement is key.  Take a supermarket for instance, if you walk through the aisles, you will notice that the “Big Brands” are located on the shelves that are eye-level.  This is the prime placement for consumers. As a shopper, your eyes will naturally go to this level and a majority of you will buy the items located there. This is the same for any of the app store / marketplaces for your devices.  Most consumers will buy one of the top 25 apps in any of the lists (eye level).

This  holds true for placement on your Windows 8 start screen.  You are more than likely to use applications or games that are on the initial view of your start screen.  And since the consumer is the one that decides on this placement, as opposed to the supermarket, there is no way you can pay to be in this prime real estate.  To be in this space, you must Engage, Invite, or Entertain the user.

image

Give them just enough

Although technically speaking, when you include an image for your tile when you create your project, it is not LIVE unless you make it live.  In the next post, Working With Live Tiles Locally,  we will discuss the HOW to add data to your tile, in this post, we are going to discuss the WHAT you should put on your live tile.  The dictionary defines Engage as : To attract and hold the attention of; engross.   So to attract the attention of the user, you first need to decide which tile template you would like to use. There are 45 different types, which you can find here http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype(v=VS.85).aspx

image

The layout you select depends on the information you want to deliver. From a full image, to all text and 43 more layouts in between, you have the ability to customize it as you see fit.

Your live tile should say “Click Me”. Not in the literal sense of course, but the information you give the user should float on the line of giving them enough information to pique their interest, but not too much so that they never go inside your application.

image Take the Weather application for example, if we look at its Live Tile we can see the temperature, whether or not it is going to rain, if it is cloudy, and the highs and lows for the day.  Unless I need a weeklong forecast or the weather in a location I may be traveling to, I will not be going into the Weather application too often.

image

On the other hand, the News application shows me a picture with just the title of a story. If that story piques my interest, then it serves the purpose of engaging, and Inviting me back into the application.  It is a fine line between the two of them, so be aware of how much information you a presenting on your tile.

 

SPECIAL NOTE:  The user must go into your application at least once in order to see the “LIVE” tile. Otherwise they will only see the image that you packaged with your application. This is because the application needs to run at least once to be able to call the tile API either locally or from push notifications.

Change the Scenery

In addition to inviting them into your application, you want to make sure that the information on your live tile does not become static. While it may engage them once, fresh content is important to keep them engaged.  You can rotate up to 5 different tiles at a time.

For games, you will want to remind them to keep playing the game.  You can remind them of games in progress, achievements they have won, or if it is a turn by turn game, you can alert them that it is now their turn.  For example, Minesweeper below shows the last achievement I obtained. This could also be used to show the next level to try for.

ms1ms2ms3

Solitaire, on the other hand, shows the user’s percentage of wins and losses. Although I would be careful with this one, since it might discourage a bad player from having the live tile on their main start screen, thus removing you from the prime real estate. This goes for leaderboards as well. If a player is not in the top 10, do they really want to see who is?  Individual high scores and achievements are better motivators, you can even entice them by adding text to the tile like “Come and try to beat your high score of :” <High Score Here>.  Remember, this is your chance to be creative.

Sol1Sol2Sol3

I think the CW application, on the other hand, does a great job of giving relevant information to the user. This not only helps them with driving people into the application, but also reminds them to turn on their TV and watch the program.

CW1cw2

For the CW application, it is quite easy to decide what to show.  If someone downloads the application, it can probably be assumed that they watch the channel, but for something like the sports application, it may be hard to pinpoint the interest of the user (Unless you ask for it).  In that case, having multiple tiles show different information lets you capture a wide array of interests. You have the ability to rotate up to five different tiles.Sports1Sports2Sports3

You will notice in the sports application, it rotates between and image and just text.  That transition from text to image is an eye-catcher. If you are looking at the screen you can’t help but notice it. Keep that in mind while you are designing your tile.

I like to describe the Windows 8 Start Screen as a Glanceable Architecture.  Be careful to make sure that your information can be viewed at a glance.  As you can see below, two of the live tiles do it right, but the third one is a mess. Not only does it have an image of text (???) but the text below it is an almost unreadable URL.  Be bold in your live tiles. Give as much impact in as little text as possible.  The image should draw them to read the text.

Other1SU2SU3

The one thing that might not be apparent in all of the examples above, is that they ROTATE.  This is important, the rotation causes change, and the change draws the eye. But subtlety is the key. We are not talking about the glitter fueled pages of the old MySpace, but gracefully attracting the attention of the user.

Size Matters

If you looked at the chart of the 45 different templates available, you saw that there were two standard sizes. a 150 X 150 Logo and a 310 X 150 Wide Logo.

size1size2size3

As we just noted above, if the user places you in the beginning of their start screen, you want to take advantage of this by presenting as much information as possible. By default, if you include a Wide Logo in your application by providing an image in your application_manifest file, when your application or game is installed, it will place the Wide Logo on the start screen (at the end).

image

The wider tile allows you to show more information. It is equally important to understand that the user has the ability to change the default live tile to the smaller live tile, in addition to turning off the live tile or unpinning it completely.

image

It is up to you as the developer to make sure that you create live content for the tiles in BOTH sizes.  As you can see in the images below, the Solitaire game continues to change the image, although they decided to drop the statistics. This most likely is due to the smaller real estate, which makes the amount of data they wanted to show difficult to read.  Remember, you want them to be able to see it in a glance.

smallsol1smallsol2smallsol3

In contrast, the StumbleUpon application did not implement a smaller live tile, while the CW did, showing the next important show.

image

 

Update From the background

To achieve the fluidity that comes from constantly changing information on your live tile, it is highly recommended that you update your live tile from outside your application. In other words, change the tile while the user is NOT using your application or game, to GET them to use your application or game.  In the next few posts in this series, I will show you how to do this.

Happy Programing

Daniel Egan – The  Sociable Geek

Get your Windows 8 App into the Windows Store

Windows 8 is coming in the near future. You can download, use it, and develop apps for it today.  As of May 2012, the Windows Store is not open for everyone to deploy.  However, we are looking for the first wave of great applications which highlight the power of Metro and Windows 8, especially from developers who want to get to market first and build their brand.

In order to submit your application today you need a token.  This is something I can help you get.

  1. Create a great application or game.
  2. Let me know about it by contacting me via my email.  Daniel.Egan@microsoft.com (Put Win8App in the subject)
  3. I’ll help you register so you can get your application through our Application Accelerator Labs, where the app will get reviewed to confirm it’s complete and conforms to the Metro guidelines and certification requirements.

This is a great opportunity to not only be first to market with your app, but also to get feedback from a Microsoft Services Engineer to make your app great. If you are serious about creating an application, this is a chance that you probably don’t want to pass up.

In addition, our team is holding a series of events and office hours to help you.  We want to make sure you have what you need to be successful. Come learn more about how to build apps for Windows 8, or show up and build your app with one of our evangelists or others in the community.

Windows Developer Camps (to learn about Windows 8 development):

Windows Application Accelerator Labs (to build your app):

  • Redmond, WA.  May 15 – 17, 2012. Register
  • Mountain View, CA.  May 22 – 24, 2012. Register

Note that to get a Windows Store token, you’ll still need to contact me daniel.egan@microsoft.com  to get your app reviewed.

Windows Phone Unleashed

 

imageWant to learn how to build a windows phone application (Become a WP7Dev).  Then join us for the Windows Phone Unleashed Series.  The content was created by Daniel Egan (me) and Bret Stateham.

Windows Phone Unleashed is put on by the community.  It is an all day event with 3 instructor led sessions paired with Hands On Labs that when you are finished complete the Coffee Findr application. At the end of the day there is a app contest with Prizes.

You can download the finished app from the Marketplace .  From this application you will learn the following skills.  Check it out now.

Register for an Event Near You.

  • Working with Live Tiles
  • Periodic Execution
  • Pulling Data from Rest Services
  • Deserializing Json
  • Binding data to your UI
  • Using Bing for Maps and Directions
  • Using Isolated Storage and  SQL CE on the Phone
  • Navigation
  • And much much more

We also have TWO different events this time…. We have also added a Games Development Unleashed Event.  So look for an event near you.  But register quickly… seats go fast for this FREE event.

Register for an Event Near You.

(If you have been to an Unleashed Event before. This is NEW content)

 

Agenda for both types of events

 

Line of Business Apps

Introduction to Windows Phone 7 Programming

In this session, we start with a discussion of windows phone, the architecture changes made from 6.5 to 7.0, the hardware specifications and then move into the beginnings of building a WP7 application including…

  1. Application life cycle
  2. Hardware Foundation
  3. Files associated with project template
  4. Splash screen and the importance of 1 second / 19 second loading
  5. Application Bar
  6. Panorama and Pivot controls
  7. MVVM
  8. Marketplace

Connecting to Services

In this session, we will discuss how Cloud Services help to bring power to the phone. We will be binding to a rest based services and show how to search and display the information received. In this session we will also talk about Navigation, passing information between screens, while working with List and detail information.

  1. Navigation
  2. Location
  3. JSON Deserialization
  4. Bing Maps
  5. Isolated Storage
  6. Binding Sample Data
  7. Navigation

Recording Data

In this session we will be adding to our knowledge and learn the importance of live tiles. We will show you how to set up a periodic agent and how to set up and read and write to a SQL Database on Windows Phone.

  1. Live Tiles
  2. SQL CE
  3. Background Processes and Periodic Agents
  4. Launchers and Choosers

Games Development

Introduction to XNA

XNA Game Basics

  1. What is XNA
  2. Game Development Tools
  3. XNA Game Projects
  4. XNA Game Loop
  5. Debugging Games

Working with Images, Sounds and Text

  1. Working with Textures
  2. Playing Songs and Sound Effects
  3. Drawing text with SpriteFonts

Getting User Input

  1. Getting input on the phone
  2. Using the Accelerometer
  3. Using Touch

Game State Management

Managing Game Play

  1. Keeping Score
  2. Tracking Health and Lives
  3. Adding Levels

Managing Screens

  1. Creating Multi-Screen games
  2. Loading content in the background
  3. How to pause the game

Managing State

  1. Phone Application Lifecycle
  2. Supporting Fast Application Switching
  3. Persisting and Restoring State

Silverlight and XNA Integration

  1. Introduction to Silverlight
  2. Silverlight and XNA Integration
  3. Creating a Silverlignt and XNA Game

Advanced XNA Games

Marketplace and Advertisements

  1. Understanding the Windows Phone Marketplace
  2. Submitting your Game to the Marketplace
  3. Adding Advertisements to your game

3D Games

  1. 3D Support in XNA
  2. Creating a simple 3D Game

Multi-Platform Games

  1. Building Games for Phone, PC and XBOX
  2. Other Multi-Platform options

Cloud Integration

  1. Using Windows Azure
  2. Social Gaming Toolkit

 

Remember… Daniel Egan knows Windows Phone Smile

Making WPConnect Easier to use

If you are building a Windows Phone application and you are using your phone to debug AND you are using the Photo Chooser or or the Camera Launcher task you may have found out that it will not let you access the camera or pictures while you are connected to Zune.

But, you have to be connected to Zune to debug on the phone.  Well, kind of.  The Windows Phone Team put out a tool called WPConnect.exe that allows you to dubug on the phone without having Zune open.

Here are the steps.

  1. Connect your phone
  2. Make sure Zune launches and connects to your phone.
  3. Shut down Zune
  4. Using a Dos Prompt, Navigate to
    1. (for 64 bit machines) C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\WPConnect\x64
    2. (for 32 Bit machines) C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Tools\WPConnect\x86
  5. Type WPConnect.exe

It will then tell you that you are good to go.

NOW FOR THE EASY WAY

I got tired of having to navigate using a command prompt (Too may keystrokes) and I use this often enough to matter, so I created a shortcut for the Dos Prompt that takes me right to my designated spot in one click. Here is how you do it.

1. Right-click in the open space of your desktop and click New > Shortcut.

2. For the location, type or copy and paste the following:

%windir%\system32\cmd.exe /k

image

3. Click Next.

4. For the name, type something descriptive, like “Command Prompt for WPConnect” then click Finish.

image

5. Right-click on the new shortcut and choose Properties.

6. Change the “Start In” field to whatever directory you want the command prompt to start in.In my case, I want it to start in the 64 bit folder we talked about above:

"C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\WPConnect\x64"

image

Be sure to include the quotation marks, and of course you would need to customize this file path to your own system (32 or 64).

Now when I want to use WPConnect.  I just use the pined shortcut

image

and Type WPConnect.exe

image

Hope that helps Smile