Unfortunately there is no documentation from Skype on this subject yet so that’s why I’m writing this blogpost to explain how you can launch Skype from your application. The code is actually really simple. Skype has registered several protocol extensions (can be found in the AppxManifest.xml file of the skype app) and the only thing you’ll have to know is what parameters to add to this protocol to launch a specific task.

What i did to see which protocol extensions Skype has i opened up the directory of the Skype Windows Store app (program files\WindowsApps) and looked for the AppxManifest.xml file. when you open the file look for Extensions element and in there should be the protocols that the application is bound to.

   1: <Extensions>

   2:         <Extension Category="windows.protocol">

   3:           <Protocol Name="skype"/>

   4:         </Extension>

   5:         <Extension Category="windows.protocol">

   6:           <Protocol Name="tel"/>

   7:         </Extension>

   8:         <Extension Category="windows.protocol">

   9:           <Protocol Name="sms"/>

  10:         </Extension>

  11:         <Extension Category="windows.protocol">

  12:           <Protocol Name="message-skype-com"/>

  13:         </Extension>

  14:         <Extension Category="windows.protocol">

  15:           <Protocol Name="message-messenger"/>

  16:         </Extension>

  17:         <Extension Category="windows.protocol">

  18:           <Protocol Name="audiocall-messenger"/>

  19:         </Extension>

  20:         <Extension Category="windows.protocol">

  21:           <Protocol Name="videocall-messenger"/>

  22:         </Extension>

  23:         <Extension Category="windows.protocol">

  24:           <Protocol Name="audiocall-skype-com"/>

  25:         </Extension>

  26:         <Extension Category="windows.protocol">

  27:           <Protocol Name="videocall-skype-com"/>

  28:         </Extension>

As you can see Skype has many protocols to launch the application, all for specific tasks. you can use tel or sms as generic protocols so people can choose what kind of app they use for calling or texting or use the more specific protocols especially made for skype: skype, message-skype-com, audiocall-skype-com etc.

Launching Skype and starting with a specific task is really easy. On he URL just add the phone number or skype id after the protocol name to launch the app and directly start a voice call or chat message.

In C# you can just create a new URI containing the protocol + username for example: message-skype-com:UserName. This will launch skype and will automatically start a chat session with the user “UserName”

   1: var chatTo = new Uri("message-skype-com:" + UserNameTextBox.Text);

   2: await Windows.System.Launcher.LaunchUriAsync(chatTo);

When you’ve created the URL just call Windows.System.Launcher.LaunchUriAsync and pass in the URL and you’re done. it doesn’t get easier than this.

For your convenience I’ve created a sample project that can be downloaded from my SkyDrive here: http://sdrv.ms/ZRcwSQ

The sample projects launches Skype on different ways, starting Audio calls, video calls etc.

As you could see the code itself is peanuts, just knowing what to call is the trick. i found out which parameters to pass to Skype by trial and error. Luckily passing in the skype username or phone number was one of the first things i tried.

I wish that there would be some kind of list of all applications that can be launched by using app to app communications but unfortunately

Happy coding!

Geert van der Cruijsen

        

You can download the 3 sample projects from my skydrive here. The 3 sample projects contain different apps showing different app to app scenarios:

ColleaguesDemo: App used to show how to launch office apps from within your app by opening Word / Excel or PowerPoint files. This app is also bound to a custom file type .colleague. if you install the app and try to browse to http://demo.vdcruijsen.net/geert.colleague this app should start because it is associated with .colleague files.

MovieList + GMDB: MovieList is an app to store my movies. I wanted to be able to launch the GMDB (Geert’s movie database) app to watch the movie details or watch a trailer. so when you browse to a movie in the movielist you can launch GMDB from there. The GMDB app is associated with the GMDB: protocol so you can launch the app from either the MovieList app or by an URL in an SMS/mail or NFC tag like this: gmdb:movie?id=8

Hopefully you enjoyed my session at TechDays and see you there again hopefully next year or at some other Windows Phone event.

I’m really curious to see apps showing up in the marketplace using App to App scenario’s because it would really add something to the Windows Phone Ecosystem.

Happy Coding

Geert van der Cruijsen

        

What I often see when looking at code from people who are new to MVVM is that they have a lot of properties in their viewmodels that can easily be reduced by using valueconverters. The best example which is used the most is probably the Boolean to Visibility converter. When building an app, chances are high that you want to show or hide certain UI elements depending on some boolean in your viewmodel. To bad the Visibility property of these elements only wants a bind to the Visibility enum and not your boolean. By using a value converter you can switch this boolean value to a Visibility without creating a new Visibility typed property in your viewmodel that I see a lot of people doing.

Don’t worry you don’t have to create all these converters yourself. A lot of them are already created by others and shared on several locations. Microsoft made a coding4fun toolkit that contains the most important converters like the one i described above. You can check out these converters here: http://coding4fun.codeplex.com/wikipage?title=Converters

So how hard is it to create your own converter? It’s really easy and I’ll show it by creating a new converter step by step in the rest of this post. I was watching someone demoing a fun app a few weeks back that used the site http://Mustachify.me to add mustaches to pictures and i thought this could be a pretty cool converter to create and add to your application so you can change all your images in your apps to images with Mustaches.

To start let’s create a new Windows Phone 8 project (These valueconverters aren’t only for Windows Phone, you can also use them for Windows 8, WPF, Silverlight, etc) and we’ll choose the “Windows Phone Databound app” project template so we will get some out of the box simple MVVM implementation.

To make this as simple as possible let’s just open the MainViewModel.cs and remove the out of the box  LocalizedSampleProperty, the Items collection and the IsDataLoaded and LoadData methods. Now we only have a SampleProperty left and we’ll rename this to property to PhotoUrl and give it a default value of some random picture

   1: private string _photoUrl = "http://upload.wikimedia.org/wikipedia/commons/2/21/Steve_Ballmer_at_CES_2010_cropped.jpg";

   2: /// <summary>

   3: /// Sample ViewModel property; this property is used in the view to display its value using a Binding

   4: /// </summary>

   5: /// <returns></returns>

   6: public string PhotoUrl

   7: {

   8:     get

   9:     {

  10:         return _photoUrl;

  11:     }

  12:     set

  13:     {

  14:         if (value != _photoUrl)

  15:         {

  16:             _photoUrl = value;

  17:             NotifyPropertyChanged("PhotoUrl");

  18:         }

  19:     }

  20: }

Our simple viewmodel is ready so now lets create the UI for this example. Just remove everything inside the LayoutRoot Grid and place a new Pivot there with 2 pivot items. inside the pivot items we’ll place 2 images. 1 original and 1 with the added mustaches.

   1: <phone:Pivot Title="mustachifymeconverter" Grid.Row="1">

   2:     <phone:PivotItem Header="default">

   3:         <Grid>

   4:             <Image Source="{Binding PhotoUrl}"/>

   5:         </Grid>

   6:     </phone:PivotItem>

   7:     <phone:PivotItem Header="mustache">

   8:         <Grid>

   9:             <Image Source="{Binding PhotoUrl}"/>

  10:         </Grid>

  11:     </phone:PivotItem>

  12: </phone:Pivot>

Since we haven’t implemented the valueconverter yet the app will now show just 2 images both bound to the same PhotoUrl property created in the viewmodel. To make our example build we’ll have to remove the MainLongListSelector_SelectionChanged and the OnNavigatedTo methods from the MainPage.xaml.cs and the code inside the Application_Activated method in the App.xaml.cs since these are not needed anymore.

Let’s run the app and see if everything is working. The app should look something like this, showing a picture of Steve without any mustache

It’s time to add the MustachifyMeConverter to our project. Just create a new class called MustachifyMeConverter and make it implement :IValueConverter

   1: public class MustachifyMeConverter : IValueConverter

   2: {

   3:     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

   4:     {

   5:         throw new NotImplementedException();

   6:     }

   7:  

   8:     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

   9:     {

  10:         throw new NotImplementedException();

  11:     }

  12: }

When you implement the IValueConverter you’ll have to implement 2 methods. Convert and ConvertBack. Since http://Mustachify.me only supports adding mustaches we’ll leave the ConvertBack as it is and only implement Convert.

Implementing the Mustachify.me converter Convert method is really simple. you actually only need 1 line of code: check if the string passed as a value is empty, if not just add “http://mustachify.me/?src=” in front of the old url and return it.

   1: public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

   2: {

   3:     return value != null ? "http://mustachify.me/?src=" + value.ToString() : string.Empty;

   4: }

Yes ValueConverters are really easy to create so let’s also use it in our app. Adding it to the XAML is also pretty easy. Since building the UI should be done in Blend (in my opinion) lets add the value converter in Blend! Fire up the Mainpage in Blend and select the image on the 2nd pivot page. In the properties window select the Source and choose “Create Data Binding”. In the popup you’ll see an option to select a ValueConverter on the left bottom of the window.

Press “Add value connector” and in the new window select the MustachifyMeConverter we created. Press Ok and we’re all done.

Fire up the app again and now the 2nd pivot item should have mustaches added to the picture without adding any code in our viewmodel to support this.

Hopefully this small tutorial gave you some ideas on how and when to use ValueConverters when building Windows Phone apps or any other XAML based apps using the MVVM pattern.

You can download the sample project here: http://sdrv.ms/VYhVVk

Happy coding!

Geert van der Cruijsen

        

When Windows Phone 8 was announced i received a lot of questions from people to update the skin switcher app to support Windows Phone 8 and finally today i had time to finish this project and upload version 1.0 on codeplex.

In the Windows Phone 8 Emulator Skin Switcher you can choose between 17 different skins from all currently available Windows Phone 8 devices. The app works the same way as it did for Windows Phone 7. Just start the skin switcher, select a skin and restart your emulator. You can select up to 3 different skins at the same time. 1 for each emulator resolution.

Available skins at 1.0 release:

• WVGA
• WP8 Default
• HTC 8S Blue
• HTC 8S Orange
• Nokia Lumia 820 Black
• Nokia Lumia 820 Cyan
• Nokia Lumia 820 Red
• Nokia Lumia 820 White
• Nokia Lumia 820 Yellow

• WXGA
• WP8 Default
• Nokia Lumia 920 Black
• Nokia Lumia 920 Grey
• Nokia Lumia 920 Red
• Nokia Lumia 920 White
• Nokia Lumia 920 Yellow

• 720p
• WP8 Default
• HTC 8X Black
• HTC 8X Blue
• HTC 8X Neon
• HTC 8X Red
• Samsung Ativ S

You can download the Windows Phone 8 Emulator Skin switcher at codeplex here:

http://wp8emulatorskins.codeplex.com/

If you’re still working with Windows Phone 7 you can use the old Windows Phone 7 Emulator Skin Swicher which is also available on codeplex

If you have any feedback or if you’ve created a skin yourself and would like to have it added to the application let me know by adding a comment here or contact me on twitter

Happy Coding and testing using your skinned Windows Phone 8 emulator!

Geert van der Cruijsen

        

I’ve uploaded the slide deck as pdf and the complete visual studio with all the working samples is also included in the same directory on my skydrive:

you can download it here

I’ve also uploaded Jermaine’s slide deck on Windows 8 to the same skydrive folder so you can also have a look at them as well.

If you have any questions regarding Windows Phone or Windows 8 development let me know on twitter @geertvdc or just add the hashtag #wpnl and the Dutch Windows Phone community will help you!

Geert van der Cruijsen

        

Welcome to the last day in this series of blog posts on the new features for developers of the Windows Phone 8 platform. Today, the 8th day we’ll talk on our last subject of the series, the wallet functionality and how to use in-app purchases.

   1: <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   2:     <Button x:Name="FreeBeerButton" Content="get 1 free beer deal!" Click="FreeBeerButton_Click_1"></Button>

   3: </StackPanel>

   1: private async void FreeBeerButton_Click_1(object sender, RoutedEventArgs e)

   2: {

   3:     var beerDeal = new Deal("1FREEBEER");

   4:     beerDeal.MerchantName = "MyBar";

   5:     beerDeal.DisplayName = "1 free beer!"; 

   6:     beerDeal.Description = "collect 1 free beer at your favorite bar";

   7:     beerDeal.CustomerName = "Geert";

   8:     

   9:     beerDeal.ExpirationDate = DateTime.Now.AddDays(1);

  10:         

  11:     beerDeal.IssuerName = "Your Favorite Bar";

  12:     beerDeal.NavigationUri = new Uri("/mainpage.xaml?deal=freebeer", UriKind.Relative);

  13:  

  14:     await beerDeal.SaveAsync(); 

  15:  

  16:     Launcher.LaunchUriAsync(new Uri("wallet://", UriKind.RelativeOrAbsolute));

  17:  

  18: }

   1: <Button x:Name="BuyLevelsButton" Content="buy 30 more levels!" Click="BuyLevelsButton_Click_1" ></Button>

   1: private async void BuyLevelsButton_Click_1(object sender, RoutedEventArgs e)

   2: {

   3:     var products = await CurrentApp.LoadListingInformationAsync();

   4:     var product1 = products.ProductListings.FirstOrDefault();

   5:     

   6:     var boughtProduct  = await CurrentApp.RequestProductPurchaseAsync(product1.Value.ProductId, true);

   7:     

   8:     if (CurrentApp.LicenseInformation.ProductLicenses[product1.Value.ProductId].IsActive)    

   9:     {                

  10:         CurrentApp.ReportProductFulfillment(product1.Value.ProductId);

  11:         var saveBoughtProductstate = true;

  12:     }

  13: }

        

Welcome back to the blog series 8 days of Windows Phone 8. Today, almost the last post we’ll dive into proximity capabilities also known as bluetooth and nfc. One note to this post is that i couldn’t test the code on the emulator since bluetooth and nfc are both only testable on devices and when i wrote this post i didn’t have access to a phone yet so maybe the examples are not 100% working.

   1: <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   2:     <Button x:Name="ServerButton" Click="ServerButton_Click_1" Content="server"></Button>

   3:     <Button x:Name="ClientButton" Click="ClientButton_Click_1" Content="client"></Button>

   4: </StackPanel>

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

   2: {

   3:     PeerFinder.Start();

   4:     PeerFinder.ConnectionRequested += PeerFinder_ConnectionRequested;

   5: }

   6:  

   7: async void PeerFinder_ConnectionRequested(object sender, ConnectionRequestedEventArgs args)

   8: {

   9:     MessageBox.Show("Connected");

  10:     _ss = await PeerFinder.ConnectAsync(args.PeerInformation);

  11: }

   1: protected async void ClientButton_Click_1(object sender, RoutedEventArgs e)

   2: {

   3:     PeerFinder.Start(); 

   4:     var p = await PeerFinder.FindAllPeersAsync(); 

   5:     if (p.Count > 0) 

   6:     { 

   7:         _ss = await PeerFinder.ConnectAsync(p[0]);

   8:         string phoneName = p[0].DisplayName;

   9:     }

   1: private async void SendMessageButton_Click_1(object sender, RoutedEventArgs e)

   2:         {

   3:             if (_ss == null)

   4:                 throw new Exception("Socket not initialized");

   5:  

   6:             DataWriter dw = new DataWriter(ss.OutputStream);

   7:             dw.WriteString("Hello Windows Phone 8");

   8:             await dw.StoreAsync();

   9:         }

   1: async void PeerFinder_ConnectionRequested(object sender, ConnectionRequestedEventArgs args)

   2: {

   3:     MessageBox.Show("Connected");

   4:     _ss = await PeerFinder.ConnectAsync(args.PeerInformation);

   5:     string message = await WaitForMessage();

   6: }

   7:  

   8: private async Task<string> WaitForMessage()

   9: {

  10:     DataReader dr = null;

  11:     while (true)

  12:     {

  13:         if (dr == null)

  14:             dr = new DataReader(_ss.InputStream);

  15:  

  16:         await dr.LoadAsync(4);

  17:         uint messageLen = (uint)dr.ReadInt32();

  18:         await dr.LoadAsync(messageLen);

  19:         return dr.ReadString(messageLen);

  20:     }

  21: }

   1: <Button x:Name="NfcSendButton" Click="NfcSendButton_Click_1"  Content="nfc send"></Button>

   2: <Button x:Name="NfcReceiveButton" Click="NfcReceiveButton_Click_1"   Content="nfc receive"></Button>

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

   2: {

   3:     ProximityDevice pd = ProximityDevice.GetDefault();

   4:     if (pd != null) 

   5:     { 

   6:         pd.PublishMessage("8days", "Hello World!");

   7:     }

   8: }

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

   2: {

   3:     ProximityDevice pd = ProximityDevice.GetDefault();

   4:  

   5:     if (pd != null)

   6:     {

   7:         long Id = pd.SubscribeForMessage("8days", NfcReceive);

   8:     }

   9: }

  10:  

  11: private void NfcReceive(ProximityDevice sender, ProximityMessage message)

  12: {

  13:     var m = message.DataAsString;

  14: }

        

Welcome again to the blog series called 8 days of Windows Phone 8 celebrating the release of Windows Phone 8 and the Windows Phone 8 SDK. Today, 5 days after the release it’s time for the 6th post in this series on the Speech APIs. Speech on Windows Phone 8 consists of 3 key aspects: Text to Speech, Speech to Text and Voice commands. In this post we’ll demo all 3.

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

   2: {

   3:     SpeechSynthesizer ss = new SpeechSynthesizer(); 

   4:     ss.SpeakTextAsync("8 days of windows phone 8, day 6");

   5: }

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

   2: {

   3:     SpeechSynthesizer ss = new SpeechSynthesizer();

   4:     VoiceInformation vi = InstalledVoices.All.Where(v => v.Language == "de-DE" && v.Gender == VoiceGender.Male).FirstOrDefault();

   5:     ss.SetVoice(vi);

   6:     ss.SpeakTextAsync("8 Tage von Windows Phone 8, Tag 6");

   7: }

Now that the capability is added we can start adding code to add the speech recognition. We’ll add a button to ask how you are doing to the mainpage.

   1: <Button x:Name="AskStatusButton" Content="how are you doing?" Click="AskStatusButton_Click"></Button>

   2: <TextBlock x:Name="StatusText"></TextBlock>

   3: <TextBlock x:Name="ConfidenceText"></TextBlock>

in the code behind we’ll add code to the click event of this button and the results of the speech recognition we’ll be adding to the StatusText textblock. We’ll also add an extra textblock to display the confidence level of the speech recognition.

In the click event we start with adding an SpeechRecognizerUI object. On this SpeechRecognizerUI object we’ll be settings some properties, The ListenText property is the text that is shown as the title in the speech box as shown on the image below. the next property is the ExampleText. here you can add a sample answer the user could answer. After that we set the ReadoutEnabled property to true so the Phone will speak your text back to you. The last property we’ll add is the ShowConfirmation that shows the spoken line of text as a text on the screen.

   1: private async void AskStatusButton_Click(object sender, RoutedEventArgs e)

   2: {

   3:     SpeechRecognizerUI sr = new SpeechRecognizerUI();

   4:     sr.Settings.ListenText = "How are you doing?";

   5:     sr.Settings.ExampleText = "I'm doing fine"; 

   6:     sr.Settings.ReadoutEnabled = true; 

   7:     sr.Settings.ShowConfirmation = true; 

   8:     SpeechRecognitionUIResult result = await sr.RecognizeWithUIAsync();

   9:     if (result.ResultStatus == SpeechRecognitionUIStatus.Succeeded) 

  10:     {

  11:         StatusText.Text = result.RecognitionResult.Text;

  12:         ConfidenceText.Text = result.RecognitionResult.TextConfidence.ToString();

  13:     }

  14:  

  15: }

When we’ve set all these properties we can call the RecognizeWithUIAsync method to trigger the voice recognition. Note that on the first time this is accessed by the user the user has to accept that the voice clips will be send to the Microsoft Servers for processing. when they accept the speech recognition will start.

When the speech recognition finishes you can check the result in code. The result that comes back from the RecognizeWithUIAsync has a text property and also a confidence level to check if the result is usable or not. In the sample project we add these results to the 2 textboxes we’ve added to the mainpage.

In some use cases you just want the user to choose between some options instead of just free text. this is really easy to implement with the SpeechRecognizerUI class. We’ll be adding another button and 2 more textboxes on the Main page to ask the user which day the current day of the week is.

   1: <Button x:Name="AskDayButton" Content="which day is it?" Click="AskDayButton_Click"></Button>

   2: <TextBlock x:Name="DayText"></TextBlock>

   3: <TextBlock x:Name="DayConfidenceText"></TextBlock>

After that we’ll add code to the click event of the new button with almost the same code as before with some extra additions. 

   1: private async void AskDayButton_Click(object sender, RoutedEventArgs e)

   2: {

   3:     SpeechRecognizerUI sr = new SpeechRecognizerUI();

   4:     sr.Settings.ListenText = "Which day is it today?";

   5:     sr.Settings.ExampleText = "Friday";

   6:     sr.Settings.ReadoutEnabled = true;

   7:     sr.Settings.ShowConfirmation = true;

   8:  

   9:     sr.Recognizer.Grammars.AddGrammarFromList("answer", new string[] { "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" });

  10:  

  11:     SpeechRecognitionUIResult result = await sr.RecognizeWithUIAsync();

  12:     if (result.ResultStatus == SpeechRecognitionUIStatus.Succeeded)

  13:     {

  14:         DayText.Text = result.RecognitionResult.Text;

  15:         DayConfidenceText.Text = result.RecognitionResult.TextConfidence.ToString();

  16:     }

  17: }

The only extra line we’ll add is a list of available answers and the speech recognizer will only match the spoken answer to one of these answers. In our example i’ve added the names of the days of the week.

When you run the app the app will only accept existing days of the week.

Voice commands

The last subject of today is voice commands. With voice commands you can start your app with a specific task or execute a task when you are already in your app. Voice commands always consist of 3 parts. The App name so the operating system knows which app to send the command to. the second part is the the command name and the third part is a Phrase which is a sort of parameter you can add to your command.

To enable voice commands you’ll have to add an xml file which contains the voice commands. To add this VCD file right click your project in Visual Studio and select Add new item and select the Voice Command Definition from the list.

By default you’ll get an already filled in VCD file with some example commands and phrases. We’ll be changing this to add a command to start the app by asking what day it is today, tomorrow or yesterday.

The first thing you’ll have to add to a VCD file is the CommandPrefix. this is the word the operating system will use to find your app.. after that we’ll add a Command. this command needs a ListenFor element where you tell the operating system which text to listen for. you can also add a phrase to this command like i did with the {day}. this phrase with it’s options should also be added to the VCD file.

   1: <?xml version="1.0" encoding="utf-8"?>

   2:  

   3: <VoiceCommands xmlns="http://schemas.microsoft.com/voicecommands/1.0">

   4:   <CommandSet xml:lang="en-US">

   5:     <CommandPrefix>8 days</CommandPrefix>

   6:     <Example>what day is it today?</Example>

   7:     <Command Name="DayToday">

   8:       <Example>What day is it?</Example>

   9:       <ListenFor>What day is it {day}</ListenFor>

  10:       <Feedback>Checking the day</Feedback>

  11:       <Navigate Target="/MainPage.xaml"/>

  12:     </Command>

  13:  

  14:     <PhraseList Label="day">

  15:       <Item> today </Item>

  16:       <Item> tomorrow </Item>

  17:       <Item> yesterday </Item>

  18:     </PhraseList>

  19:  

  20:   </CommandSet>

  21: </VoiceCommands>

When we’ve added the VCD file we can register our VCD to the operating system. You’ll only have to do this once when your app runs for the first time but for now i’ll just add it to the constructor of our mainpage.

   1: public MainPage()

   2: {

   3:     InitializeComponent();

   4:  

   5:     InitializeVoiceCommands();

   6: }

   7:  

   8: private async System.Threading.Tasks.Task InitializeVoiceCommands()

   9: {

  10:     await VoiceCommandService.InstallCommandSetsFromFileAsync(new Uri("ms-appx:///VoiceCommandDefinition1.xml"));

  11: }

That’s all we need to do. to start our app using our voice. You can trigger the voice recognition by holding the windows button for a few seconds. You’ll now see the small “Listening” popup window. if you say “What can i say” or press the question mark you’ll go to a new page with the explanation on what commands are available. The first page will describe the commands that are build in into the system. if you slide to the right you’ll get an overview of all apps that support voice commands. Our app is listed here. When you click the app you’ll get a list of available commands for this app.

When we hold the windows button now and say “8 days, What day is it tomorrow?” our app will start and will open the Mainpage.xaml

The voice command is sent to the MainPage.xaml on the querystring. overriding the OnNaigatedTo event we can check which voice command was used and also which phrase was used.

   1: protected override void OnNavigatedTo(NavigationEventArgs e)

   2: {

   3:     base.OnNavigatedTo(e);

   4:  

   5:     if (e.NavigationMode == System.Windows.Navigation.NavigationMode.New)

   6:     {

   7:         if (NavigationContext.QueryString.ContainsKey("voiceCommandName"))

   8:         {

   9:             string command = NavigationContext.QueryString["voiceCommandName"];

  10:  

  11:         }

  12:     }

  13: }

The voice command and phrase are both added as seperate url parameters so if we run the app again and trigger it by asking what day it is tomorrow we can see the following results when we attach the debugger:

As you can see there is a parameter “day” which you can use in a switch statement for example to call the appropriate method.

you can download the sample project here: http://sdrv.ms/QSJ2yx

That’s all for today on the Speech API’s. Hopefully you’ll be back tomorrow to read my post on the Proximity APIs.

Geert van der Cruijsen

        

Welcome back to my series of blog posts called 8 days of Windows Phone 8. Today, the 5th day of this series we’ll talk about the new features in the .net framework 4.5 and the C# 5.0 language that can help you build great Windows Phone apps. The main features we’ll handle in this post are the async and await keywords and the DataContractJsonSerializer

   1: [DataContract]

   2: public class ToDo

   3: {   

   4:     [DataMember]

   5:     public string Title { get; set; }

   6:  

   7:     [DataMember]

   8:     public DateTime Date { get; set; }

   9:  

  10:     [DataMember(Name="Text")]

  11:     public string Content { get; set; }

  12: }

   1: public async Task<string> SaveToDos()

   2: {

   3:     List<ToDo> todos = new List<ToDo>();

   4:     todos.Add(new ToDo(){Title="todo 1", Date = DateTime.Now, Content="finish this series of blogposts"});

   5:     todos.Add(new ToDo(){Title="todo 2", Date = DateTime.Now, Content="Pick up milk from the store"});

   6:     todos.Add(new ToDo(){Title="todo 3", Date = DateTime.Now, Content="Wash my car"});

   7:  

   8:     var localFolder = Windows.Storage.ApplicationData.Current.LocalFolder;

   9:  

  10:     DataContractJsonSerializer dcjs = new DataContractJsonSerializer(typeof(List<ToDo>));

  11:     MemoryStream ms = new MemoryStream();

  12:     dcjs.WriteObject(ms,todos);

  13:     string json = Encoding.UTF8.GetString(ms.ToArray(),0,(int)ms.Length);

  14:  

  15:  

  16:     StorageFile todoFile = await localFolder.CreateFileAsync("todos.json",CreationCollisionOption.ReplaceExisting);

  17:     using (var f = await todoFile.OpenStreamForWriteAsync())

  18:     {

  19:         await f.WriteAsync(ms.ToArray(),0,(int)ms.Length);

  20:         f.Close();

  21:     }

  22:  

  23:     return json;

  24: }

Please note the async keyword before the return type of this method. by adding this, this method can be called asynchronous and it will always return a Task containing your return type. In the method we first add a few ToDo items to a list. after that we create a new DataContractJsonSerializer and in the constructor we add the type of object it should serialize. We then use the DataContractJsonSerializer to serialize our list of ToDo items to a json string which will be returned at the end of the method.

When we have this json string we’ll create a new file in the local folder by calling the CreateFileAsync method. please note the await keyword before this method which means that the code below this line should be waiting until this asynchronous call is finished. When we have the local file we’ll just write the json string to this file and close the stream.

So now the ToDo items are saved in the local file, lets read them back and show them on the screen. We’ll add a new method to our ToDoService called GetToDos() which will read the json file and will deserialize it back to a list of ToDo items.

   1: public async Task<List<ToDo>> GetToDos()

   2: {

   3:     var localFolder = Windows.Storage.ApplicationData.Current.LocalFolder;

   4:     StorageFile todoFile = await localFolder.GetFileAsync("todos.json");

   5:  

   6:     DataContractJsonSerializer dcjs = new DataContractJsonSerializer(typeof(List<ToDo>));

   7:     var stream = await todoFile.OpenStreamForReadAsync();

   8:     var todos = dcjs.ReadObject(stream) as List<ToDo>;

   9:  

  10:     return todos;

  11:  

  12: }

We’ll start again by getting a reference to the local folder and the json file in the local folder. When we have this StorageFile object we can now create a new DataContractJsonSerializer again. Now we open a stream from our StorageFile and pass it to the DataContractJsonSerializer to change it back to a List of ToDo items. We’re all done.

To finish up the demo application we’ll add a textbox to the mainpage where we can display our json string and we’ll also add an ItemsControl to display the To Do items.

   1: <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   2:     <ScrollViewer>

   3:         <StackPanel>

   4:             <TextBlock x:Name="JsonText" TextWrapping="Wrap" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

   5:             <ItemsControl x:Name="TodoList" ItemTemplate="{StaticResource TodoItemTemplate}" Margin="0,12,0,0"></ItemsControl>

   6:         </StackPanel>

   7:     </ScrollViewer>

   8: </StackPanel>

In our code behind we’ll hook everything up to write and read the data and show it on the page.

   1: public async void SaveAndGetTodos()

   2: {

   3:     ToDoService ts = new ToDoService();

   4:     string json = await ts.SaveToDos();

   5:  

   6:     List<ToDo> todos = await ts.GetToDos();

   7:  

   8:     JsonText.Text = json;

   9:     TodoList.ItemsSource = todos;

  10: }

If we now run our application we’ll see the json string that is created and also the list of To Do items in the itemscontrol.

you can download the demo project here: http://sdrv.ms/QSJ2yx

Hopefully you enjoyed reading this post or learned some usefull features of the async and await keywords and the DataContractJsonSerializer. More tomorrow on one of the coolest new things in the SDK: the Speech APIs

Geert van der Cruijsen

        

Welcome back to my series of blog posts called 8 days of Windows Phone 8. Today, the 4th day of this series we’ll dive into the new screen resolutions of Windows Phone 8 and what you should do to support these as a Windows Phone developer.

   1: <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   2:     <StackPanel Orientation="Horizontal">

   3:         <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Height</TextBlock>

   4:         <TextBlock x:Name="TextHeight" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

   5:     </StackPanel>

   6:     <StackPanel Orientation="Horizontal">

   7:         <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Width</TextBlock>

   8:         <TextBlock x:Name="TextWidth" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

   9:     </StackPanel>

  10:     <StackPanel Orientation="Horizontal">

  11:         <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Scale</TextBlock>

  12:         <TextBlock x:Name="TextScale" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

  13:     </StackPanel>

  14:     <StackPanel Orientation="Horizontal">

  15:         <TextBlock Style="{StaticResource PhoneTextNormalStyle}">Resolution</TextBlock>

  16:         <TextBlock x:Name="TextResolution" Style="{StaticResource PhoneTextNormalStyle}"></TextBlock>

  17:     </StackPanel>

  18:     <Image Height="100" x:Name="ScaledImage"></Image>

  19: </StackPanel>

   1: TextHeight.Text = Application.Current.Host.Content.ActualHeight.ToString();

   2: TextWidth.Text = Application.Current.Host.Content.ActualWidth.ToString();

   3: TextScale.Text = Application.Current.Host.Content.ScaleFactor.ToString();

   4:  

   5: //use the scale to check which resolution you're using

   6: switch (Application.Current.Host.Content.ScaleFactor)

   7: {

   8:     case 100:

   9:         ScaledImage.Source = new BitmapImage(new Uri("Assets/wvga.png", UriKind.Relative));

  10:         TextResolution.Text = "WVGA";

  11:         break;

  12:     case 150:

  13:         ScaledImage.Source = new BitmapImage(new Uri("Assets/720p.png", UriKind.Relative));

  14:         TextResolution.Text = "720P";

  15:         break;

  16:     case 160:

  17:         ScaledImage.Source = new BitmapImage(new Uri("Assets/wxga.png", UriKind.Relative));

  18:         TextResolution.Text = "WXGA";

  19:         break;

  20: }

So now we know how to handle images in your UI. the last part you need to know is that apps on the 720p resolutions have a higher height compared to the WVGA and WXGA resolution (as you can see in the screenshots above). If you fix your design on 800 pixels high you’ll have an empty piece of screen on the bottom that is not used by your app. It’s better to design your app with certain parts with dynamic heights of your page like a listbox, map control or scrollviewer so they will fill up the screen with just a bit longer list, map etc.

Hopefully this gives you an idea on how to build apps supporting all resolutions.

You can download the sample project here: http://sdrv.ms/QSJ2yx

Thanks for reading my 4th post in this series of 8 about the new features in Windows Phone 8. Tomorrow a post on some new features in the .net framework 4.5 and the C# 5.0 language which can be important for you as a Windows Phone developer.

Geert van der Cruijsen

        

Welcome back to my series of blog posts called 8 days of Windows Phone 8. Today, the 3rd day of this series we’ll dive into the new Emulator and the Simulation Dashboard in Visual Studio 2012.

        

Welcome back to my series of blog posts called 8 days of Windows Phone 8. Today, the 2nd day of this series we’ll dive into the new possibilities of Windows Phone 8 live tiles and the lock screen.

• Day 1: SDK Overview
• Day 2: Live tiles and Lock screen
• Day 3: Emulator & Simulation dashboard
• Day 4: New screen resolutions
• Day 5: .net 4.5 & C# 5.0
• Day 6: Speech
• Day 7: Proximity capabilities
• Day 8: Wallet and In-App purchases 

  

  Live tiles

  If you are familiar with developing for Windows Phone 7 you already know about live tiles. They are one if the unique features of Windows Phone that everyone loves. In Windows Phone 8 Microsoft added more possibilities to create live tiles and also made them more flexible for the end users to really personalize their phone.

  One of the main changes is that live tiles now can be set by any user to 3 different sizes. Small, medium and wide. There are also 3 different templates to create live tiles that show information on different ways: the Flip template, the Cycle template and the Iconic template.

  Sizes used for these templates are:

  	Flip	Cycle	Iconic
  Small	159 * 159px	159 * 159px	110 * 110px
  Medium	336 * 336px	336 * 336px	202 * 202px
  Wide	691 * 336px	691 * 336px	-

  You might expect that there would be even more resolutions for the images because of the new resolutions that are supported in Windows Phone 8 but this is not the case. The OS will scale the images for you so you only have to supply them once.

  Flip template

  In Windows Phone 7 it was possible to create tiles and set certain properties on them like a title, count, a back ground image and a text located on the back of the tile. In Windows Phone 8 this is still possible but Microsoft created 2 more tile templates to create live tiles. The template that was used in Windows Phone 7 is now called the Flip Template because it has data on it’s back and will flip at random intervals showing this data. The other templates are called the Iconic template and the Cycle template.

  So lets start looking at some code. At the end of the post you can download all the example code in 1 project to set the different kinds of tiles. Let’s create a Flip tile first:

  We start with a new empty project and add a button to set our flip template. Lets add a click event and place our tile creation code there to make it as easy as possible. In the click event we’ll start adding the code for adding the live tile

   

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

   2: {

   3:     ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

   4:

   5:     FlipTileData fliptile = new FlipTileData();

   6:     fliptile.Title = "WP8";

   7:     fliptile.Count = 9;

   8:     fliptile.BackTitle = "day 2";

   9:

   10:     fliptile.BackContent = "back medium";

   11:     fliptile.WideBackContent = "back of the wide tile";

   12:

   13:     fliptile.SmallBackgroundImage = new Uri("Assets/159.png",UriKind.Relative);

   14:     fliptile.BackgroundImage = new Uri("Assets/336.png", UriKind.Relative);

   15:     fliptile.WideBackgroundImage = new Uri("Assets/wide.png", UriKind.Relative);

   16:

   17:     tile.Update(fliptile);

   18: }

  First of you can get the current active tile by querying the ShellTile class. After that we’ll be creating a new FlipTileData object where we can set all the properties of the new tile. We’ll set the title, count and other properties. Some properties are only for the tile in small mode, some are only used in medium or wide mode and some are used in all modes like the count. We’re adding 3 different images for the 3 sizes of the tile. When we finished setting the properties on the tile we can call the update method on our tile object and pass the FlipTileData to it to set the new tile.

  You can set the following properties on the flip tile:

  Title	The title is shown on the bottom left of the front of the tile. it will be shown on the medium and wide tiles.
  Count	The count is the number in the black circle on the top right of every tile. The count is shown at all tile sizes.
  BackgroundImage	The background image is the image shown on the background of the front of the tile at medium size
  BackBackgroundImage	To set the background of the back of the tile use the BackBackgroundImage
  BackContent	BackContent is the text shown on the back of a tile at medium size
  BackTitle	Title shown on bottom left of the back of a tile on medium and wide size
  SmallBackgroundImage	The background of the tile at small size.
  WideBackgroundImage	The background of the tile ad wide size
  WideBackBackgroundImage	The background of the back of the tile at wide size
  WideBackContent	Text shown on the top left of the back of a tile at wide size

  The result will look something like this:

  Small: (note small tile doesn’t flip)

  

  Medium:

   

  Wide:

   

  If you were used to creating live tiles in WP7 there aren’t that much changes as you can see. All that is different are the small and wide sizes of the tile.

  Iconic template

  The iconic template is a new template that is available in Windows Phone 8 and i think this is a really good addition to the Windows Phone SDK. Lots of apps use tiles with a white icon and a transparent background so it looks like the native Windows Phone apps. However lots of people have trouble sizing the icon and the count in the black circle doesn’t look as good as the build in apps like mail or the message hub. To make this easier for everyone Microsoft created the Iconic tile template and it works almost similar to the FlipTile except for we’re using a IconicTileData object instead of the FlipTileData. I think the Iconic tiles will be used a lot on Windows Phone 8.

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

   2: {

   3:     ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

   4:

   5:     IconicTileData icontile = new IconicTileData();

   6:     icontile.Title = "WP8";

   7:     icontile.Count = 12;

   8:

   9:     icontile.IconImage = new Uri("Assets/202.png", UriKind.Relative);

   10:     icontile.SmallIconImage = new Uri("Assets/110.png", UriKind.Relative);

   11:

   12:     icontile.WideContent1 = "8 days of windows phone 8";

   13:     icontile.WideContent2 = "day 2";

   14:     icontile.WideContent3 = "Live tiles and lock screen";

   15:

   16:     ShellTile.Create(new Uri("/MainPage.xaml",UriKind.Relative), icontile, true);

   17: }

  As you can see creating the tile is done the same way as the as the first tile we created except for using the IconicTileData.

  The properties in the IconicTileData are a bit different. one key aspect are the images you can add to the Iconic tiles. They are set to different sizes compared to the other tile templates because they only use part of the tile. In the current beta build i’ve used to create this blogpost the images don’t seem to work that well but my guess this will be finished in the final SDK build.

  Another thing that is different is the last line of generating the live tile. The default live tile is made by a FlipTileData object and you can’t update an existing tile to another template so we’re creating a new tile for the Iconic tile.

  Small: (seems to be a bug in the 8.0 build of the sdk where the count falls of the edge of the tile. Don’t know if this only happens in the emulator or also on actual devices since i haven’t tested it on a device yet because i don’t have a device.)

  

  Medium:

  

  Wide: (also the rendering of this seems to be a bit off since there should be a margin below the icon that doesn’t seem to be here right now in this build of the SDK)

  

  The wide template also has 3 lines of text you can add to the wide tile. because of this this template is really versatile and probably one of the reasons this template will be used a lot. A complete list of the IconTileData properties is:

  Title	Title shown on bottom left of the tile in medium and wide size
  Count	Count shown on the right of the icon image at all sizes
  BackgroundColor	Set the background of the tile. if not set it will use the phone accent color
  IconImage	Image used in the medium tile size
  SmallIconImage	Image used in the small and wide (bottom right) tile size
  WideContent1	Line 1 in the largest font on the wide tile size
  WideContent2	Line 2 of text on the wide tile size
  WideContent2	Line 3 of text on the wide tile size

  Cycle template

  The Iconic tile adds a lot of new possibilities for the live tiles that developers tried to achieve on Windows Phone 7. One example of Windows Phone 7 tiles that lots of people liked was the photo tile where there is a set of images that get rotated in turns on the tile. On Windows Phone 7 there was no way to recreate this as a developer but now with Windows Phone 8 there is a possibility using the Cycle Template.

  Creating a cycle live tile is done the same way as creating the other 2 templates so lets get started and implement the code under the 3rd button in our example app to create a Cycle tile.

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

   2: {

   3:     CycleTileData cycleicon = new CycleTileData();

   4:     cycleicon.Title = "WP8";

   5:     cycleicon.Count = 5;

   6:

   7:     cycleicon.SmallBackgroundImage = new Uri("Assets/159.png", UriKind.Relative);

   8:

   9:     List<Uri> images = new List<Uri>();

   10:     images.Add(new Uri("Assets/cycle1.png", UriKind.Relative));

   11:     images.Add(new Uri("Assets/cycle2.png", UriKind.Relative));

   12:     images.Add(new Uri("Assets/cycle3.png", UriKind.Relative));

   13:     cycleicon.CycleImages = images;

   14:

   15:     ShellTile.Create(new Uri("/MainPage.xaml?id=cycle", UriKind.Relative), cycleicon, true);

   16: }

  The Cycle tile uses the CycleTileData object to set it’s properties and this tile has fewer properties compared to the other templates. The title and count are available as on every other template and the other property that is unique for this template is the CycleImages property. It’s an IEnumerable of Uri’s to images (1 size) that will be used on the medium and wide sizes. it will center the image if it is larger as the tile itself is showing only a part of the image. if the tile is set to small it will only show a static image set in the SmallBackgroundImage property.

  Small:

  

  Medium:

  

  Large:

  

  The IEnumerable of images used in the medium and wide tiles can contain up to 9 images and will be rotated using a smooth slide animation. The complete list of properties available in the CycleTileData is:

  Title	Tile shown on medium and wide tile sizes in the bottom left corner
  Count	Counter shown on all tile sizes at the top right corner
  SmallBackgroundImage	Static image shown at the background of the tile at small tile size
  CycleImages	List of up to 9 images which will be rotated on the tile at medium and wide tile size.

  Looking at all the live tile features Microsoft added for Windows Phone 8 i believe it really adds some nice new options to create live tiles. I can’t wait for people to use them in their apps.

  Lock screen

  New in Windows Phone 8 is the possibility to add your own apps to the lock screen of Windows Phone 8. As a developer you can’t force an app to be shown on the lockscreen but you can enable your app for it so users can add your app to their lock screen. You can also change the lock screen image in your app by code.

  lock screen app icon, count and Text

  The image on the lock screen is an image you have to include in your project that uses a transparent background and a white icon.

  To set the lock screen image ad an image of 30 * 30 pixels to your solution and open up the WMAppManifest.xml and change the DeviceLockImageURI element to the URL of your lock screen image. Also set the IsRelative attribute to true and IsResource attribute to false. The count and text will be taken of the live tile count property of the current main tile in your app.

   1: <DeviceLockImageURI IsRelative="true" IsResource="false">Assets\LockImage.png</DeviceLockImageURI>

   

  To enable the lock screen image and text you also have to add the following lines of XML to the WMAppManifest.xml below the Tokens element

   1: <Extensions>

   2:       <Extension ExtensionName="LockScreen_Notification_IconCount" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />

   3:       <Extension ExtensionName="LockScreen_Notification_TextField" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />

   4: </Extensions>

  The settings for displaying data on the lock screen is now complete so we can change our settings on our phone to add our app to the lock screen. To do this. open up settings and go to the lock screen settings. On this screen you can select 1 app that can show the text (default is the calendar app) and 5 apps that are allowed to show an icon + counter. Select your app and you’re ready to go.

  

  As you can see it uses the counter of our main tile (the flip tile example) and the the text is also the same as we’ve set to the BackContent property of the FlipTileData.

  Lock screen Image

  The last thing I’ll show you is how to set the lock screen background image from within your app. Like using the lock screen icon you’ll also need to add an extension to the WMAppManifest.xml to enable setting the lock screen image

   1: <Extensions>

   2:       <Extension ExtensionName="LockScreen_Background" ConsumerID="{111DFF24-AA15-4A96-8006-2BFF8122084F}" TaskID="_default" />

   3: </Extensions>

  When you’ve added the extension to the manifest it’s time to start writing the code to change the lock screen image. First you’ll need to check if your app already provided the current lock screen image and if that isn’t the case you need to ask the user’s permission to change the lock screen image. if the user accepts you can change the lock screen image.

  I’ve added an image of 768*1280 pixels (largest supported resolution right now) set the image to embedded resource and added the following code to the click event of the 4th button to set the lock screen image when we press the button.

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

   2: {

   3:     SetLockScreenImage();

   4: }

   5:

   6: private async void SetLockScreenImage()

   7: {

   8:     //check if current app provided the lock screen image

   9:     if (!Windows.Phone.System.UserProfile.LockScreenManager.IsProvidedByCurrentApplication)

   10:     {

   11:         //current image not set by current app ask permission

   12:         var permission = await Windows.Phone.System.UserProfile.LockScreenManager.RequestAccessAsync();

   13:

   14:         if (permission == Windows.Phone.System.UserProfile.LockScreenRequestResult.Denied)

   15:         {

   16:             //no permission granted so return without setting the lock screen image

   17:             return;

   18:         }

   19:     }

   20:

   21:     Windows.Phone.System.UserProfile.LockScreen.SetImageUri(new Uri("ms-appx:///Assets/lockscreen.png", UriKind.Absolute));

   22: }

  As you can see the SetLockScreenImage is using the async keyword because asking the user for permission can only be done by using an async call. therefore we’re using the await keyword there when asking for permission and the app will wait untill the response comes back from the user.

  When we run the app now and press the button we’ll see the old lock screen image being replaced by the newly added image

  

  After pressing yes:

  

  This is all for day 2 of my series of blog posts called “8 days of Windows Phone 8”. Tomorrow we’ll have a look at the emulator and the simulation dashboard which give you a lot of options to test your apps.

  Download the sample project here: http://sdrv.ms/QSJ2yx

  Liked the post or have any feedback? leave a comment below!

  Geert van der Cruijsen

        

This first day I would like to start off with a quick summary of all the features that are added in the new SDK. After that I’ll post a new post for the coming 7 days where we’ll dive deeper in each of these features with code samples and demo’s.

        

Lots of events are organized and in November I’m speaking on two of them. First is a Dutch event called “Bedrijf zoekt app” held on the 13th in Bussum. In this session we’ll dive into the possibilities of building apps for Windows 8 without focusing on the development techniques themselves but we’ll be looking more into why companies should develop for Windows 8 and what are the possibilities when you’re going to develop apps for Windows 8.

More info on the “Bedrijf zoekt app” event here.

2 days later on November 15th I’ll be doing a session on Windows Phone 8 on the Avanade “Masters in Microsoft” event held for software engineering students. This event is FREE and includes food before we start the sessions (should be enough reason for every student to sign up ). This evening I’ll be talking on all the new features of Windows Phone 8 and showing code demo’s on how to use these new features.

More info on how to sign up for this free event here (Masters in Microsoft Event)

Hope to see you there!

Geert van der Cruijsen

        

The problem is that you didn’t have to fill in your key during the installation and now Windows 8 is trying to activate with a default key which is failing.

You can fix this in a few easy steps:

• Press the “Windows” key on your keyboard or go back to the “Metro” start screen
• type “slui 3” and press enter
• a popup shows up where you can enter your new key. enter this key and press activate
• Your copy of windows 8 is now activated

Enjoy windows 8!

Geert van der Cruijsen

        

The problem is that you didn’t have to fill in your key during the installation and now Windows 8 is trying to activate with a default key which is failing.

You can fix this in a few easy steps:

• Press the “Windows” key on your keyboard or go back to the “Metro” start screen
• type “slui 3” and press enter
• a popup shows up where you can enter your new key. enter this key and press activate
• Your copy of windows 8 is now activated

Enjoy windows 8!

Geert van der Cruijsen

        

My new app is called PhoneCompare and is available in all Windows Phone Marketplaces for 99 cents. you can also install a free trial that has 100% of the functionality but shows ads.

PhoneCompare has the following features:

• List all available Windows Phones
• Check specifications for a single phone to see its screen size, dimensions, weight, processor, storage, memory, battery and camera.
• Select 2 phones to compare all these specs next to each other
• Check the specs of your current phone
• Browse phones by brand
• View a list of new phones that are just released or are about to get released

My plans for the future are to also make it possible to rate phones so you can see which phones are rated the highest and I also want to store most used phones by visitors of the app. All this in version 1.1

If you have any feedback on this app please let me know by a comment on this post, by sending me a tweet @geertvdc or by rating or using the in app mail function

Enjoy!

Geert van der Cruijsen

        

My sample code and powerpoint deck including lots of resources to start developing for windows phone can be found here:

https://skydrive.live.com/redir.aspx?cid=ef12210979e9f6b0&resid=EF12210979E9F6B0!1485&parid=EF12210979E9F6B0!1463

During the session we created a twitter app that downloads the data from an xml feed asynchronous and placing this list of twitter items in a listbox. After that we created some sample data and created a template for the listbox so the twitter list looks nice.

Hopefully these sessions made you join the Windows Phone community and I expect to see your apps in the marketplace soon

If you have any questions regarding Windows Phone development please send me an email or contact me on twitter @geertvdc

Happy Coding!

Geert van der Cruijsen

        

Calculating this color is done by simple math. Your primary color + the complementary color should add up to hex value FFFFFF (white) so if you just remove the R G and B values of your color from the max value 255 you’ll end up with your complementary color.

So how to do this in your windows phone project? Let me first show you the results and after that I’ll explain how I created a resource you can use in blend to bind to your complementary color. Below are screenshots of a sample app (download at the end of this post) that displays the phone accent color and its complementary color. I’ve taken screenshots of every color so you can see what the results look like. The first rectangle shows the phone accent color while the second shows it’s complementary color.

So let’s see how to use this color in code. I’ve created a class calles “Resources” and I’ve added 2 public static properties in it. 1 called ComplementaryColor and 1 called ComplementaryColorBrush. You’ll use the Brush property mostly when binding but if you would like to have the color it’s also available.

   1: public class Resources

   2: {

   3:     private static Color _complementaryColor = new Color()

   4:     {

   5:  

   6:         R = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).R),

   7:         G = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).G),

   8:         B = (byte)(255 - ((Color)Application.Current.Resources["PhoneAccentColor"]).B),

   9:         A = ((Color)Application.Current.Resources["PhoneAccentColor"]).A

  10:     };

  11:  

  12:     private static Brush _complementaryColorBrush = new SolidColorBrush(_complementaryColor);

  13:  

  14:     public static Color ComplementaryColor

  15:     {

  16:         get

  17:         {

  18:             return _complementaryColor;

  19:         }

  20:     }

  21:  

  22:     public static Brush ComplementaryColorBrush

  23:     {

  24:         get

  25:         {

  26:             return _complementaryColorBrush;

  27:         }

  28:     }

  29: }

The calculations of the complementary color is done by subtracting the R G and B values from the  max of 255 and they are stored in a new Color property. this color is then used in our ComplementaryColorBrush.

To use these properties in blend we’ll just add this class as a resource in the App.xaml file:

   1: <Application.Resources>

   2:     <ResourceDictionary>

   3:         <resources:Resources x:Key="Resources" d:IsDataSource="True"/>

   4:     </ResourceDictionary>

   5: </Application.Resources>

When we build our project and open up Expression blend we can now use this color by selecting the rectangle and going into the databinding menu for the fill property and then selecting the ComplementaryColorBrush.

There you go. when you run your project now you’ll see the complementary color of your selected phone accent color

You can download my sample application incudling source from my skydrive here

Happy Coding!

Geert van der Cruijsen

        

If you were at yesterdays session I hope you got inspired to start making Windows Phone apps and hope to see your apps in the Imagine Cup this year.

https://www.imaginecup.com/

The app we’ve build during the class was a simple twitter app that downloads json data asynchronous and parses the json objects to c# objects. We then bind a list of these TwitterItems to a listbox on the MainPage.xaml and create a ItemTemplate for the listbox items by using Expression Blend Sample data created from the  TwitterItem object.

The visual studio project and powerpoint deck can be downloaded here on my skydrive:

https://skydrive.live.com/redir.aspx?cid=ef12210979e9f6b0&resid=EF12210979E9F6B0!1480&parid=EF12210979E9F6B0!1463

The sample project contains a few extra steps that I didn’t have time for during the session itself but it shows how to post a message to a social network by using the ShareStatusTask and it also contains basic navigation.

During the session I also showed the use of a open source tool to generate classes from json. you can download this tool from codeplex here:

http://jsonclassgenerator.codeplex.com/

to use these classes you’ll need a dll compiled for windows phone. you can get that one here on codeplex:

http://json.codeplex.com/

If you have any question about the sample code or Windows Phone in general contact my by mail or send me a tweet at @geertvdc

Happy Coding!

Geert van der Cruijsen

        

The PowerPoint deck from my geeknight session on push notifications and livetiles  is available here: Download or View PPT

The PowerPoint deck from the level 300 Push notifications, live tiles and background agents session is available here: Download or View PPT

In both sessions I used the same demo project that can be downloaded here: Download ZIP file

My session that was held on Friday was also filmed for Channel 9. I’ll add a link to the video when it’s uploaded there.

Update: the session is now available on Channel 9. you can watch it here:

http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/Push-notifications-live-tiles-and-background-agents-for-Windows-Phone-7

If you have any questions on implementing push notifications, live tiles or background agents send me a tweet on @geertvdc or comment on this post.

Happy Coding

Geert van der Cruijsen

        

Thursday February 16th

09:15 – 10:45 – Keynote

Ofcourse I’m going to visit the keynote session that kicks off the event. This year the keynote is presented by 5 speakers: Ben Riga, Brian Keller , Serge van Schie, Theo Rinsema, Bryan Agnetta

11:05 – 12:20 – What’s new in ASP.NET 4.5 + Visual Studio 11 – Mads Kristensen

I haven’t seen that much of asp.net 4.5 since my focus lately was on Windows Phone and Windows 8 development so I’m really curious on what Mads is going to show us here.

13:30 – 14:45 – Deep Dive into Metro – Bryan Agnetta

Since I already am quite up to date with Windows Phone Localization I’m skipping Ben Riga’s session on that subject (which is really important to know if you’re developing WP7 apps!) and going to widen my horizon to become a better “DeVigner” by improving my design skills in the session of Bryan Agnetta.

15:05 – 16:20 – A look at ASP.NET MVC 4 – Scott Guthrie

When “the Gu” is speaking on an event it’s not an option not to visit at least 1 of his sessions. I’m a big fan of ASP.NET MVC since the first technical preview but haven’t seen that much of the 4th version except for some videos from BUILD. Really looking forward on hearing what Scott has to say on this subject.

16:30 – 17:45 – Scott Guthrie Unplugged – Scott Guthrie

Really looking forward on this session. Scott is a reall “Gu”ru and I’m really curios on seeing him answer questions from the audience. I have some questions for him on his vision on the future of mobile and the web. Let’s see if he can answer it Another session that I would like to visit but is at the same time is: Fully leverage the Microsoft application platform with BizTalk, Server AppFabric and Azure AppFabric. Ah well I’ll watch that one on channel 9 later then.

GeekNight

19:15 – 19:55 – Beginnen met ontwikkelen voor Windows Phone – Maarten Struys

This session is in the same room as my session that held is right after this session. Ok I’m not a starting wp7 developer but It’s good to see this session so I can adapt my session to this one if a lot of people are staying after this session for my session.

20:05 – 20:45 – Push notifications en live tiles – Geert van de Cruijsen

Time to do my own session. In this session I’ll give an introduction to push notifications and live tiles in your Windows Phone applications. If you are a starting wp7 developer this is the session for you. If you are a more advanced wp7 developer come to my session on friday on the Techdays on the same subject.

20:55 – 21:35 – Stand Up Windows Phone Development – Fons Sonnemans

After my session Fons Sonnemans is doing the next session in the WP7 track. He’s going to build an application in 1 hour. Let’s see what he’s up to.

Friday February 17th

09:15 – 10:30 – Going mobile with ASP.NET MVC 4 – Erik van Appeldoorn

The debate on building native phone applications vs mobile web is an ongoing discussion. Let’s see what Erik can do using ASP.NET MVC4 for the mobile platform. Another session that got my attention is a session from my collegue Jesse Houwing: Code review features in TFS vNext so there is a chance I’m visiting that one instead.

10:50 – 12:05 – Building Services for Phone / Tablet using WebAPI – Matt Milner

This session can be really usefull if you are planning on doing push notifications for a mobile app for example or if you just want to create an app using your own created API for your website. WebAPI is a really nice new framework by Microsoft which I don’t know that much about right now. hopefully this session will give me some good info on that.

13:15 – 14:30 – Laat je Windows Phone 7 app tot leven komen met push notifications, live tiles en background agents – Geert van de Cruijsen

It’s time again to do a presentation myself. This session will explain all the ins and outs of push notifications, live tiles and background agents in your wp7 applications. If you don’t like Windows Phone visit my colleague Christiaan Veeningen’s session: Bouw Metro apps met Javascript voor Windows 8. In our original planning I was going to do this presentation together with him but doing 3 sessions was a bit to much for me to prepare for.

14:50 – 16:05 – Windows Phone Metro Design Session End-to-End – Tom Eddings, Dave Crawford

Another UX session I’m going to visit. My last project building Windows Phone applications where I worked together with Avanade UX colleagues really got me interested in the design parts so I’m exited on what Tom and Dave are going to tell us.

16:15 – 17:30 – Unit testing your Windows Phone 7 applications – Olaf Conijn

Picking a level 400 session as the last session on a Friday a smart choice? We’ll see. I already have experience in unit testing wp7 applications but I’m sure Olaf has some really nice tips for us.

So this is my list of sessions I’m visiting at the TechDays. Please let me know which ones you are visiting in the comments

Geert van der Cruijsen

        

From now on the latest version + source can be found on http://wp7emuskinswitcher.codeplex.com/

With the move to Codeplex I also upgraded the version to 1.2. here is the Changelog:

• Fixed a bug where the skin switcher broke the back button of the emulator when people used certain custom skins before they used the skin switcher.
• Added working volume, camera + power buttons on the Lumia 800 skins
• Added a White Lumia 800 skin made by Derek Orr
• Added a Zune HD skin made by Ben Pinkerton

Enjoy!

Geert van der Cruijsen

        

Up untill now I was using the PhoneFX BindableApplicationBar but I really disliked the problem that you can’t bind the visibility property of the ApplicationBarButtons to hide or show them when you need them. A common example where you use this is in a Scenario with a MultiSelectList on a page where you want to be able to hide the “Remove” button as long as you didn’t select an item yet and hide the “Select” button when you are already in the selection mode. This week I was reading a blogpost on Windows Phone Geek about the AdvancedApplicationBar and I read that this new ApplicationBar solution did support binding the Visibility of ApplicationBarButtons so it was time to put this one to the test.

In this post I’ll walk you through my the code I produced to get a nice MultiSelectList control (from the silverlight wp7 toolkit ) working with the applicationbar without writing any codebehind. I used MVVM light for this sample so an empty MVVM light project with references added to the Silverlight Toolkit and the SH WP ApplicationBar will be my starting point.

The idea is to build an application showing a MultiSelectList with some messages that you can select and delete by using the ApplicationBarButtons just as the build in Mail application does.

Lets first start of building some of the plumbing to get this application going. We’ll create a Message Class that is going to be our Class containing the information for each message. We’ll keep this Class plain and simple:

   1: public class Message

   2: {

   3:     public string Sender { get; set; }

   4:     public DateTime Date { get; set; }

   5:     public string Content { get; set; }

   6: }

We’ll also need a property in the ViewModel to expose a list of these Messages which we can fill with dummy data and that can be bound in the MultiSelectList. We’ll create a property in the ViewModel called Messages and will fill these for this small example in the constructor of the MainViewModel.

   1: /// <summary>

   2: /// Initializes a new instance of the MainViewModel class.

   3: /// </summary>

   4: public MainViewModel()

   5: {

   6:     for (int i = 0; i < 10; i++)

   7:     {

   8:         Message m = new Message();

   9:         m.Sender = "Sender " + i.ToString();

  10:         m.Date = DateTime.Now.AddHours(i);

  11:         m.Content = "This is a sample message " + i.ToString();

  12:         Messages.Add(m);

  13:     }

  14: }

  15:  

  16: /// <summary>

  17: /// The <see cref="Messages" /> property's name.

  18: /// </summary>

  19: public const string MessagesPropertyName = "Messages";

  20:  

  21: private ObservableCollection<Message> _messages = null;

  22:  

  23: /// <summary>

  24: /// Sets and gets the Messages property.

  25: /// Changes to that property's value raise the PropertyChanged event. 

  26: /// </summary>

  27: public ObservableCollection<Message> Messages

  28: {

  29:     get

  30:     {

  31:         return _messages;

  32:     }

  33:  

  34:     set

  35:     {

  36:         if (_messages == value)

  37:         {

  38:             return;

  39:         }

  40:  

  41:         _messages = value;

  42:         RaisePropertyChanged(MessagesPropertyName);

  43:     }

  44: }

Now the data is there it’s time to create the UI. One of the best parts of using MVVM is creating the UI in Expression Blend so lets use that. We’ll add a MultiSelectList Control to the page (it’s a control that comes in the silverlight toolkit for wp7) and bind the itemsource to the Messages property. We’ll also add the AdvancedApplicationBar from the SH WP library to the page and create 2 buttons to be used on the ApplicationBar, a select button and a delete button. Set the size of the MultiSelectList to Autosize –> full and make sure the AdvancedApplicationBar control is located in the Layoutroot. Set the text of the 2 ApplicationBarButtons to Select and Remove and also select an image for the buttons.

When you rebuild now you’ll see 10 lines of code in the multiselect list. Change the ItemTemplate for the MultiSelectList by creating an empty template and adding 3 textboxes to them binding them to our 3 fields in our Message Class: Sender, Date and Content. Give all of them a pretty style and we’re ready to go on.

Your Xaml for the contentgrid should look like this

   1: <Grid x:Name="ContentGrid"

   2:       Grid.Row="1" Height="537" VerticalAlignment="Top">

   3:     <toolkit:MultiselectList ItemsSource="{Binding Messages}" ItemTemplate="{StaticResource MessageTemplate}"/>

   4:     <Sh:AdvancedApplicationBar>

   5:         <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png"/>

   6:         <Sh:AdvancedApplicationBarIconButton Text="Remove" IconUri="/Images/ApplicationBar.Delete.png"/>

   7:     </Sh:AdvancedApplicationBar>

   8: </Grid>

The Xaml for the ItemTemplate looks like this

   1: <phone:PhoneApplicationPage.Resources>

   2:     <DataTemplate x:Key="MessageTemplate">

   3:         <StackPanel>

   4:             <TextBlock TextWrapping="Wrap" Text="{Binding Sender}" Style="{StaticResource PhoneTextLargeStyle}"/>

   5:             <TextBlock TextWrapping="Wrap" Text="{Binding Date}" Style="{StaticResource PhoneTextAccentStyle}"/>

   6:             <TextBlock TextWrapping="Wrap" Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}"/>

   7:         </StackPanel>

   8:     </DataTemplate>

   9: </phone:PhoneApplicationPage.Resources>

When we run our application now the output should be similar to this. You can tap on the left side of the screen to select items in the list just like you can in the build in mail application.

It is pretty weird to have the Remove button visible when you’re not in selection mode of the MultiSelectList and the same thing goes for the Select button that’s still visible when the MultiSelectList is in selectionMode. To fix this we’ll bind the Visibility property of these ApplicationBarButtons to a boolean property that is also 2 way bound to the IsSelectionEnabled property of the MultiSelectList.

To do this we first need to add a boolean property to the ViewModel called IsInSelectionMode

   1: /// <summary>

   2: /// The <see cref="IsInSelectionMode" /> property's name.

   3: /// </summary>

   4: public const string IsInSelectionModePropertyName = "IsInSelectionMode";

   5:  

   6: private bool _isInSelectionMode = false;

   7:  

   8: /// <summary>

   9: /// Sets and gets the IsInSelectionMode property.

  10: /// Changes to that property's value raise the PropertyChanged event. 

  11: /// </summary>

  12: public bool IsInSelectionMode

  13: {

  14:     get

  15:     {

  16:         return _isInSelectionMode;

  17:     }

  18:  

  19:     set

  20:     {

  21:         if (_isInSelectionMode == value)

  22:         {

  23:             return;

  24:         }

  25:  

  26:         _isInSelectionMode = value;

  27:         RaisePropertyChanged(IsInSelectionModePropertyName);

  28:     }

  29: }

When we have this property we can bind the property to the IsSelectionEnabled property of the MultiSelectList. For some reason this can’t be done in Blend since the DataBinding button is greyed out but coding it in Xaml does work. The binding looks like this in Xaml

   1: <toolkit:MultiselectList ItemsSource="{Binding Messages}" ItemTemplate="{StaticResource MessageTemplate}" IsSelectionEnabled="{Binding IsInSelectionMode, Mode=TwoWay}"/>

The Visibility property of the ApplicationBarButtons isn’t a boolean type so we’ll need a converter to convert the boolean to a Visibility Property. I’m using 2 converters here. 1 is converting the boolean value True to Visibility.Visible and the other converter is also an inverter and is converting True to Visibility.Collapsed.

   1: /// <summary>

   2: /// Converts a boolean to Visibililty

   3: /// </summary>

   4: ///[ValueConversion(typeof(bool), typeof(Visibility))]

   5: public class BooleanToVisibilityConverter : IValueConverter

   6: {

   7:     #region IValueConverter Members

   8:  

   9:     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  10:     {

  11:         Visibility result = Visibility.Collapsed;

  12:  

  13:         bool val;

  14:  

  15:         if (value != null &&

  16:             bool.TryParse(value.ToString(), out val))

  17:         {

  18:             result = val ? Visibility.Visible : Visibility.Collapsed;

  19:         }

  20:  

  21:         return result;

  22:     }

  23:  

  24:     public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  25:     {

  26:         //You can't convert back

  27:         return null;

  28:     }

  29:  

  30:     #endregion

  31: }

  32:  

  33:  

  34: /// <summary>

  35: /// Converts a boolean to Collapsed Visibililty

  36: /// </summary>

  37: ///[ValueConversion(typeof(bool), typeof(Visibility))]

  38: public class BooleanInverterToVisibilityConverter : IValueConverter

  39: {

  40:     #region IValueConverter Members

  41:  

  42:     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  43:         {

  44:             Visibility result = Visibility.Collapsed;

  45:  

  46:             bool val;

  47:  

  48:             if (value != null &&

  49:                 bool.TryParse(value.ToString(), out val))

  50:             {

  51:                 result = val ? Visibility.Collapsed : Visibility.Visible;

  52:             }

  53:  

  54:             return result;

  55:         }

  56:  

  57:         public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

  58:         {

  59:             //You can't convert back

  60:             return null;

  61:         }

  62:  

  63:         #endregion

  64:     }

Lets Bind the boolean value using the converter to the ApplicationBarIcons. Your Xaml should look like this:

   1: <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanInverterToVisibilityConverter}}"/>

   2: <Sh:AdvancedApplicationBarIconButton Text="Remove" IconUri="/Images/ApplicationBar.Delete.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanToVisibilityConverter}}"/>

If you run the application again you should be able to see the icons showing up and hiding at the correct times now.

To finish this sample and blogpost up we want the Select button to put the MultiSelectMode in selection mode and the remove button should remove the selected items. Lets start with the Select button. We’ll create a RelayCommand in the viewmodel that puts the MultiSelectList into selectionMode.

   1: private RelayCommand _messageListToSelectModeCommand;

   2:  

   3: /// <summary>

   4: /// Gets the MessageListToSelectModeCommand.

   5: /// </summary>

   6: public RelayCommand MessageListToSelectModeCommand

   7: {

   8:     get

   9:     {

  10:         return _messageListToSelectModeCommand

  11:             ?? (_messageListToSelectModeCommand = new RelayCommand(

  12:                 () =>

  13:                 {

  14:                     IsInSelectionMode = true;

  15:                 }));

  16:     }

  17: }

On the Select ApplicationBarButton we’ll add an EventToCommand behavior that will trigger this RelayCommand. I did this in Blend but the Xaml that is created will look like this:

   1: <Sh:AdvancedApplicationBarIconButton Text="Select" IconUri="/Images/ApplicationBar.Select.png" Visibility="{Binding IsInSelectionMode, Converter={StaticResource BooleanInverterToVisibilityConverter}}">

   2:     <i:Interaction.Triggers>

   3:         <i:EventTrigger EventName="Click">

   4:             <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding MessageListToSelectModeCommand, Mode=OneWay}"/>

   5:         </i:EventTrigger>

   6:     </i:Interaction.Triggers>

   7: </Sh:AdvancedApplicationBarIconButton>

Running the application again will show us that using the select button puts the MultiSelectList in selectionmode so that part is finished. It only took 1 line of code in the relaycommand.

Removing the items is a bit more work since you can’t do a 2 way binding on the SelectedItems of a MultiSelectList because it is not a dependency property. The best way to get this working is setting up a property in the Viewmodel that is going to contain the selected items and update this list every time the selectionchanged event is fired by another EventToCommandBehavior that triggers a RelayCommand called SelectedMessagesChangedCommand. The SelectedMessagesChangedCommand will update the ViewModel property that will later be used to delete the items.

   1: /// <summary>

   2: /// The <see cref="SelectedMessages" /> property's name.

   3: /// </summary>

   4: public const string SelectedMessagesPropertyName = "SelectedMessages";

   5:  

   6: private ObservableCollection<Message> _selectedMessages = null;

   7:  

   8: /// <summary>

   9: /// Sets and gets the SelectedMessages property.

  10: /// Changes to that property's value raise the PropertyChanged event. 

  11: /// </summary>

  12: public ObservableCollection<Message> SelectedMessages

  13: {

  14:     get

  15:     {

  16:         return _selectedMessages;

  17:     }

  18:  

  19:     set

  20:     {

  21:         if (_selectedMessages == value)

  22:         {

  23:             return;

  24:         }

  25:  

  26:         _selectedMessages = value;

  27:         RaisePropertyChanged(SelectedMessagesPropertyName);

  28:     }

  29: }

  30:  

  31: private RelayCommand<IList> _selectedMessagesChangedCommand;

  32:  

  33: /// <summary>

  34: /// Gets the SelectedMessagesChangedCommand.

  35: /// </summary>

  36: public RelayCommand<IList> SelectedMessagesChangedCommand

  37: {

  38:     get

  39:     {

  40:         return _selectedMessagesChangedCommand

  41:             ?? (_selectedMessagesChangedCommand = new RelayCommand<IList>(ExecuteSelectedMessagesChangedCommand));

  42:     }

  43: }

  44:  

  45: private void ExecuteSelectedMessagesChangedCommand(IList parameter)

  46: {

  47:  

  48:     SelectedMessages = new ObservableCollection<Message>(parameter.Cast<Message>());

  49: }

Make sure the EventToCommand behavior is passing the SelectedItems as a command property. This can all be done in Blend but here is the Xaml that should be generated by Blend

   1: <i:Interaction.Triggers>

   2:     <i:EventTrigger EventName="SelectionChanged">

   3:         <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding SelectedMessagesChangedCommand, Mode=OneWay}" CommandParameter="{Binding SelectedItems, ElementName=multiselectList}"/>

   4:     </i:EventTrigger>

   5: </i:Interaction.Triggers>

Now we have the selected messages in our viewmodel we can use our last RelayCommand called DeleteSelectedMessagesCommand to remove the selected messages.

   1: private RelayCommand _deleteSelectedMessagesCommand;

   2:  

   3: /// <summary>

   4: /// Gets the DeleteSelectedMessagesCommand.

   5: /// </summary>

   6: public RelayCommand DeleteSelectedMessagesCommand

   7: {

   8:     get

   9:     {

  10:         return _deleteSelectedMessagesCommand

  11:             ?? (_deleteSelectedMessagesCommand = new RelayCommand(

  12:                 () =>

  13:                 {

  14:                     foreach (Message m in SelectedMessages)

  15:                     {

  16:                         Messages.Remove(m);

  17:                     }

  18:                 }));

  19:     }

  20: }

This needs to be triggered again from an EventToCommand behavior attached to the remove ApplicationBarButton.

   1: <i:Interaction.Triggers>

   2:     <i:EventTrigger EventName="Click">

   3:         <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding DeleteSelectedMessagesCommand, Mode=OneWay}"/>

   4:     </i:EventTrigger>

   5: </i:Interaction.Triggers>

We can run our application again and when you press the remove button the selected items should be removed.

This sample proves the SH WP AdvancedApplicationBar is working pretty good and it proves it has features that I didn’t get to work in the BindableApplicationBar for example the Visibility of the ApplicationBarButtons. I think I’m going to use this ApplicationBar more often in my projects.

Hopefully this sample is usefull for you to see what the SH WP ApplicationBar is up to or just to get an impression on how to work with a bit more advanced ApplicationBar scenario’s using MVVM.

Sourcecode for the sample project can be downloaded here

Happy Coding

Geert van der Cruijsen

        

Setup could not install the following components:

• Microsoft XNA game Studio 4.0 Refresh
• Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0

We retried installing the SDK after a full uninstall and a reboot but this wouldn’t help. This error kept appearing. In the end my idea was that we didn’t need XNA any time soon so we would just let this rest and see if everything was still working. Visual studio 2010 opened up fine, Blend  was working All the templates for a  phone project were there so everything seemed ok.

A few hours later when my colleague opened up an already made project from source control and tried to build the project she informed me that she was getting build errors so I had a look. The exception was

The Target “GetCopyToOutputDirectoryContentProjectItems” does not exist in the project

I never heard of this error before and checked if the project was still building on my machine. Ofcourse it was so the problem was somewhere in her environment. I didn’t immediately make the connection of the XNA installation failure but after some searching I found out that it had to do with some of the MSBUILD .target files that Windows Phone 7.1 projects use that have dependencies on the XNA Game studio.

Getting XNA Game studio installed properly seemed the solution so we tried to get that fixed. The solution is in getting the XNA studio installed without use of the bootstrapper that was crashing and Aaron Stebner made a good post on how to do that here.

Follow all the steps in Aarons guide (the file from step 9 didn’t exist for me so I skipped it) and after this the project would build again.

Everyone happy and back to coding Hopefully this post can help someone else when they run into the same problems as we did because we’ve spend to much precious time to fix this.

Geert van der Cruijsen

        

Version 1.1 contains a total of 23 emulator skins from popular devices as the HTC Titan, HTC Radar, HTC Trophy, HTC Mozart, HTC HD7, Samsung Focus S, Samsung Omnia W, Samsung Omnia 7, Samsung Focus, Fujitsu IS12T in green and black, ZTE Tania, Nokia Lumia 710 and the Nokia Lumia 800.

Big thanks to Jeff Wilcox, Jeff Blankenburg, Danijel Malik, Georg Kalus and Pedro Lamas for adding their skins to the application.

You can download version 1.1 here now:

Update! version 1.2 is released and the project is moved to codeplex. you can find the newest version here: http://wp7emuskinswitcher.codeplex.com/

Total list of skins:

• Default skin – Microsoft
• Fujitsu IS12T Green – Geert van der Cruijsen
• Fujitsu IS12T Black – Geert van der Cruijsen
• Generic unbranded skin – Jeff Wilcox
• HTC Arrive (7pro) – Jeff Blankenburg
• HTC HD7 – Geert van der Cruijsen
• HTC Mozart – Danijel Malik
• HTC Radar Silver – Geert van der Cruijsen
• HTC Titan – Geert van der Cruijsen
• HTC Trophy – Geert van der Cruijsen
• Nokia Lumia 710 Black Blue – Geert van der Cruijsen
• Nokia Lumia 710 Black Yellow – Geert van der Cruijsen
• Nokia Lumia 710 White Black – Geert van der Cruijsen
• Nokia Lumia 710 White Blue – Geert van der Cruijsen
• Nokia Lumia 710 White Pink – Georg Kalus
• Nokia Lumia 800 Black – Pedro Lamas
• Nokia Lumia 800 Blue – Georg Kalus
• Nokia Lumia 800 Pink – Geert van der Cruijsen
• Samsung Focus – Jeff Wilcox
• Samsung Focus S – Geert van der Cruijsen
• Samsung Omnia 7 – Geert van der Cruijsen
• Samsung Omnia W – Geert van der Cruijsen
• ZTE Tania – Geert van der Cruijsen

If you created a skin or want to create a skin that’s not included and you want to get it listed in the application yet let me know and I’ll add it for you including your name and a link to your blog or website.

Here are some screenshots of newly added skins

If for some reason the application is not working and your emulator stopped working after usage of the application let me know and I’ll help you to get everything working again!

Happy coding!

Geert van der Cruijsen

        

You can download the application here: Download

Update! version 1.2 is released and the project is moved to codeplex. you can find the newest version here: http://wp7emuskinswitcher.codeplex.com/

This version is the first beta release with my first set of skins. I added 2 skins from Georg Kalus: the Blue Nokia Lumia 800 and the White/Pink Nokia Lumia 710. I’ve also included the Black Nokia Lumia 800 skin from Pedro Lamas

The complete list of skins included in the application now are:

• Default skin – Microsoft
• Nokia Lumia 710 Black Blue – Geert van der Cruijsen
• Nokia Lumia 710 Black Yellow – Geert van der Cruijsen
• Nokia Lumia 710 White Black – Geert van der Cruijsen
• Nokia Lumia 710 White Blue – Geert van der Cruijsen
• Nokia Lumia 710 White Pink – Georg Kalus
• Nokia Lumia 800 Black – Pedro Lamas
• Nokia Lumia 800 Blue – Georg Kalus
• Nokia Lumia 800 Pink – Geert van der Cruijsen

I’m planning on adding more skins in the near future but didn’t have time for it yet. If you have skins I can use please let me know by comment or on twitter

Hopefully this will make your Windows Phone 7 projects even more fun to test!

Happy Coding

Geert van der Cruijsen

        

First lets sum up what you can do by default and after that we’ll go into going beyond this and creating even better live tiles by adding multiple images or multiple texts to a live tile using the colors and fonts of your choice.

By default you can set the following properties on a live tile

• Title (shown in the bottom left)
• Count (black circle with a number between 1 and 99)
• BackGroundImage (image to show on your tile)
• BackTitle (shown in the bottom left on the backside of the tile)
• BackContent (piece of text shown on the backside of the tile)
• BackBackGroundImage (Image on the backside of the tile)

Ok this is pretty cool but what if we want to make something like Runkeeper does in their app as shown in the following picture:

So how do we generate such image on the client side in Silverlight? The trick behind all this is that you can render a user control as a WriteableBitmap and store this image in the isolated storage of your phone so you can use it as the tile BackGroundImage. The final working codesample is linked at the bottom of this post but I’ll show all code to build this example in this blogpost.

We start of creating a new Silverlight for Windows Phone project. Normally I would use MVVM but for this example I want to make it as simple as possible to focus on the tile part.

We’ll create a new UserControl called “TileControl” which is going to be used as our live tile and a “TileData” class to be used for containing the data we’ll be showing on the  live tile.

   1: public class TileData

   2: {

   3:     public string Text1 { get; set; }

   4:     public string Text2 { get; set; }

   5:     public string ImageSource { get; set; }

   6: }

Create the TileControl, set it to 173 by 173pixels and set the background to use PhoneAccentBrush so the live tile has the color the user has selected. Lets make our designers happy and open up the TileControl in expression blend so our designers (or if you are a devigner you!) can design our live tile with dynamic data.

Add a few text boxes and a image to the control so you have something like this:

   1: <Grid x:Name="LayoutRoot" Width="173" Height="173" Background="{StaticResource PhoneAccentBrush}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="24"/>

   3:     <TextBlock Margin="0,64,-17,-3" TextWrapping="Wrap" FontSize="64" HorizontalAlignment="Right" Width="70" Foreground="White"/>

   4:     <Image Margin="6,55,0,13" Width="100" HorizontalAlignment="Left"/>

   5: </Grid>

In the Data window click the icon “Create sample data from class” and select the TileData class.

Edit the sample data so we have some nice data to show. I used the following data:

   1: <CustomLiveTileExample:TileData xmlns:CustomLiveTileExample="clr-namespace:CustomLiveTileExample" 

   2: ImageSource="ApplicationIcon.png" 

   3: Text1="The first Text"

   4: Text2="9"/>

Now drag the fields from the test data window to the text and image control to bind them. After this your XAML should look like this and the design surface should already show a nice live tile with an image and 2 texts. In our code we’ll databind this control to a programmatically filled TileData object.

   1: <Grid x:Name="LayoutRoot" Width="137" Height="137" Background="{StaticResource PhoneAccentBrush}" d:DataContext="{d:DesignData /SampleData/TileDataSampleData.xaml}">

   2:     <TextBlock Height="55" Margin="4,4,3,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="White" FontSize="21.333" Text="{Binding Text1}"/>

   3:     <TextBlock Margin="0,50,-10,11" TextWrapping="Wrap" FontSize="48" HorizontalAlignment="Right" Width="70" Foreground="White" Text="{Binding Text2}"/>

   4:     <Image Margin="12,51,65,17" Width="60" Source="{Binding ImageSource}"/>

   5: </Grid>

The live tile is ready so lets head back to the main page of our application and add the logic to set the live tile. To trigger the creation of the live tile I’ve added a button on the page and attached a click event. in the button1_Click method I’ll add all code needed to create the live tile.

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

   2:         {

   3:             TileControl frontTile = new TileControl();

   4:             TileData tileData = new TileData() { ImageSource = "/ApplicationIcon.png", Text1 = "The first text", Text2 = "8" };

   5:             frontTile.DataContext = tileData;

   6:  

   7:             frontTile.Measure(new Size(173, 173));

   8:             frontTile.Arrange(new Rect(0, 0, 173, 173));

   9:             var bmp = new WriteableBitmap(173, 173);

  10:             bmp.Render(frontTile, null);

  11:             bmp.Invalidate();

  12:  

  13:             var isf = IsolatedStorageFile.GetUserStoreForApplication();

  14:             var filename = "/Shared/ShellContent/tile.jpg";

  15:  

  16:             if (!isf.DirectoryExists("/Shared/ShellContent"))

  17:             {

  18:                 isf.CreateDirectory("/Shared/ShellContent");

  19:             }

  20:  

  21:             using (var stream = isf.OpenFile(filename, System.IO.FileMode.OpenOrCreate))

  22:             {

  23:                 bmp.SaveJpeg(stream, 173, 173, 0, 100);

  24:             }

  25:  

  26:             var data = new StandardTileData

  27:             {

  28:                 BackgroundImage = new Uri("isostore:" + filename, UriKind.Absolute)

  29:             };

  30:  

  31:             ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), data);

  32:         }

First we’ll create a TileControl object called frontTile, then we’ll fill it with our tileData by creating a TileData object and setting the DataContext to tileData. After this we’ll create a WriteableBitmap and set it to 173 by 173 pixels. Well use the Render method to render the usercontrol as a bitmap.

After that we’ll check if the directory in the isolated storage exists and if it doesn’t we’ll create it. After that we’ll open the tile file and use the SaveJpeg method to save the WritableBitmap as a .jpg file (bit of a shame you can’t do png that’s why we’ve set the background color to the PhoneAccentColor). after saving the image the only thing we need to do is Call Create on the ShellTile and we’re done.

Lets run the app, press the button and there it is, our dynamically created livetile.

Download Sample project:

Happy coding!

Geert van der Cruijsen

        

how to get started

Download the silverlight toolkit for windows phone and the Windows Phone Silverlight toolkit behavior extensions and install both libraries on your system.

After the installation start Expression Blend and create a new Windows Phone 7 Project.

In the projects window right click “References” and select “Add Reference”

Select the Microsoft.Phone.Controls.Toolkit.dll file and press “Open”

Select the PhoneToolkit.Extensions.Behaviors.dll and press “Open”

You should now have Microsoft.Phone.Controls.Toolkit.dll and PhoneToolkit.Extensions.Behaviors.dll in your References list.

Before the transition behaviors work you will have to change 1 thing in the code because that is just how the Silverlight Toolkit Transitions work. so open App.xaml.cs and locate the following Class: “PhoneApplicationFrame”

And Change it to “TransitionFrame”

Build the project and after building the new behaviors will be added to the Assets window.

You can drag and drop the new behaviors on your PhoneApplicationPage to enable the tilt effect or enable a page transition. In the Example below I’ve added the EnableTiltEffectBehavior to enable the tilting effect on every clickable usercontrol and I’ve added a TransitionTurnstileInBehavior to show a turnstile animation on entering the page and a TransitionTurnstileOutBehavior to show a turnstile animation on leaving the page.

The transition behaviors have 2 properties where you can set the animation for forward and backward transitions. by default the most common animations are selected.

To test if everything is working drag a button on the content grid and add a second page to your application. The button should now have a tilt effect and you should have turnstile animations when navigating between the pages.

If you want to disable the tilt effect for a specific usercontrol you can add the SuppressTiltEffectBehavior on that control and the control will no longer have a tilt effect.

I’ve added a complete sample application showing all the transitions and tilt effect behaviors on the codeplex site of the Windows Phone Toolkit Behavior Extensions

If anything isn’t working contact me on twitter or post a comment

Geert van der Cruijsen

        

This week I started working on a new project with a designer and he asked me how to insert the page transitions on a windows phone application page and I showed him that you’ll have to add a piece of XAML to your code and the page transitions will work. He asked me “Can’t I do this in the designer mode without touching any code?” I didn’t have any right answer for him so that’s why I’ve spend part of my weekend to build some behaviors that can be used to drag this functionality on pages in Expression Blend.

There are behaviors for every type of transition available in the silverlight toolkit. for each transitiontype there is an “in” and “out” behavior for entering and leaving the page. Besides the transition behaviors I’ve also created a behavior to turn the tilteffect on or off

• EnableTiltEffectBehavior
• SuppressTiltBehavior
• TransitionRollInBehavior
• TransitionRollOutBehavior
• TransitionRotateInBehavior
• TransitionRotateOutBehavior
• TransitionSlideInBehavior
• TransitionSlideOutBehavior
• TransitionSwivelInBehavior
• TransitionSwivelOutBehavior
• TransitionTurnstileInBehavior
• TransitionTurnstileOutBehavior

You can download the behaviors here: (important: you also need the silverlight toolkit for this to work)

http://phonetoolkitbehavior.codeplex.com/

On the codeplex site you’ll find a msi release containing the dll that you can include in your project to use these behaviors and I’ve also included a sample application. I’ll also upload the sample application to the marketplace so you can easily test out the performance etc without any trouble.

For a compete tutorial check this blogpost.

This is currently the first release so every feedback is welcome. please let me know by adding a comment here or contact me on twitter

Geert van der Cruijsen

        

If you like my template it’s a free template for WordPress called “Twenty Eleven 1.2” and you can just download it from the template gallery in WordPress.

Enjoy!

        

This is basic functionality but when I asked around I noticed most people don’t know about this feature so that’s why I wrote this blogpost.

By default in Expression Blend your app will show using the dark theme and the blue accent color. To see how your app looks in white just open the Device window by clicking “Window” –> “Device”

When the device window is opened you can switch to the light or dark theme by clicking one of the icons. You can also select the accent color from the pulldown box on the right.

The result:

Happy Coding! Designing!

Geert van der Cruijsen

        

Implementing the control is easy by just installing the SDK, create an account, adding the control to your page and filling in the applicationid and the adunitid. if you still need a guide this one explains all the details:

http://blogs.msdn.com/b/urmila/archive/2011/03/10/displaying-ads-on-windows-phone-7-apps-the-basics.aspx

So the control is added to the page and you’re ready to go. If you followed all the instructions the ads should show up fine. Not for you?

I had the same problem when I was testing my application. I did most of my testing in the emulator and the ads would show up fine right there. When I started testing on my phone I noticed that only the ad placeholder was shown for really short time and after that the ad was hidden. Trying to find out what the differences could be between my phone and the emulator my first thoughts were the Culture of the phone since my phone is running in Dutch Culture nl-NL and the emulator is running en-US by default. When I switched the culture on the emulator to being Dutch the ads also stop showing there.

So what is the problem and how did I fix it?

The Pubcenter Adcontrol has a nice event called “ErrorOccured” and you can subscribe to this event to see what is happening. (or just attach the debugger and set it to break on exceptions)

   1: public MainPage()

   2: {

   3:     InitializeComponent();

   4:     adcontrol.ErrorOccurred += new EventHandler<Microsoft.Advertising.AdErrorEventArgs>(adcontrol_ErrorOccurred);

   5: }

   6:  

   7: void adcontrol_ErrorOccurred(object sender, Microsoft.Advertising.AdErrorEventArgs e)

   8: {

   9: }

In the adcontrol_ErrorOccurred eventhandler you can log your error the adcontrol is throwing or handle it the way you want to. The error I kept getting when using the Dutch Culture was:

Microsoft.Advertising.Mobile.Shared.AdException – No ad available.

My guess was that this was happening because there aren’t any Dutch ads yet so I tried to change the settings of the adcontrol by changing the CountryOrRegion, Language and even the Latitude and Longitude attributes to somewhere in the United States but this doesn’t help. I made a ticket at the Pubcenter helpdesk and they told me a new algorithm just went live and it can be that there aren’t to many ads yet so it’s possible to get a disappearing ad control once in a while when you’re running less common cultures. Trying to change the country or culture DOES NOT WORK so you’ll just have to wait (It’s not like Admob is a better alternative since that one isn’t working at all)

I would encourage everyone to just leave the ad in and the requests to the Pubcenter servers will show that there is a lot of space for ads to be sold so advertisers will jump in and use this space.

Nokia seems the first to jump in because the last few days I seem to receive Nokia Lumia ads when using a Dutch culture

Oh btw this method also works when you’re having other issues with your ad control ofcourse. just check the exception to see what’s going on. The one thing I keep forgetting every time I add the AdControl are the capabilities in the WMAppManifest.xml. when you do this you’ll get another AdException:

Microsoft.Advertising.Mobile.Shared.AdException – Required capabilities are missing from manifest (WMAppManifest.xml): ID_CAP_NETWORKING, ID_CAP_PHONEDIALER, ID_CAP_IDENTITY_USER, ID_CAP_MEDIALIB, ID_CAP_WEBBROWSERCOMPONENT.

Geert van der Cruijsen

        

Here is the story on how it all went down:

Since PinPin’s launch last week I’ve been loaded with feedback from people, most of them were positive but there was also a large group of people who weren’t able to get ATM locations. At first I didn’t have any idea how this was possible since I had tested at many locations in the Netherlands and had asked several colleagues to test the app and it worked for everyone.

Luckily  lots of people were able to find the feedback form in my app and when I received a mail from Marco who had a dev unlocked phone and was receiving the errors I found my chance to find out what was causing the bug. I made a version 1.1 and submitted it to the marketplace (that wasn’t smart because that’s why it took so long to get 1.2 out) but also mailed it to Marco so he could test. 1.1 had the option to save the errors and send a mail with the Error messages and a stacktrace so I could see what was going wrong.

With the error report I received from Marco I could see it was something in the response from the webservice I’m calling to get the ATM data but still couldn’t see what the error was exactly. I again added more logging to the app and asked Marco to test again. This time I could compare my request and response from the server to his and then I found out: The Dutch regional settings were screwing things up. Ofcourse this is a major concern for an app that is only used in the Netherlands

I fixed the bug but had to wait untill version 1.1 had passed certification before I could submit 1.2 Wednesday night 1.1 was approved and I immediately submitted 1.2. Today I received another mail from Microsoft that 1.2 also passed certification. From now on everyone should be able to use PinPin!

If you find any bug in version 1.2 please let me know and I’ll try to fix it asap again.

It can take a while before you’ll get the 1.2 update notification from your phone but you could also manually uninstall your current PinPin installation and reinstall from the marketplace you’ll download version 1.2.

Big thanks to Marco and everyone else who has send feedback concerning this bug. Hopefully you can enjoy PinPin now and if you do don’t try to rate and review the app, it only takes a few seconds!

Oh and if you didn’t have PinPin yet, you can download it here:

Geert van der Cruijsen

        

At this moment PinPin only works if you are located in the Netherlands because there is no worldwide ATM location data available. I’m still looking for this data so if someone knows where to get this please let me know.

Below are some screenshots of the application:

PinPin is available for FREE in the Windows Phone marketplace. download it by clicking the button below:

Special Thanks to Christiaan Veeningen for telling me to build this app

If like or dislike the app please let me know by rating the app or by submitting a review. You can also contact me through twitter @geertvdc or leave a comment here on my blog.

This is currently the first release of PinPin. I have more plans for the app in the future, here is a roadmap of what to come:

• Add Dutch language
• Get Directions (Will have to wait for Mango)
• Add more Bank logo’s
• Add more countries
• Review Comments I get from you!

Hopefully you’ll enjoy this new app!

Geert van der Cruijsen

        

After uploading my .xap file the app hub told me the “NeatralResourceLanguage” attribute was missing with the following error:

The [NeutralResourceLanguage] attribute is missing on the entry assembly. (2003)

Not sure what this error means I started looking in Visual Studio. and found the solution for the problem.

• In Visual Studio 2010 rightclick your project and choose properties
• At the application tab click the “Assembly information…” button
• Fill the Neutral Language in the popup
• Press ok!
• You’re ready to go!

It seems that the new App hub Checks up on more things than the old App hub did. The neutral language is probably something a lot of people will forget so hopefully this helps others who are receiving this error.

The Assembly information can also be changed manually the following way:

• Open the properties directory in your WP7 project
• Open the AssemblyInfo.cs file
• Add the following line at the end of the file:

[assembly: NeutralResourcesLanguage("en-US")]

using System.Resources;

Geert van der Cruijsen

        

I’ll try to update this post when I bump into stuff I didn’t write about yet.This post isn’t about describing all new stuff since there are already dozens of other great blog posts about that but I’ll try to write my opinions about how these features are working out or what I am still really missing in Mango.

Lots of small features that make your life easier:

One of the things I enjoy the most about Mango are the small things that really annoyed me with the 7.0 release of Windows Phone 7, for example the shutdown button that automatically turned of your phone even when the phone is locked. Now in Mango you have to slide down after pressing the power button so no more turning off your phone by accident. Also there is an option to set the pin timeout a bit longer so you don’t have to type in your pin every time you want to use your phone (15 minutes is max when you have policies applied).

One small feature I didn’t read about but seems missing is setting up the mail sync times. On my old phone I used to sync mail automatically with push mail between 7:00 and 23:00 so my phone wouldn’t make so much noise when it’s next to my bed when I’m sleeping. I haven’t found this feature so I think this is a big miss for the Mango release.

More Social:

Facebook integration was already great in 7.0 but it just got even better. The threading functionality sounds great but for some reason with US/English and Dutch live accounts something doesn’t seem to work. I really can’t wait for this to start working because seeing this in the movies is so nice!

The “Me” live tile became a lot more useful in Mango because you can get messages in the tile about new updates you have on Facebook. also when clicking on the tile you can use Facebook check in with only a few finger presses.

The use of groups is also added in Mango but I haven’t used this yet. I can keep up with my social updates but maybe this will change when twitter will start working in the retail version of Windows Phone 7.1 (In the Mango Beta twitter integration is not yet available).

Other integration will also be available like LinkedIn but this doesn’t seem to work for me in the Beta either.

Dutch Language:

Up until now I only had the English language available which is ok if you only type in English. Since 50% of my communication is in Dutch I really enjoy the added Dutch dictionary added in Mango!

Bing!

Before Mango I can’t say I actually used the Bing button other then pressing it by accident. but now 4 new cool features are added that seem to work really good. One of the features that I was really looking forward to is “Bing Vision”. With Bing Vision you can scan barcodes, qr codes, text but also books, cd’s and dvd’s. When you can a book you can automatically open apps like amazon to order this book or get more info about the book. Really great!

Besides Bing Vision there is also a button to listen to music like Shazam did in 7.0. Now this feature is build in and is working pretty good. There is also a “Nearby” feature added to Bing to get nearby restaurants, things to see, hotspots etc but there is no Dutch content yet so I only get the nearest locations in Germany….

The last option that is added to Bing is the voice to text search. but I don’t really see the big use of this. when I tested it it made a lot of mistakes and in the same time I could write it.

IE9:

What can I say… the old browser in wp7 was a disaster. All other mobile browsers were far superior but now IE9 mobile uses the exact same rendering engine as the desktop version so it is a great improvement. It can render HTML5. has more screen space because the address bar is moved to the bottom (Would hope there would be an option to hide it though to get even more space when reading for example). also when browsing in landscape mode you can now use the address bar which wasn’t possible in 7.0.  You can now also pin websites to your homescreen for fast access to certain websites you use often.

7.1 apps:

I have seen a lot of movies and demo’s about cool apps using Mango features but there is no possibility to test those myself except for writing your own apps of course (which I will do!) I do have really high expectations about these apps and all the new features

To do:

One major issue a lot of people were missing are tasks but now this is added to your calendar hub and can be synced with exchange.

Games hub:

I’ve read a lot about new features in the games hub and the integration with Xbox live but since my Xbox Gamer tag live id is Dutch it’s not possible to use this yet. The list of games is cleaned up though and is looking a lot better than it did in 7.0

What is not in but needs to be in?

The one super major thing I really need is Tethering. I can understand not all providers can appreciate this feature but I used it on windows mobile 6.5 and now with the same provider I can’t use it anymore. that’s a bit shame!

the other thing I already mentioned and that is setting up times to sync your stuff and times it shouldn’t but it seems I’m the only one wanting this feature

Loads more is in!

Steve Balmer promised us 500 new features so I only touched on this a little but but I hope you enjoyed reading my first opinions about Mango and the Beta. I see a bright feature for WP7

        

first of all of course is a demo. You can can check it here: http://www.vdcruijsen.net/demo/jquerycarousel/carouseldemo.html

so how does this work? We’ll start with the HTML used for the carousel:

<div id="carousel">

    <div class="carouselbody">

        <ul class="carouselcontainer">

            <li class="page"><div style="width:400px; height:300px; background-color:Green">test tab 1</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Red">test tab 2</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Orange">test tab 3</div></li>                           

            <li class="page"><div style="width:400px; height:300px; background-color:Blue">test tab 4</div></li>

        </ul>

    </div>

    <ul class="pager">

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

        <li><a class="pagerpage" href="#">&nbsp;</a></li>

    </ul>

</div>

The HTML is actually pretty easy, The first div is a container with an id called carousel so the script knows what belongs to the carousel and what not. you can set a height and width on this div to size your carousel. The carousel div contains 2 main parts. the carouselbody a container for all the carousel pages and the pager where you can define your pager links. this pager can also be put before the carouselbody if you want the pager or tabs above your pages.

The carouselbody has a unordered list containing all the actual pages. all the list items are shown have a css class called page so the script knows that inside is the content for a page. in the list item I’ve put some div with inline styling to show that you can put whatever you want inside this page list item.

the pager has links which have a pagerpage class. the script will automatically match the first available pagerpage link to the first page etc.

Below is the css I used in the demo. you can customize this to set pictures for the paging mechanism or set heights, colors etc. this current css is just an example. (some display elements are needed though, its best to start of with the supplied css and change it to your likings.)

#carousel { height: 400px; overflow:hidden; }

#carousel .carouselbody { float: left; width: 400px; height: 360px; overflow: hidden; position: relative; background-color:#212020;}

#carousel .carouselcontainer { list-style: none; padding: 0px; margin: 0px;  position: absolute; left: 0; top: 0; }

#carousel .carouselcontainer li{ float: left; margin: 0px ; border-width: 0px;}

#carousel .pager { overflow:hidden; list-style: none; clear: both; }

#carousel .pager li { float: left; }

#carousel .page

{

    display:none;

}

#carousel .currentpage

{

    display:block;

}

#carousel .pagerpage

{

    margin-left:2px;

    background-image:url('/Content/images/pager2.png');

    width: 20px;

    height: 20px;

    display:block;

    text-decoration:none;

}

#carousel .currentpagerpage

{

    background-image:url('/Content/images/pager.png');

    text-decoration:none;

}

So now the HTML and CSS is explained its on to the actual jQuery script which makes all this magic happen. You only need 1 line to change a div to a working carousel if you also include the other script pieces somewhere on the page. the line to add in your script that is executed on document.ready is the following:

$("#carousel").carousel();

this method will of course only work if the carousel method is available. This is added through the following code:

$.fn.carousel = function (options) {

    var defaults = {

        start: 0

    };

    var options = $.extend(defaults, options);

    $(this).find(".page:eq(" + (options.start) + ")").addClass("currentpage");

    $(this).find(".pagerpage:eq(" + (options.start) + ")").addClass("currentpagerpage");

    $(this).find(".pagerpage").bind("click", function () {

        $(this).parents(".pager").find(".currentpagerpage").removeClass("currentpagerpage");

        $(this).parents("#carousel").find(".currentpage").removeClass("currentpage");

        $(this).addClass("currentpagerpage");

        var index = $(this).parent().index();

        $(this).parents("#carousel").find(".page:nth-child(" + (index + 1) + ")").addClass("currentpage");

    });

};

the $.fn.carousel line makes the carousel method available in the rest of your jQuery code. I’ve added some options as an example to make the carousel start at a different page.

the first thing the script does is searching for the page on which it should start and adds the currentpage css class to this page so the page becomes visible. The script does the same for the active pager item.

after this the script binds click events to the pager links so the pager links can do their work when they are clicked. on each click event the current page is made invisible by removing the currentpage css class and after it puts the current page css class on the newly selected page.. that’s all

Hopefully this code is something you can use on your own website or otherwise learn from it or use pieces of it.

Geert van der Cruijsen

        

My app is almost finished and I was trying to set up the live tile and application icon. Of course I wanted to use the system color which the user has selected to display on the background of my live tile. How to do this? here is how, it is actually quite simple.

when you open your solution you’ll automatically get your background.png and applicationicon.png. both icons have a black/greyish background. like shown in the example below.

to switch the background to use the system color follow the following steps:

• Open up your background.png in any decent image editing tool like Paint.net.
• Use the magic marker to select the background

• press delete so you get a transparent background

• save the icon back to your visual studio solution.
• compile
• enjoy!

Ofcourse the next step would be to do the same for your application icon (the icon in the application list).

I tried it and it didn’t work… after some research I found out that this is for Microsoft and official partners only.. Bummer!!

Guess we are going to be stuck by using greyish application icons after all.. hopefully Microsoft will fix this in the future.

Hopefully this post was helpful to you. In my opinion there are to few good resources to be found on WP7 development so every small thing helps.

Geert van der Cruijsen

        

the hardware:

The phone is feeling really robust and the screen is looking really well. the captative screen works very good aswell. all menus and buttons are reacting really fast and Microsoft really did their best in getting the UI right.. And they did! After testing the Camera i have to say that this is probably the worst part of this phone. when it’s a bit dark the pictures get really bad. i also don’t like the “hardware”/tip buttons under the screen. ofcourse you dont need them that much but when i compare this to my girlfriends HTC Desire i have to say i prefer real hardware buttons.

booting it for the first time:

after booting it you get a small tutorial to set stuff up. i choose to skip the windows live id and to just get started. within 1 minute my phone was ready to go. I’ve started setting up my exchange mail since all my contacts/mail/agenda stuff is in there. the setup was also done really easy, just add an exchange account, add your username/password and press ok. everything just worked. after this i’ve added my facebook account. after i did that all contacts were synced and merged perfectly. my exchange contacts have facebook pictures etc. looking pretty slick.

After this i tried setting up my live id.. stubborn as i am i ofcourse added my dutch liveid to see what would happen.. first it would ofcourse sync my mail/contacts etc.. that was the positive part. then i tried to open the marketplace but that wasn’t working. i tried to deinstall the live id but that isn’t possible. so a hard reset was a fact (within 5 minutes after i first touched it).

after playing with facebook/mail/apps etc i tried the most important thing a phone has to do: call someone. to make this extra hard i called someone while i was on my way home through my parrot carkit. some windows phone 6.5′s wouldnt even make this test but sound quality was really good with my new phone. also the ui of the call screen and contact screen  is really well thought off.

next try: setting up a US based live id and adding my dutch live id after. Perfect. i get all the contacts/agenda/mail from my dutch live id and i can get to the marketplace through my US live id.

ofcourse i had to set my facebook/exchange stuff again but that was done in a few minutes.

after playing around with it for a few hours this evening i have a pretty good feeling about this. my conclusions for now:

pro’s:

• WP7 is really responsive and intuitive
• overall hardware is robust and looking nice
• everything just works (except dutch live id’s )
• most important thing calling works really good (nice contact screen, nice call screen)

cons:

• camera is a bit flaky
• power charge is on the side of the phone (i am left handed and can’t even hold it normally when the power cable is in….)
• Support for dutch marketplace / xbox live missing (will be there in april 2011)
• no tethering (will come someday)

i’ll update some more about the new phone after i’ve played with it a bit more after a few days (battery use for example)

Geert van der Cruijsen

        

I’ll explain how to build it by an example. for example you have a list of customers and a list of customer actions. What I wanted to build was a way to make it easier to add a customer action for a specific customer. To do this I added a custom column to the customer list containing a link to the edit form with the customer id as an url variable. Of course the out of the box you can’t create links or any other html with calculated fields so I added more javascript there.

to enable html as output of a calculated field just copy this piece of javascript and put it in a content editor webpart or paste it on your master page.

var theTDs = document.getElementsByTagName("TD"); 

var i=0; 

var TDContent = " "; 

while (i < theTDs.length)

{ 

  try

  { 

    TDContent = theTDs[i].innerText || theTDs[i].textContent; 

    if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0))

    { 

      theTDs[i].innerHTML = TDContent; 

    } 

  } 

  catch(err){} 

  i=i+1; 

} 

Thanks Marijn Somers for this piece of code. original source: http://marijnsomers.blogspot.com/2010/01/write-html-code-in-sharepoint-via.html

so now my calculated field was a link in html. what did my calculated field look like?

="<DIV><a href=’../../Lists/CustomerActions/NewForm.aspx?Customer="&[Customer ID]&"’>Add Customer Action</a></DIV>"

First a DIV element since the javascript above only replaces elements starting with a <DIV> to html, then just a plain html link to the NewForm.aspx sending the customer id as an url parameter.

So now the changes in the customer list are done and we only need to add some more javascript at the NewForm.aspx or again just at your masterpage to get the parameter from the url and selecting the right lookup field value at the form.

I’ve created the following code  using Jquery:

var customer = $.getUrlVar("Customer");

if(customer != "")

{

  $("input[title='Customer']").val(customer);

  $("select[title='Customer']").children("option").each(function() {

    if($(this).text() == customer)

    {

      $(this).attr('selected', 'selected'); 

    }

  });

}

My customer actions list contained a Customer field which is a lookup to the Customer list by Customer ID. The script above gets the Customer ID from the url parameters first and then tries to set the lookup item. SharePoint renders lookup items in 2 different ways. as a select box when there are less then +/- 25 items and as a auto complete textbox when there are more then 25 items in the lookup list. Because of that I firs try to set the textbox to the right value and after that the select. I’m using the title attribute to locate the right input field because it gets the same name as the field from SharePoint by itself.

Now when I open the newform.aspx?customer=1234 my customer lookup field is automatically prefilled with 1234

Geert van der Cruijsen

        

if you try to acces the SPContext to early in the pipeline you’ll get a System.InvalidOperationException error.

The earliest you can use the SPContext is in the “PreRequestHandlerExecute” so don’t use it at the BeginRequest event what most people try to use when they want to add code as early in the pipeline as possible

code:

   1: public class RequestHandlingHttpModule : IHttpModule, IRequiresSessionState

   2: {

   3:  

   4:     public void Dispose() {}

   5:  

   6:     public void Init(HttpApplication application)

   7:     {

   8:         application.BeginRequest += application_BeginRequest;

   9:         application.PreRequestHandlerExecute += new EventHandler(application_PreRequestHandlerExecute);

  10:     }

  11:  

  12:     void application_PreRequestHandlerExecute(object sender, EventArgs e)

  13:     {

  14:         string webUrl = SPContext.Current.Web.Url;

  15:     }

  16:  

  17:     void application_BeginRequest(object sender, EventArgs e)

  18:     {

  19:         // do not use SPContext here it will throw a System.InvalidOperationException 

  20:         // this event is fired before PreRequestHandlerExecute so code that doesn't uses SPContext goes here

  21:     }

  22:  

  23: }

Geert van der Cruijsen

        

In your server side code it’s really hard to change these kinds of things because this is standard SharePoint functionality and you can’t change it server side. So the solution is to fix it using javascript and to make that easier I’m using JQuery.

first I’ll show you the results below and then how I did it using a small JQuery script.

before:

after:

Below is the JQuery script to change the position of the edit menu to the left. the only thing you have to do is save this code to a js file, include the reference to the js file and a reference to the JQuery library js file on your masterpage and you’re done.

   1: $(document).ready(function() {

   2:     SPEditMenuFix();

   3: });

   4:  

   5: function SPEditMenuFix() {

   6:     $(".ms-WPHeader").each(function() {

   7:         var first = $(this).children("td:first").clone(true);

   8:         var last = $(this).children("td:last").clone(true);

   9:         $(this).children("td:first").replaceWith(last);

  10:         $(this).children("td:last").replaceWith(first);

  11:     });

  12: }

Enjoy!

Geert van der Cruijsen

        

because I had so many spam comments I had to remove all of them so sorry for everyone who posted real comments because they are also gone now.

BlogEngine.Net 1.6.1 (download from codeplex) feels like its a lot more mature then the 1.4.5 version I had before. Lets see how well it will go in the future.

Because of the switch I had to change the theme because the old one didn’t work that well with this new version so i downloaded a new theme from http://www.blogenginetheme.com/ and changed a bit to my liking. When i have time i’ll change it a bit more.

If you are still using an old version of BlogEngine.Net I would advise you to upgrade to 1.6.1 because it’s looking pretty good and upgrading was easy. (costed me 2 hours including deleting of spam  )

Enjoy my new weblog

Geert van der Cruijsen

        

I’ve been looking through al the sessions on the first day of the DevDays 2010 at the world-forum The Hague, The Netherlands and I’ve picked the ones I’m going to.

First off starting with the Keynote of course by Anders Hejlsberg and the keynotes title is: “Trends and Future Directions in Programming Languages”.

After the keynote at 11:05 I’m going to see the session by Scott Hanselman called “ASP.NET MVC 2: Basics, Introduction”. Hopefully there are some new things for me to see although I know quite a bit about the MVC framework already If not… Scott is always a cool guy to listen to so i see no problems.

At 13:30 I’ll be going to the session by Alex Thissen called “Secure Coding”. It never hurts to know something about security

The next session at 15:05 is by Anders Hejlsberg again. The session is called “C# 4.0 and beyond”. I would really like to know what is beyond.

The last session of the DevDays at 16:40 I’m going to see is by Scott Hanselman. It’s called “ASP.NET MVC 2: Ninja Black Belt Tips”. Since I’m already a ASP.NET MVC ninja i would like to learn from the master how to get my black belt.

In the evening there are a couple of sessions at the “Geeknight”. The Geeknight sessions are sessions for the real geeks and are about programming for fun, home automation, etc.

Sessions at the Geeknight I’m going to are:

Ofcourse starting with the geeknight keynote by Tony Krijnen and Daniel van Soest at 18:30.

after the keynote “I’m going to learn how to make my blog suck less” by Scott Hanselman (wow 3 sessions on 1 day )

the last session at 21:00 is the hardest choice. i have to choose between “If the ‘Free Lunch’ is Over, Can we Still Afford to Eat? How to Power Boost your Applications “ or “Microcontrollers for .Net programmers” or “Using .NET to Program your Hobby Web-services”. I really don’t know what to expect from the first session, my interests aren’t with microcontrollers and the last session is about webservices which i do like but it’s a level 100 session and I think there isn’t going to be that much new stuff to be heard there.

so for now my choice is with “If the ‘Free Lunch’ is Over, Can we Still Afford to Eat? How to Power Boost your Applications “ by Rutger van Beusekom.

I really can’t wait for DevDays 2010 to start.

Maybe I’ll see you there!

Geert van der Cruijsen

        

So here is an update of mine about how to use JQuery in SharePoint to do some fancy tricks. I’ll post some more of these tricks later on and I’ll try to be more active as a blogger again. (In which I’ll probably fail)

Have you ever tried to change some of SharePoint’s default controls like the image picker?

Well I have. My customer wanted a image picker that worked exactly like the normal one except for 1 change. It shouldn’t show the selected image as an image but it should only show the URL of the selected image. I tried to change this at server side first by inheriting from the default SharePoint image picker control. This was a rather annoying job as i didn’t seem to get the right result this way. you cannot extend the rich image picker from sharepoint but only the default image picker that doesn’t have the image library function behind it.

When i was looking at the html that was rendered by SharePoint i thought it would be easier to change the html with jquery as with serverside code and this is the result. just save this source to a .js file and include it into your masterpage or aspx page and all selected images in the image picker will be changed to only show the url of the image.

///<reference path="jquery-1.3.2.min-vsdoc.js" />

$(document).ready(function() {

    HideImages();

});

function HideImages() {

    $("span[id $= '_RichImageField_ImageFieldDisplay']").each(function() {

        var url = $(this).find("img").attr("src");

        $(this).find("a").hide();

        $(this).append("<span class='imgurl'>" + url + "</span>");

        $(this).find("a").each(function() {

            $(this).find("img").each(function() {

                $(this).load(function() {

                    $(this).parent().hide();

                    var imgurl = $(this).attr("src");

                    $(this).parent().parent().find(".imgurl").text(imgurl);

                });

            });

        });

    });

}

It’s as easy as that.

More JQuery fun to post in the future.

Geert van der Cruijsen

        

In ASP.NET MVC every page has its specific controller and views that can handle the data for the page that is requested. for example when you’re building a web shop you’ll probably have a ProductController that handles everything that has to do with the Products in your shop. But when you are browsing a web shop product page you would also like to see other data that has nothing to do with products, for example your shopping basket, current login state etc. Should you add this logic to the ProductController? imo you shouldn’t since the Products controller only responsibility should be the products. So how should we handle this in the MVC framework?

My first idea that came to mind to solve this problem was doing an Ajax request to for example, the shopping basket controller on your view when you would like a shopping basket added to your page. This can be in some situations the best way to do it but in some cases you might not want to use Ajax since then this content can’t be indexed by search engines for example.

An example how to use Ajax widgets is found here: http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=310

My main goal was to be able to add widgets to a page without the controller of that page knowing about these widgets. I found some solutions to this called partial requests found here: http://blog.codeville.net/2008/10/14/partial-requests-in-aspnet-mvc/

These partial requests weren’t my favorites also since i didn’t want to put this logic in the view so i developed my own CMS like solution for this problem.

My idea was that a page can have several page zones and page zones contain widgets. widgets and complete page zones should be reusable by other pages so i stored these in my CMS database. how my database is build up you can see in the image below

A widget should be able to render itself so i made an abstract BaseWidget class that has a Render Method. A widget can also be a call to a different controller so i made a SubController class that inherits from BaseWidget. The SubController Widget has an Controller, Action and ID so it can call the controller it belongs to.

   1: public abstract class SubControllerWidget : BaseWidget

   2: {

   3:     public string Controller { get;  set; }

   4:     public string Action { get;  set; }

   5:     public object ID { get; set; }

   6: 

   7:     public SubControllerWidget(string Controller, string Action) : base()

   8:     {

   9:         this.Controller = Controller;

  10:         this.Action = Action;

  11:         this.ID = null;

  12:     }

  13: 

  14:     public SubControllerWidget(string Controller, string Action, object ID)

  15:         : base()

  16:     {

  17:         this.Controller = Controller;

  18:         this.Action = Action;

  19:         this.ID = ID;

  20:     }

  21: 

  22:     public override void Render(System.Web.Mvc.ViewContext vc)

  23:     {

  24:         vc.RouteData.Values["controller"] = Controller;

  25:         vc.RouteData.Values["action"] = Action;

  26:         vc.RouteData.Values["id"] = ID;

  27:         IHttpHandler handler = new MvcHandler(vc.RequestContext);

  28:         handler.ProcessRequest(System.Web.HttpContext.Current);

  29:     }

  30: 

  31:     public abstract void SetSettings(WidgetSettings settings);

  32: }

To build a specific widget just inherit a widget from SubControllerWidget and you are ready to go. Set the Controller, Action and ID to call and that specific controller will be called.

To add these page zones and widgets to the pages dynamically i’ve created a CMSController that overrides the OnActionExecuted method so it can insert the page zones and widgets to the model that’s been send to the View.

   1: protected override void OnActionExecuted(ActionExecutedContext filterContext)

   2: {

   3:     if (ViewData.Model == null)

   4:     {

   5:         ViewData.Model = new CMSViewModel();

   6:     }

   7:     string controller = filterContext.RequestContext.RouteData.Values["controller"] != null ? filterContext.RequestContext.RouteData.Values["controller"].ToString() : "";

   8:     string controllerAction = filterContext.RequestContext.RouteData.Values["action"] != null ? filterContext.RequestContext.RouteData.Values["action"].ToString() : "";

   9:     string controllerActionid = filterContext.RequestContext.RouteData.Values["id"] != null ? filterContext.RequestContext.RouteData.Values["id"].ToString() : "";

  10:     IList<PageZone> zones = _cmsRep.GetPageZonesForPage(controller, controllerAction, controllerActionid);

  11: 

  12:     CMSViewModel page = (CMSViewModel)ViewData.Model;

  13:     if (page.PageZones == null)

  14:     {

  15:         page.PageZones = zones;

  16:     }

  17:     else

  18:     {

  19:         foreach (PageZone zone in zones)

  20:         {

  21:             page.PageZones.Add(zone);

  22:         }

  23:     }

  24: 

  25: 

  26:     base.OnActionExecuted(filterContext);

  27: }

So now all widgets beloning to a page will be retrieved from the CMSRepository and are added to the CMSViewModel so now it’s the View’s turn to render all widgets.

In my master page I’ve added the following line that is responsible for rendering all widgets:

<% Html.RenderPageZones(Model); %>

For that to work I’ve created a few html extension methods to render the page zones.

   1: public static class HtmlCMSExtensions

   2: {

   3:     public static void RenderPageZones(this HtmlHelper html, CMSViewModel page)

   4:     {

   5:         if (page != null && page.PageZones != null)

   6:         {

   7:             foreach (PageZone zone in page.PageZones)

   8:             {

   9:                 html.RenderPartial("PageZone", zone);

  10:             }

  11:         }