Posts Tagged ‘ Canvas Control ’

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…


Layout Controls in Silverlight

There are three Controls used for Layout in Silverlight. Grid, StackPanel and Canvas.

The Canvas Control:

Silverlight provides a Canvas element that can be used to group related content. The Canvas element  can have children nested inside of it. It’s typically used when children need to be positioned at exact x and y coordinates.

 The StackPanel Control:

The StackPanel control is a simple layout panel that arranges content into a single line that can be oriented horizontally or vertically (the default).The StackPanel control allows us to stack objects one on top of the other, or next to each other.

The Grid Control:

The Grid control allows rows and column information to be defined in one location using RowDefinition and ColumnDefinition tags.

To have a better idea about those controls I created a new project and dragged a canvas control to my main form:

If I look to my XAML code I can see that Margin shows me where that canvas control is positioned:

If I move that control, that number changes. What happens when I click on those arrows?

The position is still the same. It’s just interpreted differently:

By clicking on those arrows I’ve changed the HorizontalAlignment and the VerticalAlignment, and also the Margin changed.

Let’s assume I want to center my canvas control right in the middle of the content panel, I would go to the properties window and change both the VerticalAlignment and the HorizontalAlignment to “Stretch”. Next thing I am doing is setting all Margins to “0”. A Margin contains 4 numbers, separated by commas. And they represent the left side, the top, the right side and the bottom:

Replacing all Margins with “0” positions my canvas control in the middle:

Let’s move on and see how that is with a Grid Control. I am deleting that canvas control and drag a Grid Control to my main form:

My XAML code shows me there is a new Grid Control in my ContentPanel:

The intent of the Grid is to add a number of rows and columns and then position my controls in each of those cells that are created by the definition of those rows and columns.

So, let me just define two rows and two columns by adding a little bit of code. First I have to close out a Grid. I am removing the slash right after Width, and add one </ Grid>

Now I can add my code in between there:

I defined two rows, the first 80 pixel tall, the second 80 pixel plus what is left of that area. If I would just put an asterisk in there, it would fill the entire control. And I defined two columns of the size 100 plus and 100 pixel:

If I hover over my Grid Control in my main form I can add more rows and columns by just clicking. If I want to get rid of a row or a column I just select it and drag it away.

Rightclicking the mouse inside my Grid Control gives me more options. Or I can go to the properties window and there select the RowDefinition or the ColumnDefinition. That brings up the Collection Editor, where I can add more rows or columns and set their properties:

Anyway, why would I need to define rows and columns? For example I could want a button in the left down area:

The button control usually does not have a Grid.Row property or a GridColumn property. It only gets those properties when it sits inside a Grid. These properties are called “attached properties”.

The button sits in row 1 and in column 0.

Let’s have a look at the StackPanel control.

The StackPanel is pretty simple. All the controls that are contained within a StackPanel are displayed in a vertical stack.

For now I am dragging a StackPanel Control to my main form. Then I add some textBlocks to it by typing some code:

Notice that, just like before with the Grid control, I closed out </ StackPanel> in order to be able to add my code.

I have four textblocks stacked on each other.

Let’s move on and add a CanvasPage.xaml file to my project. I am dragging a canvas control to the jusr created page. Assume I need to position different controls in very specific places on screen. This is what the Canvas is for. Instead of using Margins to define the position of controls inside of a canvas, using attached properties the controls define the left and top properties relative to the upper left-hand corner of the canvas itself.

I’ve dragged two textblocks into my canvas control. Looking at my XAML code I notice that both textblocks have a “top” property and a “left” property:

If I move the canvas to reposition it, both the “top” properties and the “left” properties of the textblocks inside the canvas remain the same.

To be continued…

%d bloggers like this: