Category Archives: Mango

Windows Live SDK for Windows Phone: Calendaring #1

Windows Phone 7.5 codenamed Mango brought with it lots of new features.

One of the remarkable features is the “ Calendar & ToDos”.

On september 27th, 2011, published a very detailed post about Mango’s new features.

Here is the video previewing what you can do with the calendar:

“ Tasks are back!! Not only do Exchange tasks now sync with the “To-Do’s” tab with-in the Calendar, but now Windows Live Hotmail To-Do’s sync there as well. Windows Live’s To-Do’s list never used to sync with anything. It seems strange to call them “Todos” since Outlook calls them tasks, but whatever… at least you can see, edit, and manage the things you have to do at work and in your personal life. Most other smartphones still don’t sync Exchange tasks, and it’s great to see this feature back in Windows Phone… and in full force with Windows Live Hotmail.”

However, not everything related to a consumer’s Live profile is available on the phone natively. So Microsoft released a new Windows Live SDK which allows access to Calendars, Contacts, Documents, and more.

In previous posts, we discussed how to use Skydrive in Windows Phone applications.

This time , we will see how to use the calendar.

As mentioned in MSDN, “ The Calendar object contains info about a user’s Hotmail calendar. The Live Connect REST API supports creating, reading, updating, and deleting calendars. Use the wl.calendars scope to read a user’s Calendar objects. Use the wl.calendars_update scope to create Calendar objects for a user. Use the wl.contacts_calendars scope to read a user’s friends’ Calendar objects.”

So before digging deeper in the code and in the case you did not install the necessary tools, here is what you need:

In the next post, we will learn how to read the calendar.

Stay Tuned Sourire


Using Skydrive in your Windows Phone applications: part2

This is part two on how to use Skydrive in your Windows Phone applications.  Part one was an introduction to how to sign in into Skydrive.

In this part, let’s try to read the Skydrive’s folders.

I will use the ApplicationBarIconButton to read from my Skydrive then put the result in a very simple list in another page.

So first, let’s create a new Windows Phone page , I’ll call it “ content.xaml”.

I’ll change the Application title to “ Skydrive” and the page title to “ Folders”. I will also add a listbox.

 2:         <!--TitlePanel contains the name of the application and page title-->
 3:         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
 4:             <TextBlock x:Name="ApplicationTitle" Text="Skydrive" Style="{StaticResource PhoneTextNormalStyle}"/>
 5:             <TextBlock x:Name="PageTitle" Text="Folders" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
 6:         </StackPanel>
 8:         <!--ContentPanel - place additional content here-->
 9:         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 10:             <ListBox Name="list">
 11:                 <ListBox.ItemTemplate>
 12:                     <DataTemplate>
 13:                         <StackPanel Orientation="Horizontal">
 14:                             <TextBlock Name="folder" Text="{Binding Name}"/>
 15:                         </StackPanel>
 16:                     </DataTemplate>
 17:                 </ListBox.ItemTemplate>
 19:             </ListBox>
 20:         </Grid>

Now we need to fill that listBox.

In the MainPage.xaml, let’s add an ApplicationBarIconButton ( it is already there as a commented code):

 1: <phone:PhoneApplicationPage.ApplicationBar>
 2:        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
 3:            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Read " Click="ApplicationBarIconButton_Click" />
 4:        </shell:ApplicationBar>
 5:    </phone:PhoneApplicationPage.ApplicationBar>
 6: /phone:PhoneApplicationPage>

When you click on the button , you should be able to get your content from Skydrive if you are signed in and see it on that listbox we put in “content.xaml”

 1: private void ApplicationBarIconButton_Click(object sender, EventArgs e)
 2:        {
 3:            if (session == null)
 4:            {
 5:                infoTextBlock.Text = "You must sign in first.";
 6:            }
 7:            else
 8:            {
 9:                LiveConnectClient client = new LiveConnectClient(session);
 10:                client.GetCompleted +=
 11:                    new EventHandler<LiveOperationCompletedEventArgs>(getFolderProperties_Completed);
 12:                client.GetAsync("/me/skydrive/files");
 13:            }
 15:        }
 17:        void getFolderProperties_Completed(object sender, LiveOperationCompletedEventArgs e)
 18:        {
 19:            if (e.Error == null)
 20:            {
 21:                List<object> data = (List<object>)e.Result["data"];
 22:                foreach (IDictionary<string, object> content in data)
 23:                {
 24:                    SkyDriveContent skyContent = new SkyDriveContent();
 25:                    skyContent.Name = (string)content["name"];
 26:                    ContentList.Add(skyContent);
 27:                }
 28:                this.NavigationService.Navigate(new Uri("/content.xaml", UriKind.Relative));
 29:            }
 30:            else
 31:            {
 32:                infoTextBlock.Text = "Error calling API: " + e.Error.Message;
 33:            }
 35:        }

The result is stored in a “ SkydriveContent “ list :

 1: public static List<SkyDriveContent> ContentList = new List<SkyDriveContent>();


 1: public class SkyDriveContent
 2:    {   public string Name { get; set; }
 3:        public string Description { get; set; }
 4:    }

In the Content.xaml.cs , we will tell the listbox to get its items from the ContentList:

 1: public content()
 2:        {
 3:            InitializeComponent();
 4:            list.ItemsSource = MainPage.ContentList;
 5:        }

That is all you need to be able to read your Skydrive folders in your Windows Phone application.

There is also an interesting and helpful post in Silverlight Show by Samidip Basu about the usage of Skydrive with Windows Phone.

Using SkyDrive in your Windows Phone applications: part 1


In case you don’t know what is Skydrive, on Wikipedia you will find that “ Windows Live SkyDrive, initially called Windows Live Folders, is a free-of-charge file hosting service that allows users to upload files to a cloud storage and then access them from a Web browser.”

that was true before the BUILD. Now, Microsoft released an SDK that enables us to write  third party applications running on Windows 7, Windows Developer Preview and Windows Phone, that interact with the whole Live services, SkyDrive among them in different languages : JavaScript, C# and REST.

It also released its official Skydrive application for both Windows Phone and iOS.

Get Ready

First of all you have to download ans install the Live SDK v5.0 . You would probably need to use the Live Interactive SDK to explore the APIs and learn how to use them.

The Live Connect should recognize your application, that’s why you should go to Live Connect App Management site and create a new app.


You will get a Client ID and Client Secret that you will be using later with your application.


Demo : Sign In

Let’s see how it works now:

Create a Windows Phone Application and make sure to add the following references:


You should also add the SignIn Button to your toolbox :


In the main page, the user should sign in :


 1: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
 2:             <TextBlock Height="55" HorizontalAlignment="Left" Margin="54,113,0,0"
 3:                        Name="textBlock1" Text="Please sign in to access your Skydrive"
 4:                        VerticalAlignment="Top" Width="336" />
 5:             <my:SignInButton Content="Button" ClientId="Your_Client_ID"
 6:                              Scopes="wl.signin wl.basic " Branding="Windows" SessionChanged="signInButton1_SessionChanged"
 7:                              Height="72" HorizontalAlignment="Left" Margin="138,268,0,0"
 8:                              Name="signInButton1" VerticalAlignment="Top" Width="160" />
 9:             <TextBlock Height="32" HorizontalAlignment="Left" Margin="12,372,0,0" Name="infoTextBlock" Text=""
 10:                        VerticalAlignment="Top" Width="419" />
 12:         </Grid>

In the MainPage.xaml, I added a SingInButton control, You should put your own Client ID. I only used wl.signin and wl.basic scopes at this point.

wl.basic : Allows access to a user’s basic info, such as his or her Hotmail contact list.

wl.signin : Allows user’s log in .

The “infoTextBlock “ will indicate either the user is signed in or not. That will be handled in the C# code.

 1: private void signInButton1_SessionChanged(object sender, Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
 2:         {
 3:             if (e.Status == LiveConnectSessionStatus.Connected)
 4:             {
 5:                 session = e.Session;
 6:                 client = new LiveConnectClient(session);
 7:                 infoTextBlock.Text = "Signed in.";
 8:             }
 9:             else
 10:             {
 11:                 infoTextBlock.Text = "Not signed in.";
 12:                 client = null;
 13:             }
 15:         }

Run the application , hit the sign in button and you should get this screen:

sign in


In this first part, we grabbed the tools and SDK needed in order to use Skydrive in our Windows Phone applications.

Then we learnt how to sign in into Skydrive storage without writing any code.

In part two, we will learn how to read/insert files into Skydrive. Stay Tuned Sourire

Mango Baby Steps : Unit Testing your app

Making apps is good , making apps that work perfectly is better Winking smile 

In order to make sure that your app works fine you may want to test your code .

So let’s take a walk through Mango Unit Testing Framework.

First thing you need to know is that we are using Silverlight Unit Test Framework by Jeff Wilcox who recently updated the Silverlight Unit Test framework Binaries to be compatible with Mango.

You can grab the new assemblies from here.

Next you should have something to test …right ? Smile with tongue out 

Nothing complicated, we will work with the famous “ Hello Mango” sample.

In Visual Studio : File—> New project –> Silverlight for Windows Phone

Choose Windows Phone application and name it “ Hello Mango” . Since we are working with Mango, don’t forget to choose the Windows Phone 7.1 version Winking smile 

new project



We will change the application title to “ Hello Mango” , the page title to “ Unit Test” and we will add a textblock containing “ Hello Mango” :

Code Snippet
  1. <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
  2.             <TextBlock x:Name="ApplicationTitle" Text="Hello Mango" Style="{StaticResource PhoneTextNormalStyle}"/>
  3.             <TextBlock x:Name="PageTitle" Text="Unit Test" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  4.         </StackPanel>
  6.         <!–ContentPanel – place additional content here–>
  7.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  8.             <TextBlock Height="146" HorizontalAlignment="Left" Margin="92,137,0,0" x:Name="txt" x:FieldModifier="public" Text="Hello Mango" VerticalAlignment="Top" Width="277" />
  9.         </Grid>


Now that you have your sample app ready , run it to make sure that everything is fine and then we will move to the test project.

the test project is also a Windows phone application called “ HelloMangoTest”




We need to convert the windows phone application to a Unit Test project:

Download the assemblies as describe it below , unzip the file and make sure they are unlocked so you can use them on your local machine.

Add the two assemblies to the “ HelloMangoTest” project :




You have also to delete the MainPage.xaml  because Silverlight Unit Test Framework has a TestPage.



One more thing to do :

In the App.xaml.cs, add

Code Snippet
  1. this.RootVisual = UnitTestSystem.CreateTestPage();

  , you will have this code:

Code Snippet
  1. public App()
  2.         {
  4.             UnhandledException += Application_UnhandledException;
  5.             InitializeComponent();
  6.             this.RootVisual = UnitTestSystem.CreateTestPage();


Set the test project as a Startup Project and now you are ready to write the tests.

add a new class and name it “ test” :



In this test we want to make sure that when the MainPage is initialized , there is indeed  a textBlock ( we called it “ txt” ) . Here is the code :

Code Snippet
  1. using Microsoft.Silverlight.Testing;
  2. using Microsoft.VisualStudio.TestTools.UnitTesting;
  3. using HelloMango;
  6. namespace HelloMangoTest
  7. {
  8.     [TestClass]
  9.     public class test
  10.     {
  11.         [TestMethod]
  12.         public void pass()
  13.         {
  14.             MainPage page = new MainPage();
  15.             Assert.IsTrue(page.txt != null);
  16.         }
  19.     }
  20. }


When you run the project, you will get this first screen :

first screen

And I have no idea what this screen is Smile with tongue out   I need to ask Jeff Wilcox about it.

Surprisingly it’s not working Confused smile So I did a small search and found out that I shouldn’t delete the MainPage and change the Rootvisual in the App.xaml.cs.

Instead I put this code in my MainPage.xaml.cs in the test project :

Code Snippet
  2. using Microsoft.Silverlight.Testing;
  4. namespace HelloMangoTest1
  5. {
  6.     public partial class MainPage : PhoneApplicationPage
  7.     {
  9.         public MainPage()
  10.         {
  11.             InitializeComponent();
  12.             const bool runUnitTests = true;
  13.             if (runUnitTests)
  14.             {
  15.                 Content = UnitTestSystem.CreateTestPage();
  16.                 IMobileTestPage imtp = Content as IMobileTestPage;
  17.                 if (imtp != null) { BackKeyPress += (x, xe) => xe.Cancel = imtp.NavigateBack(); }
  18.             }
  19.         }
  20.     }
  21. }


If the Boolean is true, the unit test become the content of the Mainpage.

Let’s run again …Wohoo! It’s working not only on the emulator but also  on a real device :


The list of Test classes under your project will be shown in first page. You can go into each class to see all test methods by clicking on the name of class.

In our case you will see Test and pass. Click on the method’s name ( pass) and you will get the test information , the result is “ passed”.

That was an introduction of how to use Silverlight Unit Test Framework with Mango Smile

Mango- Baby Steps: Creating an application with a local Database

Mango- Baby Steps are a series of posts to learn about Windows Phone 7.1. This is the third post and i hope post one and two were useful for you 🙂

I was working lately on a new app , ToDo list ( i know , nothing innovative here -_- ) but then I dropped the work till Mango is out,for the very good reason that with Mango I can have a local Database to store and manage my application’s structured data ! Clap ! Clap!

One of the new many features coming with the Windows Phone Codenamed Mango is the possibility of having local databases- Microsoft SQL Server Compact edition databases(SQL CE)- for your applications.

The database resides in the application’s isolated storageas a file.

In case you are not familiar with the isolated storage,I highly recommend you to read the ” All about WP7 Isolated Storage” articles on the ” WindowsPhone Geek” website.

In order to store and retrieve data in the local database, your Windows Phone application has to use LINQ to SQL.

LINQ to SQL provides an object-oriented approach to working with data and comprises an object model and a runtime.The LINQ to SQL object model is made up primarily by the System.Data.Linq.DataContext object, which acts as a proxy for the local database. The LINQ to SQL runtime is responsible for bridging the world of objects (the DataContext object) with the world of data (the local database). This relationship is summarized in the following image.” MSDN

One more thing to explain is the Data Context . Data Context is the object model that represents the database, each object is a set of entities using the ” plain old CLR object ” (POCO) with attributes.

  • Building the application

My ToDo application looks like this :

As you can see, my main page is a panorama containing :

* Hot list item : where you can find the tasks to be done soon

* Lists: tasks will be sorted , tasks related to work, family, etc…

The other page is a simple Windows Phone page that allows you to add a new task.

In this post we will be working with this user interface.By now you should know how to create a new Windows Phone 7.1 application and how to add pages, so all I have to do is to show you the XAML code :

Code Snippet
  1. <Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0″>
  2.             <TextBlock Height=”50″ HorizontalAlignment=”Left” Margin=”10,25,0,0″ Name=”textBlock1″ Text=”Subject:” VerticalAlignment=”Top” Width=”117″ />
  3.             <TextBox Height=”66″ HorizontalAlignment=”Left” Margin=”105,9,0,0″ Name=”textBox1″ Text=”” VerticalAlignment=”Top” Width=”342″ />
  4.             <TextBlock Height=”43″ HorizontalAlignment=”Left” Margin=”10,97,0,0″ Name=”textBlock2″ Text=”Category:” VerticalAlignment=”Top” Width=”103″ />
  5.             <Canvas HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”345″ Height=”66″ Margin=”111,80,0,0″>
  6.                 <toolkit:ContextMenuService.ContextMenu>
  7.                     <toolkit:ContextMenu>
  8.                         <toolkit:MenuItem Header=”pin to start menu” Click=”MenuItem_Click” Tag=”START_MENU” />
  9.                         <toolkit:MenuItem Header=”delete” Click=”MenuItem_Click” Tag=”DELETE” />
  10.                         <toolkit:MenuItem Header=”share” Click=”MenuItem_Click” Tag=”SHARE” />
  11.                     </toolkit:ContextMenu>
  12.                 </toolkit:ContextMenuService.ContextMenu>
  13.                 <Rectangle Fill=”#FFF4F4F5″ Height=”47″ Stroke=”Black” Width=”319″ Canvas.Left=”6″ Canvas.Top=”6″ />
  14.                 <TextBlock Name=”cat” TextWrapping=”Wrap” Text=” “ Foreground=”Black” Canvas.Left=”71″ Canvas.Top=”27″/>
  15.             </Canvas>
  16.             <TextBlock Height=”50″ HorizontalAlignment=”Left” Margin=”10,179,0,0″ Name=”textBlock3″ Text=”Priority:” VerticalAlignment=”Top” Width=”95″ />
  17.             <RadioButton Content=”Low” Height=”76″ HorizontalAlignment=”Left” Margin=”140,156,0,0″ Name=”radioButton1″ VerticalAlignment=”Top” Width=”134″ />
  18.             <RadioButton Content=”High” Height=”73″ HorizontalAlignment=”Right” Margin=”0,156,33,0″ Name=”radioButton2″ VerticalAlignment=”Top” Width=”126″ />
  19.             <toolkit:DatePicker Header=”Start date:” Margin=”0,234,0,270″ />
  20.             <toolkit:DatePicker Header=”Due date:” Margin=”0,331,0,180″ />
  21.             <CheckBox Content=”Completed” Height=”76″ HorizontalAlignment=”Left” Margin=”6,411,0,0″ Name=”checkBox1″ VerticalAlignment=”Top” Width=”190″ />
  22.             <toolkit:DatePicker Header=”Date completed:” Margin=”2,493,9,21″ />
  23.         </Grid>

Now that the user interface is ready, we will build the Data Context.

First thing to do is to add the reference System.Data.Linq to be able to work with LINQ to SQL.

Then add a new class, I’ll call it task .

Code Snippet
  1. [Table]
  2.     public class task : INotifyPropertyChanged, INotifyPropertyChanging
  3.     {
  4.         private string _subject;
  5.         [Column(IsPrimaryKey = true, IsDbGenerated = true, DbType = “INT NOT NULL Identity”, CanBeNull = false, AutoSync = AutoSync.OnInsert)]
  6.         public string Subject
  7.         {
  8.             get
  9.             {
  10.                 return _subject;
  11.             }
  12.             set
  13.             {
  14.                 if (_subject != value)
  15.                 {
  16.                     NotifyPropertyChanging(“Subject”);
  17.                     _subject = value;
  18.                     NotifyPropertyChanged(“Subject”);
  19.                 }
  20.             }
  21.         }
  22.         private string _category;
  23.         public string Category
  24.         {
  25.             get
  26.             {
  27.                 return _category;
  28.             }
  29.             set
  30.             {
  31.                 if (_category != value)
  32.                 {
  33.                     NotifyPropertyChanging(“Category”);
  34.                     _category = value;
  35.                     NotifyPropertyChanged(“Category”);
  36.                 }
  37.             }
  38.         }
  39.         private bool _completed;
  40.         [Column]
  41.         public bool Completed
  42.         {
  43.             get
  44.             {
  45.                 return _completed;
  46.             }
  47.             set
  48.             {
  49.                 if (_completed != value)
  50.                 {
  51.                     NotifyPropertyChanging(“Completed”);
  52.                     _completed = value;
  53.                     NotifyPropertyChanged(“Completed”);
  54.                 }
  55.             }
  56.         }
  57.         private bool _priority;
  58.         [Column]
  59.         public bool Priority
  60.         {
  61.             get
  62.             {
  63.                 return _priority;
  64.             }
  65.             set
  66.             {
  67.                 if (_priority != value)
  68.                 {
  69.                     NotifyPropertyChanging(“Priority”);
  70.                     _priority = value;
  71.                     NotifyPropertyChanged(“Priority”);
  72.                 }
  73.             }
  74.         }
  75.         private DateTime _startDate;
  76.         [Column]
  77.         public DateTime StartDate
  78.         {
  79.             get
  80.             {
  81.                 return _startDate;
  82.             }
  83.             set
  84.             {
  85.                 if (_startDate != value)
  86.                 {
  87.                     NotifyPropertyChanging(“StartDate”);
  88.                     _startDate = value;
  89.                     NotifyPropertyChanged(“StartDate”);
  90.                 }
  91.             }
  92.         }
  93.         private DateTime _dueDate;
  94.         [Column]
  95.         public DateTime DuetDate
  96.         {
  97.             get
  98.             {
  99.                 return _dueDate;
  100.             }
  101.             set
  102.             {
  103.                 if (_dueDate != value)
  104.                 {
  105.                     NotifyPropertyChanging(“DuetDate”);
  106.                     _dueDate = value;
  107.                     NotifyPropertyChanged(“DuetDate”);
  108.                 }
  109.             }
  110.         }
  111.         private DateTime _dateCompleted;
  112.         [Column]
  113.         public DateTime DateCompleted
  114.         {
  115.             get
  116.             {
  117.                 return _dateCompleted;
  118.             }
  119.             set
  120.             {
  121.                 if (_dateCompleted != value)
  122.                 {
  123.                     NotifyPropertyChanging(“DateCompleted”);
  124.                     _dateCompleted = value;
  125.                     NotifyPropertyChanged(“DateCompleted”);
  126.                 }
  127.             }
  128.         }
  129.         public event PropertyChangedEventHandler PropertyChanged;
  130.         private void NotifyPropertyChanged(string propertyName)
  131.         {
  132.             if (PropertyChanged != null)
  133.             {
  134.                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
  135.             }
  136.         }
  137.         public event PropertyChangingEventHandler PropertyChanging;
  138.         private void NotifyPropertyChanging(string propertyName)
  139.         {
  140.             if (PropertyChanging != null)
  141.             {
  142.                 PropertyChanging(this, new PropertyChangingEventArgs(propertyName));
  143.             }
  144.         }
  145.     }

Add another class called TaskDataContext that derives from DataContext:

Code Snippet
  1. namespace task
  2. {
  3.     public class TaskDataContext: DataContext
  4.     {
  5.         public TaskDataContext(string connectionString): base(connectionString)    {    }
  6.         public Table<task> tasks { get { return this.GetTable<task>(); } }
  7.     }
  8. }

Notice that we have to check if the database exists , if not we need to create it .

In the MainPage.xaml.cs add the following code:

Code Snippet
  1. using (TaskDataContext context = new TaskDataContext(connectionString))
  2.             {
  3.                 if (!context.DatabaseExists())
  4.                 {
  5.                 context.CreateDatabase();
  6.                 }
  7.             }

To sum up, in order to use local database, we need to specify the data context then create the database if it doesn’t exist.

In the coming post , we will learn how to query the database. Stay Tuned Winking smile

Windows Phone Codenamed Mango series


Here is an index for all Mango Baby Steps series.

  1. Digest Mango
  2. Setting up the environment
  3. Creating your first application
  4. Creating an application with local Database
  5. Windows Phone : From Where To Start?
  6. Mango Baby Steps: Unit Testing Your App

This index will be updated each time we have a new post. Enjoy !