Introduction
This article shows how to use a scroll viewer inside 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. The WP8 toolkit removes the limitations of the default message box by providing a Custom Message Box control and using the scroll viewer inside the message box to allow 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 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 this demo I'm placing a scroll viewer inside the message box. This can be useful for showing readme files, about, and other long info.
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 a message box.
-
Height
To set the height of the message box. It can be set or left to auto fit as per the 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 the value. It is the right message button of the message box.
Apart from the properties, the following methods are also used:
Before you can run the following demo you need to install a WP8 toolkit to 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 scroll viewer and customized content. Here in this demo, I'm placing a text file inside the scroll viewer that will be shown on the message box. 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 the text block and finally all these controls are grouped into one stack panel. The message box content property is set to that content panel. 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 text from file
string Text = getTextForLabel();
//Create new label
TextBlock tb = new TextBlock()
{
Text = Text,
TextWrapping = TextWrapping.Wrap,
FontSize = 25,
};
//Create new Scroll viewer
ScrollViewer sv = new ScrollViewer()
{
VerticalScrollBarVisibility=ScrollBarVisibility.Auto,
Height=380,
};
// add texblock in scroll viewer
sv.Content = tb;
//Add the controls to stack panel
sp.Children.Add(sv);
// 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",
};
//Show the message box...
cmb.Show();
}
private string getTextForLabel()
{
using (StreamReader s = new StreamReader("sample.txt"))
{
return s.ReadToEnd();
}
}
}
}
The Show method is used to launch the task.
Output