Pride in craftsmanship, one of the design philosophies that is used for Windows (phone) apps tells you to look out for all details and get them right. It ensures the user reaches easier his goal with using your application and be happier when using it.

Override the default accent color.

 

This is a screenshot of the default GridView application with selection turned on. Did you ever looked how often this purple color is used in applications that come out of the windows store? I am quite sure this is done because they forget to override the default styling. Make sure the selection color also fits with your design.

 

 

 

In XAML applications it’s pretty easy to solve this. The steps you have to take:

  1. Create a custom style for the GridViewItem / ListViewItem. You can do this easily form the designer. Right click on the GridView. Choose “edit additional templates” and then “Edit generated item container” and choose for “edit a copy”.

  2. Override the following brushes and define the color you want.
    <SolidColorBrush x:Key="ListViewItemCheckThemeBrush" Color="Red" />
    <SolidColorBrush x:Key="ListViewItemCheckSelectingThemeBrush" Color="Yellow" />
    <SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Blue" />
    <SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Gray" />

This is not only for GridViewItem and ListViewItem but also for the textbox for example. Select a piece of text. Again the purple color shows up. So override those styles easily by adding this xaml to your resources

<SolidColorBrush x:Key="TextSelectionHighlightColorThemeBrush" Color="Green" /> 
        
        <Style TargetType="TextBox"> 
            <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}"/> 
        </Style>
 

So check all controls your using for this.

Use the whole screen to scroll

Often seeing implementations of the GridView that looks like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
                <Grid.RowDefinitions> 
                    <RowDefinition Height="140"/> 
                    <RowDefinition Height="*"/> 
                </Grid.RowDefinitions> 
 
                <!-- Horizontal scrolling grid --> 
                <GridView Grid.Row="1" /> 
 
                <!-- the title bar --> 
                <Grid /> 
            </Grid>

So there is a grid with 2 rows, one 140 pixel height on top that contains the page title and back button. The second row contains a GridView. Looks nice when you run I the simulator but isn’t optimal. When looking at the default templates you will see it has a row span of 2 and by adding a padding it’s pushed below the title. The reason for this is better interaction when using touch. If it’s implemented like here above you can only swipe through the grid when you have your finger in the grid. It won’t work when you place your finger in the title bar. If use the default template and let have the GridView a row span of 2, and use padding to place it on the right position you can touch everywhere on the screen.

Test for different scaling

Based on the DPI Windows is applying a scaling of 100, 140 or 180 percentage. Surface 1 has for example a scaling of 100% while the surface pro (and all the surface 2 generations) have 140%. To let all look very crispy it’s needed to work with vector based images like fonts, or you need to provide different images for the different sizes. This is very easy by adding the scale to the filename. So logo.png becomes logo.scale-100.png, logo.scale-140.png and logo.scale-180.png. This isn’t only working for the tiles and splash screen but also for images that your using in your application.

Just providing other images isn’t enough. You also need to test. The xaml render engine seems to render things little different in some cases. For example take the page title that comes with the default templates. Make it very long and choose a resolution that has 100% scaling. Everything looks very nice



 

Now select a resolution that has 140% or 180% zooming. The result is horrible

 


Character like g and q are getting cropped at the bottom. Fix these things. The higher DPI screens are getting very popular.

Implement all the right contracts for your application

When you developing your application have a good look at this list: http://msdn.microsoft.com/en-us/library/windows/apps/hh464906.aspx

It contains a list for most contracts windows is offering. Try to thing about each contract if it can be useful to implement it. So when you’re doing something with video, just don’t show the video in your app but also implement Play-To contract for example. If your application is containing files have close look to the FilePicker contracts.

When implementing share just don’t toss a simple text in it but thing in the scenario’s that the user can do. Handle share different when a text is selected for example then when nothing is selected. This make those contacts very powerful.

For all those contracts there a very good guidelines written. Read them when implementing and check if you got the details right.

Think about the application life cycle management

Realise that your code is only running when your application is on the foreground and realise it is possible that the user won’t come back before the application gets closed. With this in mind you can make different chooses when you’re implementing pieces of functionality. Think about the following scenario, your downloading big files from a server. As long your application is running everything will go fine with the http client. Even when the user leaves the application for few minutes and comes back to it. But what if it comes back the next day? Then the downloaded data with the HttpClient will be lost and will it be nicer to had used the BackgroundTranfers api’s so the files where still there and ready to use.