Apr 30

Windows Store production mill

I’ve written a few Windows Store apps.  Pretty quickly I found that, despite starting from project templates, I had a lot of repeated work before adding the application’s value.  In order to publish an app (i.e. be certified) you need to provide a lot of application-/author-specific stuff.  For example, if your app needs network access (and what app doesn’t, especially if you have ads) it also needs to have, or link to, privacy information.  Not hard, but those links/info isn’t in the default templates.

Sharing between projects

To get a lot of that info shared between projects, I created a new project (in a new solution).  I chose to create a Windows Store Class Library (rather than a PCL) because I knew I’d have Store-specific information there, and not much that I would share with Phone, WPF, or Silverlight apps.

I could have had this project within another solution with an app, but that becomes difficult to manage (same dependency across multiple apps but one app has more control: bleah).  And, I could have had one solution with all the apps in it and the shared assembly.  But, if you’ve ever had to deal with that before (with dozens of projects), you know why I didn’t.

Privacy Info

To cover the “requirements”, I started out supporting the privacy info.  This is simply a settings flyout that contains the collection and sharing policies of the app.  All my apps have the same policy so this is more of an “author policy” so this flyout is just static for me and I can just use the flyout class in an App’s OnWindowCreated hooking into the SettingsPane.  After referencing the shared assembly, I can just tell the App about the flyout at initialization:

Caveat: Be sure you reference to your Release assembly when you want to certify your app—your app won’t pass the verification tests because of the debug assembly!

About Flyout

I don’t think an about flyout is mandatory; but I wanted to have one for support reasons and I believe that users expect it; so I add it to each of my apps.

Much in the same vein as privacy info, I’ve just created a flyout to share amongst the apps.  The about flyout is different  because it will have application-specific information in it.  I want to have the version #, the description and name of the application, and the support URL.  Adding the flyout to an app is almost identical:

The difference is in the content.  I chose to use XAML resources to contain the information.  With data binding, we can simply bind by static resource name in the shared XAML and just add it to each app’s App XAML resources.  This is what it would look like in the shared XAML:

Note the bindings to “{StaticResource AppName}”, “{StaticResource AppDescription}”, and “{StaticResource SupportUrl}”.

Then, in the app, I can simply add the three resources to the App’s XAML resources in App.xaml:

In this case the Effective Blogger app…

Caveat:As with data binding, the bindings are loaded at run-time so if you forget to add the resources to your app, you won’t get a compile error and you’ll have to pay attention to the output windows during debugging to catch the binding errors.

Other stuff

I’ve got other things that I share amongst some of my apps (but not all).  And this shared assembly is a perfect place to put things like this.  For example, I seem to use a boolean to Visibility value converter frequently, so I’ve also added that to my shared assembly.

I hope these little tips help keep you from repeating a bunch of code that you didn’t need to repeat.  If you’ve got other ideas of some something different, feel free to comment!

Mar 27

Effective Blogger

I’ve been lamenting the lack of updates and support to Live Writer along with a few other people for quite some time. I’ve had in the back of my head that I’d write one some day.

The number of features I would need to support in terms of formatting seemed daunting. Until recently. I wrote a short Markdown app a while ago and the other day I thought “hey why not a markdown blog writer!”

I present Effective Blogger (in the Store). it currently supports WordPress blogs and the standar markdown. In fact this blog post was written with it!

Examples of formatting:

Heading
=======

Sub-heading


Paragraphs are separated
by a blank line.

Text attributes italic,
bold, monospace.

A link.

Shopping list:

  • apples
  • oranges
  • pears

    Numbered list:

    1. apples
    2. oranges
    3. pears

    The rain—not the reign—in
    Spain.

Mar 23

The case of the not-so-useful XBF error

Recently I was working on another Windows Store app. I wanted to move some text to resources so I didn’t have the text in the controls and wanted to re-use text from control-to-control and from page-to-page.

I went to the XAML file that I wanted to add the test to and (after creating a Resource element) started typing in a String element.  I use Resharper, so I was presented with this:

xbf

Which allows me to import the System.String type by adding a xmlns:system=”using:System” attribute and value to the root element of the file (by simply typing Alt+Enter).  Of course, I do want a string, so System.String seems exactly what I want, so I let Resharper add the reference and change the <String> to <system:String> and I continue to add the text I want.  Something like this:

Sometime later, when I compile the app and try to test it, I’m presented with a vague error:

…somefile.xaml(15,24): XamlCompiler error WMC0610: Syntax Error found in XBF generation

Not telling me what was actually wrong and no squiggles in the editor, the only thing I could think to do at the time was remove the line entirely and move on.

Sometime later, I looked into a bit more, comparing working files with what was giving me errors.  I noticed that the working files looked like this:

Note that the namespaces is x and not System?!  It turns out there’s another String type in the http://schemas.microsoft.com/winfx/2006/xaml namespace.  Very subtle!  So, in order to fix the nebulous error, I simply had to use x:String instead of System:String!

Feb 24

Generating Windows Phone and Windows Store application images–the vector version

In a prior post I detail how you can generate the bitmaps required for both Windows Store and Windows Phone app submissions by scripting the resizing a single source bitmap.

As Andrew Duthie (@devhammer) quite righly pointed out, scaling a vector image would provide better fidelity in the final scaled bitmaps.  Andrew gave an example of using Inkscape (both free and open-sourced) as a vector image editor.

I knew vector images are, of course, better for scaling; but I had never really gotten into using vector images.  Andrew’s response was the motivation I needed to get into it.

Inkscape (also available on Chocolatey as Inkscape ) is fairly easy to use, and there are lots of open vector images to base a new image from.  But, I won’t get into to many details of using Inkscape.  Inkscape does provide an ability to script it (via batch files or PowerScript) in terms of exporting to a bitmap file.  So, we can expand what I posted before to automate the generation of application bitmaps for both Windows Store and Windows Phone from a vector image source to generate better looking application bitmaps.

The Inkscape.exe supports many command-line options, the one we’re interested in is export-png. This command exports the vector image (SVG in my examples) to a PNG file.  There’s a bit of prep-work involved to be to do this easily and reliably.  For the images we’re interested in, for the most part they are square.  So, we can set the properties of the Inkscape document to have equal page width and height (File/Document Properties).  It really doesn’t matter what width you pick with vector images; but I used 5 in by 5 in because of the default scaling—which made it visually easy to work with.  You can then create the vector image within the page rectangle (centred, or however you need it) and save your image (SVG in my examples).  Once saved you can use the export-png command to export to png.

I could not find a way to export to non-square bitmaps without skewing the image and making it look horrible, so I used ImageMagick again to post-process the generated PNG to change the canvas width or height (in the same way I did in the prior post).

So, to create Windows Store images from a single vector image, I used this:

In my case, I’m basing my images from a source SVG file named CumulusNotes.svg.

To create Windows Phone images from a single vector image, I used this:

Both of which presume that both ImageMagick and Inkscape are in your path.

If you feel like doing the same in a PowerScript, feel free to post a comment so other can benefit.

Feb 05

Generating Windows Phone and Windows Store application images

One thing that you have to get your head around when you get started with Windows Phone or Windows Store development are all the icons you need to have in order to submit an app.  Windows Phone 8 needs about 6 icons, depending on the tiles you support and Windows Store needs at least 4 (ApplicationIcon, FlipCycleTileLarge, FlipCycleTileMedium, FlipCycleTileSmall, IconicTileSmall, and IconicTileMediumLarge) depending on what scaling (resolutions) you want to support and whether you want more logos to display in the store.

You could, of course, have a completely different picture for each of these images; but there are many cases where these images are just a scaled version of one picture.  After a couple of app submissions, you quickly grow tired of having to create all these images—even if you’re just scaling one picture down to different dimensions.  I certainly did, so I decided to automate the process.

I found that from a Windows Store/Phone aspect the highest common denominator is 300×300, so I create a 300×300 base image and scale it down to the various sizes that are required.  After resounding feedback on Twitter that ImageMagick is the way to go for command-line image manipulation, I settled on using ImageMagick to scale the images.  ImageMagick has a convert command (executable) to do various things including resizing. 

Windows Store

To scale down my base image I simply use the resize option and scale down to the various dimensions (50×50, 30×30, 150×150, and 620×300):

With the 620×300 image I don’t want to scale the image to fill the entire space, I just want to take the image and scale it up to 300×300 (or not, since I’m using a 300×300 base image) and centre it in a 620×300 image leaving the unused space transparent.  this is where xc:transparent +swap –gravity center –composite comes from.  xc:transparent +swap to make a 620×300 background image, and –gravity center –composite to overlay the source image on top of the background.

For more details on the options for Windows Store logos, check out http://msdn.microsoft.com/en-us/library/windows/apps/hh846296.aspx

Windows Phone 8

And it’s much the same with Windows Phone 8, with more non-square icons.

I haven’t detailed anything on the Windows Phone 7.x side of things since this seems to be fairly unsupported at multiple levels.  If there’s interest, I can detail that as well.