×
Namespaces

Variants
Actions

Implement "Rate My App" in under 60 seconds

From Nokia Developer Wiki
Jump to: navigation, search

This article shows how to add marketplace review (app store "rating") to your Windows Phone app in under 60 seconds.

SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata
Compatibility
Platform(s):
Windows Phone 8
Article
Created: Rob.Kachmar (01 Dec 2013)
Last edited: Rob.Kachmar (04 Jul 2014)

Contents

Introduction

One secret to a successful app is getting positive reviews in the store. Unfortunately, even if you have a quality app it can be challenging to get users to take the time to give a review. There are many ways to encourage them to do so, but the easiest and most effective is to politely ask them to rate the app after they've used it a number of times.

The Rate My App component provided by Nokia Developer makes implementing this functionality trivially easy - automatically prompting users to rate the app after it has been started 5, 10 or a configurable number of times.

This tutorial shows just how fast and easy it is to implement this "review request" process using the Rate My App Nuget package; so fire up Visual Studio and start the clock!

Step 1: Install the Library (12 seconds)

With your app opened In Visual Studio, go to

  • Tools >>> Library Package Manager >>> Manage NuGet Packages for Solution...
  • Search for RateMyApp, and install the one created by Nokia Developer

RateMyApp Screenshot NuGet.PNG


Step 2: Add an Assembly Reference (5 seconds)

In the XAML of your app's start page (ie. MainPage.xaml), copy and paste the highlighted assembly reference into the phone:PhoneApplicationPage tag at the top where the other assembly references are located.

  1. <phone:PhoneApplicationPage
  2.     x:Class="PhoneApp1.MainPage"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  9.     xmlns:ctrl="clr-namespace:RateMyApp.Controls;assembly=RateMyApp"
  10.     mc:Ignorable="d"
  11.     FontFamily="{StaticResource PhoneFontFamilyNormal}"
  12.     FontSize="{StaticResource PhoneFontSizeNormal}"
  13.     Foreground="{StaticResource PhoneForegroundBrush}"
  14.     SupportedOrientations="Portrait" Orientation="Portrait"
  15.     shell:SystemTray.IsVisible="True">


Step 3: Add a Control (5 seconds)

In the XAML of your app's start page, copy and paste this FeedbackOverlay control within the main grid spanning all rows and columns. Additionally, be sure to make it the last control in the grid, so it overlays all the other controls when it is time to be visible.

<!-- Feedback overlay -->
<ctrl:FeedbackOverlay x:Name="FeedbackOverlay"
Grid.RowSpan="2"
FeedbackTo="{Binding Path=LocalizedResources.FeedbackTo, Source={StaticResource LocalizedStrings}}"
ApplicationName="{Binding Path=LocalizedResources.ApplicationName, Source={StaticResource LocalizedStrings}}"
CompanyName="{Binding Path=LocalizedResources.CompanyName, Source={StaticResource LocalizedStrings}}"/>


Step 4: Add AppResource Strings (27 seconds)

In the AppResources.resx file, add the following strings (this file is under the Resources folder in your Solution Explorer)

  • FeedbackTo (the value for this must be an email address)
  • ApplicationName
  • CompanyName

RateMyApp Screenshot AppResources.PNG


Step 5: Add an Event Handler (5 seconds)

In the code-behind class of your app's start page (ie. MainPage.xaml.cs), copy and paste the highlighted line into the class constructor (e.g. public MainPage() { ... } )

  1. //Constructor
  2. public MainPage()
  3. {
  4.   InitializeComponent();
  5.  
  6.   FeedbackOverlay.VisibilityChanged += FeedbackOverlay_VisibilityChanged;
  7. }


Step 6: Add a Method (5 seconds)

In the code-behind class of your app's start page, copy and paste this code into the class

private void FeedbackOverlay_VisibilityChanged(object sender, EventArgs e)
{
if (ApplicationBar != null)
{
ApplicationBar.IsVisible = (FeedbackOverlay.Visibility != Visibility.Visible);
}
}


That's It!

I told you it was fast and easy. Now go push your update into the store, and enjoy the ratings from your users.

If you want to know more about the Rate My App library, check out the detailed overview in the Nokia Lumia Developer's Library as well as the source code on Github.

Note.pngNote: A well designed app should also consider adding a link to marketplace review on the About Page.

Tip.pngTip: Remember to also head on over to DVLUP.com to pick up some easy XP for implementing the rate my app feature. You can also keep coming back here to use this page as your checklist each time you implement the feature in your other apps.


Troubleshooting

  • Go through the steps again and make certain you are following everything exactly as it is mentioned, including copying and pasting the code snippets exactly as they are provided.
  • In your solution explorer, make sure you see RateMyApp under the References folder. If it is not there, then make sure to uninstall/reinstall with Nuget again.
  • If you changed the x:Name value of the FeedbackOverlay control in MainPage.xaml to anything other than "FeedbackOverlay", which is provided in the snippet above, then you must also use that same name in MainPage.xaml.cs code-behind file: SomeOtherNameForTheFeedbackOverlayControl.VisibilityChanged
  • Try removing the FeedbackOverlay control from MainPage.xaml, saving the page, then adding it back in and saving the page again. This may help Visual Studio regenerate the hidden background code for the control. If you want to double check that the auto-generation worked, then open MainPage.xaml.cs code-behind file, put your cursor on the InitializeComponent() method in the page constructor and press F12. You should see something like this where FeedbackOverlay is defined as a type RateMyApp.Controls.FeedbackOverlay, and it is assigned a reference to the same control name found in the page's XAML.
public partial class MainPage : Microsoft.Phone.Controls.PhoneApplicationPage {
 
internal System.Windows.Controls.Grid LayoutRoot;
 
internal System.Windows.Controls.StackPanel TitlePanel;
 
internal System.Windows.Controls.Grid ContentPanel;
 
internal RateMyApp.Controls.FeedbackOverlay FeedbackOverlay;
 
private bool _contentLoaded;
 
/// <summary>
/// InitializeComponent
/// </summary>
[System.Diagnostics.DebuggerNonUserCodeAttribute()]
public void InitializeComponent() {
if (_contentLoaded) {
return;
}
_contentLoaded = true;
System.Windows.Application.LoadComponent(this, new System.Uri("/RateMyApp;component/MainPage.xaml", System.UriKind.Relative));
this.LayoutRoot = ((System.Windows.Controls.Grid)(this.FindName("LayoutRoot")));
this.TitlePanel = ((System.Windows.Controls.StackPanel)(this.FindName("TitlePanel")));
this.ContentPanel = ((System.Windows.Controls.Grid)(this.FindName("ContentPanel")));
this.FeedbackOverlay = ((RateMyApp.Controls.FeedbackOverlay)(this.FindName("FeedbackOverlay")));
}
}
This page was last modified on 4 July 2014, at 19:51.
818 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×