Creating T&C Dialog Box For WP8

In this article we will learn how to create a T&C dialog box for our WP8 application.

Introduction

In this article we will create a terms and conditions dialog for a Windows Phone 8 app. To create this you have two choices, one is to create an app page for it and the other one is to create a dialog box. The latter one looks more promising and user friendly. For creating a T&C dialog I'll use the Custom Message Box control of the Windows Phone toolkit. In our app we can use the default message box to show alerts or messages to the user but it is very limited. Like we won't be able to show a scrollable message or hyperlink and so on. WP8 toolkit removes the limitations of the default message box by providing a Custom Message Box control and using a scroll viewer inside the message box that allows us to show more content. So let's get started.

Custom Message Box

Custom Message Box is a control provided in the WP8 toolkit for customizing the interface and content of a message box. It enables you to add various UI elements to the message box that is not possible in the default message box. In this demo, we will create all our UI elements from code only.

In the following demo I have used the following properties of the Custom Message Box:

  • Content
    It takes an object as a value. It is displayed in the message box as we see a text in our default message box. String is also an object and can be used for adding text to the message box.
     

  • Height 
    To set the height of the message box. It can be set or left to auto fit as per content size.
     

  • Opacity
    To set the opacity of the message box. Value ranging from 0 to 1. 
     

  • Left Button Content
    It also takes an object as a value. It is the left message button of the message box. 
     

  • Right Button Content
    It also takes an object as value. It is the right message button of the message box. 

Apart from the properties, the following methosd are also used:

  • Show
    This method is used to show the message box.
     

  • SetIsTiltEnabled
    To enable a tilt effect on the control.

To handle the user response to the T&C dialog we are handling the click event of dialog buttons. For this I'm handling a dialog dismissing event. In the handle I'm comparing the dialog result to perform the various action on user response.

Before you can run the following demo you need to install a WP8 toolkit in your project. It's very easy to do this.

Installing WP8 Toolkit

Use the following procedure to install the WP8 toolkit:

  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 WPtoolkit

    After typing this you will probably see the log similar to this:

    install-package wptoolkit
    'WPtoolkit 4.2013.08.16' already installed.
    Adding 'WPtoolkit 4.2013.08.16' to Demo.
    Successfully added 'WPtoolkit 4.2013.08.16' to Demo.
     

  4. The next step is to add its reference to the XAML page. To do this just add this line:

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

Demo

The following code creates a T&C dialog for your app. Here in this demo, I'm placing a text file inside the scroll viewer that will be shown on the message box. This text file contains my T&C's. To do this I have created one text block that will contain all the text of the file, one scroll viewer for enabling the scroll on text block, one hyperlink button to allow the user to read the policy online and finally all these controls are grouped into one stack panel. The message box content property is set to that stack panel. If the user accepts our T&C then the app will continue and if the user rejects the T&C's then the app will terminate itself. So let's see how to code it.

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"

    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-->

            <Button Content="show message box" Click="openMsgBox" Height="171" VerticalAlignment="Bottom" Margin="0,0,0,258" Grid.Row="1"></Button>

    </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;

 

namespace Demo

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

 

            // Use this line to open msg box while page is loaded.

            // openMsgBox(new Object(), new RoutedEventArgs());

        }

        CustomMessageBox cmb;

        private void openMsgBox(object sender, RoutedEventArgs e)

        {

            // create new Stack panel

            StackPanel sp = new StackPanel() { Orientation = System.Windows.Controls.Orientation.Vertical };

           

            //get policy text from file

            string policy = getPolicy();

 

            //Create new label

            TextBlock tb = new TextBlock()

            {

                Text =policy,

                TextWrapping = TextWrapping.Wrap,

                FontSize = 25,

            };

 

            //Create new Scroll viewer

            ScrollViewer sv = new ScrollViewer()

            {

                VerticalScrollBarVisibility=ScrollBarVisibility.Auto,

                Height=500,

            };

 

            // add texblock in scroll viewer

            sv.Content = tb;

 

            //Create Hyperlink Button

            HyperlinkButton hb = new HyperlinkButton()

            {

                NavigateUri = new Uri("http://www.c-sharpcorner.com/privacypolicy.aspx"),

                HorizontalAlignment = System.Windows.HorizontalAlignment.Left,

                Content = "Read Online",

                FontSize = 25,

                Margin = new Thickness(0, 10, 0, 0),

            };

 

            TiltEffect.SetIsTiltEnabled(hb, true);

 

            //Add the controls to stack panel

            sp.Children.Add(sv);

            sp.Children.Add(hb);

 

            // Create new Custom Message Box instance

            cmb = new CustomMessageBox()

            {

                // Set its content to our Stack Panel

                Content = sp,

 

                Opacity = 0.98,

 

                // Left button of message box Button

                LeftButtonContent = "Accepts",

 

                //Right button of message Box

                RightButtonContent="Reject",

            };

 

            //Handle msg box click

            cmb.Dismissing += cmb_Dismissing;

            //Show the message box...

            cmb.Show();

        }

 

        void cmb_Dismissing(object sender, DismissingEventArgs e)

        {

            if (e.Result==CustomMessageBoxResult.LeftButton)

            {

                MessageBox.Show("Now you can use this app.");

            }

            else

            {

                //do what you want

                MessageBox.Show("It's mandatory to accepts the T&C to use this app. Exiting from app.");

                App.Current.Terminate();

            }

        }

 

        private string getPolicy()

        {

            using (StreamReader s = new StreamReader("sample.txt"))

            {

                return s.ReadToEnd();

            }

        }

 

    }

}

  

The Show method is used to launch the task.

 

Output