Coding4Fun toolkit 2.1.0 released #WinRT #wpdev #windev


This is the 3rd iteration of toolkit updates I am pushing out. Like the other 2, this one builds on Windows Runtime WinRT app support for Windows Platform development.

This release also brings WinRT support close to what Silverlight version supported and finally drops support for Silverlight apps. The SL version is still available on nuget but it is unlikely to receive any updates.

SuperSlider (ColorSlider + ColorPicker) has a gotcha and its gonna need some clever work. Internally it uses code that monitors movement for updates and movements to prevent scrolling when the control is contained within Pivot, Hub or FlipView containers however lack of Touch class has forced me to use PointerPressed / PointerMoved and PointerReleased for these and in my tests, Pivot does not bubble those events and control doesn’t work correctly. Keep this in mind

Sample apps available in stores will be updated to reflect the changes

258x67_WP_Store_cyan WindowsStore

Control Windows Phone 8.1 Windows 8.1
AboutPrompt ×
InputPrompt ×
MessagePrompt ×
ToastPrompt ×
PasswordInputPrompt ×

Happy coding


WinRT and application view wide Pointer event monitoring #wpdev #windev

It seems like every year I go through same technical difficulties. Last year I blogged about WinRT and pointer manipulation #win8dev #winrtdev

One of the underlying classes detects manipulation by user by means of Touch class. This class never made it to WinRT XAML and I have been messing around for a few days now… until something finally sunk in..

CoreWindow exposes following events

PointerEntered Occurs when a pointer moves into the bounding box of the Windows Store app.
PointerExited Occurs when the pointer moves outside the bounding box of the Windows Store app.
PointerMoved Occurs when a pointer moves within the bounding box of the Windows Store app.
PointerPressed Occurs when a mouse button is clicked, or a touch or pen contact is detected, within the bounding rectangle of the Windows Store app.
PointerReleased Occurs when a mouse button is released, or a touch or pen contact is lifted, within the bounding rectangle of the Windows Store app.

These events work exactly like Touch.TouchFrameReported and get bubbled up no matter which UIElement is tapped.

Time to continue porting

Support for Windows Phone 8.1 WinRT for Coding4Fun

Earlier this year, I took the responsibility of ensuring that  Coding4Fun toolkit supported Windows Runtime apps on Windows Phone 8.1. I spent a good part of March / April porting major chunks of code without porting XAML.

Occasionally I was reminded of the pending work by both Clint Rutkas and others, namely Glenn Versweyveld. After another round this week, I decided to take advantage of the quiet time I am having to push this through.

I have created a fork of coding4fun repo on codeplex and so far this is what i have done

  • Coding4Fun.Toolkit updated to support universal apps (Win8.1 and WP8.1)
  • Coding4Fun.Toolkit.Audio updated to support universal apps (Win8.1 and WP8.1)
  • Coding4Fun.Toolkit.Storage updated to support universal apps.
  • Created Coding4Fun.Toolkit.Controls project to explicitly support WP8.1
  • Added Tile, ImageTile, SuperImage, ColorHexagonPicker, BubbleChat & BubbleChatTextBox controls

Once parity with existing Win8.1 lib has been achieved, the next version of toolkit will be released on Nuget.

Images and Scaling with Windows Runtime #WinRT #WPDev #Windev

With the advent of Windows Phone 8.1, developers have the option of using WinRT native XAML stack as opposed to the Silverlight XAML the only option with early Windows Phone iterations.

One of the differences between WinRT XAML and Silverlight XAML is scaling and like with fonts, & images, scaling can have a significant effect on the look and feel of an app.

The default behavior with Windows Phone 8 was the inherent Silverlight behavior of scaling the image to fit. This meant that unless a high-resolution image was used, the image would end up looking blurred. Windows Runtime takes a different approach.

Windows 8x supports multitudes of screen sizes, resolutions and DPI. Windows Phone now supports 4 resolutions. The way Windows Runtime deals with this is by allowing developer to specify multiple images to match certain scale factors.

Windows Store Apps Windows Phone Store Apps
1.0 (100% no scaling) 1.0 (100% no scaling)
1.4 (140% scaling) 1.4 (140% scaling)
1.8 (180% scaling) 2.4 (240% scaling)

The runtime would determine the scaling factor to use depending upon the screen size, resolution, DPI and the form factor of device in question. The developer is required to supply images for scaling 1; the other scale factors are optional. If they are supplied, they will be used if necessary.

There are two ways of supplying images to support multi-scaling support.

  • Specify image scale within the file name e.g. Image.scale-100.png or Image.scale-140.png
  • Create direct for each image scale and place images inside without specifying scaling like in 1. E.g. scale-100/Image.png or scale-140/Image.png

The attached project includes examples of both ways.

To use this and enable auto-scaling support, you specify the image as specified below

<Image Source="Assets/Iris.png" />
<Image Source="Assets/Iris2.png" />

Occasionally it is necessary to set the images from code. In those instances, one should query the windows runtime to determine the current scaling factor and return appropriate image resource.

var uri = new System.Uri("ms-appx:///Assets/Iris.png");
var file = await StorageFile.GetFileFromApplicationUriAsync(uri);

This will correctly detect the scaling factor and get appropriate file.

Alternatively, for Windows 8x, we can use DisplayProperties.ResolutionScale to determine current scaling and for Windows Phone, we can use DisplayInformation.RawPixelsPerViewPixel.

Uri uri = null;
    var rawpixelperview = Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel; 

    var Width = Convert.ToInt32(Window.Current.Bounds.Width * rawpixelperview); 
    var Height = Convert.ToInt32(Window.Current.Bounds.Height * rawpixelperview); 

    if(Width == 480 && Height == 800)
        uri2 = new System.Uri("ms-appx:///Assets/scale-100/Iris2.png");
    else if((Width == 720 && Height == 1280 ) || (Width == 768 && Height == 1280))
        uri2 = new System.Uri("ms-appx:///Assets/scale-140/Iris2.png");
        uri2 = new System.Uri("ms-appx:///Assets/scale-240/Iris2.png");
    switch (DisplayProperties.ResolutionScale)
        case ResolutionScale.Scale100Percent:
            uri2 = new System.Uri("ms-appx:///Assets/scale-100/Iris2.png");

        case ResolutionScale.Scale140Percent:
            uri2 = new System.Uri("ms-appx:///Assets/scale-140/Iris2.png");

        case ResolutionScale.Scale180Percent:
            uri2 = new System.Uri("ms-appx:///Assets/scale-180/Iris2.png");

var file = await StorageFile.GetFileFromApplicationUriAsync(uri);

It worth noting that images set in xaml and those done codebehind behave differently at least as far as size on screen is concerned. The only way to achieve correct size as visible in xaml is to set size to that of scale 1.0 image.

Supporting Accessibility

Windows Store apps support high contrast mode. The two available options are

  • Black background and white foreground
  • White background and black foreground.

To additionally support these two accessible image formats, you need to provide scale factor 1 images named / placed appropriately. I have excluded the high contrast images from sample as windows phone was using that by default.






Downloadable sample code can be downloaded here

DLL / Reference hell with #WP8 #SL81 and #WinRT component

Over the last month, I have gone back to “AlarmClock” app (my 3rd Windows Phone app from back in 2011). I have updated it to render time updates on live tile. In fact I am quite proud the mechanism I use. I additionally provided 50 downloadable font packs that users can choose from (purchasable in a set of 10).

Original solution
The update mechanism was initially based on Silverlight Background Task. The tile update mechanism of course updates tile based on local time. However a user reported that when travelling between timezones, the tiles kept showing previous timezone times until the next background task run started pushing new ones based on new local time.

I deliberated on this and came to the conclusion that somewhere something was fishy.. its possible that Tile updates are actually scheduled on UTC as opposed to local time or maybe I just don’t understand it. Either way, I had to fix this issue

Solution 2: Fix for Timezone change
The new windows phone 8.1 introduced a bunch of new WinRT API that included API for Background task including those that run on Timezone change. So I dumped SL based Background Task and went full stream with WinRT component. Added 2 WinRT classs on for Timer and another for Timezone and this worked great.

Another user wanted the clock and tile updates to support multiple Timezones – wanted to pin Hong Kong and Seattle. My app so far only supported local device timezone.

Soluion 3 – Multiple Timezone support

.NET 4.5 comes with TimeZoneInfo class.This provides a nice method GetSystemTimeZones which lists all timezones and make it possible to convert between those. However Windows Phone .NET Runtime does not come with this and there is not suitable WinRT API either. Yay!!
Oren Novotny created a good Win32 wrapper which works on both WP8, WP81, SL81 and WinRT
I fired up Nuget Package Manager and searched for timezone..found Timezone conversion between WinRT and PCL.. Added a reference to the App and reworked it to support user selectable timezone etc. This required me to select target between x86 and ARM – any CPU no longer an option.

Next step?? Add Timezone helper reference to WinRT component. Bang bang bang.. nugget sorted it all out.. that was easy.. modified the background processor to update all tiles with correct timezone times!! nice 🙂 What could possibly go wrong ?

Hit F6, (Old school.. modified VS 2013 to build o F6 like before).. all good. Hit F5… wait for it !!!!

Runtime exception – File not found System.Runtime.InteropService.. quick search showed reference conflict..

Step 1) Set WinRT component to x86 instead of Any CPU.. maybe that will do the trick!!!

Nope far from it… Result System.BadImageFormatException thown when trying to run the app.

Step 2) Download code and make a part of existing WinRT component..

Nope still the same error(s)

While deliberating, realised that I called code from Background Task directly from my app.. 3rd trial

Step 3)

Remove calls to code in Background Task from App
Nuget Reference to App
Code within WinRT component for internal use
App – x86 / ARM target
WinRT component – Any CPU tagt

Bingo.. It all work as advertised!!

Took me day to figure try out various options

Color Picker for #win8dev

I use colour picker across multiple projects on both windows phone and windows 8. Allowing users a choice of colour is a good thing from experience perspective. Whilst I found a number of solutions for Windows Phone, I never really found much for Windows 8.

Last year I ported the Coding4Fun ColorHexagonPicker to use with my TableClock app.Recenly working on Scribble I needed a broader range of colours and I decided to create an appbar control that conveniently lives in AppBar.

I have uploaded the source to Github. Feel free to fork and extent.

Screenshot (1)


WebView and working with C# and XAML #win8dev

Many of my Cineworld app users whether its Windows Phone or Windows 8 complain about lack of in-app ticketing. In fact I would personally as a user prefer otherwise – Use tried and trusted website for ticketing as opposed to an app – sure my app might be good enough to be an official app but that’s a different issue.

So what did I do, well for Windows Phone 7 and 8, I used WebBrowser control and added in-app use of Cineworld mobile website. Most users are happy – can’t please everyone. I do remember that WebBrowser control offered many more events for management in Windows Phone 8 than in Windows Phone 7. So how about Windows 8 ?

Well Windows 8 / WinRT 1.0 ships with WebView control. This is similar is many ways to Windows Phone 7 WebBrowser control. Why do I say that ? Well, it contains LoadCompleted event to inform about page loaded but no loading event. Doesn’t expose the internal navigation stack and is substantially more painful than Windows Phone 7 Browser Control 😐

I am also aware that Windows 8.1 / WinRT 1.1 (??) ships with much improved WebView that exposes all the relevant event without hacks

Navigating Event: A quick search on the net found me Limitations of the WebView in Windows 8 Metro Apps. The post along side How to emulate Navigating event in the WebView turned out to be very useful. I used the WebViewWrapper to add Navigating event.

LoadCompleted Event: This event was exposed by the WebView and I used both maintain NavigationStack and toggle progress ring visibility

Progress Ring: Nothing can sit on top of WebView – no matter what order you define the elements in XAML. One needs to set WebView to collapsed visibility to show any other xaml content. I tend to toggle opacity to 0.5 and then show progress ring however this was a kill-joy till I found this “How to put a ProgressRing over a WebView” – easy peasy.. use WebViewBrush and paint a rectangle and hide the webview.. user cant really tell 🙂

Navigation Stack: Most pages in a Windows 8 apps expose back button. By default the back button calls GoBack defined in LayoutAwarePage.cs. It is however overrideable. So what should be behaviour be ? Well if you have been browsing a few pages, backbutton should ideally unwind that stack. Since WebView doesn’t really expose Nav Stack (just like Windows Phone 7 API), we need to do the dirty work. Use Completed to push the Uri. On Back button press pop the Uri. Apart from that, we just use InvokeScript to use browser’s internal nav stack using javascript.

<Grid Background="#FF231F20">
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>

        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>

    <WebView Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" x:Name="wbCineworld" />
    <Rectangle Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Name="MaskRectangle"/>

    <Grid x:Name="gProgress" Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="100" Background="White" Visibility="Collapsed">
        <ProgressRing x:Name="prProgress" HorizontalAlignment="Center" VerticalAlignment="Center" IsActive="True" Height="80" Width="80" Foreground="#FFB51C10"/>

    <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
    <Button Grid.Column="0" Grid.Row="1" VerticalAlignment="Bottom" x:Name="btnExitTicketing" Style="{StaticResource DeleteAppBarButtonStyle}" AutomationProperties.Name="Exit ticketing" Click="btnExitTicketing_Click" />
public sealed partial class InAppBrowser : Cineworld.Common.LayoutAwarePage
    public InAppBrowser()

        var wrapper = new WebViewWrapper(this.wbCineworld);
        wrapper.Navigating += WrapperNavigating;

    void WrapperNavigating(object sender, NavigatingEventArgs e)

    private Stack<Uri> NavigationStack = new Stack<Uri>();
    public static Uri NavigationUri { get; set; }

    private void SpinAndWait(bool bNewVal)
        WebViewBrush brush = new WebViewBrush();
        brush.SourceName = "wbCineworld";
        MaskRectangle.Fill = brush;

        this.wbCineworld.Visibility = bNewVal ? Windows.UI.Xaml.Visibility.Collapsed : Windows.UI.Xaml.Visibility.Visible;
        this.MaskRectangle.Opacity = bNewVal ? 0.5 : 1;

        this.MaskRectangle.Visibility = bNewVal ? Windows.UI.Xaml.Visibility.Visible : Windows.UI.Xaml.Visibility.Collapsed;

        this.gProgress.Visibility = bNewVal ? Windows.UI.Xaml.Visibility.Visible : Windows.UI.Xaml.Visibility.Collapsed;
        this.prProgress.IsActive = bNewVal;

    protected override void OnNavigatedTo(NavigationEventArgs e)

        this.wbCineworld.LoadCompleted += wbCineworld_LoadCompleted;



    void wbCineworld_LoadCompleted(object sender, NavigationEventArgs e)

    protected override void GoBack(object sender, RoutedEventArgs e)
        if (this.NavigationStack.Count > 1)
            this.wbCineworld.InvokeScript("eval", new string[1] { "history.go(-1)" });

            // note that this is another Pop - as when the navigate occurs a Push() will happen
            base.GoBack(sender, e);

    private void btnExitTicketing_Click(object sender, RoutedEventArgs e)
        base.GoBack(sender, e);

Let me just reiterate – I haven’t found something new, I have just found a few bits and have put them together. Happy coding.

Note: Meant to post this earlier.. I am checking NavigationStack.Count and ideally the check should be > 0 but in my case, there was an additional redirection and hence I am using Count > 1.