Invoke IT Limited

Semantic zoom – beyond the stock behaviour – #windev #winrt

Hermit Dave — Wed, 15 May 2013 07:55:12 +0000

Update: Download a sample implementation from skydrive

Last year I was working on Cineworld app for Windows 8. Having use LongListSelector I wanted to ensure that I can transfer the look and feel. However I was fighting multiple battles – the first one is that while LongListSelector is a single control, SemanticZoom control itself contains ZoomInView and ZoomedOutView. These are independent of each other and most examples then to show settings data to zoomed in view and then zoomed out view referring to zoomed in view. It gets messy – maybe I am just slow but it was not intuitive and took me ages.

While mucking around, I came across this post and from there, kept trying till I got what I wanted.

List dataLetter = null;

public ListFilms()
{
    this.InitializeComponent();

    FilmData cd = new FilmData(App.Films);

    dataLetter = cd.GroupsByLetter; 
    cvsFilms.Source = dataLetter;
    gvZoomedInFilms.SelectionChanged -= gvZoomedIn_SelectionChanged;
    gvZoomedInFilms.SelectedItem = null;
    (semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = cd.FilmHeaders;     gvZoomedInFilms.SelectionChanged += gvZoomedIn_SelectionChanged;

    semanticZoom.ViewChangeStarted -= semanticZoom_ViewChangeStarted;
    semanticZoom.ViewChangeStarted += semanticZoom_ViewChangeStarted;
}

void semanticZoom_ViewChangeStarted(object sender, SemanticZoomViewChangedEventArgs e)
{
    if (e.SourceItem == null)
        return;

    if (e.SourceItem.Item.GetType() == typeof(HeaderItem))
    {
        HeaderItem hi = (HeaderItem)e.SourceItem.Item;

        var group = dataLetter.Find(d => ((char)d.Key) == hi.Name);
        if (group != null)
            e.DestinationItem = new SemanticZoomLocation() { Item = group };
    }
}

// FilmData looks like this
private List groupsByLetter = null;

public List GroupsByLetter
{
    get
    {
        if (groupsByLetter == null)
        {
            groupsByLetter = new List();

            var query = from item in Collection
                        orderby ((FilmInfo)item).Title
                        group item by ((FilmInfo)item).HeaderChar into g
                        select new { GroupName = g.Key, Items = g };

            foreach (var g in query)
            {
                GroupInfoList info = new GroupInfoList();
                info.Key = g.GroupName;
                foreach (var item in g.Items)
                {
                    info.Add(item);
                }
                groupsByLetter.Add(info);
            }
        }

        return groupsByLetter;
    }
}

List filmHeaders = null;
public List FilmHeaders
{
    get
    {
        if (filmHeaders == null)
        {
            filmHeaders = new List();

            char c = '#';

            filmHeaders.Add(new HeaderItem() { Name = '#', IsEnabled = this.GroupsByLetter.Exists(k => ((char)k.Key) == c) });
                    
            for (int i = 65; i <= 90; i++)
            {
                c = (char)i;

                if (this.GroupsByLetter.Exists(k => ((char)k.Key) == c))
                    filmHeaders.Add(new HeaderItem() { Name = c, IsEnabled = true });
                else
                    filmHeaders.Add(new HeaderItem() { Name = c, IsEnabled = false });
            }                    
         }

        return filmHeaders;
    }
}

I think that’s about it. Its been 6 months now and I think I am going to change how it looks some stuff will remain as it is, others will have to change

FlipTile, CycleTile and various iterations of #wpdev sdks

Hermit Dave — Thu, 09 May 2013 13:53:12 +0000

As you might have realised, the last few weeks, cineworld app has been my obsession. I started work on WP8 port and then back-ported some changes to WP7 version of the app (its the only one that’s live at the moment so makes sense). So what did I do so far on it (WP7 version) ?

1) Moved to using 50% space when displaying film posters, moved film little on top of the posters, removed the button style that caused me many xaml exceptions on WP8
2) Moved to using good quality images only for ImageTile control.
3) Added background task to download data files and to set Tile images

This is live as we speak and a few people emailed me saying it looks great. Now I am not going to create yet another background task for WP8 version (since I wanted to use Cycle Tile Template for WP8 version of the app.
Microsoft’s own tile related pages show how to support newer tiles for WP7.8 and WP8 even though the app itself is built on WP 7.1 (Mango) sdk

So far I stayed away from temptation of managing image repository on the device. you can see that it gets messy eventually and you have to clean up and what not.. however after implementing basic solution, it started throwing exceptions.. files used for tiles cannot be remote. Bugger.. more work

Step 1): Download image files locally. I have been using AsyncWebClient (Custom wrapper with TaskCompletionSource) exposing awaitable DownloadFile method. Plug that in and download all the files. Its background tasks, I am not really fussed about parallel execution.. just manageable execution (read sync like)

Step 2): For Uri array using relative path and ??? still nothing. More work, a quick search about the net found me a couple of posts for “live tile isolated storage image WP7″ File Path in Isolated File Storage is the one that I first opened and a quick scan reminded me of “isostore” based Uri

Step 3): Save all the images to Shell\SharedContent and switch all Uri to use isotore:/Shell/SharedContent/Filename.jpg

The code below will help you create live tiles with new tile templates from WP7.1 (Mango) sdk based project. I will be using the same code for WP8 in coming days since its the same background task

A word to the wise:
* You cannot determine if the template used by Tile is Standard or a new one.
* What I now do is Create a CycleTileData template when user wants to pin (if WP7.8 or WP8) else StandardTileData
* When iterating tiles, I try CycleTileData template and failing that try StandardTileData for update

Code snippets that might help:

Add AppExtra above App element in WMAppManifest.xml file (works for both WP7.8 and WP8)

public async Task DownloadFileAsync(string url, string filename, string folder = null)
{
    // create a web client for downloading the string
    var wc = new WebClient();

    try
    {
        IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication();

        string file = (folder == null ? filename : String.Format("{0}/{1}", folder, filename));
                
        using (Stream s = await wc.OpenReadTaskAsync(url))
        {
            using (Stream slocal = isf.OpenFile(file, FileMode.Create))
            {
                s.CopyTo(slocal);
            }
        }
    }
    catch (Exception ex)
    {
        if (1 == 1) // just to check exceptions during debugging. do whatever pleases you
        {
        }
    }
}

//works for both WP7.8 and WP8
private static Version TargetedVersion = new Version(7, 10, 8858);
public static bool IsTargetedVersion { get { return Environment.OSVersion.Version >= TargetedVersion; } }

private static void SetTileBackground(string[] filesToShow, string folder, Random random, ShellTile currentTile)
{
    bool tryFlip = false;

    if (Config.IsTargetedVersion)
    {
        try
        {
            Uri smallimage = new Uri("Images/CycleSmall.png", UriKind.Relative);
            Uri mediumimage = new Uri("Images/CycleMedium.png", UriKind.Relative);

            UpdateCycleTile(smallimage, mediumimage, folder, filesToShow, random, currentTile);
        }
        catch
        {
            tryFlip = true;
        }
    }
    else
        tryFlip = true;
            
    if(tryFlip)
    {
        int rand = random.Next(0, filesToShow.Length);

        StandardTileData NewTileData = new StandardTileData
        {
            BackBackgroundImage = new Uri(String.Format("isostore:{0}/{1}", folder, filesToShow[rand]), UriKind.Absolute)
        };

        currentTile.Update(NewTileData);
    }
}

public static void UpdateCycleTile(
    Uri smallBackgroundImage, Uri backgroundImage,
    string folder, string[] filesToShow, Random random, ShellTile currentTile)
{
    // Get the new cycleTileData type.
    Type cycleTileDataType = Type.GetType("Microsoft.Phone.Shell.CycleTileData, Microsoft.Phone");

    // Get the ShellTile type so we can call the new version of "Update" that takes the new Tile templates.
    Type shellTileType = Type.GetType("Microsoft.Phone.Shell.ShellTile, Microsoft.Phone");

    // Get the constructor for the new FlipTileData class and assign it to our variable to hold the Tile properties.
    var UpdateTileData = cycleTileDataType.GetConstructor(new Type[] { }).Invoke(null);

    // Set the properties. 
    SetProperty(UpdateTileData, "SmallBackgroundImage", smallBackgroundImage);

    Uri[] mediumImages = new Uri[9];

    mediumImages[0] = backgroundImage;
    for (int i = 1; i < 9; i++)
    {
        int rand = random.Next(filesToShow.Length);

        mediumImages[i] = new Uri(String.Format("isostore:{0}/{1}", folder, filesToShow[rand]), UriKind.Absolute);
    }

    SetProperty(UpdateTileData, "CycleImages", mediumImages);

    SetProperty(UpdateTileData, "Title", "my cineworld");
            
    // Invoke the new version of ShellTile.Update.
    shellTileType.GetMethod("Update").Invoke(currentTile, new Object[] { UpdateTileData });
}

private static void SetProperty(object instance, string name, object value)
{
    var setMethod = instance.GetType().GetProperty(name).GetSetMethod();
    setMethod.Invoke(instance, new object[] { value });
}

This by no means is fine / perfect code. Please treat it as a PoC and do whatever you do normally

Geolocator and MovementThreshold #wpdev #win8dev

Hermit Dave — Wed, 01 May 2013 22:37:00 +0000

Last few months, I have had too much on my plate. Been doing lot to Windows 8 and Phone development. Surprisingly Microsoft UK is keeping tabs on phone developers who aren’t adapting to #WP8 and seemingly, I was invited to a dev event targeting the likes of me

Sure I am going and in anticipation of the event, I decided to port Cineworld app to WP8. Its been a challenging task. Reworking a few bits of LongListSelector, Visual Studio / Blend disliking all the xaml and of course a button style causing xaml exception. If that wasn’t enough:

Having used Geolocator in Windows 8 app, I decided to use the same for WP8 as its usually a lot faster than GeoCoordinateWatcher. I moved the code to be more like Win8 and noticed that the location detection was flaky at best. Now I did the stupid thing and like in WP7 version, I decided to set both DesiredAccuracy to High and MovementThreshold to 0 thinking absolutely nothing.

Of course that didn’t help it, it made matters worse, instead of flaky behaviour, it decided to call it quits.

var pos = await locator.GetGeopositionAsync(TimeSpan.FromMinutes(5), TimeSpan.FromSeconds(2));

instead of timing out, it started to hang. In desperation, I started looking at other events exposed by this class and tried hooking into StatusChanged event. Now things were bad, I noticed that it was getting operation aborted exception and decided that something was seriously wrong and that I should take a nap instead

Of course the problem was still there when I woke up the next day its only later that I decided to search on Geolocation and operation aborted and realised that I wasn’t the only one and it was all my fault – causality of me setting the MovementThreshold to 0. I set it to 10 instead and bingo.. it all works.

While I didn’t find it, I hope this post helps people like an earlier post helped me.

What’s wrong with Windows 8

Hermit Dave — Wed, 13 Mar 2013 13:34:48 +0000

Everyone’s doing it and why should I not do the same ? Yeah yeah everyone’s been bad mouthing how horrible windows 8 and thought, why should I be left behind. So here’s my 2p on the subject.

I remember being one of the first to get a laptop with XP.. having used Windows 95 / 98 and ME plus Windows NT, Windows 2000, I was looking forward to it. I was young, naïve and stupid (actually last two don’t have an expiration date). I loved it yet in tons of places I kept reading that the changes were too far and users need to educate themselves yet again.

Just read this one.. it’s not that bad.. if you really want me to dig some, I will try

http://reviews.cnet.com/windows/microsoft-windows-xp-home/4505-3672_7-6534881.html

Of course we know how that went, XP did eventually coerce people into converting.. XP however wasn’t all that hyped..

Next up, we had the long anticipated Longhorn.. I was still relatively young (naïve and stupid) and what did I do, I installed the leaked alpha on my PC and played with it. Was a little disappointed not to see .NET integration into the system but oh well it was only an alpha.. things dragged on and we had Vista.

Vista was great, it did everything XP did and even more. There was only one drawback and that was a new shiny driver model. Crap Microsoft gave the OEMs just over a year to prepare drivers… Of course what happened, Vista was slated because of UAC and being buggy as hell (thank you OEMs.. my personal favourite was NVidia.. their drivers were worse than stock shipped by Vista).

“you can put lipstick on a pig, but it is still a pig“

All Microsoft did was to release rebranded Vista as Windows 7. Sure there were a few changes like toning down the UAC tiny bit but the main thing was that drivers had already matured in this time and bingo.. people loved Windows 7 like they loved XP..

Of course around that time, iPhones came and iPads came and Droids started running riot.. Microsoft was under pressure to deliver and they were working on Windows 8. The Metro UX plus a tiled interface was their answer. And they took away the start button. Just look at the two screen and tell me what you think of those !!

Most PCs after a few months of usage and installation crap-ware look like Picture 1. Is Windows 8 Metro UI that bad ? It looks cleaner and simpler, the icons are larger. Users can choose to pin / unpin what Start Screen shows. I keep hearing that power users hate Metro UI. What exactly is a power user ? My personal take is someone who has become adapt at clicking the icons on the desktop like in Picture 1. By that definition, I was never really a power user. Neither is my wife nor is my daughter, in fact they don’t even care about desktop forget the start menu

So if this is not a criticism of the larger easily clickable icons, what is it about ? You know it.. it’s the little blue orb that was called the Start Button. That thing that has been usually in the bottom left corner. This is about “Who moved my cheese?”
All would have been fine, if Microsoft had just left that in place and used that to toggle visibility of Metro UI / Start Screen.

Oh Microsoft what have you done !!

MVVM and me – Part 4

Hermit Dave — Mon, 11 Mar 2013 09:37:00 +0000

Its taken me ages to get things done. I am now at the last xaml screen and I am so tired. Last week I spent a bit of time going through AppBar.

I keep whining that Microsoft built this great Binding and Command mechanism in XAML however it was only a half hearted attempt and that they don’t really care whether you use MVVM or not.

AppBar is the perfect example of that. It does not support either. So the MVVM and XAML community (actually a few developers) have taken the task to themselves. They have created custom AppBar controls that support Binding and Commanding infrastructure.

So what controls did I find ? there’s

So what is the experience using them. The first two require you to set the appbar within Behaviours. The 3rd one is the closest to the native AppBar in terms of XAML and simplicity.

The stock WP7 xaml AppBar needs to be set list this.

AppBarUtils and Cimbalino require something like this

The Bindable AppBar

The biggest downside is that they do not render at design time. The single biggest advantage of MVVM goes out of the window. You need to use standard appbar in design more and them once you are happy with it, comment it out and replace it with Bindable / Commandable AppBar of your choice.

The whole experience has been such joy that instead of coding till the middle of the night, I switch the laptop off after about 30 – 45 mins of mucking about.

MVVM and me – Part 3

Hermit Dave — Thu, 07 Mar 2013 17:34:00 +0000

Today is continuation of yesterday’s post.

Yesterday my goal was to find out how one goes about setting static page strings in MVVM. There are many ways.

Hard code it directly in xaml
Define resources in App.xaml
Use Resource Dictionary

I have used ResourceDictionary a lot in past when dealing with Localization and I think that is the only right way to set xaml strings. That takes care of present and future need without being too bulky

By default my WP8 project added support for Localisation, It created Resource folder with AppResources.resx, LocalizedString class that exposes the resources and finally set it as a resource in App.xaml.

All you then do is set the strings like this

All sorted. And in case you decide to localise your apps, all you need to do is add more resx files.

MVVM and me – Part 2

Hermit Dave — Wed, 06 Mar 2013 22:11:33 +0000

I could have done this post yesterday but that would have been a long essay. Today we are going to look at displaying static data on XAML pages.

In C# when you have data that does not change, one tends to use const or static readonly. const causes compiler to replace all occurrences of variable usage with the actual data at compile time. That means you assemblies has no lookups at run-time. Static read-only is a static variable that can also be set in constructor – is read-only otherwise.

Now based on my previous experience doing WinForms and Webforms, normally I tend to set those directly in XAML. Say you want to content of a button or a textblock text (label). So the ideal way would be.

Take View Model
Define consts
Set bindings to consts
Compile and reload

Eureka.. there’s nothing..

Well XAML bindings make a big fuss of INotifyPropertyChanged interface. From sample I know that it works with properties so could it be that ?

Lets start:

Take View Model
Define consts
Define properties
Set property in the constructor to consts
Set bindings to properties
Compile and reload

There.. much better..

Lesson, const and compiler time optimisations are no good.. you need to define properties and additionally call PropertyChanged events and what not including set the properties at VM Creation in order to display data the proper MVVM way. A Single task of setting a text to a textblock or a button is translated into a handful tasks..

Update 1:
My friend @Scottisafool … suggested an alternative approach that he tends to use

Define resources in App.xaml
Set bindings to resources
Compile and reload

This also works.. sure it means that all your strings are in one place but that’s still not MVVM
So it turns out there is not right way but there is a wrong way!! Everything else but code-behind as the last resource is the pukka MVVM way. Wrap up for today I think.

Update 2:
More messages suggesting that the mechanism to declare labels is to either hard code those or use Resources. That’s all fine.. I could use ResourceDictionary just in case the future me might want to localise the app.

That however still leaves the need to support of real consts impossible. There isn’t any support for those in bindings wrt View Model

MVVM and me – Part 1

Hermit Dave — Tue, 05 Mar 2013 22:35:59 +0000

As you know I recently joined a big name in Mobile Money business as a Senior Windows Developer. Part of that job involves working with others and not just doing WP Dev as a hobbyist (which I still do).

Most WP Devs are inherently XAML devs and they are well versed in MVVM (Model-View-View Model not necessarily in that order). MVVM itself is an extension of MVP (Model View Presenter) which to an extent has similarities to MVC (Model View Controller). Microsoft in .NET 2.0 started extensive work (crusade) against code behind. The idea that has been propagated has been to write less code – its more declarative and less code driven. (Use the system generated code since you are no good at it )

Personally I have never been a fan of declarative code. I do like XAML but only the extensible nature of it. how I just about use / contain and create controls with ease. Historically I am a middle-tier / server-side developer who loves not worrying about UI BS. I have spend years making code lean and that means adding layers that do little isn’t my cuppa tea.

However I am developing my next hobbyist app using MVVM. The next few blogs are doing to deal with my experiences moving from code driven to MVVM driven app development.

Before we get started just want to mention the fact that if I wasn’t doing the app in MVVM, I would have already finished it. Right now I am still doing XAML screens and battling myself almost constantly.

Background Audio #win8dev #winrt

Hermit Dave — Fri, 22 Feb 2013 11:01:21 +0000

In this post I am going to detail some of the work I have been doing on Background Audio. But before I get onto it, let me say that the last few months have been crazy / busy, not highly motivational for personal dev etc. I have done a few updates over the last few months but no new development until this month.

About 2 weeks back I started work on Porting Slydr code to WPF control and that was a breeze. Infact last night I saw something about a simple app being tested.. makes me think on whether I should beat them to it or not.

Now back to Background Audio. With Windows Phone, one had to create a Background Audio Player which the app and system would then communicate with. The app could kick the Background Audio Player off and then exit and the audio would keep on playing. I have talked about this before and will saying it again. WPDev 7x provided many ways of playing audio. With Windows 8 and #WinRT your options are restricted. I have gotten used to giving MediaElement more usage and credit for what it does.

All you need to do is set the Source property and then call Play(). The audio starts playing. If the app gets suspended, the music stops playing. To enable background audio there are a number of things you need to do.
* Firstly set MediaElement‘s AudioCategory to BackgroundCapableMedia. This still doesn’t activate the Background Audio as its only the first step

* Now open package.appmanifest file. Open the Declarations tab and add Background Tasks. While you are there set the Supported task types property to Audio and Control Channel. You will also need to set the Start page in App settings. Of course now that you have done this, you will have to create a Badge logo before you can save the changes to appmanifest.

* Now back to codebehind of your page and add event handlers for MediaControl‘s PlayPressed, PausePressed, StopPressed and PlayPauseTogglePressed events

In my app I also support Previous Track / Next Track so I additionally added support for PreviousTrackPressed and NextTrackPressed events.

MediaControl.PlayPressed += MediaControl_PlayPressed;
MediaControl.PausePressed += MediaControl_StopPressed;
MediaControl.StopPressed += MediaControl_StopPressed;
MediaControl.PlayPauseTogglePressed += MediaControl_PlayPauseTogglePressed;
MediaControl.NextTrackPressed += MediaControl_NextTrackPressed;
MediaControl.PreviousTrackPressed += MediaControl_PreviousTrackPressed;

and

void MediaControl_PreviousTrackPressed(object sender, object e)
{
    this.Previous();
}

void MediaControl_NextTrackPressed(object sender, object e)
{
    this.Next();
}

void MediaControl_PlayPauseTogglePressed(object sender, object e)
{
    if (MediaControl.IsPlaying)
        this.Stop();
    else
        this.Play();
}

void MediaControl_StopPressed(object sender, object e)
{
    this.Stop();
}

void MediaControl_PlayPressed(object sender, object e)
{
    this.Play();
}

Now when you run the app, initiate the audio playback and navigate away from the app.. Bingo. the audio is still playing.

Enthasiasts beware

Hermit Dave — Mon, 11 Feb 2013 22:37:34 +0000

I have been a keen buyer of unlocked / sim free devices for years. The reason.. more manageable contracts and you get the latest and greatest updates without worrying about Telco’s update approval red tape.. Unfortunately my experiences over the last 1.5 years tell me that things aren’t the same..

Ever since Nokia released first Windows Phone 7 product, the update release cycles have been secretive. Even developers do not have access to new releases like before. I don’t necessarily blame Nokia for it but something has changed with Microsoft WP Team. Windows Phone 8 was supposed to get around this by OTA… guess what..it hasn’t.. Portico was released days after #WP8 became public and surprise surprise.. its rolling across all locked / Telco managed devices.. the only ones who are left behind are the enthusiasts who getting it the last. So much for shelling out your hard earned cash..

If you think this was the end of my rant.. it isn’t… I also learned recently that by default, Windows Phone while having the capability to do NFC Secure wallet payment has been shipped neutered.. yes it has a big piece missing and it requires your Telco to release that piece.. now you my enthusiast friend are stuffed.. if your Telco starts supporting Secure Wallets stuff, be prepared to flash your devices with Telco ROM.. that’s your only hope as things stand today.

I suppose I better go back to coding now. Have a fantastic evening..