29 Nov 2012

Windows Store app Development Snack: File Type Association Icons

For more posts in this series, see the series index.

image

One of the declarations you can have with a Windows Store app is the file type association, which lets file types become associated with your application. This means you can customise the icon for the file type & if the user double clicks an associated file, it will launch the application.

One of the properties of declaration is the logo property which is the icon to use for the file type. Logo is optional and if you do not specify it, or you specify it incorrectly, it uses the applications small icon (i.e. the 30x30) one – which doesn’t look great.

image

The solution to this is to correctly specify the logo, but that isn’t as straight forward as it seems. Firstly you don’t just have a single image you need FOUR icons with different resolutions

  • 16x16
  • 32x32
  • 48x48
  • 256x256

Next you need to name them correctly, the format is <name>.targetsize-<resolution>.<extension>, so for example if we wanted to use MyLogo.png as the file name we would have:

  • MyLogo.targetsize-16.png
  • MyLogo.targetsize-32.png
  • MyLogo.targetsize-48.png
  • MyLogo.targetsize-256.png

Lastly is putting in the correct logo name in the manifest, since you have four icons what do you use? You use the name + extension components. Using the example about we would have MyLogo.png as the name & Windows 8 is smart enough to figure out the resolution, insert the target bit and get the right image for the right resolution!

28 Nov 2012

Windows Store app Development Snack: Background Colour

For more posts in this series, see the series index.

When you are configuring the appxmanifest for your Windows Store app, one of the options is the background colour for the tile – YOU SHOULD ALWAYS SET THIS!

image

It is used for two things, firstly if your image is transparent this is the colour that will show through for example for Notepad Classic that is what I do – the actual image is just plain white & transparent.

image

The second one, which is not always the most obvious is when a small icon is needed, for example you do a pinch gesture on the start screen (semantic zoom is the technical term for it), the background colour is what is used as a border around the image. Below you can see a screen shot from my machine, and note two of them have this ugly black border – that is because they do not have a matching background colour set!

image

It is not always possible, especially for games with rich tile icons (note Angry Birds in the screen shot below) but I would suggest trying to find a similar colour anyway for example the top two below have a similar colour & Jetpack Joyride (the last one) chose white (which is at least better than ugly grey).

image

Another location for the small icon is the search charm

image

05 Nov 2012

Up skill from VS/TFS 2010 to VS/TFS 2012

I got some great news today that Colin from Imaginet will be running a fantastic two day course at Bytes in Midrand soon (19th & 20th November). 

Attached is the pamphlet for the event – which I highly urge you to have a look at and attend!

28 Sep 2012

Windows Store app Development Snack: Lock screen image pain

For more posts in this series, see the series index.

imageIn a recent application I made use of the amazing Metro Studio tool for the logo of the application and needed to create a lock screen image. Lock screen images must be white & transparent and 24px square so I used the tool to create the image as in the image below.

image

However I kept getting an error when trying to certify the app:

Image reference "ClusterGroup.png": The image "\ClusterGroup.png" has an ABGR value "0x9BFEFEFE" at position (8, 0) that is not valid. The pixel must be white (##FFFFFF) or transparent (00######).

Huh?! My image is white & transparent! Using the awesomely improved graphic editor in Visual Studio 2012 I went to check the pixel (column 8, row 0) in the error message. I used the eye dropper tool to get the colour into the right hand window and sure enough it isn’t white. It is a grey colour used to anti-alias the image. (This has been reported to SyncFusion – but no response at time of publishing)

image

The problem is this is not valid you can either have:

  • Fully transparent – from the error message the alpha channel needs to be zero and the RGB can be anything: 00######
  • White – from the error message the RBG must be max (so white) and then the transparency can be set to anything: ##FFFFFF

The second one means you can have solid white #FFFFFFFF or a more transparent option #77FFFFFF (for example). The idea is to use the transparency rather than a grey colour to anti-alias. For me the fix was to manually edit the pixels to fix this.

27 Sep 2012

Windows Store app Development Snack: Localised Resources & the Store

For more posts in this series, see the series index.

One of my applications had two sets of images, one with English and the other with Russian. While it is great to support both languages I did not want to fully localise the application, such as changing all the labels because I do not have the time & resources to do that. When I setup the project I put the English images in a folder named Comic/en and the Russian images in Comic/ru.

When I built the application I noticed some smart messages in the compiler about finding localised content – which I thought was nice and just ignored it.

image

(The text there is: MakePRI : warning 0xdef00522: Resources found for language(s) 'en, ru' but no resources found for default language(s): 'en-US'. Change the default language or qualify resources with the default language. http://go.microsoft.com/fwlink/?LinkId=231899)

The problem is that when you upload to the Windows Store that information is used to figure out what markets your application should be localised for, this meant I needed to submit a description for English, US-English & Russian! This would allow me to write the description in different languages but since that is not in my scope it became a hassle.

The “fix” was to prefix the folder with lang (so en became langen) – this tricked the compiler into not seeing this as localised and removed the problem.

AttachmentSize
Image icon Clipboard01.png5.12 KB
25 Sep 2012

Windows Store app Development Snack: InvalidOperationException for Share & Settings

For more posts in this series, see the series index.

With one of my earliest apps I kept having a problem with a COM exception being raised, when trying to setup the Share & Settings event handlers. A key factor is it didn’t happen all the time. I had it the following code on the constructor of my ViewModel class:

 

this.DTM = Windows.ApplicationModel.DataTransfer.DataTransferManager.GetForCurrentView();
DTM.DataRequested += ShareRequest;

Eventually I figured out that the exception was raised if the event was already attached, but this was in my view model class and this was in the constructor of the class (so should be new and fresh every time) – this didn’t make much sense to me. However the answer was in front of me the entire time: GetForCURRENTVIEW.

Windows 8 apps can be built in one of two ways:

  • Page Model – This is the same model as Windows Phone 7 where when you want a new UI you navigate to entire new page, or view.
  • Composition Model – In this model you have a single page, and you inject content in the form of user controls into the page. I am working with AtomicMVVM which follows this pattern.

The problem with the composition model, is that the events are tied to the page (or view) & since I never changed the page (just the content was swopped in and out), the event handlers were never being changed.

The solution for me was to make it possible for the view models to state if they have Share or Settings and then have a single place in the constructor to setup the configuration for the charms. I used a simple interface based system for this which the following code should illustrate. Since the event handler was attached once – the exception went away. This also allows my view to be very smart about the share & settings events and what it passes to those.

// during the startup I bind once to the event. Note that I onlt do this once the UI is up.
    bootstrapper.AfterStartCompletes += () =>
        {
            SettingsPane.GetForCurrentView().CommandsRequested += SettingCommandsRequested;
        };


void SettingCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
    var settings = Bootstrapper.CurrentViewModel as ISettings;
    args.Request.ApplicationCommands.Clear();

    // if the view model implements the interface then I can call the method to set the commands it needs.
    if (settings != null)
    {
        settings.LoadCommands(args.Request.ApplicationCommands);
    }
}

For a complete example of this see the Metro Demo in the AtomicMVVM samples: MetroDemo

21 Sep 2012

Windows Store app Development Snack: Secondary tiles with text

For more posts in this series, see the series index.

The call to pin a secondary tile looks like this:

SecondaryTile(string tileId, string shortName, string displayName, string arguments, TileOptions tileOptions, Uri logoReference);

 

The important part for this post is the last parameter: Uri logoReference. This is the the path to the image you want to show on the tile – but I had a problem, I didn’t want to show an image! I just had some text I wanted to show on the tile. After a lot of digging the solution was non trivial – generate an image at runtime. This was made even harder as the Render method in WPF does not exist in the XAML implementation used in WinRT.

WinRT does include a WritableBitmap class which allows you to create a in memory bitmap, manipulate the pixels and save to a file format with the BitmapEncoder classes. The problem for me is I do not want to fiddle with pixels manually – this lead me to WritableBitmapEx which is a great library for having primitives (fill, line, circle etc…), the only down side was that I wanted text, not graphic primitives. 

titleMore searching lead to two posts on StackOverflow from XXX (post 1, post 2) which provided a solution:

  1. Create a sprite map using a free tool called  SpriteFont201
  2. Use the code provided in the answers with WritableBitmapEx to extract the sprites and combine them with a WritableBitmap.

I took the code and adjusted it slightly so text would always be centred and allowed me to play with font scaling. I’ve attached the modified code to the post below.

In the end the code I used looks like this:

public async Task<StorageFile> CreateImage()
{
    uint width = 512;
    uint height = 512;
    var writableBitmap = BitmapFactory.New((int)width, (int)height);
    writableBitmap.Clear((App.Current.Resources["SecondTileColour"] as SolidColorBrush).Color);
    
    writableBitmap.DrawStringHoriztonallyCentred(this.DisplayPostalCode, 50, "title", Colors.White, 4);
    writableBitmap.DrawStringHoriztonallyCentred(this.Town, 175, "title", Colors.White, 2);
    writableBitmap.DrawStringHoriztonallyCentred(this.City, 275, "title", Colors.White, 2);
    writableBitmap.DrawStringHoriztonallyCentred(string.Format("box code: {0}", this.BoxCode), 375, "title", Colors.White, 2);
    writableBitmap.DrawStringHoriztonallyCentred(string.Format("street code: {0}", this.StreetCode), 450, "title", Colors.White, 2);

    var file = await Windows.Storage.ApplicationData.Current.LocalFolder.CreateFileAsync(Guid.NewGuid().ToString("N"), Windows.Storage.CreationCollisionOption.ReplaceExisting);
    using (var fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite))
    {
        var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, fileStream);

        encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight, width, height, 96, 96, writableBitmap.ToByteArray());

        await encoder.FlushAsync();
    }

    return file;
}
20 Sep 2012

Windows Store app Development Snack: Being a sharing target while your app is running

For more posts in this series, see the series index.

imageBeing a share target seems like a great idea to get people to use your application more, however it does have a fairly complex problem: if I do a share to my application, while my application is running what happens – does it start a new instance or use the existing instance. You may say this can’t happen since Windows 8 doesn’t allow more than one application to run at a time… but you would be wrong.

Snap view in Windows 8 allows for two Metro style applications to run side by side thus allowing two apps to run at the same time. In fact you can run three apps at a time: one snapped, one filled and then you do a share target which launches a third app!

So back to the question, what happens if you app is say running in snapped view and you do a share from the filled app to your app which is currently snapped? The answer is it uses your existing application but from a separate thread.

To test this I put a simple Boolean field into the constructor of my App class which I set to true, then when the OnShareTargetActivated event was raised I checked the value of that Boolean field, and it was true if the app was running!

You should come up with a solution for this (or at least test it) – in my case the OnShareTargetActivated wrote to the application store and then my main UI which used that would poll for changes. I had to do this rather than triggering the UI because the OnShareTargetActivated was launched in a separate thread and trying to trigger caused a cross thread issue (I did try dispatcher fixes but that lead to a variety of COM issues).

Pages