How to Make a Microsoft Tag Application for Windows Phone 7

In this tutorial I will demonstrate the generation of Microsoft Tag in action using Windows Phone 7. Microsoft Tag is an implementation of HCCB using 4 colors in a 5 x 10 grid. Microsoft Tag application gives consumers an ability to use a phone’s on-board camera to take a picture of a tag, and be directed to information in any form, such as text, vCard, URL etc. In this tutorial I will create an URL Tag (URITag). Basically, I will add a reference to MS Tag web service and use some of its web-methods to create a tag, category for a tag and a barcode for that tag. After the tag is created you can do whatever you like with that, for example, send via email to your friends or copy to your website.

Additional Information

• Official Microsoft Tag Website
• High Capacity Color Barcode (HCCB)
• Microsoft Tag Developer Center
• Microsoft Tag WebService Howto
• Request Microsoft Tag
• Plenty of information on Tag technology by Luna Development

Source code

• Windows Phone 7 Microsoft Tag Demo (.zip)

Here you can see the result of our lesson. I have generated a tag for my website.

Here is a video to demonstrate the result:

Step 1: Signing up for a Microsoft Tag

First of all you need to understand what exactly is Microsoft Tag and how it could be used to satisfy your needs. You can find all the needed information on websites in “Additional Information” block (above) in this lesson. After that you need to sign up for Microsoft Tag using your LiveID. After signing up you will be redirected to your personal Microsoft Tag page (image bellow). There will not be any categories or tags added yet, but you can try to create them manually.

Step 2: Microsoft Tag Access Token

Next step is to get Microsoft Tag Access Token to access Tag web-service. That can be achieved using that link: http://tag.microsoft.com/ws/accessrequest.aspx. After filling the form you will, probably, receive your token by email. In email you will also have a link to Microsoft Tag Web-service Howto page. Now we are ready to begin developing our first MS Tag application.

Step 3: Creating new project

Now you need to create a new project. To do so open Visual Studio 2010 -> File -> New Project -> select Windows Phone Application there as it is shown on picture bellow.

Step 4: Adding Web Service reference

Now you should add a reference to Microsoft Tag web service (right click your project -> Add Service Reference). Following dialog will appear (image bellow). Enter URL to web-service wsdl there: https://ws.tag.microsoft.com/MIBPService.wsdl. Then push “Go” button and after that push “OK” button to close the dialog.

Step 5: Creating UI

Next I have modified MainPage XAML by adding some UI elements, like textboxes: for category, for tag name and for URI. I have also added a checkbox defining if there category is new or not.

<phone:PhoneApplicationPage
    x:Class="ED_MicrosoftTagForWindowsPhone.MainPage"
    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:DesignWidth="480" d:DesignHeight="768"
    shell:SystemTray.IsVisible="True">
 
    <!--LayoutRoot contains the root grid where all other 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="24,24,0,12">
            <TextBlock x:Name="ApplicationTitle" Text="EUGENEDOTNET.COM" Style="{StaticResource PhoneTextNormalStyle}" Margin="0, 0, 0, 0"/>
            <TextBlock x:Name="PageTitle" Text="Microsoft Tag" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
 
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <TextBlock Height="32" HorizontalAlignment="Left" Margin="20,54,0,0" Name="textblockCategory" Text="Category:*" VerticalAlignment="Top" Width="136" />
            <TextBox HorizontalAlignment="Left" Margin="133,33,0,0" Name="textboxCategory" Text="" VerticalAlignment="Top" Width="215" />
            <TextBlock Height="32" HorizontalAlignment="Left" Margin="20,132,0,0" Name="textBlockURI" Text="URI:*" VerticalAlignment="Top" Width="136"/>
            <TextBox HorizontalAlignment="Left" Margin="133,111,0,0" Name="textBoxURI" Text="" VerticalAlignment="Top" Width="341" IsTabStop="True">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName  NameValue="Url" />
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <Button Content="Generate Tag" Height="70" HorizontalAlignment="Right" Margin="0,260,6,0" Name="btnGenerate" VerticalAlignment="Top" Width="341" Click="btnGenerate_Click" TabIndex="2147483647" IsTabStop="False" />
            <Image Height="225" HorizontalAlignment="Left" Margin="176,338,0,0" Name="imageTag" Stretch="Fill" VerticalAlignment="Top" Width="225" />
            <TextBlock Height="32" HorizontalAlignment="Left" Margin="20,210,0,0" Name="textBlockTagName" Text="Tag Name:*" VerticalAlignment="Top" Width="136" />
            <TextBox HorizontalAlignment="Left" Margin="133,189,0,0" Name="textBoxTagName" Text="" VerticalAlignment="Top" Width="341" TabIndex="2147483647" />
            <TextBlock Height="32" HorizontalAlignment="Left" Margin="20,338,0,0" Name="textBlockBarcode" Text="Tag:" VerticalAlignment="Top" Width="136" />
            <CheckBox Content="New"  HorizontalAlignment="Left" Margin="354,30,0,0" Name="cbIsNew" VerticalAlignment="Top" Width="120" MinWidth="120" />
        </Grid>
    </Grid>
 
</phone:PhoneApplicationPage>

Step 6: Developing functionality

Finally, I have written code to implement Tag functionality and event handling. I will not describe the whole code. I will simply explain the most important methods and properties in my application. First important property is TagClient that creates an instance of Microsoft Tag Webservice client and subscribe to some events, because most of web-service methods are asynchronous.

private MIBPContractClient _client;
public MIBPContractClient TagClient
{
   get
   {
      if (_client == null)
      {
         _client = new MIBPContractClient();
         _client.CreateCategoryCompleted += (sender, e) => { CreateMSTag();  };
         _client.CreateTagCompleted += (sender, e) => { GetMSTagBarcode(); };
         _client.GetBarcodeCompleted += (sender, e) => { RenderBarcode(e.Result); };
      }
      return _client;
   }
}

Another property to get user credentials for using web-service:

public UserCredential TagCredential
{
   get
   {
      return new UserCredential() { AccessToken = TagAccessToken };
   }
}

Do not forget to enter your access token inside TagAccessToken property:

public string TagAccessToken
{
   get
   {
      return "<enter your token here>";
   }
}

To create a new Microsoft Tag category I have a method described bellow. Pay attention to StartDate and EndDate of category.

private void CreateCategory()
{
   try
   {
      // no need to check existence
      Category oCat = new Category();
      oCat.Name = TagCategoryName;
      oCat.UTCStartDate = DateTime.Now;
      oCat.UTCEndDate = new DateTime(2012, 01, 01);
      TagClient.CreateCategoryAsync(TagCredential, oCat);
   }
   catch
   {
      throw;
   }
}

Here is a method for creating new URITag. It has nothing special inside. Also pay attention to StartDate and EndDate. Perhaps in future you would like to insert some additional functionality to make it possible to enter those dates also in UI.

private URITag CreateURITag(string uri)
{
   URITag uriTag = new URITag();
   uriTag.MedFiUrl = uri;
   uriTag.Title = TagName;
   uriTag.UTCStartDate = DateTime.Now;
   uriTag.UTCEndDate = new DateTime(2012, 01, 01);
   return uriTag;
}

CreateMSTag method simply calls CreateTagAsync method of webservice client instance:

TagClient.CreateTagAsync(TagCredential, TagCategoryName, CreateURITag(TagURI));

And, finally, I have created two methods for receiving and rendering tags. First method bellow gets a tag/barcode (as byte array) from web-service according to category name, tag name, credentials and the second method, simply, renders byte array to an Image element of UI.

private void GetMSTagBarcode()
{
   try
   {
      TagClient.GetBarcodeAsync(TagCredential, TagCategoryName, TagName,
         ImageTypes.png, 3, DecorationType.HCCBRP_DECORATION_NONE, false);
   }
   catch
   {
      throw;
   }
}
 
private void RenderBarcode(byte[] result)
{
   if (result != null)
   {
      Stream _s = new MemoryStream(result);
      _s.Position = 0;
      BitmapImage _img = new BitmapImage();
      _img.SetSource(_s);
      imageTag.Source = _img;
   }
   btnGenerate.IsEnabled = true;
}