Getting Started With Rate My App Component

Introduction

In this article we will learn how to add a rating functionality to our app using the Rate My App component. Whatever app you have built, you are always interested in user feedback and reviews. But users generally do not care much about reviewing and commenting on your app. There can be many reasons for the user to not review your app. One reason can be laziness or the user doesn't want to open the store just for the review. To overcome this problem and get users to do a review we can use the Rate My App component.

Rate My App

Rate My App is a ready-made component for adding rating functionality to your app. The Rate My App component prompts the user by showing a message box. The special thing is, the message comes only after 4 uses of the app.

This component also helps you in collecting user feedback by email. If the user wishes not to review your app then one will be directed for a feedback message and the user can send you the feedback.

Some of the properties of the Rate My App that I have used in this demo are as follows:

• Feedback To
  Email address for sending feedback to. It's a mandatory field.
   
• Application Name
  Name of an application. It's a mandatory field.
   
• Company name
  Name of the company. It's a mandatory field.
   

Installing Rate My App

Use the following procedure to use the Rate My App component.

1. Open your app project (either an existing one or a new one). 
    

2. From the toolbar select "Tools" -> "NuGet Package Manager" -> "Package Manager Console". 
    

3. Now in the Package Manager Console type the following:
   
   Install-Package ratemyapp
   
   After typing this you will probably see the log similar to this:
   
   PM> install-package ratemyapp
   Installing 'RateMyApp 1.1.0'.
   Successfully installed 'RateMyApp 1.1.0'.
   Adding 'RateMyApp 1.1.0' to Demo.
   Successfully added 'RateMyApp 1.1.0' to Demo.
    

4. The next step is to add its reference to the XAML page. To do this just add this line:
   
   xmlns:c="clr-namespace:RateMyApp.Controls;assembly=RateMyApp"

 

Demo

In this demo I'm using only the basic settings of the Rate My App component. This component is versatile and can be customized to suit your application specific requirements.

XAML

<phone:PhoneApplicationPage

    x:Class="Demo.MainPage"

    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"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

    mc:Ignorable="d"

    xmlns:c="clr-namespace:RateMyApp.Controls;assembly=RateMyApp"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">

 

    <!--LayoutRoot is the root grid where all page content is placed-->

    <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 Text="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>

            <TextBlock  Text="Demo" Margin="9,-7,0,0" FontSize="40" />

        </StackPanel>

 

        <!--ContentPanel - place additional content here-->

        <c:FeedbackOverlay x:Name="FeedbackOverlay"

                             Grid.RowSpan="2"

                             FeedbackTo="[email protected]"

                             ApplicationName="Demo"

                             CompanyName="ARDeveloper"  

                           />

    </Grid>

</phone:PhoneApplicationPage>

C# Code Behind

using Microsoft.Phone.Controls;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Diagnostics;

using Microsoft.Phone.Tasks;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.IO;

using RateMyApp.Helpers;

 

namespace Demo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

 

            //This line is must for the working of the component.

            FeedbackOverlay.VisibilityChanged+=FeedbackOverlay_VisibilityChanged;

        }

 

        void FeedbackOverlay_VisibilityChanged(object sender, EventArgs e)

        {

        }

   }

}

 

Output