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

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