The importance of an about page

archiecoder Design, Windows Phone

Your app is feature complete, here is what you should consider before sending it to the certification. Add a page that contains at least three sections:

• About
• What’s new
• Credits

About

The first goal of an about section is providing a way to your users to connect with you. For DualShot, I provide diverse links. The important one is Support & Feedback. It opens the mail editor. I take the opportunity to enter information that might help like the current version of the app, language and the phone model.

Providing a way to contact you won’t prevent all bad ratings, but it will save you some if you respond accordingly.

In the list above, there is another interesting link called User Voice. User Voice is a website that provides a (free) service where user can enter anonymous feedback or bugs. Their website is very easy to setup and use. I have seen a lot of apps having a User Voice link. Even the Windows Phone developer team has a User Voice page.

What’s new

There are a lot of applications that provide updates, but often we are not aware of what’s new. Sometimes, they put the update description into the app’s description, but the second you click update you don’t have access to the description in one click, you need to find the app into the store. Starting with my app DualShot, I will provide a what’s new section for my future apps. Not only it tells the user what’s new, but it can help the user to discover features that are maybe not obvious at first sight.

Credits

Open your Windows Phone solution and check the references for each project. Do you see a lot of 3rd party libraries? The answer is most likely yes. Would you be able to release your app without using any free 3rd party libraries? I’m sure you can, but it would take a lot more time. Reinventing the wheel is probably not your motto neither. That’s been said, with my latest applications, I took the decision to thank the people bind the libraries. It doesn’t cost a dime to give a two thumbs up for the creators. For each library and translator, I put a link to their website or Twitter handle. After I released my app, I tweeted to each of time and 80% replied back.

You never know what you can expect: four gentlemen offered us to translate the app for free. It was my pleasure to put their names into the credits section.

Don’t worry, you won’t get hurt in the rating for putting a credits section. I have receive a lot of good and very bad reviews, but I never receive something related to: “Huh, your app suk and your credits too”.

Conclusion

Take the extra 2-3 hours to provide for your users to connect with you and thank the person who helps build your application directly or indirectly. If you provide updates, add a what’s new section.

My WinSource app is now open source on the Nokia developer website

archiecoder Design, Windows Phone

Introduction

In the summer 2012, the ​WinSource website held a contest among the Windows Phone developers to create an official application for their website.

I was a participant in the contest and I can tell you that it was a really interesting and challenging contest. My application finished in third position.

You can download the application from the winner at ​here.

Important notice

Before I decided to put the full source code of my complete application. I asked the owners of the ​WinSource from the Neverstill company if I can publish the source code of my application. They accepted my idea, because it is a great way to help the Windows Phone community.

In the current form, the application has enough features that it can be an alternate ​WinSource application. The only restriction is a user cannot publish or use the ​WinSource’s logo, the assets or the content from the ​WinSource. NOTE, this project is ​licensed under a slightly modified MIT license which reflects the above restriction.

The purpose of having this open project is to help the community creating a professional news reader for any other websites that give the permissions. It also shows different concepts which can be applied in different type of applications.

The application

My application contains the following features:

• The metro design is used throughout the app, while the main page is showcased using the panorama design.
• Fast navigation between pages.
• Articles classified by date.
• Play YouTube videos.
• A description of each team member, including a display of the author name & image on each author’s page. Also included is the option to send the author an email.
• Article links can be shared on Twitter, Windows Live, Facebook, or by email.
• The application bar contains shortcuts to the Facebook page and the Twitter page of the website.
• The About page provides a way to send an email and to write a review of the app.
• Option to automatically refresh articles when the application launches.

The following list contains advanced features:

• Offline mode. Articles can be read even when no internet connection is available.
• Unlimited space for saving articles, which can then be accessed using the Saved Articles page.
• Articles can be periodically downloaded (every ~4 hours) in the background, even when the app is not running. This feature does not require server support.
• Toast notification will display the number of new articles available, and a badge count in the application live tile will also display this number.
• The back of the live tile will display the latest article title.

The application uses the Pivot control for the team members:

And a standard page for an article:

Open source libraries

I used three open source libraries that are well known in the developer community:

• GalaSoft MvvmLight (​http://mvvmlight.codeplex.com/): Used to architecture a modular application and to easily add future features.
• Newtonsoft.Json (​http://json.codeplex.com/): Used to save and love articles for the offline mode.
• Silverlight Toolkit (​http://silverlight.codeplex.com/): Used for hub tile control and for the optimized list control.

Architecture

I use the Model View-Model View (MVVM) pattern in my solution. The solution is separated in five assemblies:

• DotNetApp.Toolkit: It includes utility classes that can be reused in any Windows Phone projects. There is also my Request class that helps calling web resources.
• WinSource: This is the main project that includes the views, the data service, the view models and many more things.
• WinSource.Agent: It is the project that includes the schedule background service which permits to periodically download articles in the background.
• WinSource.Client: It contains all the web requests.
• WinSource.Model: It contains only the data structure.

You won’t find a lot of comment in my code, but I’m an heavy user on code convention and I tend use write small methods so the code should be self-explanatory.

How to build the application

All the required files are built-in in the solution. Make sure that the selected project is “WinSource” then press F5 to launch the application.

• The application has been tested with the Windows Phone SDK 7.1.

Future of the application

The application in its current form contains more features then some published news applications in the Windows Phone Store. That’s been said, the application is in a release state. As all software, it is always possible to polish and add features. You are welcome to add and suggest features.

What can you do with the source files of the application?

Simple answer: create your own news application! The source files provided are the best starting point to get your news application ready. The mechanism is ready and your tasks are:

• Replace the assets in the Assets folder of the WinSource assembly.
• Modify the classes in the WinSource.Client assembly in order to fetch the article descriptions and videos from your news source.
• Remove or add sections in the Panorama.

Learning

Also, if you read the code you can learn a lot about the Windows Phone SDK and about some best practices. The application is more complete than the ones in the MSDN samples.

Conclusion

You can contribute directly to the project on the Nokia developer website or you can download the source code.

Happy coding!

Contribute on the Nokia developer website
Download Sample project

How to create simple animation in your Windows Phone app

archiecoder Design, Windows Phone

Creating animations in your Windows Phone application is easier than you think.

I created a simple application that shows how to create a static animation and a dynamic animation. Both animations fill the following red rectangle from the bottom to the top.

Static animation

An animation uses a Storyboard object. It is usually created in the XAML file, because it is easier this way. Here is the XAML code:

<phone:PhoneApplicationPage x:Class="SimpleAnimationApp.StaticAnimationPage"
                            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">

    <phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="staticAnimation">

            <DoubleAnimation Duration="0:0:5"
                             To="700"
                             Storyboard.TargetProperty="Height"
                             Storyboard.TargetName="rectangleRed" />

        </Storyboard>

    </phone:PhoneApplicationPage.Resources>
    
    <Grid>

    <Rectangle Fill="Blue"
               Height="700"
               Width="100"
               VerticalAlignment="Bottom"/>

    <Rectangle Fill="Red"
               Height="0"
               Width="100"
               VerticalAlignment="Bottom"
               x:Name="rectangleRed"/>

    </Grid>

</phone:PhoneApplicationPage>

The DoubleAnimation is the simplest animation available, it animates a property that uses a double value. The above double animation is defined like this: Animate the Height property of the rectangleRed object from the current Height value to 700 in 5 seconds.

To start the animation, you need to call the Begin method on the animation:

using System.Windows.Navigation;

namespace SimpleAnimationApp
{
    public partial class StaticAnimationPage
    {
        public StaticAnimationPage()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            staticAnimation.Begin();
        }
    }
}

It is not used in the sample app, but if you want to stop an animation at any time, you just have to call the Stop method on the animation.

Dynamic animation

For the dynamic animation, let’s pretend that the properties Duration and To are specified in the code behind. We have the similar XAML code:

<phone:PhoneApplicationPage x:Class="SimpleAnimationApp.DynamicAnimationPage"
                            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">

    <phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="dynamicAnimation">

            <DoubleAnimation Storyboard.TargetProperty="Height"
                             Storyboard.TargetName="rectangleRed"
                             x:Name="doubleAnimation" />

        </Storyboard>

    </phone:PhoneApplicationPage.Resources>
    
    <Grid>

    <Rectangle Fill="Blue"
               Height="700"
               Width="100"
               VerticalAlignment="Bottom"/>

    <Rectangle Fill="Red"
               Height="0"
               Width="100"
               VerticalAlignment="Bottom"
               x:Name="rectangleRed"/>

    </Grid>

</phone:PhoneApplicationPage>

There is one addition of the x:Name=”doubleAnimation” which will help to control the animation in the code behind:

using System;
using System.Windows.Navigation;

namespace SimpleAnimationApp
{
    public partial class DynamicAnimationPage
    {
        public DynamicAnimationPage()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            doubleAnimation.Duration = new TimeSpan(0, 0, 0, 10);
            doubleAnimation.To = 350;

            dynamicAnimation.Begin();
        }
    }
}

Before starting the animation, I set the Duration to 5 seconds and the To to 350 which is half the size of the blue rectangle.

It is not complicated to create an animation. Those were simple animations, but if you want to create more complex animations and even combine animations, you can find more information on the web.

Put some life in your control!

Download Sample project

How to fix the standard header of a pivot control using a style and how to fix a page using the TitleControl

archiecoder Design, Windows Phone

When I first read the excellent book 101 Windows Phone 7 Apps by Adam Nathan, I was surprised to learn that if you create a “Windows Phone Application” or a “Windows Phone Pivot Application” in Visual Studio, the application title is not displayed as it is the built-in metro applications of the Windows Phone OS.

If you want to see the differences for yourself, follow these steps:

1- Create a “Windows Phone Pivot Application”.
2- In the MainPage.xaml, change the “MY APPLICATION” title to “SETTINGS”.
3- Change the header name of the first pivot item from “first” to “system”.
4- Change the header name of the second pivot item from “second” to “application”.
5- Run the application.

You’ll see:

Now, exit the application and go in the “Settings” application of the emulator, then look at the page:

Do you see a difference in the “SETTINGS” application title?

To approximate the same design as the OS, the author suggests a style that you can apply to your pivot control:

<Style x:Key="PivotStyle" TargetType="controls:Pivot"> <Setter Property="TitleTemplate"> <Setter.Value> <DataTemplate> <TextBlock FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}" Margin="-1,-1,0,-3" Text="{Binding}" /> </DataTemplate> </Setter.Value> </Setter> </Style> 

Apply the style:

    <controls:Pivot Title="SETTINGS" Style="{StaticResource PivotStyle}"> 

The same issue happens with every page (PhoneApplicationPage). Instead of applying the fix to all the pages of an application, I created the TitleControl (the code is available for download at the end of the article).

Two of the goals behind the TitleControl were:

1- Get rid of all the XAML code that displays the header.

2- Remove the unnecessary extra grid that displays the header and the content. Remember, if you can have less containers like panels, a grids, or stack panels in a page, your loading speed will be faster.

So, instead of having the following XAML code:

<Grid x:Name="LayoutRoot" Background="Transparent">

 <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--TitlePanel contains the name of the application and page title--> <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> </StackPanel> <!--ContentPanel - place additional content here--> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="Hello World" /> </Grid>

 </Grid> 

The code can be reduced to:

<Grid x:Name="LayoutRoot" Background="Transparent"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Controls:TitleControl TitleName="SETTINGS" PageName="theme" /> <TextBlock Grid.Row="1" Margin="24,0" Text="Hello World" /> </Grid> 

If you have a brand theme, you can override the color and the font directly in the TitleControl or you can add additional dependency properties to the control.

Download TitleControl
Download Sample project