How to get user Input from a Popup in Windows Phone

published on: 11/24/2011 | Views: N/A | Tags: Beginners

by WindowsPhoneGeek

In this post I am going to talk about how to get user Input from a Popup in Windows Phone. 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. Previously we covered all about the Coding4Fun popups: Toast Prompt , Password Prompt, Message Prompt, Input Prompt, About Prompt in a series of in depth articles. However if you need a quick and simple Popup implementation you can use the default Popup control. So, in this article I will demonstrate how to implement a sample OK/Cancel popup scenario that gets user input.

To begin, lets first create a new Windows Phone application project. Next follow the steps:

Step1: Add a new Windows Phone User Control to your project and name it "PopUpUserControl":

Step2: Add the following code inside PopUpUserControl.xaml:

<StackPanel x:Name="LayoutRoot"  Width="480" Height="480" Background="LightBlue">
    <TextBox x:Name="tbx"/>
    <Button x:Name="btnOK" Content="OK"/>
    <Button x:Name="btnCancel" Content="Cancel"/>
</StackPanel>

NOTE: It is important to some a background because otherwise the popup will be transparent.

Step3: Go to MainPage.xaml and add the following code:

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBlock Text="Popup TextBox value:"/>
    <TextBlock x:Name="text"/>
    <Button Content="Show PopUp" Click="Button_Click"/>
</StackPanel>

Step4: Next, go to MainPage.cs and add the following code inside the "Show PopUp" button click handler:

1.Create a new Popup and position it by setting some Height,Width and VerticalOffcet.

2.Create an instance of the previously created PopUpuserControl and set it as a child of the popup.

3.Set IsOpen property of the popup to true so that it will be opened whenever the "Show PopUp" button is pressed.

4.Subscribe to the Click event of the PopUpUserControl btnOK button: close the popup in the handler and get the input value.

5.Subscribe to the Click event of the PopUpUserControl btnCancel button: just close the popup in the handler without getting the input value.

Here is how the source code should look like:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Popup popup = new Popup();
    popup.Height = 300;
    popup.Width = 400;
    popup.VerticalOffset=100;
    PopUpUserControl control = new PopUpUserControl();
    popup.Child = control;
    popup.IsOpen = true;


    control.btnOK.Click += (s, args) =>
    {
        popup.IsOpen = false;
        this.text.Text = control.tbx.Text;
    };

    control.btnCancel.Click += (s, args) =>
    {
        popup.IsOpen = false;
    };
}