How to use Popup or ChildWindow in Windows Phone to display Buy Now screen?

One of the biggest problem with Windows Phone is that you do not have ChildWindow and hopefully this will change in next release. But for now you will need to you the Popup found in System.Windows.Controls.Primitives. You will learn how to use the Popup and be able to customize. As part of the demo you will be creating BuyNow Popup screen.

Create UI BuyNowScreen.xaml

Add Windows Phone user control and design the control way you want it to look. For this demo you will see following BuyNowScreen design.

image

Code BuyNowScreen

Notice here that when you create BuyNowScreen user control and you have constructor where you need to pass the message which gets set to txtMessage.Text. When BuyNow button is clicked you will be opening the Marketplace detail page of you current application. This is done by setting ContentIdentifier (ProductId) to be null.

private void btnBuy_Click(object sender, RoutedEventArgs e)

{

    ClosePopup();

 

    MarketplaceDetailTask detailTask = new MarketplaceDetailTask();

    detailTask.Show();

}

 

Notice neat trick of closing the current Popup is to access the Parent of the BuyNowScreen user control which is Popup and set IsOpen to false.

private void ClosePopup()

{

    Popup buyPop = this.Parent as Popup;

    buyPop.IsOpen = false;

}

 

Invoke BuyNowScreen.xaml as Popup

Trick here is to assign your own user control that you design to Child property of the Popup as show in below code. Then you set the vertical and horizontal off set which will control where the Popup will be displayed. When you set the IsOpen to true the Popup will be displayed. There is event which you can subscribe to do any extra work upon Popup Closed.

private void btnShowBuyNow_Click(object sender, RoutedEventArgs e)

{

    Popup buyNowScreen;

    buyNowScreen = new Popup();

    buyNowScreen.Child =

        new BuyNowScreen

            (“Buy this application and get rid of the ads!”);

    buyNowScreen.IsOpen = true;

    buyNowScreen.VerticalOffset = 100;

    buyNowScreen.HorizontalOffset = 25;

    buyNowScreen.Closed += (s1, e1) =>

        {

            // Add you code here to do something

            // when the Popup is closed

        };

}

 

Download Code 

 

Conclusion

So in this demo you learned how to customize the Popup and programmatically open and close the Popup and handle Popup Closed event.

About toetapz

Henry Lee is founder of NewAgeSolution.Net and is passionate about the technology. He is also the author of the book Beginning Windows Phone 7 Development 2nd from Apress (http://www.apress.com/9781430235965). He works with various Fortune 500 companies delivering mobile applications and rich internet applications. He recently formed start-up company called ToeTapz.com focusing his energy on delivering mobile applications in Windows Phone 7, Android and iPhone. In his spare time, he dedicates his effort to help his .NET community by delivering sessions at the technology events. He enjoys talking with other technologist about current trends in the technology and sharing business insights with fellow colleagues. Often you will find Henry at local cigar bar enjoying a cigar and a drink trying to come up with next big mobile application.
This entry was posted in Windows Phone 7 and tagged , . Bookmark the permalink.

4 Responses to How to use Popup or ChildWindow in Windows Phone to display Buy Now screen?

  1. Pingback: Windows Phone 中的弹出窗口 » NoName

  2. chris543 says:

    Usefull
    thank you

  3. Pingback: The popup Windows please

  4. Gary says:

    Great ! thank you !

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s