Getting User Input Through Popup in Windows Phone 7

Amit Maheshwari
Mar 13, 2012

24.5k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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

<TextBox.Background>

</LinearGradientBrush>

</TextBox.Background>

</TextBox>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

<Button.Background>

</LinearGradientBrush>

</Button.Background>

</Button>

<StackPanel.Background>

</LinearGradientBrush>

</StackPanel.Background>

</StackPanel>

</UserControl>

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

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

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

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock.Foreground>

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

</StackPanel>

<TextBlock.Foreground>

</LinearGradientBrush>

</TextBlock.Foreground>

</TextBlock>

<Button.Foreground>

</LinearGradientBrush>

</Button.Foreground>

</Button>

<StackPanel.Background>

</LinearGradientBrush>

</StackPanel.Background>

</StackPanel>

</Grid>

</phone:PhoneApplicationPage>

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.

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.

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.