Windows Store app Development Snack: Where is Microsoft-Windows-TWinUI exactly?

Submitted by Robert MacLean on Mon, 10/01/2012 - 08:28

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

imageA lot of the guides for developing Windows Store apps talk about an event log where you can see information from the apps – this is of special importance for those doing background processing, live & secondary tiles. In the documentation it is either called just TWinUI or it is called Microsoft-Windows-TWinUI, however you may battle to find that in the event viewer since the group it is in, is not named that.

To get to it go to

  1. Application and Services Logs
  2. Microsoft
  3. Windows
  4. Apps

And you will find it inside that group! Happy debugging.

South African Postal Codes

Submitted by Robert MacLean on Sat, 09/29/2012 - 15:09

Mailbox-190-white-solid organge background

South Africa, as with many countries in the world, uses a numerical postal code system to help work out where to delivery mail – however besides some high level consistency there really is very little rhyme or reason in the numbers.

This little tool allows you to search, share, browse & pin the postal codes you need – when you need it!

This tool was inspired by my Postal Code apps for Windows Phone 7 – and really allowed me to experiment with the concept of how you can take & share development resources (including code) between two platforms.

Download

This app is also in the Apptivate competition so please go there and vote for it by clicking the image below:

apptivate

screenshot_09152012_093250screenshot_09152012_093337

South African Postal Codes makes use of icons created by the awesome (& free) Metro Studio 2.

Portal 2: Lab Rat for Windows 8

Submitted by Robert MacLean on Sat, 09/29/2012 - 12:00

aperture-190I love Portal, both the first & second games were amazing but what happened between them is never clearly explained in the games. Valve released an amazing comic book called Lab Rat a while ago that explained it! I enjoyed it so much I created a Windows Phone app for it. One of the things I had to do in that app was use very LOW resolution images and I was never happy with that.

Now I am proud to announce not only have I solved that but I also get to share my second Windows Store app – Lab Rat!

This is a GREAT Microsoft Style experience – high resolution images, full screen, touch – it all just works amazingly well together (see images below).

Having a new platform let me bring in ridiculously high resolve images too (which is why this download is over 250Mb worth of content), but not only the original English images but also the images without text (as in the Windows Phone app) and, for the first time, the Russian version too!

Download

As with my previous Windows 8 apps, this app is in the Apptivate competition so please go there and vote for it by clicking the image below:

apptivate

screenshot_09162012_195444screenshot_09162012_195509screenshot_09162012_195518screenshot_09162012_195459


Updates

Release 2 - 9 October 2012

  • Added the ability to zoom & pan images
  • Minor tweaks

How to correctly format currency in South Africa?

Submitted by Robert MacLean on Fri, 09/28/2012 - 11:26

Recently on a Windows Phone project I got a bug raised that I was formatting the currency for South Africa incorrectly (in particular the use of a comma to separate the Rands & cents – i.e. the decimal mark) which sparked off an investigation into what is the correct way to format the currency in the country I live in.

tl;dr: The comma is the decimal mark for South Africa.

As I am a developer my first stops were Microsoft & IBM who both have guides on this that states the decimal mark for South Africa is a comma. Wikipedia also states that officially the comma is has been adopted as the decimal mark.

Not happy with that vague “official” - I dug further to try and find a more official source which lead me the University of Johannesburg (UJ) style guide, which is meant to assist students with the correct language style to use in their documents. The very interesting bit is in section 6 (bold & underline added by me):

Note the spaces and commas in the following: 3 000 (or 3000); 3 500; 2 354 701; R5,87. The so-called Continental System (also used in South Africa) requires that the decimal point be replaced by a comma. However, it is not always possible to do this, since many computer programs require a decimal point for calculations.

So UJ agrees with the usage of the comma – but for me this also gave me a clue to find more info in something called the Continental System… which didn’t lead anywhere.

I then happened to find the 2012 Winter School textbox for Grade 10 Maths Literacy which also states:

South Africa officially uses a decimal comma, with a space as thousands separators.
Example:
1 450 789,32 = one million; four hundred thousand; fifty thousand; zero thousands;  seven hundreds; eighty; nine; three tenths; two hundredths.

Finally I found some official documentation on the subject, first up Government Editorial Style Guide which states – still not saying it is “official” as Wikipedia said:

Write decimal and negative numbers as numerals: 3,3 and –4. Use the decimal comma, not the decimal point: 17,4 million.

Use a space, not commas, to indicate thousands: 3 000, 20 000.

However the best source I found was a document titled The South African measurement system and its origin by EE Publishers which has the following:

Finally, it is worth noting that, in Table 1, the grouping of thousands (in threes) and the use of the decimal comma, as opposed to the decimal point, was effected, to be in accordance with the applicable legislation of South Africa: “where the magnitude of a quantity is expressed in terms of a unit, a comma on the line is used as the decimal sign in the numerical part of the expression and the digits are separated into groups of three digits on either side of the comma by means of spaces…” [2]. The exception was made, for land registration purposes, by the then Director-General of Surveys, who judged, in his Circular No. 2 of 1971: “it has been decided to abandon the writing of areas, such as 45 236 1 ha with a space after the 3rd decimal figure and to advocate that as in the past the four figures be grouped together viz. 45 2361 ha”. Here, a space was left between the number and the symbol of a unit, as required [2]. These rules were highlighted in an old Land Survey Act No. 9 of 1927 (Regulation 24.1), but an amended Land Survey Act No. 8 of 1997 does not contain such information.

English-speaking countries (plus China, India and Japan) use the decimal point. There seems to be a general tendency to formally declare its use worldwide and the International Organisation for Standardization, ISO, also tends towards using the decimal point over the decimal comma. In view
of the South African law, however, the comma shall still be employed in South Africa as “the only recognised decimal indicator for all numbers” [3].

References

[1] DR Hendrikz: South African Units of Length and Area, Department of Lands, Trigonometrical Survey, Special Publication No. 2, 1944.
[2] Measuring Units and National Measuring Standards Act, 1973 (Act No. 76 of 1973), Government Gazette No. 4326, 5 July 1974.
[3] The International Metric System (SI), Guide to the use of the SI in South Africa, The Council of the South African Bureau of Standards, M 33a, 1992
[4] Measurement Units and Measurement Standards Act, 2006 (Act No. 18 of 2006), Government Gazette No. 29752, 28 March 2007.
[5] T Zakiewicz: “Units of Length Measure & Geodetic Standards at the Cape, 1813-1912”, History of Surveying and Land Tenure, Collected Papers,
Vol. 2, The Institute of Professional Land Surveyors & Geomaticians of the Western Cape, May 2004.

WOW! That gives the official acts and a great depth of knowledge into the subject matter and for me answers it once and for all – we use a comma!

The two final locations I found in my searches provided some interesting information on the comma as a decimal mark in general (i.e. not specific to South Africa). First up is the Wikipedia page for International System of Units which states

The 10th resolution of CGPM in 2003 declared that "the symbol for the decimal marker shall be either the point on the line or the comma on the line." In practice, the decimal point is used in English-speaking countries and most of Asia, and the comma in most of Latin America and in continental European languages.

Secondly is a forum answer about the use of the comma:

Sender: Franck Menuge
Subject: comma as decimal separator

Could somebody tell me the origin of the use of a 'comma' as a decimal separator and of a 'dot' for thousands in the French numeric system, ex.1.234,56 Is it only used in France or in other european coutries? Why is it different in the UK?

Many thanks,

Hi Frank,

The comma as a decimal separator is used in several continental European countries, including Germany, Austria, Switzerland, Belgium, Luxembourg, and - we think - also Italy and the Netherlands.
   The notational convention of using a punctuation mark to separate the fractional part of a number seems to have begun with John Napier,a Scot, in his book "Descriptio" published in 1616. In this book he proposed using a decimal point (period) to separate the whole number part from the decimal part of a number. In the following year, 1617, in his book "Rhabdologia" he proposed a point or a comma as the decimal sepatatrix. In his writing he used both. To quote Cajori, "Napier vacillated between period and comma; mathematicians have been vacillating in this matter ever since", Florin Cajori, "A History of Mathematical Notation", 1974 page 324. By 1619 the decimal point had become standard in England.
   In Earliest Uses of Mathematical Symbols under Grouping the claim is made that the modern system of separating a numeral into groups of 3 with commas first appeared in 1795 in the article "Numeration" in "Mathematical and Philosophical Dictionary" by Hutton. Again the reference is from Cajori.
   The confusion doesn't stop there. In the school system in North Amarica teachers have started to use a space rather than a comma to separate the digits in a numeral into groups of three. Thus the number thirty-one thousand three hundred twenty four and six tenths is written 31 324.6. One last point. Notice that the decimal point in the number 31 324.6 in on the line were it is our understanding that in the UK you would write this number with the decimal point floating above the line. In North America the period floating above the line indicates multiplication, so

Cheers,
Patrick and Penny

Windows Store app Development Snack: Lock screen image pain

Submitted by Robert MacLean on Fri, 09/28/2012 - 11:16

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.

Amazing Lock Screen

Submitted by Robert MacLean on Thu, 09/27/2012 - 10:29
Having issues with the app? Need support? Want to just say thanks? Please use the feedback page!

This app was previously named Bing my lockscreen but has now been renamed to Amazing Lock Screen

Lock TimeI am very proud to announce my very first Windows 8 application: Amazing Lock Screen – which does pretty much what the title says it does. In short: Bing has the greatest images & now you can get use them for your lock screen!

Bing My Lockscreen allows you to select from the eight most recent Clipboard01Bing images and quickly select which of them to set your lock screen to use.

In addition Amazing Lock Screen allows you to automatically have your lockscreen updated daily with the latest image from Bing - thus ensuring a constant supply of inspiring and interesting new content for you!

 

You can get the app from the store using the download link below!

Download

Bing my lockscreen makes use of icons created by the awesome (& free) Metro Studio 2.


Windows Store app Development Snack: Localised Resources & the Store

Submitted by Robert MacLean on Thu, 09/27/2012 - 09:38

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.

The power of Lightswitch - eyeQuu

Submitted by Robert MacLean on Wed, 09/26/2012 - 09:13

HiringI was recently contacted by Thabo Letsoalo of eyeQuu, a South African software start-up, who has produced a SaaS (software as a service) offering built on top of Windows Azure & LightSwitch! The solution is a full work management tool, including task management & project management features! I am not going into too much detail here because the website does it far better than I can.

I often talk about LightSwitch and why it is perfect for many situations and this is a great example of a number of those situations:

  • It shows what is possible with LS, besides all the form stuff there is plenty of interesting systems like charts!
  • It shows off using LS as the basis for building a business. I think this is a really great LS feature because rather than being stuck into thousand of hours of development and ignoring growing the business, LS enables you to have more time to grow the business since it handles a lot of the development for you!
  • I love the fact it uses Azure, showing the power of the cloud, which allows it to offer a true multi-tenant service, scale massively and maintain the costs of a start-up all at the same time!

I really urge you to go and have a look at Thabo’s fantastic site!

Windows Store app Development Snack: InvalidOperationException for Share & Settings

Submitted by Robert MacLean on Tue, 09/25/2012 - 09:24

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

Windows Store app Development Snack: Secondary tiles with text

Submitted by Robert MacLean on Fri, 09/21/2012 - 19:20

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;
}