Dialog Control In Rate My App

Introduction

This article explains how to control the message box screens of the Rate My App Component. Both screens, namely the review and feedback screens, are very useful and generally used in the same combo. But in some situations we may want to split these two screens. This article explains this.

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 a specific number of 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 to 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.
  

Visibility Change Event

It is mandatory to handle the visibility change event for the rate my app dialog for its proper functioning. But here we are putting our logic inside that event handler. This event is fired every time the dialog visibility is changed. Something else important to remember is that this component opens two separate dialogs (rating and feedback) one after another but for both, the dialog visibility change event is handled by one common event handler. 

Installing Rate My App

Use the following procedure to start using 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 basic settings and methods of the Rate My App Component. The Boolean variable "feedback" is used for demo purposes only. The "Count" variable is very essential to monitor the various screens. Count=1 indicates a review dialog and count=2 indicates a feedback dialog.

How it works

This trick plays with the visibility change event. Whenever a dialog is displayed, the visibility change event is fired and the first event is triggered by the review dialog and then it is triggered by the feedback dialog. This order of the dialogs is exploited to get our work done.

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="768"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,512">
            <TextBlock Text="Demo" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock  Text="Demo" Margin="9,-7,0,0" FontSize="40" />
        </StackPanel>
        <StackPanel Orientation="Vertical" Margin="0,461,0,233">
            <CheckBox IsChecked="True"  Content="Enable Feedback Screen " Unchecked="CheckBox_Unchecked" Checked="CheckBox_Checked"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <c:FeedbackOverlay x:Name="FeedbackOverlay"
                             FeedbackTo="[email protected]"
                             ApplicationName="Demo"
                             CompanyName="ARDeveloper"
                           />
    </Grid>
</phone:PhoneApplicationPage>

NOTE: For proper display of the dialog, always follow these two rules:

1. The "Rate My App" must be the last element in the layout root.
   
2. The row span should be large enough to display the message box. In general, row span of 2 works perfectly.

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
    {
        //For counting msg box
        public int count = 1;

        public bool feedBack = true;

        // Constructor
        public MainPage()
        {
            InitializeComponent();

            //FeedbackOverlay.Reset();

            //This line is must for the working of the component.
            FeedbackOverlay.VisibilityChanged += FeedbackOverlay_VisibilityChanged;
        }

        void FeedbackOverlay_VisibilityChanged(object sender, EventArgs e)
        {
            if (count==2 && feedBack )
            {
                //Feedback Screen
                FeedbackOverlay.Visibility = System.Windows.Visibility.Collapsed;
                FeedbackOverlay.Reset();
                count = 1;
            }
            else  //Count =1
            {
                //Rating screen
                count += 1;
            }
        }

        private void CheckBox_Checked(object sender, RoutedEventArgs e)
        {
            feedBack = true;
        }

        private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            feedBack = false;
        }
    }
}

Output

 

 

 

 

Feedback disabled.