When Windows 8.0 first came along, I wrote a few apps with one of them being an app called kwiQR. It’s a QR code scanner. I mostly wrote it for the experience of writing it.
It’s still there in the Windows Store today – kwiQR and it looks like it’s taken some dings recently in terms of review as it used to sit around 4 stars and it seems to be sitting around 2 stars.
It’s also showing only a few hundred downloads in the Windows Store which is odd because I know it had hit quite a few thousand downloads across Windows 8.0/8.1 so maybe I’m not using the Store dashboard correctly on that one.
It was the first Windows 8.0 app that I’d written and it definitely had some challenges around its use of the camera – the APIs didn’t really seem to be there to take constant video frames from a video feed and, additionally, there was some flakiness in that I know for a fact that certain devices would blue-screen if they this app and got it to exercise their camera so I felt a bit guilty on that although, clearly, that’s not something within my control.
I made a few changes to the app when Windows 8.1 came along to let it cope with the ideas of snapped views and filled views going away but it was mostly unchanged and with the arrival of Windows 10 I’m thinking that it’s perhaps time to give this app a bit of an upgrade and see if I can bring it to Windows 10 as I think that would be an interesting thing to experiment with. Along the way I’m expecting to have to make some UI changes but also I’m hoping to pick up some of the new camera APIs and do a much better job than I managed in the first Windows 8.x iterations of this app.
With that in mind, I figured I’d blog the entire upgrade experience so that others can pick up on it as I go along.
Step 1 – Branching the Code Base
I have the assets for kwiQR stored in TFS online and I already have 2 branches – one for ‘Windows80’ in case I ever needed to go back and bug fix that code base and the ‘main’ branch and so, effectively, here I’ve just branched a ‘Windows81’ branch off of ‘main’ and I’ll perform my upgrade work in the ‘main’ branch.
Step 2 – Migrating the Projects to Target Windows 10 in Visual Studio 2015
The project opened up in Visual Studio 2015 just fine, it’s actually just a couple of projects – one for the main app and one for the ZXing library that I make use of for recognising QR codes.
For whatever reason (i.e. I can’t remember) I took ZXing.NET (I think) as source code and built with it here to support a WinRT app. I think I had to make a few modifications to what was available at the time.
I’m optimistic based on the website that I might be able to use the WinRT version of ZXing in my update and get rid of this whole library. I will see…
From the screenshot, it’s clear that my projects are targeting Windows 8.1 rather than Windows 10 UWP and so the first thing that I want to do is target them to Windows 10 by following this document;
Migrate your existing C#/VB Windows Store 8.1 or Windows Phone 8.1 apps
That involves a 17 step process and I’ve gone through it a couple of times already moving VS 2015 RC projects to RTM projects but this was my first time trying to move 8.1 projects to 10.0 projects.
I did it on both of my projects and then attempted to re-load them into Visual Studio. The first attempt, I hit a fail and tried to get MSBuild to rescue me;
and, sure enough, this was because I’d forgotten to add a TargetPlatformMinVersion to the project files.
With that in place, my project files reloaded into Visual Studio and seemed to be targeting UWP;
but I’d a strong suspicion that they weren’t going to build because I didn’t see any .NET references;
but pressing build on that ZXing project got it to build ( VS restored Microsoft.NETCore.UniversalWindowsPlatform for me ) and it built without error.
Building my main kwiQR project gave me a mixture of errors/warnings;
Clearly, I have a few problems here;
- the SettingsPane (from the Charms bar) no longer exists on Windows 10 so I’m going to have to do something about that. For now, I can comment out the code that is trying to display my application settings in response to the settings pane being showed.
- I need to do something around setting a 30×30 logo on a secondary tile – that needs visiting by the looks of it and I’ve a feeling that I should have visited it previously when I ported to Windows 8.1.
- the lack of the CameraOptionsUI was more of an interesting one. This class seems to have disappeared! Well, not really! From the docs it would seem that this has moved into the Desktop device family and so I can’t use this class on anything other than desktop. Now…I’ve a suspicion that I can re-work the way that this application uses the camera but, for now, I figured that the shortcut to getting something that at least builds is to add a reference to the desktop extensions and then my code will at least build.
and then my code at least seemed like it might build but, no, I then hit app manifest validation problems;
I really wasn’t sure what this was but the manifest designer didn’t like my manifest either;
I figured that perhaps the best thing to do was to create a new, blank Windows 10 project and see if I could see the differences between my manifest and a blank one.
Here’s my manifest before the upgrade;
<?xml version="1.0" encoding="utf-8"?>
<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest" xmlns:m2="http://schemas.microsoft.com/appx/2013/manifest">
<Identity Name="blah" Publisher="blah" Version="3.1.0.0" />
<Properties>
<DisplayName>kwiQR</DisplayName>
<PublisherDisplayName>Mike Taulty</PublisherDisplayName>
<Logo>Assets\StoreLogo.png</Logo>
</Properties>
<Prerequisites>
<OSMinVersion>6.3.0</OSMinVersion>
<OSMaxVersionTested>6.3.0</OSMaxVersionTested>
</Prerequisites>
<Resources>
<Resource Language="x-generate" />
</Resources>
<Applications>
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="kwiQR.App">
<Extensions>
<Extension Category="windows.shareTarget">
<ShareTarget>
<SupportedFileTypes>
<FileType>.png</FileType>
<FileType>.jpg</FileType>
<FileType>.bmp</FileType>
</SupportedFileTypes>
<DataFormat>Bitmap</DataFormat>
</ShareTarget>
</Extension>
</Extensions>
<m2:VisualElements DisplayName="kwiQR" Description="kwiQR" BackgroundColor="#004F8A" ForegroundText="light" Square150x150Logo="Assets\squareLogo.png" Square30x30Logo="Assets\smallLogo.png">
<m2:DefaultTile ShortName="kwiQR" Wide310x150Logo="Assets\wideLogo.png" Square310x310Logo="Assets\largeLogo.png" Square70x70Logo="Assets\tinyLogo.png">
<m2:ShowNameOnTiles>
<m2:ShowOn Tile="square150x150Logo" />
</m2:ShowNameOnTiles>
</m2:DefaultTile>
<m2:SplashScreen Image="Assets\splash.png" />
<m2:ApplicationView MinWidth="width320" />
</m2:VisualElements>
</Application>
</Applications>
<Capabilities>
<Capability Name="internetClient" />
<DeviceCapability Name="webcam" />
</Capabilities>
</Package>
and here’s the first one that I could get the manifest designer to load;
<?xml version="1.0" encoding="utf-8"?>
<Package
xmlns="http://schemas.microsoft.com/appx/manifest/foundation/windows10"
xmlns:mp="http://schemas.microsoft.com/appx/2014/phone/manifest"
xmlns:uap="http://schemas.microsoft.com/appx/manifest/uap/windows10"
IgnorableNamespaces="uap mp">
<Identity Name="blah" Publisher="blah" Version="3.1.0.0" />
<Properties>
<DisplayName>kwiQR</DisplayName>
<PublisherDisplayName>Mike Taulty</PublisherDisplayName>
<Logo>Assets\StoreLogo.png</Logo>
</Properties>
<Dependencies>
<TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.0.0" MaxVersionTested="10.0.0.0" />
</Dependencies>
<Resources>
<Resource Language="x-generate" />
</Resources>
<Applications>
<Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="kwiQR.App">
<!--<Extensions>
<Extension Category="windows.shareTarget">
<ShareTarget>
<SupportedFileTypes>
<FileType>.png</FileType>
<FileType>.jpg</FileType>
<FileType>.bmp</FileType>
</SupportedFileTypes>
<DataFormat>Bitmap</DataFormat>
</ShareTarget>
</Extension>
</Extensions>-->
<uap:VisualElements Square44x44Logo="Assets\wideLogo.png" DisplayName="kwiQR" Description="kwiQR" BackgroundColor="#004F8A" Square150x150Logo="Assets\squareLogo.png" >
<uap:DefaultTile ShortName="kwiQR" Wide310x150Logo="Assets\wideLogo.png" Square310x310Logo="Assets\largeLogo.png">
<uap:ShowNameOnTiles>
<uap:ShowOn Tile="square150x150Logo" />
</uap:ShowNameOnTiles>
</uap:DefaultTile>
<uap:SplashScreen Image="Assets\splash.png" />
</uap:VisualElements>
</Application>
</Applications>
<Capabilities>
<Capability Name="internetClient" />
<DeviceCapability Name="webcam" />
</Capabilities>
</Package>
just in case you hit similar problems. That said, in order to get the designer to load I’ve had to lose some functionality like share targeting and so on which I’d really like to put back. I’d lied to the manifest about having a 44×44 logo and so, naturally, when the designer does load it is unhappy;
I went and made a 44x44px logo and fed it to the designer and that solved that particular problem. I also fed it a 71x71px logo while I was there as I was missing that one too.
I then went back to see if I could re-make the application as a share-target using the designer;
and I thought I was now ready to deploy and run but then I hit something that I’d suspected I might hit which is;
I’ve seen this asked before – there’s an open question on it here at the time of writing.
I added a PhoneIdentity element and blanked it out with 0s as I don’t think I need one of these as my app doesn’t have a previous phone version that it needs to link to.
And then I could build, deploy and run.
Step 3 – The First Smoke Test
Ok, now I have an app that’s up and running in a window on my desktop and, frankly, it feels very “Windows 8.0” which isn’t surprising as that’s what I wrote it for. Here it is on the desktop and I see a few challenges straight away;
I think it’s fairly clear that this app was intending to be ‘touch first’ when I wrote it with that big button in the middle of the screen and the app bar is looking a bit lonely. If I navigate into the page which launches the camera, it does seem to work;
but that back button looks a little incongruous and it’s even worse when I open it up;
but I did manage to point it at a print out of a QR code and found;
- Rear camera (Surface Pro 3) did recognise the QR code but had trouble focusing.
- Front camera (Surface Pro 3) did recognise the QR code.
- 3rd camera crashed the app!
Once I had QR codes into the app, the display of them is pretty poor with the vertical scrolling that my GridView has picked up;
this was a grouped GridView and it’s now scrolling vertically off the screen and not providing much of an experience. There’s also lots of margins here which seemed ‘ok’ on Windows 8.x but feels out of place on Windows 10 with the app running in a window like this.
I also tried sharing a QR code from another app (Edge browser) into the kwiQR app and that seemed broken – e.g. sharing a photo of a QR code from the Photos app into kwiQR didn’t seem to work but I need to dig into that a little more because it didn’t share into the Mail app either.
Naturally, I couldn’t try sharing from my app because I have no UI to invoke sharing at this point.
I also found that selection was broken here in the sense that if I tap on any of the tiles above then, rather than being selected, the item gets invoked so I need to dig into that too.
There used to be a semantic zoom in here too – I’m not sure how I’d now get to that functionality as it’s not happening for me right now.
So, in total, there’s quite a lot of work to do here to get this to be a fully fledged Windows 10 app but I’ve made a start.
I’ll continue this as a series of posts as I make progress and I’m going to try and keep a track of what level of effort I spend on migrating this app.
So far, I’d say it’s been around 2 hours…
Mike Taulty 