Set start page dynamically in wp7

My new Windows Phone 7 app "WeekCal" provides different calendar views. There are actually two week views and a month view. In the settings, the user can set the view to start with.
To start the app with the view the user has choosen, there are two steps necessary.

First step is to select the right view in the App.xaml.cs file and set it as root frame element. Do this in the Application_Launching method. Here is an example:

 private void Application_Launching(object sender, LaunchingEventArgs e)
 {
   Uri uri;
   // Read the user settings
   var views = IsolatedStorageProvider.LoadViewSettings();
   // Month view
   if (views.ShowMonthView)
   {
     uri = new Uri("/MonthViewPage.xaml", UriKind.Relative);
   }
   else
   {
     // Week view
     if (views.ShowFiveDaysWeek)
     {
       uri = new Uri("/FiveDaysPage.xaml", UriKind.Relative);
     }
     else
     {
       uri = new Uri("/SevenDaysPage.xaml", UriKind.Relative);
     }
   }
   // Set the start page
   ((App)Application.Current).RootFrame.Navigate(uri);
 }  

Everything looks ok, but the app does not start with the right view. There is one more easy step to do. In the WMAppManifest.xml file, the DefaultTask tag needs an empty NavigationPage property. So just delete the default entry MainPage.xaml.

<Tasks>
 <!--This is set in code (App.xaml.cs)-->
 <DefaultTask Name="_default" NavigationPage="" />

That's it, hope that helps.

WP7 PhoneGap Appointments PlugIn

I'm involved in a project that needs a web frontend and clients for iPhone, Androide and of course WindowsPhone. Using a framework like PhoneGap is definitly a good point to start. In a later post I will write about how this all ended up. In this post I will focus on one of my first tasks, building a PhoneGap PlugIn that reads the calendar appointments.

I started with a web research and found a helpfull blog from Jesse here, explaining how to build a PlugIn. What I was missing in his blog, was how to return a value from the plugin. And there where some additional stumbling blocks to build this first PlugIn.

So lets start. First I created a new PhoneGap project in Visual Studio with the standard template (Visual Studio and PhoneGap is already installed).

In the next step I build the PlugIn class written in C#. The PlugIn should read my appointments and return them to the html page. So I added a new class AppointmentProvider in the Plugins folder of my project. This class must be
- in the namespace WP7GapClassLib.PhoneGap.Commands
- inherit from the BaseCommand base class

The rest of the code is more or less normal WP7 C# code.

 using System;
 using System.Collections.Generic;
 using System.Runtime.Serialization;
 using Microsoft.Phone.UserData;
 
 // The namespace must point to the phonegap commands  
 namespace WP7GapClassLib.PhoneGap.Commands 
 {
   // Use the phonegap base class
   public class AppointmentProvider : BaseCommand 
   {
     // Start appointment search with parameters
     public void Get(string args)
     {
       // Check the availability of the args
       if (string.IsNullOrWhiteSpace(args))
         throw new ArgumentNullException();
  
       // Deserialize the args to the ListArgs class
       var arguments = JSON.JsonHelper.Deserialize<ListArgs>(args);
       var appts = new Appointments();
       appts.SearchCompleted += 
         new EventHandler<AppointmentsSearchEventArgs>(appointments_SearchCompleted);
  
       // Set the parameters
       var start = DateTime.Now;
       var end = start.AddDays(int.Parse(arguments.Days));
       var max = int.Parse(arguments.Number);
  
       // Start the asynchronous search
       appts.SearchAsync(start, end, max, null);
     }
  
     // Get the result and pass it to the javascript code
     private void appointments_SearchCompleted(object sender, AppointmentsSearchEventArgs e)
     {
       // Build the result
       var apmts = new List<AptmResult>();
       foreach (var item in e.Results)
       {
         apmts.Add(new AptmResult() { 
           Text = string.Format("{0} {1}-{2}<br>{3}", 
           item.StartTime.ToShortDateString(), 
           item.StartTime.ToShortTimeString(), 
           item.EndTime.ToShortTimeString(),
           string.IsNullOrWhiteSpace(item.Subject) ? "Privat" : item.Subject)
         });
       }
  
       var result = new PluginResult(PluginResult.Status.OK, apmts);
  
       // Return the result
       DispatchCommandResult(result);
     }
  
     // Argument class to be serialized
     public class ListArgs
     {
       [DataMember]
       public string Number; 
  
       [DataMember]
       public string Days;
     }
  
     // Argument class to be serialized
     public class AptmResult
     {
       [DataMember]
       public string Text;
     }
   }
 }

Wow, my first PhoneGap PlugIn is finished :)

Now I need some html to show the results and some JavaScript code to call the PlugIn. The html is easy, just a button and a list.

<div>
  <button onclick="getAppointments();">
    Get Appointments</button>
</div>
<div>
  <ul id="apmtResults">
  </ul>
</div>

Then I need the JavaScript code to call the PlugIn. I did all the explanation in the code, so you can hopefully follow on what I did. One point I did not get is why a reference to a local jQuery lib does not work... and now when I'm writing this, I realize that I should have made an entry in the GapSourceDictionary.xml file. So this problem is solved as well.

<!-- Local reference to the jQuery lib does not work!? -->
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
  
<script type="text/javascript">
  
  // Wait for PhoneGap to connect with the device
  document.addEventListener("deviceready", onDeviceReady, false);
 
  // PhoneGap is ready to be used!
  function onDeviceReady() {
    // Nothing to do for me
  }
  
  // APPOINTMENT PLUGIN
 
  // Call the AppointmentProvider plugin
  function getAppointments() {
    window.plugins.apmtProvider.showApmtProvider("10", "30");
  }
  
  // Create the class
  function ApmtProvider() {
    this.resultCallback = null;
  }
  
  ApmtProvider.prototype.showApmtProvider = function (number, days) {
    var args = {};
    if (number)
      args.Number = number;
  
    if (days)
       args.Days = days;
    PhoneGap.exec(onApmtOk, onApmtError, "AppointmentProvider", "Get", args);
  }
  
  // Create an instance of the class
  PhoneGap.addConstructor(function () {
    if (!window.plugins) {
      window.plugins = {};
    }
    window.plugins.apmtProvider = new ApmtProvider();
  });
  
  // Callback to handle the ok event
  function onApmtOk(result) {
    // Use jQuery to add the result to the div
    var apmts = [];
    // Clear the list first
    $("#apmtResults").empty();
    // Prepare the result by building an array
    $.each(result, function (i, item) {
      apmts.push('<li>' + item.Text + '</li>');
    });
    // Add the result array
    $("#apmtResults").append(apmts.join(''));
  }
  
  // Callback to handle the error event
  function onApmtError(result) {
    navigator.notification.alert(result, null, "Error");
  }
</script>  

We are done, but when I start the project it fails. First I need to know that I can't use the emulator, because there are no appointments. I need to run the project on a real device.

Still not working. It took me a while till I figured out, that in the WMAppManifest.xml file the entry
<Capability Name="ID_CAP_APPOINTMENTS"/>
was missing. After adding this everthing worked fine!

Please note that this is just a sample and error handling is missing ;-)

SupportedOrientations not working on emulator

We all know the SupportedOrientations property on a windows phone page. Just set the value to Portrait and your App will only support the portrait orientation mode. Set it to Landscape and your App will only support the landscape orientation mode. Set it to PortraitOrLandscape and both are supported. That easy!
By the way, the property Orientation tells the device in which orientation to start.

But, yesterday I set the property on my main page from PortraitOrLandscape to Portrait only. And suddenly also on my other pages, where the SupportedOrientations property was still set to PortraitOrLandscape, the landscape mode was not supported anymore in my emulator. Hmmm, what happend here?

After checking everything for my mistake and not finding any and after a long helpless google session I finaly found my mistake by accident.

I used the pc keyboard (by hitting PageUp). This disables the rotation in the emulator and that was my only problem.

I hope this helps.

ImageButton control for Windows Phone 7

To build an image button in WPF or Silverlight is a commen task. Also in Windows Phone 7 but here we have an additional problem, the themes. The basics I found in this nice article.

What's not handled there is the themes. In the dark theme everything works fine but in the light theme the button is invisible because of the color (white in white). Therefore two more images are needed.

First I added two more dependency properties to the ImageButton class. And then I extended the template to look like that.

     <ControlTemplate x:Key="ImageButtonControlTemplate" TargetType="local:ImageButton">
       <Grid>
         <VisualStateManager.VisualStateGroups>
           <VisualStateGroup x:Name="CommonStates">
             <VisualState x:Name="Normal"/>
             <VisualState x:Name="MouseOver"/>
             <VisualState x:Name="Pressed">
               <Storyboard>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedImage">
                   <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                       <Visibility>Visible</Visibility>
                     </DiscreteObjectKeyFrame.Value>
                   </DiscreteObjectKeyFrame>
                 </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalImage">
                   <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                       <Visibility>Collapsed</Visibility>
                     </DiscreteObjectKeyFrame.Value>
                   </DiscreteObjectKeyFrame>
                 </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedLightThemeImage">
                   <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                       <Visibility>Visible</Visibility>
                     </DiscreteObjectKeyFrame.Value>
                   </DiscreteObjectKeyFrame>
                 </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalLightThemeImage">
                   <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                       <Visibility>Collapsed</Visibility>
                     </DiscreteObjectKeyFrame.Value>
                   </DiscreteObjectKeyFrame>
                 </ObjectAnimationUsingKeyFrames>
               </Storyboard>
             </VisualState>
             <VisualState x:Name="Disabled"/>
           </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
         <StackPanel Visibility="{StaticResource PhoneDarkThemeVisibility}">
           <Image x:Name="NormalImage" Source="{TemplateBinding Image}"/>
           <Image x:Name="PressedImage" Source="{TemplateBinding PressedImage}" Visibility="Collapsed"/>
         </StackPanel>
         <StackPanel Visibility="{StaticResource PhoneLightThemeVisibility}">
           <Image x:Name="NormalLightThemeImage" Source="{TemplateBinding ImageLightTheme}"/>
           <Image x:Name="PressedLightThemeImage" Source="{TemplateBinding PressedImageLightTheme}" Visibility="Collapsed"/>
         </StackPanel>
       </Grid>
     </ControlTemplate>  

The magic are the two StackPanels and there visibility bound to the static resources PhoneDarkThemeVisibility and PhoneLightThemeVisibility which are part of the wp7 framework.

Hope that helps!

WP7 Shortcuts App Redesign

Last weekend I finished the redesign of my Shortcuts App. I'm happy that my poor design is gonne and that I can provide you now a real Windows Phone Look&Feel. Second good news is that I integrated webcams.travel api to search for webcams. Will be in Marketplace very soon!

Hope you will like it!

WP7 ShellTileSchedule, Secondary Tiles Update Problem

Already in one of my last posts I blogged about the ShellTileSchedule class. I love the simplicity of this class and still use it in my Shortcuts App you can get here. After a complete re-design of the App, I did a lot of testing and found an interesting bug.

My App did not refresh webcam images on phone, sms and mail live tiles.

I know the limitations of the ShellTileSchedule class and checked them again and again.

Limitation
Note that you can only provide a RemoteImageUri. Therefore you must provide an online and available URI that represents an image to download and display. You can’t reference URI from your local application. The image size can NOT exceed 80KB, and download time can NOT exceed 60 sec.

The bug must be somewhere else. Half a night later I found the problem in the link property of the tile to update. If the link has more than one parameter (like my phone, sms and mail tiles),  the update will not work. If there is non or only one parameter (like all my other functions) it works. So I changed the signature of the links and now everything is fine.

Old code

         var tile = new StandardTileData()
         {
           Title = "Demo"
         };
         var link = new Uri
           (string.Format(
             "/Phone.xaml?name={0}&number={1}", 
             nameTextBlock.Text, 
             numberTextBlock.Text)
             , UriKind.Relative);
         ShellTile.Create(link, tile);  

New code

         var tile = new StandardTileData()
         {
           Title = "Demo"
         };
         var link = new Uri
           (string.Format(
             "/Phone.xaml?name={0}%{1}", 
             nameTextBlock.Text, 
             numberTextBlock.Text)
             , UriKind.Relative);
         ShellTile.Create(link, tile);  

On the target form I changed the way to read the parameter to this

       if (this.NavigationContext.QueryString.Keys.Contains(Constants.NAME))
         _name = this.NavigationContext.QueryString[Constants.NAME];
       var x = _name.Split(new Char[] { '%' });
       _name = x[0];
       _number = x[1];  

Generic About Page for Windows Phone App

Now I have five Apps in the Marketplace. One thing every App needs is an About Page. If you give the customer an About Page it looks just more professional and the buttons to rate the App or navigate to your other Apps should give you as a developer an advantage.
Copy&Paste was my first approache. But we all now that's not a good one. A lot of work and a good chance to miss a customisatzion and wrong information or links are standing on the page.
To built a generic About Page is a much better idea. Here is what my page looks like.

Pretty simple, isn't it? And here is what the xaml code and the code behind looks like.

 <phone:PhoneApplicationPage 
   x:Class="AboutPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
   xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   FontFamily="{StaticResource PhoneFontFamilyNormal}"
   FontSize="{StaticResource PhoneFontSizeNormal}"
   Foreground="{StaticResource PhoneForegroundBrush}"
   SupportedOrientations="Portrait" Orientation="Portrait"
   mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
   shell:SystemTray.IsVisible="True">
 
   <!--LayoutRoot is the root grid where all page content is placed--> 
   <Grid x:Name="LayoutRoot" Background="Transparent">
     <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
  
     <!--TitlePanel contains the name of the application and page title-->
     <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
       <TextBlock x:Name="ApplicationTitle" Text="Demo" Style="{StaticResource PhoneTextNormalStyle}"/>
       <TextBlock x:Name="PageTitle" Text="{Binding Path=LocalizedResources.About, Source={StaticResource LocalizedStrings}}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
     </StackPanel>
  
     <!--ContentPanel - place additional content here-->
     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
       <StackPanel Orientation="Vertical">
         <TextBlock x:Name="appNameTextBlock" TextAlignment="Center" Text="Demo" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Foreground="{StaticResource PhoneAccentBrush}"/>
         <TextBlock x:Name="appAuthorTextBlock" TextAlignment="Center" Margin="0,0,0,20" Text="Demo" FontSize="{StaticResource PhoneFontSizeMediumLarge}"/>
         <TextBlock x:Name="appDescriptionTextBlock" Margin="0,0,0,30" TextWrapping="Wrap" Height="170" Text="{Binding Path=LocalizedResources.Description, Source={StaticResource LocalizedStrings}}" FontSize="{StaticResource PhoneFontSizeNormal}"/>
         <Button x:Name="buyButton" Click="buyButton_Click" Content="{Binding Path=LocalizedResources.BuyNow, Source={StaticResource LocalizedStrings}}" />
         <Button x:Name="rateButton" Click="rateButton_Click" Content="{Binding Path=LocalizedResources.RateNow, Source={StaticResource LocalizedStrings}}" />
         <Button x:Name="emailButton" Click="emailButton_Click" Content="{Binding Path=LocalizedResources.SendEmail, Source={StaticResource LocalizedStrings}}" />
         <Button x:Name="showAppsButton" Click="showAppsButton_Click" Content="{Binding Path=LocalizedResources.GetMoreApps, Source={StaticResource LocalizedStrings}}" />
  
       </StackPanel>
     </Grid>
   </Grid>
 </phone:PhoneApplicationPage>  

   public partial class AboutPage : PhoneApplicationPage
   {
     public AboutPage()
     {
       InitializeComponent();
  
       appNameTextBlock.Text = string.Format("{0} V{1}", ApplicationManifest.Title, ApplicationManifest.Version);
  
       appAuthorTextBlock.Text = ApplicationManifest.Publisher;
       // Use this if you do not have a translation in your rescources
       //appDescriptionTextBlock.Text = ApplicationManifest.Description;
       ApplicationTitle.Text = ApplicationManifest.Title;
       buyButton.IsEnabled = ApplicationLicense.IsTrial;
     }
  
     private void buyButton_Click(object sender, RoutedEventArgs e)
     {
       new MarketplaceDetailTask().Show();
     }
  
     private void rateButton_Click(object sender, RoutedEventArgs e)
     {
       new MarketplaceReviewTask().Show();
     }
  
     private void emailButton_Click(object sender, RoutedEventArgs e)
     {
       new EmailComposeTask()
       {
         To = "jctrachselatbluewin.com",
         Subject = "Question/comment to " + ApplicationManifest.Title,
       }.Show();
     }
  
     private void showAppsButton_Click(object sender, RoutedEventArgs e)
     {
       new MarketplaceSearchTask()
       {
         SearchTerms = "Jean-Claude Trachsel"
       }.Show();
     }
   }  

Because a lot of information is provided by the WMAppManifest.xml file anyway, we take it from there. Is this making sense? I hope so! To access the file I use the following class.

   public static class ApplicationManifest
   {
     private static Dictionary<string, string> _properties;
  
     private static Dictionary<string, string> Properties
     {
       get
       {
         if (null == _properties)
         {
           _properties = new Dictionary<string, string>();
           var appManifestXml = XDocument.Load("WMAppManifest.xml");
           using (var rdr = appManifestXml.CreateReader(ReaderOptions.None))
           {
             rdr.ReadToDescendant("App");
             if (!rdr.IsStartElement())
             {
               throw new System.FormatException("App tag not found in WMAppManifest.xml ");
             }
             rdr.MoveToFirstAttribute();
             while (rdr.MoveToNextAttribute())
             {
               _properties.Add(rdr.Name, rdr.Value);
             }
           }
         }
         return _properties;
       }
     }
  
     public static string Version
     {
       get { return Properties["Version"]; }
     }
  
     public static string ProductId
     {
       get { return Properties["ProductID"]; }
     }
  
     public static string Title
     {
       get { return Properties["Title"]; }
     }
  
     public static string TitleUc
     {
       get { return !string.IsNullOrEmpty(Title) ? Title.ToUpperInvariant() : null; }
     }
  
     public static string Genre
     {
       get { return Properties["Genre"]; }
     }
  
     public static string Description
     {
       get { return Properties["Description"]; }
     }
  
     public static string Publisher
     {
       get { return Properties["Publisher"]; }
     }
   }  

If you need localization like I do in all of my Apps, there is one more class needed to do the binding like you can see in the xaml code above. This class accesses a file named AppResources.resx.

   public class LocalizedStrings
   {
     private static AppResources localizedResources = new AppResources();
     public AppResources LocalizedResources { get { return localizedResources; } }
   }  

I hope this helps and fell free to use my About Page in your App.

Tile Tasks, the shortcut app for Windows Phone

Shortcuts are often very helpfull. Specially on a slow device like my iPhone 3GS, it would be very helpful to have some shortcuts to make a call, send a sms or toggle airplane mode on and off instead to tap thru all this menues. If I hopefully get my Nokia Lumia 900 soon, I do not want to miss this functionality again and I built Tile Tasks. The functionality today includes:
- Quick dial your friends phone number
- Send a sms with a default text
- Send an email with default subject and body
- Navigate to an internet address
- Add a Webcam to your tile
- Shortcut Airplane mode
- Shortcut WiFi
- Shortcut Bluetooth
- Shortcut Cellular

And here what it looks like to build a shortcut for a call, an email and a website link with a webcam image as tile background that will be updated every hour.

The generated tiles have frontside and backside information and gives the user quick access to many functionalities. The example tiles looks like this.

 
Like always in my posts, what about the technical stuff? Was there anything exciting? Plenty of them. One of the intersting and new stuff was to show the webcam image on the tile and update them periodicaly.


There are different options to do that. I've chosen the simplest and used the ShellTileSchedule class. My methode looks as simple as this:
 
private static void createTileSchedule(ShellTile tile, Uri link)

{
  var tileSchedule = new ShellTileSchedule(tile)
  {
    Recurrence = UpdateRecurrence.Interval,
    Interval = UpdateInterval.EveryHour,
    StartTime = DateTime.Now,
    RemoteImageUri = link
  };
  tileSchedule.Start();
}

The parameter tile is the tile where you like to add the webcam image as background. It can be the primary or a secondary tile. The link is the absolut address to a webcam image. Supported are jpg and png files, note that you can only provide a RemoteImageUri. Therefore you must provide an online and available URI that represents an image to download and display. You can’t reference URI from your local application. The image size can NOT exceed 80KB, and download time can NOT exceed 60 sec.

Is there anything else to deal with? Oh yes! The ShellTileSchedule class is very easy to use but has some big disadvantages. For me the most importants are:

1. You can’t get the status of the ShellTileSchedule. Even worse is the fact that the schedule might be stopped because for whatever reason (ex. phone is on Airplane Mode) and the tile background wount be refreshed.
2. You have to wait at least 1 hour before the tile is updated for the first time.

Here is an excelent article from Mark Monster that addresses this points. And here are some good informations from Microsoft about Tile Notifications (Chapter 3).

And after all, if you think you will like the app and it is helpfull for you, please get it here.

My first WP7 app, the shopping list

Beside the "big apps" like facebook, twitter or celsius, the application I use most on my iPhone is the shopping list. It's very helpfull not to write all the things on paper each time but just choose from a list of items I bought recently and add them with one finger movement. The list makes it very convenient to add my stuff and also remembers me of what to buy by looking at all the things from the last weeks. So this is defenitely the first app I need if I win a Nokia Lumia at the MSDN CH contest here.

There must be three elements in the app. The shopping list, the list with recent items and the posibility to add new stuff. A panorama app seems to be the perfect thing. With the panorama design I can quickly switch between the three screens.

A word and a blow. That's what the finished app looks like.

What else does the perfect shopping list need? It should tell you something about your list even if the app is closed. Cool that Windows Phone offers the live tile. This way I'm able to write the number of items to buy to the tile and on the back of the tile I write randomly changing the item names and quantity. So how does this look like? Here we go.

And what about the technical stuff? Was there anything exciting? Oh yes, the live tiles, the background agent task or building a drag&drop sortable list are very interessting tasks to do.

Everybody knows the sortable list from the iPhone. Seems to be a nice and simple control there, because it looks in every app the same and has the same functionality. I thought there must be a control like this in Mango. But there isn't. Thanx to Jason Ginchereau who gave as this missing control. Works very well and you can download it from his blog here.

Working with the tiles is the next tasks. Mango gives as a lot of power and working with the tiles is very easy. Writting the number of items to buy to the tile is as easy as this.

// Application Tile is always the first Tile, even if it is not pinned to Start.
var firstTile = ShellTile.ActiveTiles.First();

// Application Tile should always be found
if (firstTile != null)
{
// Set the properties to update for the Application Tile.
var newTileData = new StandardTileData
{
Count = number
};

// Update the Application Tile
firstTile.Update(newTileData);
}


Now let's take a look on how the background agents tasks write the items on the back of the tile. Read the details on how to use it here. First we need to register and start a periodic tasks. I start if the app is closing or deactivated.

// Obtain a reference to the period task, if one exists
var periodicTask = ScheduledActionService.Find(PeriodicTaskName.SHOPPING_LIST_AGENT) as PeriodicTask;

// If the task already exists and background agents are enabled for the application,
// you must remove the task and then add it again to update the schedule
if (periodicTask != null)
{
ScheduledActionService.Remove(PeriodicTaskName.SHOPPING_LIST_AGENT);
}
periodicTask = new PeriodicTask(PeriodicTaskName.SHOPPING_LIST_AGENT);

// The description is required for periodic agents. This is the string that the user
// will see in the background services settings page on the device.
periodicTask.Description = "This periodic task shows random items from your Shopping List in the tile background title.";

// Place the call to Add in a try block in case the user has disabled agents
try
{
ScheduledActionService.Add(periodicTask);

#if(DEBUG_AGENT)
ScheduledActionService.LaunchForTest(PeriodicTaskName.SHOPPING_LIST_AGENT, TimeSpan.FromSeconds(10));
#endif
}
catch (InvalidOperationException exception)
{
if (exception.Message.Contains("BNS Error: The action is disabled"))
{
ToastNotifications.Show("Background agents:", "Disabled by the user.");
}
}

And last but not least we need the agent who is doing the job. Implement this class in a seperate project and make sure to fullfill this requirements to pass the certification. In a very simple form this class looks like that.

public class ScheduledAgent : ScheduledTaskAgent
{

protected override void OnInvoke(ScheduledTask task)
{
#if DEBUG_AGENT
ScheduledActionService.LaunchForTest(task.Name, TimeSpan.FromSeconds(10));
#endif
// Do work
TileNotifications.UpdateTile();

// Call NotifyComplete to let the system know the agent is done working.
NotifyComplete();
}
}


By adding a reference to this project Visual Studio also adds an entry to the WMAppManifest. That's it. Our shopping list app is finished.


And what else did I learned? If I build a WP7 app I need almost more time to do all the design stuff then programming. Nice icons, a cool background image and a well designed app is as important as the functionality itself. To make the user choose your app from marketplace where 100`000 of other apps are available, you need to have a good design.
Next thing that will help to sell your app is offering a trial version. To write good keywords in app hub is also a part of the success (and delimit them with a semicolon). An AboutPage is also a good plan. More about this in the next post.


And after all, if you think you will love the app like I do and it is helpfull for you (or your wife ;-) please get it here.

My first Windows Phone 7 Game

As I wrote in my last post my first windows phone app was a game called Simon aka Saimon or here in Switzerland better known as Senso. It's a classic brain game from the 80ies and everybody in my age will know the old version from MB I guess.

The goal of the game is to repeat the color sequences as long as you can. You will start with one color and with every right reputation one additional color will be added.

And this is what the game looks like.

To make the game more interesting I added different color schemas. You got the classic design in a nice Windows Phone Metro Style look, a dark and a bright color schema which are harder to play.
To make the game more addicting and more fun to play I added a statistic and you and your friends can set up a competition.

And now we take a look at the programming. Was there anything exciting? At the begining everything was straight forward. Take four buttons, setup some storyboards, ...
Then I wanted to add four sounds for the button clicks. In a Silverlight App for WP7 there is the media tag for a background sound. After a short google session it was clear not to use the media tag. It's not right thing for my needs, playing different sounds in a short sequence.
What I need is the SoundEffect class from the Microsoft.Xna.Framework.Audio. To make this sounds work you also need the FrameworkDispatcher class.
So first thing to do is to add a reference to the Microsoft.Xna.Framework.dll. Then you got access to all the classes you need. For the rest take a look at the Sound Sample.


After all, if you think you like the game get it here. Or if you not sure yet, wait for the trail version that is already submitted to Microsoft.

How to start with Windows Phone Development

Before I actualy start let me tell you one thing: I can't realy write something new. Everything about windows phone development is already out there. But lets start the story three weeks ago.

Three weeks ago I wanted to do something new. At this time I read from @techpreacher on Twitter that Microsoft Switzerland started a contest where you can win a Nokia Lumia, the new Windows Phone from Nokia. Read more about it here.
That was good motivation for me and Windows Phone or short WP7 development was the thing to do. It was a good idea to get some more knowledge in this area specially because the Windows 8 Metro Style App developement is pretty close to WP7 development. This I learned at a MSUGS event where Maik Schärer talked about it. So this will also be a good investment for the future.

The idee for the first app was to build the cool Senso game from the 80ies which I already did ten years ago for the hp and compaq pda's everybody in my age will surely remeber. So let's start.

I already had a WindowsLive account, Visual Studio 2010 installed and some Silverlight knowlage. I asked Google what to do next. I need the Windows Phone SDK 7.1. Version 7.1 to build Windows Phone 7.5 (Mango) apps? Yes that's right :-) Get it from here. If you installed the SDK you got everything you need to develop a WP7 app and test it on the emulator. You don't evan need a windows phone.
Another must have tool ist the Silverlight for Windows Phone Toolkit which provides a lot of useful additional controls.
 
Now the technical part begins. Start Visual Studio, choose the right templete for your app, etc. It makes no sense if I write anything about the dev part in this blog. Everything on how to start you will find here, start under education. Another great resource is MSDN. And already in the first view hours I had a lot of specific questions, problems and no answers. All the answers I found on the great WindowsPhoneGeek site. Give it a try!
 
If you wanna make your App available to others, you need an account on AppHub. The registration is straight forward but will cost you a few bucks. The only strange thing was the exchange rate. $ 99.- in the US and CHF 129.- in Switzerland. C'mon Microsoft, what's wrong with you guys!? Anyway, pay and they do a real good job for you by selling your App to the whole world. I think it's a faire deal.
 
To get your App certified you have to fullfill a lot of requirements. It's a good idea to read this section on MSDN. It gives you a good understanding on what are the dos and don'ts so that your App will be available on the whole world soon.
 
Last thing I learned, give them a trial version of your App. The statistic sais, you will sell 70% more this way.
 
So now have fun developing wp7 apps and games!
 
Ohh, one last thing, buy my Apps on the Microsoft Marketplace and follow me on twitter for more great hints ;-)
 

Web Application Performance Tuning

In my actual project I have to do the performance tuning of a Microsoft Dynamics CRM System. From a technical viewpoint this is just an ASP.NET WebForms and WCF Services application. Therefore I was looking for some tools to monitor and analyse a web application. The customer don't want to spend any money on a tool, therefore it has to be free, open source or at least under $100.-. Here is a list of what I have found and what I use now.

IE Developer Toolbar
Used to analyse the HTML that is rendered in the browser. Very usefull to fix design bugs.

Fiddler2
Used to analyse what is sent and received over the wire. Analyse traffic, header information, etc.

DynaTrace Ajax Edition
Used to analyse what's going on on the client. Used to analyse CPU and memory usage, JavaScript, etc.

IntroScope
Used to analyse what happens on the server. Used to analyse CPU and memory usage, code, queries to the db, etc.

Not used yet
- HttpWatch
- NetMon
- Windows Performance Monitor
- Windows Resource Monitor
- Visual Round Trip Analyser
- Performance Toolkit for Microsoft Dynamics CRM 2011

Any further recommendations are very welcome. Write your comment!

jQuery Mobile 1.0 RC1 released

The future is mobile.

At the Microsoft conference Build last month, ASP.NET MVC 4 was announced and with it the jQuery Mobile Framework. Since a few days jQuery Mobile 1.0 RC1 is released. But what is jQuery Mobile?

There Website tells us:
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

So let's see what it does and how it can be used. I build a small demo web application with ASP.NET MVC 4. Based on the AdventureWorks database and the vendor table I got a form that looks in the Windows Phone emulator like that.

Looks not too bad but not really phone like. Via NuGet I install jQuery.Mobile.MVC which is based on jQuery.Mobile. After the installation I already have a new design because of the new MasterPage that was installed with the package. The site looks like:

Much better already. But where does this changes come from? If we take a look at the new mobile MasterPage we'll find the following code: 

In this code snippet we see two new attributes (data-role and data-theme) which belong to jQuery Mobile and they are the reason for the new formatting.

If we like to format the Create New link on top of the side, so it will be a touchable button instead of the normal link, it's that simple. Just add the attribute data-role="button" and if you also like an image next to it data-icon="plus". After that small change it looks like:

Pretty easy, isn't it. There are a lot more functionality and design stuff in jQuery Mobile. Check out there website and attend my session at TechDays in Bern.

ASP.NET MVC 4 Developer Preview Released

At the Build conference Microsoft has announced the availability of ASP.NET MVC 4 Developer Preview. The following are the some of the new features of ASP.NET MVC 4 Developer Preview.
◦Enhancements to Default Project Templates
◦Mobile Project Template
◦Display Modes
◦jQuery Mobile, the View Switcher, and Browser Overriding
◦Recipes for Code Generation in Visual Studio
◦Task Support for Asynchronous Controllers

For more information join my talk on Oktober 21, 2011 at TechDays in Bern. Hope to see you there!

Windows 8, WinRT, .NET 4.5 and more

Last week at the Build conference in Anaheim CA lots of new announcements have been made. The big things were Windows 8, Metro Style Apps and WinRT. But also .NET 4.5, ASP.NET MVC 4 and other new stuff came up.

Sadly I had to stay at home and did not get all the information from the remarkable experts who were speaking at Build (and did not get the cool tablet). But after I read a lot of Blogs and talked to a lot of friends (some have been there) I will write in this post what the most important news is to me.

Windows 8 has two modes. The Desktop mode addressing the business needs using keyboard and mouse (this is where all our Win7 Apps are running in the future) and the new Metro style mode addressing the lifestyle needs with touch etc.
Therefore there are also two development stacks. The big picture is shown below.



On the right side there is the Desktop mode stack in blue with .NET 4.5, C# ?, Silverlight 5, WPF ?, HTML 5, etc. Pretty much the same as we’re having today.
On the left side in green there is the new Metro style mode stack with WinRT, C# 5, XAML, HTML 5 etc. that brings the big news.

WinRT
Also WinRT is not completely new. WinRT covers a great part of the Win32 functionality and many of the .NET 4.5 libraries are also (unmanaged) WinRT libraries. But stuff like WinForms etc. will definitely not be part of WinRT and can be found just in the Desktop App part where the full .NET 4.5 framework is located.
A thin managed layer gives the developer the C# programming API. With C++ this layer is not needed what could be an advantages for some critical scenarios. JavaScript uses the Chakra Engine to access WinRT.
Fast and fluid is what we heard a lot when someone talks about Metro style apps. There is a good chance that the WinRT APIs are mostly asynchronous. The C# 5 features will help as to handle this approach.

Portability
HTML/JavaScript Metro style apps are not typical web programming and are not cross platform. Furthermore they will be build specially for Windows 8 using the WinRT APIs.
XAML/C# Metro style apps are neither Silverlight nor WPF. They are something new using the WinRT APIs. Silverlight and WPF Apps are still present on the Desktop App side.

Business thoughts
Pretty cool all this new possibilities (Metro style apps) and all the old ones (Desktop apps) are also still working (even WinForms). Pretty cool that I can use all my existing knowlege to build the app of the future by only learning a few new things (WinRT).
As a developer employed by a software vendor working on one product I'm probably really happy. I can choose the technology I'm familiar with and addresses my needs best.
Being a .NET consultant at Trivadis it's not just fun because my boss expects me to do whatever my next customer prefers and therefore I do have to know just everything. And what about a service and maintenance team if every app comes in another technology?
Am I completely wrong by thinking the wide range of technologies ends up in superficial knowledge and in a next step in bad quality? Probably it would have been a good idea to make the world a little bit easier!