By default, the Visual Studio Android emulator sets its keyboard entry to the hardware keyboard attached to you PC. But it might be very useful when developing apps to work with the software keyboard on Android. In the Windows Phone emulator, you can use a page-up and page-down to enable and disable the keyboard. In the Android emulator you’ll have to change a setting in the OS itself.

To change the setting, got to the Android Settings and to Language & Input. Than select “Change Keyboard”.

Hit the switch to change the input method.

You’re good to go:



When developing applications in Visual Studio I work with the keyboard most of the time. Throughout the years I learned a lot of short cuts to a lot of features. I’m sure most of you know and use these, too. But there are some features or actions that do not work well with the keyboard. For example closing all open tabs or opening the TFS source control explorer. For actions like this I had to use the mouse, just because it was faster than the keyboard. Until I learned about this feature a while ago.

A couple of versions of Visual Studio ago there was a search box inside the toolbar. This search box can double as a command line. If you are using one of the latest versions of VS the search box is still there, but you’ll have to add it to your toolbar yourself. You can do this by clicking on the little triangle at the end of the ‘standard’ toolbar. Then click ‘Add or Remove Buttons’ and select ‘Find’.

Now the search box is back on the toolbar.

Normally when you type in this box and hit enter you’ll search for the text you’ve typed. But… When you hit ‘Ctrl+/’ on your keyboard the search box gets focus and a ‘ > ‘ is placed in there. Now you can enter commands to Visual Studio. For example, ‘>Window.CloseAllDocuments’ to close all open documents. When typing in this box you’ll notice you can a dropdownlist with completions for the command you’re typing. Because all of these commands a bit long to type you can add aliases for them. So in case of ‘Window.CloseAllDocuments’, I’d rather type ‘wca’. To accomplish this hit ‘Ctrl+/’ and type ‘alias wca window.CloseAllDocuments’. From now on you can type ‘wca’ to close all open documents.

Another command I use regularly is ‘tfs’ to access the TFS source control explorer. You can create this alias with ‘alias tfs Team.TfsSourceControl’.

One more thing I want to mention is that you can add ‘External Tools’ to the command aliases as well. One that I use is ‘cmd’ to open a command prompt at the root of my current selected project. I did this by first creating the ‘external tool’. You can open the window below by going to the tools menu and selecting external tools.

The values I entered are:

  • Title: cmd
  • Command: %windir%\system32\cmd.exe
  • Arguments: “C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\vcvarsall.bat”
  • Initial directory: $(ProjectDir)

There are commands for 24 external tools that can be called in the search box. Mine happened to be the 6th. So I created an alias by typing ‘alias cmd Tools.ExternalCommand6´. From this moment on I can hit ‘Ctrl+/’ and type ‘cmd’ to open a command prompt at the root of my current project. Which I find very useful when working with NPM and Bower.

Let me know in the comments below what commands you are using in this command line.




Today I’m adding an AngularJS service to the Windows Store project in Visual Studio. This service is making a call to an external webservice which returns some JSON data. This controller uses a promise to handle the call to the service and when it’s fulfilled the data is shown on the screen.

You can find the code:


WinJS provides you with a way to create namespaces and work with classes in your code. It provides functionality to create derivatives of your classes and combine them using mixins.

Class and Namespace

There are many frameworks that give JavaScript the feeling of working with OO. So does WinJS. WinJS uses the WinJS.Class.define function to define a class. The function takes 3 parameters. The first parameter is a constructor that is called when the object is instantiated. You can provide parameters to the constructor that can be used when instantiating the object. For example, in the code below a ‘name’ can be provided to the constructor of the ‘Human’ class. If your class doesn’t need a constructor, you can provide an empty function or use ‘null’ (which tells WinJS to create an empty function).

Often your class needs to do a little bit more than just being constructed. After providing the WinJS.Class.define function a constructor, you can give it an object containing functions or fields for the class to work with. These will be available when the class is instantiated. In the example below I added a function called ‘sayHello’ which uses the ‘name’ variable created in the constructor and displays it in a message.

Optionally you can add a third parameter to the constructor which will define static fields and functions. These can be called before the class is instantiated.

In a larger application you probably wrap you code in functions to create scope. In these cases you want your classes to be separated into different files, but possibly available to others too. That’s when Namespaces become handy. You might know namespaces from other languages like C#. They are easy to define with WinJS. Just make a call to the WinJS.Namespace.define function giving it the name of your namespace and an object with the classes. If the namespace already exists, the new members are added to it. In the example I added the ‘Human’ class to the ‘Species’ namespace. I also wrapped the code defining the class and the namespace in a function to create a scope around it. You can try for yourself and see what happens if you try to instantiate the ‘Human’ class without the namespace.


One of the powerful features of Object Oriented programming is Inheritance, with which you can reuse classes by deriving functionality from one to the next. WinJS provides functionality to achieve this in JavaScript. To create a derivative of a class you can use the WinJS.Class.derive function. The function is very similar to the define function described earlier. It takes one extra parameter, the class you want to derive from. It also takes a function as a constructor, an object with instance fields and an optional object with static fields and functions. I extended the previous example a bit and added the new derived class, ‘SuperHuman’. I gave the constructor of this class a second parameter and a new function. Then I added it to the ‘Species’ namespace. At the end you can see the instantiation of the object and calling of the two functions. In the Result window you can see the result of these functions.


Other than languages like C#, WinJS can add multiple inheritance to your applications. This means you can have your class inherit from more than one class and reuse code in more different ways. Creating a mixin is not complicated. In the example below I added an object ‘Job’ with a field and a function. By calling the WinJS.Class.mix function with both the original class, ‘Human’ and the new ‘Job’ object, you can have WinJS mix the two together. And thus use the ‘job’ field and the ‘work’ function from ‘Human’ class. Which is inherited by the ‘SuperHuman’ class, giving that access to these too. There are many ways in which this can be useful when using this in your projects.

WinJS provides a couple of handy mixins for you to use in your project. The WinJS.Utilities.eventMixin and the WinJS.Utilities.DOMEventMixin add event functionality your class. I’ve demonstrated the WinJS.Utilities.eventMixin mixin in the example below. One of the things this mixin adds to your class is the addEventListener function and the dispatchEvent function. To make an event work you also have to mix in the WinJS.Utilities.createEventProperties mixin. In the example below I used this to create the ‘laugh’ event. At the end of the example I added the eventlistener and called the ‘tickle’ function on ‘Superman’ to have it fire the event.


Please use the jsfiddles to experiment with the different functions and use them to create classes of your own. I hope the use of the fiddles helps explaining these functions of WinJS a bit. Please let me know if they do, or if I never should use these again in case they don’t :)

Subscribe to the RSS feed or follow me on Twitter. I also added links to my FlipBoard magazines to the left sidebar of my blog.

Angular JS

I was trying to use Angular JS in a Windows store app and had some issues with Angular being “unsafe”.

Using Angular JS in a JavaScript Windows Store app turned out to be pretty easy. Here’s how to do it:

First create a new app.

Install Angular JS though NuGet.

Add a scripts tag to your default.html.

<script src="Scripts/angular.js"></script>

Running the app at this point will result in the following error:

The trick to get around this error is to enable CSP (Content Security Policy) and the most convenient part is that Angular has a directive to set that. All you have to do is add the “ng-csp” attribute to your html tag.

Which results in:

<!DOCTYPE html>
<html ng-csp ng-app>
    <meta charset="utf-8" />

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <script src="Scripts/angular.js"></script>

    <!-- AngularDemo1 references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>

And that’s it. If you run this, your app should print “10”. Getting WinJS to work with Angular is a whole other story… which I’ll explain in a separate post…

Additional note:

In order to get ng-cloak and ng-show to work property you’ll have to add some styles to you project. These style would be added dynamically in other situations, but because ng-csp is used this is disabled. This is the CSS, which can be found at the end of ‘angular.js’ (I removed a few unsupported):

<style type="text/css">
    @charset "UTF-8";

    [ng-cloak], [data-ng-cloak], [x-ng-cloak],
    .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-animate) {
        display: none !important;


In one of my apps I wanted to have the items in a list with the list being in a Pivot control. I wanted to have the items slide in with a little delay, like they are in the Windows Phone mail app. I’ve been looking for that a lot, but couldn’t find anything. Until I stumbled upon the Pivot Control Sample app. The actual solution is demonstrated in this sample. It doesn’t seem to be documented anywhere else…

Here’s how it’s done…

All you have to do to get the delay on the items, or basically any HTML inside the pivot items, is just adding one of three CSS classes: win-pivot-slide1, win-pivot-slide2, win-pivot-slide3. Where the first has the shortest delay and the last the longest.

To see the effect you can alter the “Pivot App (Windows Phone)” template app a little. Just create a new app using that template.

Then, open one of the pages. Section3Page.html for example and change the itemTemplate part of that HTML to:

<div class="itemTemplate"
    <div class="templatecontainer">
        <img class="win-pivot-slide1"
             data-win-bind="src: backgroundImage; alt: title" />
        <div class="itemcontainer">
            <div class="itemtitle label-extralarge win-pivot-slide2"
                 data-win-bind="textContent: title"></div>
            <div class="label-mediummid win-pivot-slide3"
                 data-win-res="{ textContent: 'Section3Description' }"
                 style="height: 82px;"></div>


And that’s it J


I’m my previous post I showed how you can add a website to a universal project and share some JavaScript between all three. This is nice, but I will run into a situation where you’ll have some code that is not supposed to run on one of the platforms. In the C# world you can use compiler directives in situations like this. In JavaScript this is not possible (Although you could create constructions that mimic directives using Grunt for example). WinJS has some functionality build in that can help finding out what platform you are using.

There are two properties on the utilities in WinJS you’ll need:

Here’s a small example of you could use it:

if (WinJS.Utilities.isPhone) {
} else {
    if (WinJS.Utilities.hasWinRT) {
    } else {

While exploring the possibilities of using frameworks like KnockoutJS and Backbone in my store apps I started wondering if it would be possible to share my JavaScript code between Windows Store app, Windows Phone app and an ASP.NET website. After some exploration and fiddling with various options I figured it out.

Here’s how to do it.

If you have a solution with an ASP.NET website, add a universal project to the solution. Or add a MVC project to the solution with you universal projects.

Unload the web application and add to the following line to the file right before the import of “Microsoft.CSharp.targets”. Where App79 would be the name of your shared project of course…

 <Import Project="..\App79.Shared\App79.Shared.projitems" Label="Shared" />

This will enable the connection between the projects. Because linking JavaScript files doesn’t work in web projects (the files are not really in the expected folder) the files have to be copied too.

After some searching I came across the following blogpost by Matt Perdeck, Copying linked content files at each build using MSBuild. He explains how to have the build copy linked files to their target location.

By adding the following lines to the end of the project file, right before the last closing tag, files are copied before the build. He even optimized it a bit, by skipping the unchanged files.

<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
    <Copy SourceFiles="%(Content.Identity)" 
          Condition="'%(Content.Link)' != ''" />

Close the project file and reload the project. As you can see in the references section the shared project is included.

You need to make sure that the names of the folders in the shared project are available in the web project too. I assume these are already created in the Windows Phone and Windows Store projects.

One nice extra is that you can add breakpoints in the shared project that will hit when running the web project. You can also switch the context to the web application in the .js files.