Using a Canvas as a Dialog

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:

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:

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

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:

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…

Advertisements
  1. No trackbacks yet.

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

%d bloggers like this: