Using a Canvas as a Dialog with Windows Phone

Sometimes in my application I might want to show a popup window without navigating to another XAML page. The popup window could be informative, maybe asking the question: “Are you sure?”

The technique is quite simple. I am going to create a canvas, put some controls in it and then display it or hide it based on the particular instance that is needed.

I am going to hide it by setting its Visibility to collapsed. I am going to have a button that is going to be responsible for closing it, or rather hiding it. I also am going to have a button on the main content grid that is going to be responsible for opening it up and displaying it to the user.

Let’s start with the button to open the canvas dialog and the canvas dialog itself:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <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"
            />
</Grid>

My canvas dialog is covering up my button control:

I could have created that using the toolbox and the properties window, but I chose to directly type in the XAML code editor, because to me that seemed to be easier.

Let’s go ahead and add a textbox to the canvas that is going to give some instructions:

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

I am also going to add a button right under that textbox that is going to be responsible for closing the dialog:

<Button Height="70"
        Width="200"
        Content="Close"
        Name="closeButton"
        Click="closeButton_Click"
        Margin="125,300"
        />

The next step is to write some code that will pop open and then close this dialog. For this I am navigating to the event handler:

    private void openButton_Click(object sender, RoutedEventArgs e)
    {
        myDialog.Visibility = System.Windows.Visibility.Visible;
    }
     
    private void closeButton_Click(object sender, RoutedEventArgs e)
    {
        myDialog.Visibility = System.Windows.Visibility.Collapsed;
    }

Let’s see if it works:

Clicking the “Open” button opens the dialog, or rather shows the canvas and all that is in it, and clicking the “Close” button closes the dialog. It hides the canvas and all that is in it. This is an instance where the canvas control is very useful, because I don’t have to navigate to another XAML page. That keeps my code simple.

To be continued…


Source: http://andreahaubner.blog.com/2011/03/31/using-a-canvas-as-a-dialog/