Using Canvas as a Dialog: Windows Phone Apps Development Tutorial – Part 23

We have had a look at the application bar and its working in last tutorial – so now in this part of the Windows Phone 7.5 Mango App development series, we shall learn how to create and display popup windows in Windows Phone 7.5 Application.

Sometimes it is easier to display a popup window than to navigate the user to a whole new XAML page for certain operations. So a popup window can be simply informative or can confirm the user’s actions like “Do you wish to delete this file?” The technique of creating a popup window is simple. All we have to do is create a Canvas and put some controls in it. We also have to define a mechanism to display and hide the popup window as per the need of the situation. So lets get started!

Dialog_Box_Canvas

Create a new Widows Phone 7 Application Project. Copy and paste the following XAML code in the Content panel Grid of the MainPage.xaml using the XAML editor in the designer window.

<Button Content=”Open”

                    Height=”72″

                    HorizontalAlignment=”Left”

                    Margin=”150,200,0,0″

                    Name=”openButton”

                    VerticalAlignment=”Top”

                    Width=”160″

                    Click=”openButton_Click”

                    />

            <Canvas Name=”myDialog”

                    Height=”438″

                    Width=”427″

                    HorizontalAlignment=”Left”

                    VerticalAlignment=”Top”

                    Margin=”24,48,0,0″

                    Background=”#FF6E0000″

                    Visibility=”Collapsed”

                    >

                <TextBlock VerticalAlignment=”Top”

                           HorizontalAlignment=”Left”

                           Height=”50″

                           Width=”400″

                           Name=”instructionsTextBlock”

                           Text=”Click the button below to close this popup dialog.”

                           TextAlignment=”Left”

                           TextWrapping=”Wrap”

                           />

                <Button Height=”70″

                        Width=”200″

                        Content=”Close Me”

                        Name=”closeButton”

                        Click=”closeButton_Click”

                        Margin=”125,300″ Canvas.Left=”-16″ Canvas.Top=”-7″ />             

                </Canvas>

 With the code given above we have created a button called openButton. We have also defined a Canvas (myDialog) with a text block called instructionsTextBlock and a button called closeButton. Note that the visibility of the Canvas is set to Collapsed.

Next we define the functionality in each of the button events. Right click the openButton_Click and select Goto Event Handler. Copy and paste the following C# line of code in the openButton_Click() method which sets the visibility of the myDialog canvas to Visible.

myDialog.Visibility = System.Windows.Visibility.Visible;

Repeat the same process for the closeButton_Click event. Copy and paste the following C# line of code in the closeButton_Click() method which sets the visibility of the myDialog canvas to hidden.

myDialog.Visibility = System.Windows.Visibility.Hidden;

Run the project and click the Open button to display the pop up. Clicking the close button hides the canvas. So that’s all about creating the dialog box without actually creating a new page. See you in next lesson on InputScopes.

Posted by on , in Category Phone with Tags
Gadget freak, Apple lover, Windows Phone lover; well that’s me! I have been in this wonderful field of freelance writing for quite some time and looking forward to developing more illuminating content related to gadgets and technology, as I go along.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 + 3 =