How To Implement ChildWindow In Windows Phone 7

This article demonstrates how to use ChildWindow in Windows Phone 7. ChildWindow is like a popup window or message box which is used to display information or content. A ChildWindow always displays in a model popup that blocks user interaction with the underlying user interface.

A ChildWindow has three distinct areas inside its Root part:

Overlay - the part of the child window that covers the parent window.
Chrome - the part of the child window which hosts the Title and CloseButton parts.
ContentRoot - the part of the child window which hosts application-specific content in its ContentPresenter part.

Getting Started

Creating a Windows Phone Application:

1. Open Visual Studio 2010.
2. Go to File => New => Project
3. Select Silverlight for Windows Phone from the Installed templates and choose Windows Phone Application
4. Enter the Name and choose the location.

Click OK. 

First of all add a new assembly reference (System.Windows.Controls) then add a new Windows Phone User Control using add new item. Looks like this.

<UserControl x:Class="WPChildWindow.WindowsPhoneControl1"
    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}"
    d:DesignHeight="480" d:DesignWidth="480">   
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}"> 
    </Grid>
</UserControl>

Now add System.Windows.Controls namespace on .xaml control and rename user control name to child window like this.

<tk:ChildWindow x:Class="WPChildWindow.LoginChildWindow"
    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"
    xmlns:tk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    mc:Ignorable="d"
    Title="Login" Closing="ChildWindow_Closing"
                OverlayBrush="#7F000000"
                BorderBrush="Black"
                BorderThickness="2"                 
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="Orange"               
    d:DesignHeight="256" d:DesignWidth="480"> 
    <Grid x:Name="LayoutRoot" Background="#FF3B6261" Height="202">
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="User Id: " VerticalAlignment="Top" Margin="20,43,0,0"/>
        <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Password: " VerticalAlignment="Top" Margin="20,104,0,0"/>
        <TextBox x:Name="txtUserId" VerticalAlignment="Top" Margin="117,23,8,0" Height="62" FontSize="18.667"/>
        <PasswordBox x:Name="txtPassword" VerticalAlignment="Top" Margin="117,85,8,0" Height="62" FontSize="18.667"/>       
        <Button x:Name="btnLogin" Content="Login" Margin="117,132,214,0" d:LayoutOverrides="Width" Click="btnLogin_Click" FontSize="18.667" BorderBrush="#FFC06161" BorderThickness="1" Foreground="#FFE46767" Background="#FF562D29" Height="58" VerticalAlignment="Top" FontFamily="Tahoma"/>
        <Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="232,132,0,0" VerticalAlignment="Top" FontSize="18.667" BorderBrush="#FFC06161" BorderThickness="1" Foreground="#FFE46767" Background="#FF562D29" Height="58" FontFamily="Tahoma" Click="btnCancel_Click" />
    </Grid>
</tk:ChildWindow>

Change ChildWindow base class too on cs page.

public partial class LoginChildWindow : ChildWindow

    {

        public LoginChildWindow()
        {

            InitializeComponent();
        } 

    private void btnLogin_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = true;
        }

     private void ChildWindow_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            if (this.DialogResult == true &&
                    (this.txtUserId.Text == string.Empty || this.txtPassword.Password == string.Empty))
            {
                e.Cancel = true;
                ChildWindow cw = new ChildWindow();
                cw.Height = 100;
                cw.Width = 300;
                cw.Content = "Please enter userid and password or click Cancel.";
                cw.Show();
            }
        } 

        private void btnCancel_Click(object sender, RoutedEventArgs e)
        {
            this.DialogResult = false;
        }
    } 

Now add a new button control on main page and fire click event and put this code. 

private void button1_Click(object sender, RoutedEventArgs e)
        {
            LoginChildWindow loginWindow = new LoginChildWindow();
            loginWindow.Show();
        } 

Result should be like this.

 

Image 1.

Image 2.

 

Image 3.