Cortana in Microsoft Office 16 and in Smartwatch (Vine Videos)

Cortana in Microsoft Office 16 and in Smartwatch (Vine Videos)

“Cortana in Office” Vine videos are below in the post.

I heard some new features are coming to Office 16. One of them will supposedly be some assistant similar to Clippy. I suggest, let’s not bother Clippy any more, just say – “Cortana, will you assist Office users on Windows 9”. She gladly will. After all, Cortana is a Personal Digital Assistant. Following are some scenarios I envisioned with MS Office:

  • “Cortana, create a table with 5 rows and 10 columns”.
  • “Cortana, in cell A5, find the average of values in cells A1 to A4.
  • “Cortana, find a 200 word excerpt from Shakespeare’s Macbeth and insert in the document.”

So I virtually (yes) put Cortana in Office 16 in these Vine videos (feels real with sound, so enable sound):

And here is Cortana helping with Formula. (enable sound, disable the first one :D)

How about Cortana reminding on a smartwatch!? (And if you are interested this is my smart timekeeping app for your Windows Phone, free and no adverts)

I like Cortana. If you do too, you might like my other futuristic Cortana integration fact-ions.

Cortana, find me the nearest top-rated coffee shop?

App Marketing: Perspective Marketing Image Template (PSD)

App Marketing: Perspective Marketing Image Template (PSD)

Recently I created an XCF template for app marketing and wrote a post about how to use it.

Nokia Lumia 1520 is a gorgeous phone. So is your Windows Phone app’s hub in panorama. And you do know that a well developed app is just the half way. Getting the app to its audience is the second half. I created this layered GIMP image to easily sandwich a panorama hub between the layers and showcase your app with your own shining colors. You need to do following to create your app’s panorama with this template: Read more…

Some people wanted the template in PSD format. So, here you are.

Hope you find it useful.

App Marketing: Perspective Marketing Image Template

App Marketing: Perspective Marketing Image Template

[This post got a mention on Microsoft Channel 9 This Week]

Nokia Lumia 1520 is a gorgeous phone. So is your Windows Phone app’s hub in panorama. And you do know that a well developed app is just the half way. Getting the app to its audience is the second half. I created this layered GIMP image to easily sandwich a panorama hub between the layers and showcase your app with your own shining colors. You need to do following to create your app’s panorama with this template:

  • Have all your panorama pages in a single image. 4 or 5 pages will work great.
  • Copy aforesaid panorama image in this XCF.
  • Adjust perspective, add your colors, and export!

With very little efforts you can have your app in your choice of colors.


Following is the detailed step-by-step of the process with example of Windows Phone Channel 9 app:

First, grab the GIMP XCF (PSD here). If you do not have GIMP, download here, it’s open-source and free. Prepare an image of all the panorama items of your app (a little help here).


Open PanoramaAppShowcaseOn1520.xcf in GIMP. Look at the Layers windows. There are multiple groups and layers inside. Some layers/groups are not editable. Their names start with [DoNotEdit]. So, do not edit them. The layers you will be editing are – “YourApp.YourAppGoesHere”, “UseBucketToolAndFillAnyColorHere”, and “UseBucketToolAndFillBackgroundColor”.

Bring Your App In


  1. Open “YourApp” layer group and select “YourAppGoesHere” layer.
  2. Copy or Open As Layer from File menu, your app’s panorama image. If you Open As Layer, drag it down to just above YourAppGoesHere and right click and merge down. If you copy, as you see in image, a floating layer will be created.
  3. Click on Anchor the floating button at the bottom. You will see now your panorama image is in the layer YourAppGoesHere

Prepare to Skew


  1. Make sure YourAppGoesHere layer is selected.
  2. Slide opacity to about 50.
  3. Select Layer > “Autocrop Layer” menu to crop this layer. You will see yellow marching ant line around the layer
  4. Choose perspective tool.

Go 3D

The layer now has a grid with 4 handles on corners.

  1. Grab a corner and drag it as close as possible to the corresponding corner on white base. Don’t worry about matching corners exactly, just keep close. Repeat the process for all corners. Look at black arrows in the image.

Now your image’s layout looks something like this:

Micro Adjust and Transform

You are still in Perspective transform edit mode. Here you will zoom-in to every corner and match every corner exactly with the corner of the white base.

  1. To zoom-in to the corner you want to adjust, take your mouse pointer on the corner, and ctrl+mousewheelup to zoom-in max. Match both the corners pixel perfect. Repeat for all the four corners. Zoom-in and out to make sure all the corners are matching.
  2. Click on Transform button.
  3. Your image now looks something like this:

Your Colors


    These steps are to easily change phone’s color.

  1. Select UseBucketToolAndFillAnyColorHere layer.
  2. Click on foreground color and pick a color from color picker.
  3. Select Bucket tool from Tools menu
  4. Click anywhere inside the image

More Color and Done


  1. If you want to edit background color select UseBucketFillBackgroundColor.
  2. Click on foreground color and pick a color from color picker.
  3. Click anywhere on image
  4. Open File menu and select Export As… Type “filename.png” in the File Name field and save.

If everything goes well, you will have a gorgeous image like this for your app:

And this is my app in the same template:
Avirall | Windows Phone | Timer | Stopwatch | Sports | Nokia | Nokia Lumia | Windows Phone 8.1 | Panorama

App Mock Up

App Mock Up

You are toying with an idea of creating a new app. If you are not replicating functionality of some other app, you would go through the process of visualizing your idea in the form of app UI. You don’t want to jump into code at this time but want to feel how information in the app will be placed and how it will look inside the screen boundaries. This process is a pre-cursor to UX development or full-fledged wire-frame creation. This process of visualizing the idea takes some time before you are confident about how you want to take your app forward and jump into some sort of coding. Paper+pen or whiteboard+marker are good way to work through fluid ideas and layout information. This is not the phase when you are working on UX or designing UI, but just laying out ideas in rough screens. I personally like drawing and love to draw on paper/whiteboard. It is difficult to work with physical media if you are going through multiple iterations and changes (owing to fluid nature of this phase), even if you are good at drawing. For the reason of sheer manageability I would rather go for some GUI authoring tool with which I can directly drag+drop shapes, connect them, group them, size them and play around with ideas. Using GUI authoring tool is cleaner and easier if you are not into drawing. There are many such tools available out there with their strengths and weaknesses. Microsoft Office Visio, Sketch Flow,, Balsamiq Mockups, etc are some of the popular mockup creation tools. In this post I will talk about Pencil.

[Side note] If you are into SketchFlow and Windows Phone app development, you will find my project template useful. Check it out here. In following episode on Channel 9 Brian talks about my project at 06:12 mark.

Pencil is an open-source and free GUI authoring tool. With Pencil you can quickly create mockups and walkthroughs. Pencil is flexible to extend. It has pre-built basic shapes and also platform specific shapes (Visio calls them stencils, Pencil calls them shape collections) like Web, iOS, and Android. But you could make a mockup for Windows Phone as well. For this post I quickly created this panorama concept with Nokia Lumia, Windows Phone-


This mockup is created with Sketchy GUI collection. Sketchy is a nice visual representation of ideation phase. In Pencil you have choice to use other standard and straight shapes. Shapes are flexible for customization to your requirement.

Pencil is a nice and simple tool. For small sized apps and quick ideation processes Pencil is very good. Pencil does not automatically generate code. Though it does generate clickable HTML but they are static HTML’s, not controls. Pencil is not good if your ideation process goes large and you have more than 10 screens to mockup in a single document (you will keep multiple screens in one document because you want to link them for click-through). With more than 10 screens in a single document Pencil goes very slow, painfully slow. Also, it seems, Pencil community may not be actively updating it. Last update was in 2012. If these things bother you, look at Sketch Flow or you might want to consider Visio. You can get 90 day trial of Microsoft Office Visio for free here.

For quick and small ideation process I liked Pencil, with its current abilities. I will soon try to do a quick video on basic tasks in Pencil.

C#|.NET Query String in Uri

C#|.NET Query String in Uri

In a not-so-basic-application you might have pages which are used for multiple similar purposes. You pass query string with many fields with multiple values between such pages (or web pages). In database driven apps, parameter values could be user generated and stored in the back-end and you pull more info from database on the basis of the value in query parameter. This is not the scenario of back-end driven app. This is more about “Field Names” and Values, which are part of the design and known to you while coding, and you want to manage them effectively and make the code more readable.

Let’s take an example:

You have a page in your app which loads different lists (ex: city, state, pin, salutation, etc.) and lets user select an item from the list. At different places in your app you pop this page up with required parameters to load appropriate items. The call to page looks something like this:


Let’s assume your page also has the ability for editing and you want to activate appropriate functionality (select only || edit). You would add one more parameter to your query, like so:


If you have many such pages, each have multiple fields and their multiple values, and you make calls to these pages from different places in your code, soon it will be very difficult to manage hard-coded query strings in Uri’s.

Here comes enum based solution:

We will have enums for fields and their values. For the purpose of this example we will keep single enum for fields and multiple enums for values for different fields. Let’s code
First define enums for fields and their values:

        internal enum QueryFields { ListPicker_FormType, ListPicker_ListType };
        internal enum ListTypes { City, States, Zip, Salutation };
        internal enum FormTypes { Select, Edit };

If you do not wish to be more detailed, you could simply build your Uri’s like so:

This.NavigationService.Navigate("/ListPicker.xaml?{0}={1}",QueryFields.ListPicker_FormType.ToString(), FormTypes.Select.ToString());
//The resultant uri - /ListPicer.xaml?ListPicker_FormType=Select

We will see below how you could parse query parameters in the called page and retrieve values in enum types.

Creating Uri as above still has string formatting which is not easy to maintain in multiple uses. To make things manageable and less error prone, let’s create a new enum for pages in the app and shift Uri building code in a single method which could be called from anywhere in the app with different field and values.

        internal enum AppPages {ListPicker, Setting, Main, etc };
        internal static Uri GetUri(AppPages appPage, params KeyValuePair<string, string>[] args)
            string uriString = "";
            switch (appPage)
                case AppPages.ListPicker:
                    uriString = "/Views/ListPicker.xaml";
                case AppPages.Setting:
                    uriString = "/Views/Settings.xaml";
                case AppPages.Main:
                    uriString = "/Main.xaml";
                    uriString = "/Main.xaml";
            int counter = 0;
            string seperator = "?";
            foreach(KeyValuePair<string, string> query in args)
                if (counter > 0) seperator = "&";
                uriString = String.Format("{0}{1}{2}={3}", uriString, seperator, query.Key, query.Value);
            return new Uri(uriString, UriKind.Relative);

With GetUri, you could create page navigation Uri with enums only instead of hard-coded strings:

            KeyValuePair<string, string> query_1 = new KeyValuePair<string,string>(QueryFields.ListPicker_FormType.ToString(), FormTypes.Select.ToString());
            KeyValuePair<string, string> query_2 = new KeyValuePair<string,string>(QueryFields.ListPicker_ListType.ToString(), ListTypes.City.ToString());
            This.NavigationService.Navigate(GetUri(AppPages.ListPicker, query_1, query_2));

Once you are navigated to your page, you need to parse query strings and extract enums which you could use in the page to decide page’s functionality.

At page level you need to have required enum type fields. For this example we will have two fields, one FormTypes type and other ListTypes type. A private processQuery method which accepts a dictionary sets these two fields appropriately.

        FormTypes formType;
        ListTypes listType;
        private void processQuery(Dictionary<string, string> query)
            string _formTypeName = "";
            string _listTypeName = "";
            query.TryGetValue(QueryFields.ListPicker_FormType.ToString(), out _formTypeName);
            query.TryGetValue(QueryFields.ListPicker_ListType.ToString(), out _listTypeName);
            if (_formTypeName.Length != 0) formType = (FormTypes)(Convert.ToInt32(_formTypeName));
            if (_listTypeName.Length != 0) listType = (ListTypes)(Convert.ToInt32(_listTypeName));

You would call processQuery method from OnNavigatedTo method of your page.

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
            Dictionary<string, string> _params = new Dictionary<string, string>(NavigationContext.QueryString);
            processQuery(new Dictionary<string, string>());

If you have 100’s of case statements (to choose a page) in GetUri, and you are concerned about performance, refactore the method to accept page name with path as string. With page path name directly in string, you would not need case statements. By the way, in my case with about 80+ cases to get PageName, the query creation does not take more than 50MS, which is negligible for me. More so, navigation calls are not recursive ones.

Transparent Live Tile For Windows Phone 8.1

Transparent Live Tile For Windows Phone 8.1

Windows Phone 8.1 Dev Preview

Windows Phone 8.1 developer preview is totally awesome. So what is one of the most important things app devs can do right away, without much fuss, to make their apps look great with Windows Phone 8.1? Revisit your app’s Live Tile images. Why? In 8.1, Start screen is mesmerizing with the parallax effect and Live Tile with background overlay. Dev preview users are going crazy with new Start experience, and I am sure, with public release, end users are going to love to have background image as well. Take a look at this awesome Nokia Lumia 925 Start screen:


When users have a background image, they might not like to have solid Live Tiles block their beautiful background. So, revisit your app’s Live Tile images – all of them! Check if they are transparent or not? If they are like Cortana, Avirall Time Suite, etc. in the image above, you are all set. You can safely ignore this article and find some other awesome way to improve your app for WP8.1 (think Cortana). If they are not, I suggest to update ‘em ASAP. And it’s easy, too. Let’s see how you can create transparent Live Tile images with Open Source Inkscape. You could choose to use Paint.NET (not MS Paint), Photoshop, GIMP, or any other tool which allows you to export image with transparency. Though I prefer GIMP for image editing but I chose Inkscape for this demo. Let’s go.

Step 1: Setup the page


  1. Open Inkscape and create a new document and Open Document Properties from file menu.
  2. In most cases app icons are solid white, if yours is one too, change the background color of the page, temporarily, to light yellow. This is while working only so that you can see white color. Before exporting we will reset this to transparent (this is very important).
  3. This example is for 336 X 336 medium tile. So set the custom size to 336 X 336.
  4. Make sure Units is “px”.

Step 2: Setup the drawing


Windows Phone 8 Asset Template Guide suggests a 336 X 336 tile to have 110px margin on all sides. Create 110px margin guides on all the sides. To create margin guides click and drag from the horizontal ruler on the top and from the vertical ruler on the left.

Step 3: Create Live Tile image of your app


The center part between the margins is the space where your tile image will go. Create your image here. For this example I simply dragged the box from tool box and made a hole in it 😀

Step 4: Set background to transparent


To create a transparent Live Tile image we would like to have a transparent background. Go back in document properties and set Background to transparent by resetting “A” to 0. If your image is solid white, you might not see anything after making the background transparent. Don’t worry, your image is there (maybe somebody can tell how working space (not document background) in Inkscape can be made a different color than white).

Step 5: Export


  1. Open Export dialog from File > Export Bitmap…
  2. Set X0, X1, Y0, Y1 as shown in the image above.
  3. Browse for the image location, and make sure you give “PNG” as the extension of the image, NOT JPG or BMP.
  4. Export. (Alternatively, as suggested by Austin Andrews, you could export as SVG, and use his awesome service!)

Step 6: Check Final Image


Notice that your final image does not have a white background. Windows Photo Viewers’s light blue background is your image’s background.

You are done. You would want to change all Live Tile images of your app in the same way. A transparent Live Tile image will encourage users to have your app pinned to Start screen without obstructing their beautiful background images.

Respect your users!

Cortana, Sing Me A Song…

Cortana, Sing Me A Song…

Here is a quick trial of Cortana on WP8.1 dev preview on my Nokia Lumia 925. The funniest one is:
Me: “Sing me a song”
Cortana: “O Danny Boy the pipes are pipes are calling” 😀

See for yourself some fantastic capabilities of Cortana along with some funny takes, 0_0 :

C#|.NET : Size String, Truncate Lines

Swiss Crop Circle 2009 Aerial by Kecko, on Flickr
Swiss Crop Circle 2009 Aerial, a photo by Kecko on Flickr.

I needed to truncate lines from CSV string prepared for export through mail in my app. Windows Phone mail restricts text size to 1MB. In my app’s case some CSV reports could go beyond 1MB. To make sure that the CSV report does not exceed a desired size in bytes, I created this extension method – SizeIt. SizeIt can truncate lines (and characters if required) from a given string from beginning or from end and also inserts information text line (how many lines and characters removed) in the resulting string. Following is the test form created to show what the method does to a string. In this example a 300 byte 10 line string is given as input and asked to reduce it to <200 bytes, first from beginning, and then from end.



Here is the code for the extension method:

    public static class StringBuilderExtensions
        /// <summary>
        /// Sizes StringBuilder to given size
        /// </summary>
        /// <param name="sb">StringBuilder</param>
        /// <param name="bytes">Maximum Size of resultant string. Mostly the size of string will be less than max size</param>
        /// <param name="removeLinesFromBeginning">Pass true, if clipping has to happen in the beginning</param>
        public static void SizeIt(this StringBuilder sb, int bytes, bool removeLinesFromBeginning)
            bool _stringReplacementHappened = false;
            bool _maxBytesAdjusted_for_lines = false;
            bool _maxBytesAdjusted_for_chars = false;
            string _insertThismessage = "";
            int _linesRemoved = 0;
            int _charsRemoved = 0;
            //try removing lines.
            while (System.Text.Encoding.Unicode.GetByteCount(sb.ToString()) > bytes)
                char _alternateNewLine = '\r';
                string _workingString = sb.ToString();
                if (!_workingString.Contains(Environment.NewLine) && !_workingString.Contains(_alternateNewLine))
                int _newlinelocation = sb.ToString().IndexOf(Environment.NewLine);
                int _lastNewlinelocation = sb.ToString().LastIndexOf(Environment.NewLine);
                if (_newlinelocation <= 0)
                    _newlinelocation = sb.ToString().IndexOf(_alternateNewLine);
                if (_lastNewlinelocation <= 0)
                    _lastNewlinelocation = sb.ToString().LastIndexOf(_alternateNewLine);

                if (removeLinesFromBeginning)
                    sb = sb.Remove(0, _newlinelocation + 1);
                    _stringReplacementHappened = true;
                    _insertThismessage = string.Format("... {0} lines removed{1}", _linesRemoved, Environment.NewLine);
                    int _lastReturnAt = _lastNewlinelocation;
                    int _charsInLastLine = sb.Length - _lastNewlinelocation;
                    sb = sb.Remove(_lastReturnAt, _charsInLastLine);
                    _stringReplacementHappened = true;
                    _insertThismessage = string.Format("{1}{0} lines removed...", _linesRemoved, Environment.NewLine);
                if (!_maxBytesAdjusted_for_lines)
                    bytes -= 50; //40 extra bytes for information text
                    _maxBytesAdjusted_for_lines = true;
            //if it's still more than the desired size
            if (System.Text.Encoding.Unicode.GetByteCount(sb.ToString()) > bytes)
                int _currentBytes = System.Text.Encoding.Unicode.GetByteCount(sb.ToString());
                if (!_maxBytesAdjusted_for_lines)
                    bytes -= 100;
                    _maxBytesAdjusted_for_lines = true;
                    _maxBytesAdjusted_for_chars = true;
                else if (!_maxBytesAdjusted_for_chars)
                    bytes -= 50;
                    _maxBytesAdjusted_for_chars = true;
                int _removeChars = (_currentBytes - bytes) / 2;
                if (removeLinesFromBeginning)
                    sb = sb.Remove(0, _removeChars);
                    _stringReplacementHappened = true;
                    _insertThismessage = string.Format("... {0} lines and {1} chars removed{2}", _linesRemoved, _removeChars, Environment.NewLine);
                    sb = sb.Remove(sb.Length - _removeChars, _removeChars);
                    _stringReplacementHappened = true;
                    _insertThismessage = string.Format("{2}{0} lines and {1} chars removed...", _linesRemoved, _removeChars, Environment.NewLine);
            if (_stringReplacementHappened)
                if (removeLinesFromBeginning)
                    sb.Insert(0, _insertThismessage);

You may extend SizeIt to make it even smarter because it has following shortcomings in current version:

  • Does not truncate very closely to Max size. Will always be less than 50 bytes from max.
  • If there are only two lines and line of truncating side is huge, even a slight reduction in size will remove the complete content of the huge line, meaning loosing most of the text. This could be taken care of by firsts analyzing the string and then truncating line/character, as required
  • The logic inherently tries to remove lines first, should intelligently decide whether to remove line or chars.

Navigation Hierarchy

Avirall Time Suite is an extensive app with 60,000+ working LOC in .cs files. I have not calculated the lines of code in XAML because a major portion of them are auto-generated. Still, there is about same number of lines in XAML files, as well. Avirall has 15 pages and 3 of them have about 5 types, so in all about 30 pages show up in Avirall. During documentation I created a high level diagram of navigation hierarchy in the app. I think it gives a bird’s eye view of how the app’s control flow, kind of circulatory system. This is how it looks like :


Download Lumia 925 Emulator Skin

Have you seen this feature demo video of Avirall? (jump to 00:50)

Do you like the emulator? This is Visual Studio Windows Phone Nokia Lumia 925 emulator skin, i created :D.


You can also create your own app demo video with this skin! Download this skin from here.

Instructions about how to apply skin to your emulator are here.

Happy skinning, oops!