Benny Olsson

Oscar Andersson

Jim Terneborg

Mikael Qvarfordh

Rolf Holmberg

Pontus Carlsson

Helena Friberg

Cristian Carlsson

First you naturally need a great image to start with. The best result you'll get if it's at least 1536x1280 for WXGA devices and 1440x1280 for 720p devices. If you have a WVGA device you could either go for the 1536x1280 image or at least try to find an image that is 960x800. For this demonstrative purpose I found a very nice photo on http://www.leksandsif.com/, it's not really the dimensions I'm looking for, but close enough.

I will also use Paint.Net which is free (and should actually be shipped together with Windows. IMO it's that good).

I will create an image for a WXGA device and hence I like the image to be 1536x1280. Either I crop it manually by using the rectangle selection tool or select the Resize or Canvas Size menu, depending on the actual image being used. The resulting image looks like this:

I then copy this image to my Windows Phone Device, usually by just connecting the device through USB and leverage explorer.

The last steps is to actually select this image for both the ordinary lock screen background, and remember to align it to the left:

In the KidsCorner I choose the same image, but this time aligned to the right.

If the width of the image is exactly twice the width of the screen resolution, there will be no seam between these images and the lock screen will be very nice in result:

How nice backgrounds can you create?

It might be hard to see but becomes very clear when you see the next picture which clearly demonstrates that when putting input controls so low on the layout grid and the InputPane (SIP) becomes visible to allow entering text, it will obscure some of the other controls and make it hard (almost impossible) to navigate to the password textbox. At least you will have to make sure to "loose" focus and allow for the SIP to disappear before selecting the next textbox (passwordbox) to enter text into.

The same issue exists in other platforms (at least iOS and Windows 8 which I've tried) but there exists some nice looking features to handle those issues. In Windows 8 there is a class called InputPane which raises events we can subscribe to, and what's interesting is that the same class exists in Windows Phone 8 as well, but the events doesn't get triggered. I've reached out to Microsoft in the forums but still hasn't been provided with an answer and that means I have to work around it.

I did search a while and found a post by Jamie Rodriguez that explains a method to guess if the SIP is visible or not and that was used to create this solution which I find most suitable for my needs:

In short it uses dependency properties and bindings to subscribe to the RootFrames translation transform which takes place when the SIP appears or disappears. Jamie clearly explains that there are some  edge cases in which this method doesn't always produces the expected behavior (related to the existance of physical keyboard on the device), but it's good enough for me.

My page (in this case called the MainPage) will use a similar pattern and do two things when the SIP appears (and disappears): It will translate transform (move in the Y-axis) the entire page a specific amount of pixels depending on which control was focused, and it will also make sure that the logo gets scaled to better fit in the remaining of the page.

On the left you can see the produced result which in my opinion is a much better experience than the one above to the right. It's very easy to transition to the password box and as easy to then hit either login or signup (if you don't have an account yet). You can also notice that I scaled the logo down 50%, this is naturally optional but if you wan't to keep your brand look and feel, it might be important that logos don't get cropped or similar.

The actual translation transformation is simply done by specifying a negative translation in the Y-axis either by 200 points (if the username has been focused) or 100 points (if the password is in focus as the first control). The scaling of the logo is done by using a Visual State and some animation to create an appealing scaling effect both in and out.

Instead of formatting the code in this post I've chosen to publish the solution on skydrive instead! It's a Windows Phone 8 solution, but I don't see why it shouldn't work on earlier versions as well.

When opening the solution you might notice that the code-behind file is physically moved to a subfolder, this is because I'm also working on sharing as much code as possible with Windows 8 but that's not important for this post.

Hopefully you'll be able to use it if you have requirements on the login controls being positions low on the display.

The secret behind the static color is a SolidColorBrush resource named "ProgressBarIndeterminateForegroundThemeBrush" (you should have guessed that name on your first attempt, shouldn't you ). But this resource can't actually be found in your project so it's not too easy to modify it. But with a little code, there's nothing that can't be done. First you create a little helper method in your App-class in App.xaml.cs:

private void SetupCustomColors()
{
    if (this.Resources.ContainsKey("ProgressBarIndeterminateForegroundThemeBrush"))
    {
        var brush = this.Resources["ProgressBarIndeterminateForegroundThemeBrush"] as SolidColorBrush;
        brush.Color = Colors.Red;
    }
}

You can naturally choose any color you like as I chose Red above. Then you just make sure this code gets called in the OnLaunched handler, why not in the top?

protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
    SetupCustomColors();
    ...

That seems fine, no apparent issues here, but wait a minute, if we change the theme to light instead and revisit the same page, the behavior is slightly different:

This is naturally not something that the creators of the app Focusin is responsible for, they have simply (as I've done myself a lot of times) created an application icon with a white iconic foreground and a transparent background which causes the users accent color to shine through in the Start Screen and in the Application List. But since the Marketplace application/hub doesn't leverage the accent color as background element for these icons in the update list, the experience is quite frankly not that great.

This also impacts the hardware manufacturer's own list of applications since they often use these transparent icons for their applications.

My suggested solution is naturally to simply update the DataTemplate for the updates to include a rectangle which is as large as the icons, and fill it with the current accent color, if this application is build with XAML/C#?

Another observation from these screenshots is naturally the use of an ApplicationBar which leverages an ordinary rectangular button instead of the recommended (and only publicly allowed) round ones.

There is a couple of prerequisites that needs to be in place before everything works but if you have time I'll guide you through most of it. I decided to go for the GIT way in this tutorial even though you could probably leverage .zip instead to download the source. Why you might ask, well one of the reasons is that I've grown quite fond of the "GitHub for Windows" application while doing development. It's quite nice and have a very pretty Metro-styled UI even though it doesn't install as a Metro-application on Windows 8. Unfortunately this means that you also need an account on GitHub as well as an account on Google if you want to leverage one of the steps below.

Install prerequisites

Visual Studio 2012 - http://msdn.microsoft.com/sv-se/windows/apps/br229516.aspx

Visual Studio is naturally needed for development and the latest release has some very nice tools for game development which I will blog about in the future. You should absolutely go for the Ultimate release since it got all of the tools you need and more

Windows SDK 7.1 - http://www.microsoft.com/en-us/download/details.aspx?id=8279 

Instead of downloading the separate DirectX SDK we will leverage the Windows SDK version 7.1 to build the SharpDX library. This do however also mean that you'll need some extra space on that harddrive of yours.

GIT for Windows - http://windows.github.com/

I've found that one of the easiest ways to download SharpDX, with the code and samples, and also be certain that I get the latest version is by cloning the GIT repository. But to be able to do that we need to install GIT on the Windows 8 installation, either by manually installing all the tools required or simply by leveraging the ClickOnce installation available. Once that installation is done I insert my credentials for GitHub and then it's time to add the repository.

Update 2012-08-29: I noticed when I tried to build SharpDX on Windows 8 RTM as described below that I also needed the .NET Framework 3.5 Service Pack 1 in order to succed. That can be downloaded here: http://www.microsoft.com/en-us/download/details.aspx?id=22

Clone SharpDX with GIT

Once you've installed and configured (with your credentials) the GitHub for Windows installation you need to add the repository and download all the files from http://code.google.com/p/sharpdx/.  If this repository should have been published on GitHub it would have been as easy as pressing a button on the website, but now we need to tell the local GitHub installation where to find it. You can use this link: github-windows://openRepo/https://code.google.com/p/sharpdx which will open the GitHub application and ask for your google-credentials. If you would like to use it the more manual way you can simply open the Git-Shell application and type 'git clone https://code.google.com/p/sharpdx/' which will create a local clone of the source code. Give it some time to download all of the files and prepare for the important build step!

Build SharpDX

Once the repository is cloned, hit the Windows key and type "SDK" which will bring up the Windows SDK 7.1 Command Prompt. Navigate to the repository which most likely will be in your usernames Documents folder under GitHub, in my case it's: "c:\Users\Johan\Documents\GitHub\sharpdx\". In that directory you type the command: "MakeSharpDX.cmd win8 build". Yes it's that simple since the team behind the development have provided us with all the scripts required to get started. Hit enter, and let the compiler do it's magic. Once it's done you will have a new directory called Bin\Win8Metro\ with the .dll required to develop applications and games with SharpDX.

Convenient step for easy access to assemblies

Something that I've grown quite fond of in Windows in the latest versions is the Libraries structure. I've made it somewhat a habit to create a specific library called Assemblies in which I add bin-directories for easy access while doing development. Easiest way of doing this is to right click the Libraries folder in the Windows Explorer and choose New | Library. Then pick a describing name such as "Assemblies" and hit enter. Select this newly created library and choose to Include a folder, navigate to the recently created bin directory and select it. Now you can easily add these assemblies without having to remember the path and also very easy navigate to the files.

Run the samples

Now I navigate to the directory sharpdx\Samples\Win8\ and open the Win8Demos solution. Most likely you'll notice that the references to the SharpDX assemblies are messed up and hence needs to be added to each project. Thanks to the Assemblies library that's no big deal. Simply right click each solutions References folder and add the appropriate references. Once you have all references in place, choose which sample you want to run and off you go!

1. As few lines of code as possible
2. As few lines of configuration as possible
3. As few files as possible
4. As few references as possible
5. The smallest XAP-size possible

The result is quite interesting and here is a short description of the end result.

I ended up with a project with only three files:

• WMAppManifest.xml
• App.cs
• ApplicationIcon.png

<?xml version="1.0" 
      encoding="utf-8"?>
<Deployment xmlns="http://schemas.microsoft.com/windowsphone/2009/deployment" 
            AppPlatformVersion="7.1">
  <App xmlns="" 
       ProductID="{30c53039-eda6-4897-898f-0274e8914fe7}" 
       Title="PhoneApp1" 
       RuntimeType="Silverlight" 
       Version="1.0.0.0" 
       Genre="apps.normal" 
       Author="PhoneApp1 author" 
       Description="Sample description" 
       Publisher="PhoneApp1">
    <IconPath>ApplicationIcon.png</IconPath>
    <Capabilities/>
    <Tasks>
      <DefaultTask Name="_default" />
    </Tasks>
    <Tokens>
      <PrimaryToken TokenID="PhoneApp1Token" 
                    TaskName="_default">
        <TemplateType5>
          <BackgroundImageURI>ApplicationIcon.png</BackgroundImageURI>
          <Count>0</Count>
          <Title>PhoneApp1</Title>
        </TemplateType5>
      </PrimaryToken>
    </Tokens>
  </App>
</Deployment>

The code above is the entire WMAppManifest.xml. I've removed as much I think is possible.

using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;

namespace PhoneApp1
{
    public class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            var grid = new Grid();
            grid.Children.Add(new TextBlock { Text = "hello world" });
            Content = grid;
        }
    }

    public class App : Application
    {
        public App()
        {
            var frame = new PhoneApplicationFrame();
            frame.Content = new MainPage();
            RootVisual = frame;
        }
    }
}

And here is all of the code for the application. I've removed all XAML-code and use "code-behind" for all creation. The ApplicationIcon.png file is a simple 1x1 pixel image which is used both for application icon and tile-background. The end result became:

1. As few lines of code as possible - 27 lines (including some empty lines and line breaks  for readability)
2. As few lines of configuration as possible - 30 lines (having all attributes and elements on separate lines, 19 if I keep attributes on same line as beginning element)
3. As few files as possible - 3 files
4. As few references as possible - 5 references ( Microsoft.Phone, mscorlib, system, System.Core, System.Windows)
5. The smallest XAP-size possible - 2,74 kb

I added a file called App.xaml and added the following code:

<Application x:Class="PhoneApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone">
    <Application.RootVisual>
        <phone:PhoneApplicationPage>
            <Grid>
                <TextBlock Text="hello world" 
                           FontFamily="Segoe WP" 
                           Foreground="White" 
                           FontSize="14"/>
            </Grid>
        </phone:PhoneApplicationPage>
    </Application.RootVisual>
</Application>

Then I updated the App.cs file and it now contains only the following code:

namespace PhoneApp1 {
    public partial class App : System.Windows.Application {
        public App() {
            InitializeComponent();
        }
    }
}

The rest of the application is the same as before. The end result:

1. As few lines of code as possible - 15 lines of XAML and 7 lines of C# (including some empty lines and line breaks for readability)
2. As few lines of configuration as possible - 30 lines (having all attributes and elements on separate lines, 19 if I keep attributes on same line as beginning element)
3. As few files as possible - 4 files
4. As few references as possible - 5 references ( Microsoft.Phone, mscorlib, system, System.Core, System.Windows)
5. The smallest XAP-size possible - 2,99 kb

To handle the migration and development process, Coderox also leveraged the excellent services of www.ontrax.se.

Hopefully the website will now better serve it's purpose in the future and also be more flexible and prepared for possible extensions and additions.