I’ve decided to put the Windows Phone 7 Tip of the Day on the back burner for a while.  As I’m sure regular subscribers have noticed, the “of the day” preposition has not been accurate lately.  I might switch to a weekly format, or try something else entirely, but for the time being, I’m just taking a break to concentrate on some higher priorities.

About Live Tiles

Live Tiles are called Live Tiles for good reason: they are more than just a boring picture.  You can do lots of things with live tiles, including updating the background image, changing the title, and displaying a count.

About ShellTileSchedule

This tip focuses on one way you can update your app’s live tile background: The ShellTileSchedule.  Of the two ways to update the background image, ShellTileSchedule is by far the easiest.  The other mechanism is a push notification.

To start, you need to get the background image you will use for your background on a web server.  ShellTileSchedule can only pull images off the web, not from the phone itself.  This is one of the limitations of ShellTileSchedule.  If you want to set background images to resources on the phone, look at using push notifications instead.

The Code

Once you have your image on the web, setting up a schedule to update it is as simple as executing this code when your application launches

   1: var url = "http://www.codebadger.com/photoservice/random";

   2: var schedule = new ShellTileSchedule

   3:                     {

   4:                         Interval = UpdateInterval.EveryHour,

   5:                         MaxUpdateCount = 10,

   6:                         Recurrence = UpdateRecurrence.Interval,

   7:                         RemoteImageUri = 

   8:                         new Uri(url),

   9:                         StartTime = DateTime.Now

  10:                     };

  11: schedule.Start();

This will register a new update schedule with the phone.  In this particular example, we’re making a call to a pretend web service that returns a different random image every time it’s called. This provides a convenient way to get different images to the phone without code changes.

This schedule changes the image every hour and will quit updating the image after 10 updates.  If the code executes again (like when your app runs again), the count starts over.

Gotchas

• The image will not update immediately.  Give it an hour or so before you suspect that you did something wrong.
• The image will update both in the emulator and on the real phone, so you can test in either.
• The image must be 80KB max and have a download time of less than 15 seconds.
• Tiles won’t update if the phone is locked

Other Resources

• Creating Live Tiles (MSDN)
• Updating tiles without Push notifications (MSDN)
• Push notification (MSDN)
• ShellTileSchedule (MSDN)

More Tips

• All the tips
• Categorized list of tips
• Subscribe to WP7 Development Tip of the Day

Many of the default Windows Phone application live tile icons pick up the color of the system theme accent color.  For example, the phone app, people app, messaging app, and internet explorer use the system accent color as their background.  Here’s what the emulator looks like with the accent color set to blue and lime.

Your application icons can do this is well.  It’s as easy as saving your background image with transparency where you want the accent color to come through.  By default, the live tile icon that is created with new Visual Studio projects (Background.png) has a dull gray background that looks like this.

With that dull gray replaced by transparency, the system accent color comes through.  Here’s Background.png in Paint.net, with the gray deleted and white replaced with red.  In practice, red would be a very poor choice since one of the system accent colors is red.  White is probably your best bet, but I used red so we can see the contrast between the transparency and the icon’s image.

When run in the emulator, this icon looks like this:

Or this, depending on the system accent color

Other Resources

• Creating Live Tiles (MSDN)

More Tips

• All the tips
• Categorized list of tips
• Subscribe to WP7 Development Tip of the Day

The next two tips will come from the System.Net.NetworkInformation namespace.  This namespace has two classes that can be used to tell if your application has access to the internet and if that access changes.

If your application is going to use the data connection of the phone, it can be helpful to know when the data connection is available.  The NetworkInterface class makes this trivial.  Here’s a method you can drop right into your app to check for internet connectivity.

   1: private bool InternetIsAvailable()

   2: {

   3:     if (!NetworkInterface.GetIsNetworkAvailable())

   4:     {

   5:         MessageBox.Show("No internet connection is available.  Try again later.");

   6:         return false;

   7:     }

   8:     return true;

   9: }

As near as I could tell with some limited testing, the emulator will always report is has an internet connection, so you can use conditional DEBUG compilation if you want to test how things would work with no connection.

   1: private bool InternetIsAvailable()

   2: {

   3:     var available = !NetworkInterface.GetIsNetworkAvailable();

   4: #if DEBUG

   5:     available = false;

   6: #endif

   7:     if (!available)

   8:     {

   9:         MessageBox.Show("No internet connection is available.  Try again later.");

  10:         return false;

  11:     }

  12:     return true;

  13: }

Other Resources

• System.Net.NetworkInformation namespace (MSDN)
• NetworkInterface class (MSDN)

More Tips

• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day

About Trial Mode

One of the nice features of the Windows Phone ecosystem is the ability to run an application in trial mode.  Developers can create one application that can “unlock” content if the user is running the full application.  As a developer, the way that you approach trial modes is entirely up to you.  You can limit as much or as little of your functionality as you like.  And of course, if your application is available for free, then trial mode doesn’t apply.

If you’re charging money for your application, even if only a dollar, you should take the time to deliver a good trial mode experience.  Potential customers are much more likely to take the time to install your app if they can give it a whirl risk-free.

An example

By way of example, consider an application that lets you push a red button without paying, and unlocks a special blue button if you purchase the application

   1: <StackPanel>

   2:     <Button x:Name="FreeButton" Background="Red" Height="100" />

   3:     <Button x:Name="PayButton" Background="Blue" Height="100" />

   4: </StackPanel>

Here’s the code that disables the special blue button if the application is running in trial mode.

   1: protected override void OnNavigatedTo(NavigationEventArgs e)

   2: {

   3:     base.OnNavigatedTo(e);

   4:     if (IsTrial())

   5:     {

   6:         PayButton.Visibility = Visibility.Collapsed;

   7:     }

   8: }

   9:  

  10: private static bool IsTrial()

  11: {

  12:     var license = new Microsoft.Phone.Marketplace.LicenseInformation();

  13:     return license.IsTrial();

  14: }

There is a small catch, though.  If you are running the application while developing (in the emulator, for example), then IsTrial() will always return FALSE.  You can get around this by hard-coding the method to return TRUE (or FALSE) when debugging.

Since applications released to the marketplace have to be compiled in Release mode, this code could never make it into the Marketplace.

   1: private static bool IsTrial()

   2: {

   3: #if DEBUG

   4:     return true;

   5: #endif

   6:     var license = new Microsoft.Phone.Marketplace.LicenseInformation();

   7:     return license.IsTrial();

   8: }

Other Resources

• Get the tools
• LicenseInformation class (MSDN)

More Tips

• Introduction to the Silverlight Toolkit for Windows Phone
• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day

Today’s tip focuses on the WrapPanel that’s available in the Silverlight Toolkit for Windows Phone.  If you’re not familiar with the Toolkit, check out the introductory post.

About the WrapPanel

The WrapPanel has always been a popular control in both Silverlight and WPF.  Originally shipping with WPF, the WrapPanel lets you drop a series of controls into a container that will arrange them as if they were words on a page …. left-to-right and then top-to-bottom. Or think of Windows Explorer arranging icons. It’s a natural extension of the StackPanel.

The WrapPanel has been part of the non-Phone Silverlight Toolkit since the very beginning, and could be used in phone projects by adding the non-Phone Toolkit references to your project. 

Now that the WrapPanel is part of the phone-specific toolkit, things are even easier.  Same basic steps, but without the extra baggage of the non-Phone toolkit.

Using the WrapPanel

To use the WrapPanel, first add a reference to Microsoft.Phone.Controls.Toolkit.dll, which is installed with the toolkit.

Next, add a reference to the assembly in your page XAML

   1: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;

   2:                assembly=Microsoft.Phone.Controls.Toolkit" 

The XAML

Since the WrapPanel is a container, the XAML is pretty simple.  Here’s a wrap panel with six obnoxiously colored buttons in it. 

   1: <toolkit:WrapPanel>

   2:     <Button Content="One" BorderBrush="Aqua" />

   3:     <Button Content="Two" BorderBrush="CadetBlue" />

   4:     <Button Content="Three" BorderBrush="DarkMagenta" />

   5:     <Button Content="Four" BorderBrush="Fuchsia" />

   6:     <Button Content="Five" BorderBrush="LightBlue" />

   7:     <Button Content="Six" BorderBrush="Orange" />

   8: </toolkit:WrapPanel>

This creates the standard left-to-right, top-to-bottom wrap panel.

You can also set the Orientation to “Vertical” to create a top-to-bottom, left-to-right wrap panel.

   1: <toolkit:WrapPanel Orientation="Vertical" Height="400">

   2:     <Button Content="One" BorderBrush="Aqua" />

   3:     <Button Content="Two" BorderBrush="CadetBlue" />

   4:     <Button Content="Three" BorderBrush="DarkMagenta" />

   5:     <Button Content="Four" BorderBrush="Fuchsia" />

   6:     <Button Content="Five" BorderBrush="LightBlue" />

   7:     <Button Content="Six" BorderBrush="Orange" />

   8: </toolkit:WrapPanel>

Other Resources

• Get the tools
• Windows Phone Design and Interaction Guide
• Silverlight Toolkit
• Tim Heuer post

More Tips

• Introduction to the Silverlight Toolkit for Windows Phone
• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day

Today’s tip focuses on the Toggle Switch that’s available in the Silverlight Toolkit for Windows Phone.  If you’re not familiar with the Toolkit, check out the introductory post.

 About the Toggle Switch

The toggle switch is a UI element that lets the user turn something on or off.  One way to think of it is as the modern smartphone equivalent of a checkbox. 

Using the Toggle Switch

To use the Toggle Switch, first add a reference to Microsoft.Phone.Controls.Toolkit.dll, which is installed with the toolkit.

Next, add a reference to the assembly in your page XAML

   1: xmlns:toolbox="clr-namespace:Microsoft.Phone.Controls;    

   2:                assembly=Microsoft.Phone.Controls.Toolkit"

The XAML

The XAML for the toggle switch is very simple

   1: <toolkit:ToggleSwitch x:Name="FluxToggle"

   2:                       Header="Flux Capacitor" 

   3:                       Checked="ToggleSwitch_Checked" 

   4:                       Unchecked="ToggleSwitch_Unchecked" />

This create a toggle switch that is labeled “Flux Capacitor”, has the standard On/Off choices, and is wired up with an event handler when it is checked or unchecked.

The Code

You can read the current value of a ToggleSwitch with the IsChecked property

   1: private void ToggleSwitch_Checked(object sender, RoutedEventArgs e)

   2: {

   3:     MessageBox.Show(FluxToggle.IsChecked.ToString());

   4: }

Changing the values

By default, the toggle switch uses “On” for true and “Off” for false.  You can change this by setting the Content property of your control.

   1: <toolkit:ToggleSwitch x:Name="FluxToggle"

   2:                       Content="Fluxing" IsChecked="true"

   3:                       Header="Flux Capacitor" 

   4:                       Checked="ToggleSwitch_Checked" 

   5:                       Unchecked="ToggleSwitch_Unchecked" />

The XAML above sets up a toggle switch that is checked and says “Fluxing”.

To make sure that the custom labels stay in sync with the toggle switch, it’s just a matter of writing  event handlers for Checked and Unchecked.

   1: private void ToggleSwitch_Checked(object sender, RoutedEventArgs e)

   2: {

   3:     FluxToggle.Content = "Fluxing";

   4: }

   5:  

   6: private void ToggleSwitch_Unchecked(object sender, RoutedEventArgs e)

   7: {

   8:     FluxToggle.Content = "Not Fluxing";

   9: }

Other Resources

• Get the tools
• Windows Phone Design and Interaction Guide
• Silverlight Toolkit
• Tim Heuer post

More Tips

• Introduction to the Silverlight Toolkit for Windows Phone
• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day

Today’s tip focuses on the TimePicker that’s available in the Silverlight Toolkit for Windows Phone.  If you’re not familiar with the Toolkit, check out the introductory post.

About the TimePicker

The TimePicker is very similar to the DatePicker, which was covered in yesterday’s tip. Just like we saw with dates, there is an input scope that looks like it might work for letting users pick times, but if you use the “Time” input scope, the user will get a normal keyboard, not a fancy picker.

   1: <TextBox InputScope="Time" />

So instead of using input scopes for times, we want to use the TimePicker from the Silverlight Toolkit.

Using the TimePicker

To use the DatePicker, first add a reference to Microsoft.Phone.Controls.Toolkit.dll, which is installed with the toolkit.

Next, add a reference to the assembly in your page XAML

   1: xmlns:toolbox="clr-namespace:Microsoft.Phone.Controls; 

   2:                assembly=Microsoft.Phone.Controls.Toolkit"

Adding the icons

An extra step with the DatePicker control is to get the Ok/Cancel icons into your project.  You can find these icons in the install folder for the toolkit.  On my machine, it worked out to

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Icons

Copy both icons into your project and put them in a folder named “Toolkit.Content”.  Also, mark the build action as “Content”

The XAML

The TimePicker XAML looks just like the DatePicker XAML.  Here’s a time picker that is wired up with a handler for its ValueChanged event.

   1: <toolkit:TimePicker x:Name="EventTimePicker" ValueChanged="TimePicker_ValueChanged" />

This generates a control that looks just like a text box.

When the user clicks on the “textbox” to edit it, the TimePicker launches, and uses the two icons described earlier.

The Code

The time selected by the user can be read from the Value property of the TimePicker.  It comes across as a DateTime object, so you’ll have to throw away the date portion to get just the time.

   1: private void TimePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e)

   2: {

   3:     var time = (DateTime) EventTimePicker.Value;

   4:     MessageBox.Show(time.ToShortTimeString());

   5: }

Other Resources

• Get the tools
• Windows Phone Design and Interaction Guide
• Silverlight Toolkit
• Tim Heuer post

More Tips

• Introduction to the Silverlight Toolkit for Windows Phone
• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day

About the DatePicker

The DatePicker is an important control because of a limitation of the “Date” input scope.  You can add an input scope of “Date” to a textbox in Windows Phone, but this doesn’t give a nice date picker like you might expect.  It doesn’t even give you a number-based keyboard, but just the standard alphabetical one. 

   1: <TextBox InputScope="Date" />

If you’re relying on input scope to give the user an interface to input a date, you’re better off with the “Number” input scope – at least that will give them numbers to input.

But there’s a better answer than textboxes and input scopes – the DatePicker control that comes in the Silverlight Toolkit for Windows Phone.

Using the DatePicker

To use the DatePicker, first add a reference to Microsoft.Phone.Controls.Toolkit.dll, which is installed with the toolkit.

Next, add a reference to the assembly in your page XAML

   1: xmlns:toolbox="clr-namespace:Microsoft.Phone.Controls;

   2:                assembly=Microsoft.Phone.Controls.Toolkit" 

Adding the icons

An extra step with the DatePicker control is to get the Ok/Cancel icons into your project.  You can find these icons in the install folder for the toolkit.  On my machine, it worked out to

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Sep10\Bin\Icons

Copy both icons into your project and put them in a folder named “Toolkit.Content”.  Also, mark the build action as “Content”

The XAML

The XAML for the DatePicker is as easy as it gets.  Here’s a DatePicker that has its ValueChanged event wired up.

   1: <toolbox:DatePicker x:Name="BirthDate" 

   2:                     ValueChanged="BirthDate_ValueChanged" />

This generates a control that looks just like a textbox.

When the user clicks on the “textbox” to edit it, the DatePicker launches, and uses the two icons described earlier.

The Code

The value selected by the user can be read from the .Value property of your DatePicker.

   1: private void BirthDate_ValueChanged(object sender, DateTimeValueChangedEventArgs e)

   2: {

   3:     var date = (DateTime) BirthDate.Value;

   4:     MessageBox.Show(date.ToString("d"));

   5: }

Other Resources

• Get the tools
• Windows Phone Design and Interaction Guide
• Silverlight Toolkit
• Tim Heuer post

More Tips

• Introduction to the Silverlight Toolkit for Windows Phone
• http://www.codebadger.com/blog/category/WP7-Tip-of-the-Day.aspx
• Subscribe to WP7 Development Tip of the Day

To make it easier to find groups of related tips, I’ve created an archive page that shows tips by category.  This page doesn’t list all of the tips of the day, just the ones that tend to fall into groups.

http://www.codebadger.com/blog/page/Archived-Tip-of-the-Day-by-Category.aspx