Custom Message Box Control With Hyperlink Button In WP8

Arpit Jain
10y
6.6k
0
0

Article

Introduction

In this article we will learn about the Custom Message Box control with a hyperlink button in it. In our app we can use the default message box to show alerts or messages to the user, but it is very limited. The WP8 toolkit removes the limitations of the default message box by providing a Custom Message Box control. So let's get started with it.

Custom Message Box

Custom Message Box is a control provided in the WP8 toolkit for customizing the interface and content of the message box. It enables you to add various UI elements to the message box that is not possible in the default message box.

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 text in our default message box. String is also an object and can be used for adding text to the message box. In this article we will use this property to place a hyperlink button in a message box.
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. It is used for closing the message box.

Hyperlink Button

Use the following procedure to create a hyperlink button:

Create a new Instance of the HyperlinkButton class.

HyperlinkButton hb = newHyperlinkButton()
Set the text of the link using the content property.

Content = "Location Settings",
Set it's navigation URI as in the following:

NavigateUri = ""
Enable the tilt effect on the hyperlink as in the following:
TiltEffect.SetIsTiltEnabled(hb,true);

Before you can run the demo provided in this article 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 using Nugget:

Open your app project (either an existing one or a new one).
From the toolbar select "Tools" -> "NuGet Package Manager" -> "Package Manager Console".
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.
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 demonstrates how to use the Custom Message Box with customized content settings. Here I'm dynamically creating a hyperlink button, one text block and then grouping them into one stack panel. That stack panel is placed inside the message box.

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

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

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

}

CustomMessageBox cmb;

private void openMsgBox(object sender, RoutedEventArgs e)

{

// create new Stack panel

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

//Create new label

TextBlock tb = new TextBlock()

{

Text="This feature requires the location service. To open the location settings click on the link given below or Ok to close the message box.",

TextWrapping=TextWrapping.Wrap,

FontSize=25

};

TiltEffect.SetIsTiltEnabled(tb, true);

//Create Hyperlink Button

HyperlinkButton hb = new HyperlinkButton()

{

//NavigateUri = ""

HorizontalAlignment=System.Windows.HorizontalAlignment.Left,

Content = "Location Settings",

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

};

hb.Click += hb_Click;

TiltEffect.SetIsTiltEnabled(hb,true);

//Add the controls to stack panel

sp.Children.Add(tb);

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 = "Ok",

};

//Show the message box...

cmb.Show();

}

async void hb_Click(object sender, RoutedEventArgs e)

{

await Windows.System.Launcher.LaunchUriAsync(new Uri("ms-settings-location:"));

}

The Show method is used to launch the task.

Output

Up Next

Ebook Download

View all

Windows Phone Development Step by Step Tutorial

Read by 19.1k people

Download Now!

Learn

View all