Creating List Picker Dialog In WP8

In this article you will learn how to place a list picker control inside the message box.

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:

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

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

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

  1. Create a stack panel.
     

  2. Create a list picker.
     

  3. Create any number of List picker items you want to add to the list picker.
     

  4. Group the list picker inside the stack panel.
     

  5. Place the stack panel inside the message box using its content property.
     

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