Introduction
In this article I will show you how to show a List Picker control in a message box. I'll use the Custom Message Box control of the Windows Phone Toolkit to do this. 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 hyperlinks or other UI elements except text. WP8 toolkit removes the limitations of the default message box by providing a Custom Message Box control. 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, we will create our UI from C# 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 a message box.
-
Height
To set the height of the message box. It can be set or left to auto fit as per content size. I'm using the default height, that is fit to content.
-
Opacity
To set the opacity of the message box. Value ranging from 0 to 1.
-
Left Button Content
It also takes an object as the 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 method is also used:
To handle the user response to the dialog we are handling the click event of dialog buttons. For this I'm handling a dialog dismissing event. In the handler I'm comparing the dialog result to perform any of the various actions on the user response.
I'm also handling the selection change event of the list picker to enable the live preview.
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 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 one:
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 places a List picker control inside the message box control. The old way is to place the list picker in the same page but now we can open the selector in a popup to allow easy selection. The entire logic of creating this demo can be summarized in the following steps:
-
Create a stack panel.
-
Create a list picker.
-
Create any number of List picker items you want to add to the list picker.
-
Group the list picker inside the stack panel.
-
Place the stack panel inside the message box using its content property.
-
Handle the click event of the message buttons and you are done.
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="Select Color" Click="openMsgBox" Height="171" VerticalAlignment="Bottom" Margin="0,0,0,258" Grid.Row="1"></Button>
<TextBlock Name="clrSel" Text="You selected: none" Margin="0,396,0,218" Grid.Row="1"></TextBlock>
</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();
}
ListPicker lp;
StackPanel sp;
CustomMessageBox cmb;
private void openMsgBox(object sender, RoutedEventArgs e)
{
// create new Stack panel
sp = new StackPanel() { Orientation = System.Windows.Controls.Orientation.Vertical };
//Create new List picker
lp = new ListPicker();
//Add items in List picker
lp.Items.Add(new ListPickerItem() { Content = "Red" });
lp.Items.Add(new ListPickerItem() { Content = "Blue" });
lp.Items.Add(new ListPickerItem() { Content = "Green" });
//Add List picker in Stack panel
sp.Children.Add(lp);
//enable tilt effect
TiltEffect.SetIsTiltEnabled(sp, true);
// 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 = "Clear",
//Right button of message Box
RightButtonContent = "Ok",
};
//Handle msg box closing
cmb.Dismissing += cmb_Dismissing;
//Handle selection change
lp.SelectionChanged += lp_SelectionChanged;
//Show the message box...
cmb.Show();
}
void lp_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (lp.SelectedItem != null)
{
//Update UI
clrSel.Text = "Selected Text: " + ((ListPickerItem)lp.SelectedItem).Content.ToString();
}
}
void cmb_Dismissing(object sender, DismissingEventArgs e)
{
if (e.Result == CustomMessageBoxResult.LeftButton)
{
//Update UI
clrSel.Text = "Selected Text: None";
}
if (e.Result == CustomMessageBoxResult.RightButton)
{
//Update UI
clrSel.Text = "Selected Text: " + ((ListPickerItem)lp.SelectedItem).Content.ToString();
}
}
}
}
The Show method is used to launch the task.
Output