Fixing “The image “BadgeLogo” has an ABGR value {value} at position (x, y) that is not valid” error in your Windows 8 app

Recently i was adding a lock screen image and background agent to my Windows 8 app Wordbattle and it worked great. however when i ran the “Windows App Certification Kit” one of the tests failed with the following error:

The image “BadgeLogo” has an ABGR value {value} at position (x, y) that is not valid. The pixel must be white (##FFFFFF) or transparent (00######)

Unsure on what this exactly meant i started searching for this exception and only found some unclear answers on how to solve this problem. It was clear to me that my badge logo images that are used on the lock screen were causing the problem but since I’m a developer and not a designer i didn’t know how to fix this. (Same reason why I’m writing this post since i expect more devs to run into this problem ;) )

After reading the error message and looking at my image at the x and y value of the pixels my understanding was that app logo’s couldn’t have any semi transparent pixels because the error states “the pixel must be white ##ffffff or transparent 00######”. This was however not the correct solution (it does work ofcourse but you can use semi transparent pixels, more on that later). I looked at some system badge icons and i could see that they were also using semi transparent badge icons to draw skewed lines or rounded edges.

I went to one of our XD Guys: Michiel Pruijssers at Avanade and asked him how to fix my badge logo. After some research we found out that some of my semi transparent pixels weren’t pure white but a tiny little bit darker which you can’t see because of the semi transparency. However there is a small workflow on how to fix this for each badge logo that is receiving this error. You’ll need a tool like Photoshop or like me Paint.Net :) to fix this problem. I’ll explain how to fix it with both tools:

Photoshop:

In Photoshop open your badge image and go to Image –> Adjustments –> Levels.

image

In the levels popup you’ll see input levels and output levels of the range of colors used in your logo. 1

change the output levels from 0 to 255 to 254 to 255 and press OK.2

Save the picture. Add the new pictures (remember to fix all your badge icons for each resolution) to your solution and run the Windows App Certification Kit again. it will now pass all the test!

Paint.Net

Fixing your badge in Paint.Net is almost the same as in Photoshop except the menus are in a different location. Open your badge icon in Paint.Net and go to Adjustments –> Levels.

image

In the popup change the value 0 to 254 and press OK.

image

All other colors except for pure white are removed. you can now save your image and add them to your solution again. Run the Windows App Certification Kit and the failing test should pass.

Hopefully this posts helps other devs to fix this problem since the error message is not that clear.

Happy Coding!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Launching Skype from your own Windows Store App

One of the strong features of Windows 8 is the integration of apps with the Windows 8 OS and also the ability for applications to integrate with other applications. A scenario that can be useful for many applications is to call someone directly using skype from within your application. By using Protocol extensions this is really easy on Windows 8.

Skype_Logo      

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

App to App communication on WP8 session @ Techdays 2013 slidedeck + sample code

Last week I did a session about App to App communication on Windows Phone 8 and people who attended asked me to make the source of the samples and the slide deck available. I was quite busy this week but here it finally is.

 

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

techdaysbanner2

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Fun with ValueConverters: building a Mustachify.me converter for Windows Phone & Windows 8

Valueconverters are a really usefull feature when you are building an app using the MVVM pattern so you can bind properties from your viewmodel of a specific type to a element in the view which can only bound to another type of object. Using avalueconverter you can convert the value of one kind of object to a different kind so you can still bind them.

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 :)

mustachedemo1   

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.

mustachedemo2

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

mustachedemo3

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.

mustachedemo1mustachedemo4

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Code samples + slide deck available of my “Masters in Microsoft” session on new Windows Phone 8 developer features

This post is made for everyone who was at my session at the “Masters in Microsoft” event at the Avanade office yesterday. Hopefully you enjoyed my session! I got asked for the sample code and slide deck a couple of times after the event during the drinks so therefore I’m uploading them here so everyone can grab a copy if they want it.

54676_459741017401140_295441675_o

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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

I’ll be speaking on Windows 8 and Windows Phone 8 in November

November is going to be a big month for everyone who likes developing for Windows. 2 days ago Windows 8 was officially launched and this Monday Windows Phone 8 will be launched.

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.

bedrijf zoekt app - logo-vierkant

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)

avalogo

Hope to see you there!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

Solving Windows 8 enterprise activation error 0×80070005

So Windows 8 RTM launched yesterday and lots of people installed their copy from MSDN. I did the same but after the installation i couldn’t get my copy to activate. I kept receiving an error 0×80070005 when i wanted to activate my windows copy.

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

image

Enjoy windows 8!

Geert van der Cruijsen

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter

TechdaysNL 2012 Lots of WP7, Win8, Metro and ASP.NET MVC sessions. Which sessions to pick?

This thursday Microsoft Techdays 2012 kicks off for Dutch developers working on the Microsoft platform. This year I’m speaking at 2 sessions on Windows Phone but I’m also going to visit other sessions during the 2 days of the conventions. Here is the schedule I made with sessions I’m planning on going to. It seems there are some really cool Windows Phone sessions but Windows 8 and ASP.NET MVC also has my interests. During the event I’ll keep you posted with updates on twitter and afterwards I’ll write my experiences in a new blogpost again. Here are the sessions I’m going to visit.

badge_speaking

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 11Mads 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 MetroBryan 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 4Scott 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 UnpluggedScott 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 PhoneMaarten 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 tilesGeert 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 DevelopmentFons 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 4Erik 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 WebAPIMatt 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 agentsGeert 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-EndTom 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 applicationsOlaf 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

Share on Facebook
Kick It on DotNetKicks.com
Shout it
Post on Twitter