Getting User Input Through Popup in Windows Phone 7


Introduction

In this article we will explore how to get input using a popup in Windows Phone 7. Further in details we will discuss how to do that in Windows Phone 7. In this article first of all we use a Windows Phone user control to popup that control when a button is clicked. For this, whenever we click on the button, then a popup control will open in which there is a TextBox and two buttons; the first one is for clicking OK and the second one is Cancel. So when you enter some text in the TextBox and click on the OK button then the input value will be shown in the main page but it will be through popup user control. Further basically when talking about popups in Windows Phone you have two options; either to use the default Popup control and to handle the open/close functionality on your own or to use some of the advanced popups that come with free libraries like for example the Coding4Fun Toolkit. So to do that you have to follow the steps given below.

Step 1: First of all you have to download the toolkit from here named Coding4Fun toolkit. If you have already download the toolkit then you doesn't need to download it again.

Step 2: In this step first of all we have to open a Windows Phone application let see how you will open it.

  • Go to Visual Studio 2010
  • File->New->Project
  • Select the template named as silverlight for Windows Phone
  • Select the Windows Phone application
  • Give it a name as you want.   

Step_2_1fig.gif

Step_2_2fig.gif

Step 3: Further you have to add a Windows Phone user control into your Windows Phone application; let's see the figure given below to add the user control.

Step_3_1fig.gif

Step_3_2fig.gif

Step_3_3fig.gif

Step 4: In this step we will see the code for the PopUpUserControl.xaml file which is given below.

Code:

<UserControl x:Class="PopUpSample.PopUpUserControl"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

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

    xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls.Toolkit;assembly=Coding4Fun.Phone.Controls.Toolkit">      

     <StackPanel x:Name="LayoutRoot"  Width="480" Height="480">

             <TextBox x:Name="tbx">

            <TextBox.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#FFFFDBBB" Offset="1" />

                </LinearGradientBrush>

            </TextBox.Background>

        </TextBox>

        <Button x:Name="btnOK" Content="Click to OK" FontFamily="Comic Sans MS">

            <Button.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#FF7E8D6E" Offset="1" />

                </LinearGradientBrush>

            </Button.Background>

        </Button>

        <Button x:Name="btnCancel" Content="Click to Cancel" FontFamily="Comic Sans MS">

            <Button.Background>

                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="White" Offset="1" />

                </LinearGradientBrush>

            </Button.Background>

        </Button>

        <StackPanel.Background>

            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                <GradientStop Color="Black" Offset="0" />

                <GradientStop Color="#FFE2FBFF" Offset="1" />

            </LinearGradientBrush>

        </StackPanel.Background>

    </StackPanel>

</UserControl>

Step 5: In this step we will see the design of the user control.

Step_4fig.gif

Step 6: In this step you will see what namespace reference you need to write on the above code given below.

 

Step_6fig.gif

Step 7: In this step we will see the code for the MainPage.xaml.cs file which is given below.

Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.Windows.Controls.Primitives;
namespace PopUpSample

{

     public partial class MainPage : PhoneApplicationPage

     {

           // Constructor

           public MainPage()

           {

                  InitializeComponent();

           }
           private void Button_Click(object sender, RoutedEventArgs e)

           {

                  Popup Mypopup = new Popup();

                  Mypopup.Height = 300;

                  Mypopup.Width = 400;

                  Mypopup.VerticalOffset=100;

                  PopUpUserControl Mycontrol = new PopUpUserControl();

                  Mypopup.Child = Mycontrol;

                  Mypopup.IsOpen = true;
                  control.btnOK.Click += (s, args) =>

                  {

                         Mypopup.IsOpen = false;

                         this.text.Text = Mycontrol.tbx.Text;

                  };
                  control.btnCancel.Click += (s, args) =>

                  {

                         Mypopup.IsOpen = false;

                  };
           }
     }
}
 

Step 8: In this step one thing you have to be careful about is that whenever you used the toolkit you will have to write the code to the Mainpage.xaml file which is given below.

 

Code: xmlns:controls="clr-namespace:Coding4Fun.Phone.Controls.Toolkit;assembly=Coding4Fun.Phone.Controls.Toolkit" >

 

Step 9: In this step we will see the code for the MainPage.xaml file which is given below.

 

Code:

<phone:PhoneApplicationPage

    x:Class="PopUpSample.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:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    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 x:Name="PageTitle" Text="My Pop up App" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" FontFamily="Comic Sans MS" FontSize="64">

                  <TextBlock.Foreground>

                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                       <GradientStop Color="Black" Offset="0" />

                       <GradientStop Color="#FFA5E6E6" Offset="1" />

                     </LinearGradientBrush>

                 </TextBlock.Foreground>

               </TextBlock>

        </StackPanel> 

        <!--ContentPanel - place additional content here-->

             <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

                    <TextBlock Text="Popup TextBox value:" FontFamily="Comic Sans MS" FontSize="32">

                      <TextBlock.Foreground>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FFFFBCE0" Offset="1" />

                      </LinearGradientBrush>

                      </TextBlock.Foreground>

                    </TextBlock>

            <TextBlock x:Name="text"/>

                    <Button Content="Click to Show PopUp" Click="Button_Click" FontFamily="Comic Sans MS" FontSize="32">

                <Button.Foreground>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="Black" Offset="0" />

                        <GradientStop Color="#FF31CC97" Offset="1" />

                    </LinearGradientBrush>

                </Button.Foreground>

            </Button>

            <StackPanel.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0" />

                    <GradientStop Color="#FFBDD5A8" Offset="1" />

                </LinearGradientBrush>

            </StackPanel.Background>

        </StackPanel>

       </Grid> 

</phone:PhoneApplicationPage>

 

Designfigure.gif

 

Step 10: In this step we have to run the application by pressing F5 and the related output is given below.

 

Output 1: This is the default output of the application which is given below.


Output1.gif

 

Output 2: In this output we will see that whenever we click on the button then a popup control will open which is given below and write some text inside the TextBox.


OUTPUT2_NEW_NEW.gif

 

Output 3: At last output we will see that whatever we have entered inside the textbox of the popup control and click OK to see it's input on the main page which is given below.


Output3.gif


Here are some other resources which may help you

 

Getting URL of current page in Windows Phone dynamically through code

Password Input Prompt in Windows Phone 7 Via WCF Service

Learn what is Gestures to Transforms in Windows Phone 7

Create a Simple NumericTextBox Control in Windows Phone 7

 

Next Recommended Readings