Windows 8 App Development Presentation

Here’s a list of all the resources I’ve put together for my talk on Windows 8 Application Development that I gave at:

• The Vermont Code Camp on 9/21/13
• The Boston Code Camp 10/19/13
• The VT.NET User Group on 11/18/13

You can view the slides from my presentation or rate the talk if you’d like to provide some feedback

The BindableBase class helps implement the MVVM pattern by implementing INotifyPropertyChanged on a base class which should be inherited by classes in your ViewModel

• BindableBase (VB)
• BindableBase (C#)

The RelayCommand class helps implement the MVVM pattern by exposing methods on your ViewModel as Properties to which your View can Bind

• RelayCommand (VB)
• RelayCommand (C#)

The UserSettingsBase class provides base functionality that allows you to create persistent user settings with regular Property Syntax.

• UserSettingsBase (VB)
• UserSettingsBase (CS)

The SettingsHelper class takes care of the plumbing to link the Settings Charm Panel with your own User Controls.

NOTE: As of Windows 8.1, winRT released a native SettingsFlyout so the following code is primarily for historical purposes.

• Settings Helper (VB)
• Settings Helper (CS)

You can download the MVVM template in the Visual Studio Extensions Gallery
Fork or contribute to it on GitHub
Or read about it in my Blogpost.

For the Full Word Guesser Application in the Windows Store :

• Source Code On GitHub
• Windows Store Link

Here’s a SkyDrive Folder with all the files you might need. In here, you’ll find the PowerPoint, Demo Source Code, Resharper Templates, and code from the Demo.

Generating Windows Store Logos at Every Resolution

Introduction

The first daunting challenge of getting an Windows 8 Application into the Windows Store can be resizing your app logo to each of several dozen different resolutions. If you start off like I did, you’ll make a whole bunch of copies of a single file, size them down or up and then give them names based on the final resolution. But this is a flawed approach, and we can do much, much better.

For starters, whenever a resizing tool scales an image up, it will cause artifacts, or scales down, pixelation: neither of which are a desirable look for a polished Windows App.

But more importantly, you have not left yourself many outs if you want to change your logo. Let’s say the color doesn’t work with your background and you need to go in and make one tiny change: you now have to go through all your resizing and do it over from scratch.

Instead, we’ll make a vector based image and use slices to automatically export every asset we need in every resolution we need. See MSDN for a full list of all the logos you’ll need in the Windows Store and a description of each.

1. Your first step is to read Jerry Nixon’s great blogpost, Windows 8 apps need 28 logo varietals, in which he outlines how to output all the logos you’ll need from a vectorized image.
2. Your second step is to download the FREE version of Microsoft Expression Design 4
3. Once you’ve followed the steps above and created your logos, you’re ready to add them to your Visual Studio project (which, it turns out, is slightly trickier than you might imagine).

Adding Logos to Visual Studio

In order to compile, your Windows Store App requires logos. The only reason it works right out of the box is because they have provided 4 Starter logos and added them to your app manifest.

Here are the logos:

We can see them in the designer for the Package.appxmanifest file here:

It’s important to understand, that the only thing the designer has actually done, is add this bit of code to the xml in the Package.appxmanifest

Potential Errors

You must have at least the default size of all logos in order to compile the project. If you delete the reference to a particular logo, you’ll get the following error:

App manifest validation failed. Length of attribute ‘xxx/@Logo’ must be at least 1 character(s)

The next point at which you’re likely to get an error is when adding the same image with different scales. If I add an 150px logo named Logox150.png and then add the 120 version, I’m likely to get this screen:

There are a couple things going on here that I learned from this comment by Jim O’Neil on Stack Overflow.

When you add scaled assets, Visual Studio takes the name of your default image (provided in the AppManifest) and decorates it with .scale-xx. If that name already exists, then you’re fine. If it doesn’t, then it creates a copy of the asset you’ve provided to fit that naming convention.

Secondly, if any of your assets have a scaled modifier, then all your assets must have a scale modifier, even the default. So the original logo named logox150.png now must be named logox150.scale-100.png in order to be found by Visual Studio. This actually makes a little bit of sense. The manifest only allows you to set a single property for the Logo name and location. How, other than using this strict scaled notation, would it know where to look for each of the different assets you provided at each size.

This is an important restriction to keep in minding when creating our slices in Expression Designer. In order to actually make use of them, you should name each logo and decorate each with the appropriate scaling factor.

Here are the slices I’ve setup to export using Expression:

Once you’ve done that, you simply have to replace the contents of your Assets folder with the exported images and VS will automatically load them for you at each resolution:

You may not want the same image at every resolution, but as a starter kit, here are two designer files (one square and one wide) for each aspect ratio used in the Windows Store (1:1 and 31:15) with all the slices properly configured. Just sub out the content with whatever logo you’d like to use, and hit Ctrl + E to export all the assets you’ll need.

Problems Exporting Slice Resolutions

The designer doesn’t know that you’re exporting slices to match pixel perfect resolutions, so will try to adjust images for you, occasionally resulting in a 150x150 slice exporting with a width or height of 149 or 151. I found this post explaining how to fix the problem.

1. Go to the Options Pages (Ctrl + K) or Edit –> Options
2. In the ‘General’ tab, change ‘Rectangle Antialiasing’ from ‘Crisp’ to ‘Smooth’

Blank Designer Files

To to save youself the setup work, click to download stock template designer files from skydrive

Moving ASP.NET Designer Generated Code to Separate Designer.vb File

Introduction

If you’ve converted an an ASP.NET application from versions of Visual Studio 2003 and earlier to 2005 and beyond, you’ll notice the converted web pages behave slightly differently than those natively generated in new projects. The difference is that designer generated code used to have to live inline with developer code because all class properties needed to exist within the same file.

Solution

Starting in .NET 2.0, the compiler can now use the partial keyword which allows you to split up the declaration of a class over n number of files. The paved the way for Visual Studio to break apart the ugly code it generates from the (hopefully) beautiful code you’ve written. To make use of this feature on old asp.net web applications that have been converted to a compatible version of visual studio, simply do the following two steps.

5 Easy Steps

1. Take the entire region label Web Form Designer Generated Code and Delete it from your code behind file:

   

2. Our Solution Explorer currently looks likes this:

   

3. Right Click on the .aspx or .ascx page and Select Convert to Web Application”

   

4. It will add a designer file with all the code we just deleted:

   

5. Of course, if you turn of “Show All Files”, you’ll still only see the page in your solution explorer

   

And that’s it! Now enjoy the faster design time analysis and cleaner code that comes from separating your generated code and your written code.

Calculating Age From DOB

I couldn’t believe there was no native way in .NET to do something alarmingly simple like calculate someone’s age from their date of birth. Of all the amazing functions and properties on DateTime objects, this seems surprisingly non-existent.

For such an easy task, it’s also surprisingly complex; so much so that Jeff Atwood, creator of StackOverflow, even asked that question himself here.

For all my (and the internet’s) failed attempts, read on. If you’re just looking for something to copy and paste in that will work, grab the following code

Public Function GetCurrentAge(ByVal dob As Date) As Integer
    Dim age As Integer
    age = Today.Year - dob.Year
    If (dob > Today.AddYears(-age)) Then age -= 1
    Return age
End Function

All of these methods, except the bottom one fail for various reasons:

Dim dob As Date = #5/14/1994#
Dim today As Date = #5/13/2013#
Dim age As Integer

age = DateDiff(DateInterval.Year, dob, today)
Console.WriteLine("DateDiff Year Age: {0}", age)
'19

age = today.Subtract(dob).TotalDays / 365.25
Console.WriteLine("Subtraction Age: {0}", age)
'19

age = Math.Floor(DateDiff(DateInterval.Month, dob, today) / 12)
Console.WriteLine("DateDiff Month Age: {0}", age)
'19

age = today.Year - dob.Year
If (dob > today.AddYears(-age)) Then age -= 1
Console.WriteLine("Year Part and Compare Age: {0}", age)
'18

Console.ReadKey()

Hope that helps!

Extending XmlReader Class: IsEndElement()

Introduction

You may find, as I did, the lack of symmetry in the XmlReader Class quite odd. If we look at the NodeType property, which exposes the XmlNodeType enumeration, we find an EndElement, but no StartElement (The Element member actually only identifies opening xml tag elements, but it’s not this shortage on which I’d like to elaborate). Only when we look at the methods available to the class do we see an IsStartElement() method for evaluation, but without a corollary method named something like: IsEndElement().

There are dozens of ways of getting around this deficiency, but I’m all for visually appealing code that leaves other coders with a easy and quick understanding of what you are attempting to do. Checking if the reader is on an opening tag with IsStartElement and then finding closing tags by evaluation the reader’s NodeType property might work correctly, but just looks wrong to me.

Extension Methods

What I’d like to do is create a method that looks and feels like the IsStartElement() function, but instead evaluates if the reader is currently on an EndElement node type. This is where extension methods come into play. Extension methods allow you to extend the functionality of a built in class with custom methods that act as if they were native to the class. I think they are best suited for when you are of the sincere belief that method deficit is a slight oversight of the framework designers, and if given the opportunity, they would happily accept your additional coding to improve the underlying code. Since all instances of this type or any derived type will have automatic access to any extension methods written on top of a particular class, you want to be careful with their implementation .

The first step is to open your project, right click on it, click add, then select module:

Then give your module a name. I like to create a single Module for all extensions with a name like ExtensionMethods.

IsEndElement Code

First, you’ll need an imports(vb) or using(c#) statement with the extensions Namespace:

Imports System.Runtime.CompilerServices

Then, add the following code to your module:

<Extension()>  
Public Function IsEndElement(ByVal xmlReader As XmlReader, 
                             Optional ByVal name As String = "") As Boolean  
    If xmlReader.NodeType = XmlNodeType.EndElement Then  
        If name = "" Then  
            'node is end element, name value not set  
            Return True  
        Else  
            If xmlReader.Name = name Then  
                'node is end element, AND named the same as parameter  
                Return True  
            Else  
                'node is end element, but name is diff than parameter  
                Return False  
            End If  
        End If  
    Else  
        'node is not an end element  
        Return False  
    End If  
End Function  

And voilà! Now you can call your code on native objects with full IntelliSense: