Monday, October 19, 2015

Using taco to create Ionic projects for the Windows platform

Recently Microsoft released Tools for Apache Cordova Command Line Interface (TACO CLI), by using TACO, you can quickly start building awesome Apache Cordova apps really and leave all the plumbing of the different platforms dependencies, plugins, etc. to the tools to take care of. For example the following few commands create a cordova project based on the ionic base template, add the android platform to the project, install the platform requirements, build the app, and run it in the emulator:

$ taco create sampleApp --template

$ cd sampleApp

$ taco platform add android

$ taco install-reqs android

$ taco build android

$ taco emulate android

Check the TACO home page of for installation instructions and more information

I ran into a problem when i created a new project based on the ionic base template and tried to run it on a windows 8.1 emulator, to reproduce the issue use the following taco commands to create a new project

$ taco create myIonicApp --template

$ cd myIonicApp

$ taco platform add windows

I will use Visual Studio 2015 Enterprise to continue working on my project, to do that, from VS go to File -> New -> Project From Existing Code...


On the wizard select "Apache Cordova" and click Next


Specify the path of the project created earlier and enter the name of the project and click finish


Now select the "Windows Phone (Universal) platform and select any emulator from the available ones and try to run the project


You will receive the following exception

Unhandled exception at line 12227, column 9 in ms-appx://io.taco.hellotaco/www/lib/ionic/js/ionic.bundle.js
0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content,
or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script
or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content,
or explicitly create elements and attributes with a method such as createElement. 
For more information, see


After searching for awhile, i found the problem and the solution documented here

So all we need to do is to reference the JavaScript file winstore-jscompat.js  in our application before any other script


Now try and run your application, every thing will work just fine.

Sunday, August 16, 2015

bower.config in VS 2015 (RTM): packages versions are not loading correctly

While working the VS 2015 RTM, I found that IntelliSense in bower.config file cannot load the versions of the packages.

the problem is reported here, and the solution that worked for me is to install the git tools and run the command

git config --global url."http://".insteadOf "git://"

then restarting VS. this will hopefully solve the problem.

Wednesday, August 07, 2013

Portable Class Library Projects and MVVM Light

With Portable Class Library Projects you can create a single library that can target different platforms (e.g. Windows Phone, .Net, Windows Store Apps). For most of the modern apps it’s kind of mandatory to use the MVVM pattern, a famous MVVM library is Laurent Bugnion MVVM Light library. In this post we will walk through the steps needed to create a Portable Class Library that uses the MVVM Light library and targets the Windows Phone 8 and .Net for Windows Store Apps frameworks.

I will be using Visual Studio 2012 with Update 3.

- Let’s create a new Portable Class Library project and name it MyApp.Core, the solution name will be MyApp


- We will target the Windows Phone 8 and .Net for Windows Store Apps


- We will create two applications, the first is a Windows Store Blank Application named MyApp.Win8


and the second is a Windows Phone 8 named MyApp.WP8


- We will add a reference to the Portable Class Library Project MyApp.Core to the Windows Store Project and the Windows Phone 8 project

- The MyApp.Core portable project will contain our model and our view model and will be shared by the Windows Store application and the Windows Phone 8 application, we will use the MVVM Light library to do this. We need to add this library to the MyApp.Core project.

- To do that right click the MyApp.Core project in the solution explorer, and choose Manage NuGet Packages


- Search for Portable MVVMLight package and click install to add it to the project, when prompted accept the license


- The next step is to add references to the MVVMLight library to the Windows Store project and the Windows Phone 8 project. the trick is to add the corresponding version of the MVVMLight library to each project. Right click on the solution node in the solution explorer tool window and choose Open Folder in File Explorer


- In the solution folder you will a folder named packages, this folder was created when we added the NuGet package for MVVMLight library, it contains  all of the MVVMLight library DLLs for the different frameworks. There are two DLLs that we need GalaSoft.MvvmLight.dll and Microsoft.Practices.ServiceLocation.dll.

For the Windows Store project we will use the DLLs available in the following locations

C:\SOLUTION FOLDER\packages\Portable.MvvmLightLibs.\lib\portable-net45+sl4+wp71+win8\GalaSoft.MvvmLight.dll

C:\SOLUTION FOLDER\packages\Portable.CommonServiceLocator.1.2.2\lib\portable-net4+sl4+wp7+win8\Microsoft.Practices.ServiceLocation.dll

For the Windows Phone 8 we will use the DLLs available in the following locations

C:\SOLUTION FOLDER\packages\Portable.MvvmLightLibs.\lib\wp8\GalaSoft.MvvmLight.dll

C:\SOLUTION FOLDER\packages\Portable.CommonServiceLocator.1.2.2\lib\portable-net4+sl4+wp7+win8\Microsoft.Practices.ServiceLocation.dll

- In the MyApp.Core project we will create our view model to be used by the two apps. First we will create a view model locator class that will be used as the main repository for all the view models we have, in our sample we will have one view model only called MainViewModel

public class ViewModelLocator
static ViewModelLocator()
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);

public MainViewModel Main
return ServiceLocator.Current.GetInstance<MainViewModel>();


For the sake of simplicity the MainViewModel class will have one property that contains a hardcoded list of strings, in real world applications this class should expose all of your model data as well as other required UI functionalities such as commands

public class MainViewModel
List<string> _sampledata = new List<string>();

public MainViewModel()
public List<string> Data
get {
return _sampledata;
private set { }

- To use the view models from the application projects, first we need to create an instance of the ViewModelLocator class, in the windows store project we will define an instance of the ViewModelLocator as a resource in the App.xaml file

<vm:ViewModelLocator x:Key="Locator" />
Styles that define common aspects of the platform look and feel
Required by Visual Studio project and item templates
<ResourceDictionary Source="Common/StandardStyles.xaml"/>


we will do the same for the windows phone 8 project

<local:LocalizedStrings xmlns:local="clr-namespace:MyApp.WP8" x:Key="LocalizedStrings"/>
<vm:ViewModelLocator x:Key="Locator" />
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>

- For the windows phone 8 UI, in the MainPage.xaml, we will set the data context of the page to the Main property of the ViewModelLocator class


- we will add a list box and bind its ItemsSource property to the Data of th MainViewModel class


- For the windows store project, we will also set the data context of the page to the Main property of the ViewModelLocator class, and we will add a list box and bind its ItemsSource property to the Data of th MainViewModel class


- Now we are done, we have a Portable Class Library that contains our view models and that is shared by the windows phone 8 and the windows store app project

The Windows Phone 8 Application

The Windows Store Application

Sunday, May 19, 2013

Thursday, February 21, 2013

Monday, March 26, 2012

DevLifeStyle March 2012 Event: Sessions Recordings

Here are the sessions recordings for our last event

Building High Performance Applications with .NET 4.5: Part1, Part2

Kinect for Windows

Developing Applications for Windows 8

Sunday, January 29, 2012

Windows 8 Session

In our next DevLifeStyle Community event I will be presenting a session on Windows 8. you can register here

Tuesday, September 27, 2011

Silverlight 5 P-Invoke: Using Kinect SDK from Silverlight

Away from all the discussions about whether Silverlight is dead or not, The Silverlight 5 RC contains the previously announced P-Invoke feature which enables you to call Win32 style APIs from a trusted Silverlight application.

There are some attempts to use Kinect from Silverlight (here) but this was before MS released the official SDK. we will use Silverlight 5 P-Invoke feature to call the Kinect SDK APIs.

P-Invoke in Silverlight works just like P-Invoke on the desktop. you use the DllImport attribute to import the APIs and you declare in your code the dependent types (Enums, structs, etc.)

  1. [DllImport("MSRKINECTNUI.DLL")]
  2.       private static extern HRESULT NuiInitialize(uint dwFlags);

I tried to keep the classes and methods in library identical to the ones in the official SDK. I implemented only a couple of the available APIs (with the help of the Coding4Fun Kinect Toolkit and Reflector).

To test the library we will create a simple application:

- Create a new Silverlight 5 application

- Add a reference to the KinectSilverlightLibrary.

- Change the properties of the project: enable running out of browser.

Enable running out of browser

- Change the Out-of-Browser settings to require elevated trust

Require elevated trust

- In the App.xaml.cs file, define a new property of type Runtime, this property represents the Kinect runtime, in the Application_Startup event handler initialize the runtime and in the Application_Exit event handler shut down the runtime

  1. Runtime kinectRuntime = new Runtime();
  2. public Runtime KinectRuntime
  3. {
  4.     get
  5.     { return kinectRuntime; }
  6. }
  7. private void Application_Startup(object sender, StartupEventArgs e)
  8. {
  9.     this.RootVisual = new MainPage();
  10.     kinectRuntime.Initialize(RuntimeOptions.UseColor | RuntimeOptions.UseDepth );
  11. }
  12. private void Application_Exit(object sender, EventArgs e)
  13. {
  14.     kinectRuntime.Uninitialize();
  15. }

- In the MainPage.xaml file add two image controls that we will use to display the video and depth streams coming from Kinect

  1. <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
  2.         <Grid.ColumnDefinitions>
  3.             <ColumnDefinition/>
  4.             <ColumnDefinition/>
  5.         </Grid.ColumnDefinitions>
  6.         <Image Name="image1" Stretch="Fill" Grid.Column="0" />
  7.         <Image Name="image2" Stretch="Fill" Grid.Column="1" />
  8.     </Grid>

- In the MainPage.xaml.cs add the following lines of code

  1. private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
  2.         {
  3.            Runtime runtime = (App.Current as App).KinectRuntime;
  4.            runtime.VideoStream.OpenStream(ImageType.Color, ImageResolution.Resolution640x480);
  5.           runtime.DepthStream.OpenStream(ImageType.Depth, ImageResolution.Resolution320x240);
  6.          runtime.VideoFrameReady += new EventHandler<ImageFrameReadyEventArgs>(runtime_VideoFrameReady);
  7.            runtime.DepthFrameReady += new EventHandler<ImageFrameReadyEventArgs>(runtime_DepthFrameReady);
  8.         }
  10.         void runtime_VideoFrameReady(object sender, ImageFrameReadyEventArgs e)
  11.         {
  12.             Dispatcher.BeginInvoke(() => {
  13.                 image1.Source = e.ImageFrame.ToBitmapSource();
  14.             });
  15.         }
  16.         void runtime_DepthFrameReady(object sender, ImageFrameReadyEventArgs e)
  17.         {
  18.             Dispatcher.BeginInvoke(() =>
  19.             {
  20.                 image2.Source = e.ImageFrame.ToBitmapSource();
  21.             });
  23.         }

When the page is loaded we open the video and depth streams and subscribe to the VideoFrameReady and DepthFrameReady events, in the event handler we retrieve the ImageFrame and convert it to a bitmap (I used the WritableBitmapEx library)

Here’s the application running

Kinect Video and Depth Streams 

You are free to continue adding the rest of the APIs to this library.

You can download the source code from here: