Using the Silverlight 2 Xaml StackPanel Element

The next advanced layout element in Xaml is the stack panel. The StackPanel lays out its children either horizontally or vertically without having to define the exact location in the visual tree in Xaml. Take the following listing example of a stack panel.

<StackPanel Width="200" Height="200" Orientation="Vertical" Background="Gray">
<Rectangle Width="50" Height="50" Fill="Green"></Rectangle>
<Rectangle Width="50" Height="50" Fill="Blue"></Rectangle>
</StackPanel>

We can see in this example that we set the size and orientation of the StackPanel. The StackPanel will then start at the root X, Y (0,0) position of its parent by default. Children are then rendered vertically in the panel. Now look at this example StackPanel:

<StackPanel Width="200" Height="200" Orientation="Horizontal" Canvas.Top="200" Background="Gray">
<Rectangle Width="50" Height="50" Fill="Green"></Rectangle>
<Rectangle Width="50" Height="50" Fill="Blue"></Rectangle>
</StackPanel>

In the example we see that the Orientation of the StackPanel is set to Horizontal so its children will be laid out accordingly. When we put both of these StackPanel into some Xaml this is what we get. We can see the first one rendered vertically and the second horizontally.

Using advanced layout, it is easier to create list box functionality or recordsets and using other structures like templates and the like you can pull records data bind and then use StackPanels too easily lay out all the items you need.

Using the Silverlight 2 Xaml Grid Element

"The Grid" is basically just that: a grid with a set number of colums and rows. Elements in the grid must then be placed into a cell within the grid by setting the Grid.Column and Grid.Row property of the element in question. To start using a grid you first need to create a grid node.

Here is a simple example:

<Grid Height="200" Width="200" Background="Red"></Grid>

For us to see what is going on, we set the background value to red and then we set a width and height. The width and height set the boundary of our grid. If we don’t set a top and left value. then grid is laid out relative to the top and left of the parent element that it is in. To use a grid we need to add rows and columns inside of it.

<Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions>

This code creates two rows in our grid, but we still need column definitions to actually use the grid. The following code adds 2 columns, which then gives us a grid of 2 rows by 2 columns which then has a total of 4 cells.

<Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions>

With a complete grid we just need to add something to it to be able to actually see how it renders. Lets see what happens if we add a single rectangle to our grid.

The following code sample creates the simple rectangle set to be in the second column and the second row; we also set the fill value to green.

<Rectangle fill="Green" row="1" Column="1" />

Now when we render this xaml you will see that the grid columns are rows are zero based. Zero based means that the first column is 0 and the second column is 1.



Knowing that the grid columns and rows are zero based, we expected the rectangle to be in the lower right position. What we also see from this sample is that by default an element fills the entire grid that it was assigned to. To overwrite this behavior, you would just need to set values for theheight and width. This is the same for top and left values where the default will be to be aligned with the top left of the assigned cell.

Using the same grid, lets remove the old rectangle and add this canvas and textblock.

<Rectangle Fill="Green" Row="0" Column="0"> <Canvas Height="100" Width="100" Background="Blue" Row="1" Column="1" VerticalAlignment="Bottom" HorizontalAlignment="right"> <textblock>Hello</textblock> </Canvas>

In this case, the rectangle is in the top-left cell. However, we now have added a standard canvas with a text area. The canvas is set to have a width and height of just 100 and placed in the lower right cell where we also set the horizontal alignment and vertical alignment. We also set the background to blue so that we can see what is going on.

In this next figure, we can see exactly how the grid lays out the combined set of the elements we have added.

We can also set Margin and ShowGridLines on the Grid element as needed. This allows us add both of these elements as needed. If desired, we could also set height on the row definition and width on the column. This allows us fine control of cell sizes as needed, otherwise, the grid will equalize things for the size it has been given.

Besides setting exact values with height and width, we can set them to auto or * as well. Lastly, elements in a grid can also use Grid.ColumnSpan to allow elements to span more than one column.

Cat out of the Bag

So I see that a number of places that are 'official' have talked about some features that will be in the new bits for Silverlight 2.0... SO therefore I think it is ok to talk about these. for example Scotts blog at:

http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

So expect to see more coolness starting today.

Hacking Silverlight 2.0 for designers and developers

As some of you know, I'm writing a book on silverlight titled, "Hacking Silverlight 2.0" with the help of Manning Press. As some of you may also know, I have not been able to blog too much as of late due to all the super secret stuff on campus at Microsoft. Some day that will stop and I will probably have lots of stuff to post, but in the mean time, I thought I would share the work on the cover of the book. The example of a book cover is a prototype and you can see the entire process Ariel went through to develope the painting we are using for the book cover.

http://www.facebook.com/album.php?aid=25283&l=593e3&id=721326429

Manning, the publisher, has a tradition of putting central European art on the cover... milk maids, stable boys, girls in dress's etc. I could not have something like that. Granted all the art is cool and they do have some interesting bits on the cover of some but I couldn't take the risk of getting a milk maid. So I have something manly and war like and for those that are interested in the painting, here is a little bit about it:

The soldier on the cover is a Polish Winged Hussar a type of Polish Calvary from the 16th Century to the 18th Century. This particular Hussar belongs to the Jordan Family or Domus Giordanous from southern Poland near Krakow. The Winged Hussar Calvary were the best mounted calvary at the time and won most engagements even when outnumbered by huge odds. Case in point, The Battle of Kluszyn against the Russians with 35,000 men against the Polish Crown with just over 6,000 Hussars. Key to this was the armor and heavy weapons and their most common tactic of the charge straight into enemy lines.

Silverlight 2.0 Double Click Support

Ok, ok, I'm not giving anything away so don't get too excited. Check back at some later date. Who knows maybe MIX??? That is like next week.

Anyway, recently, I was told that you can't double-click in Silverlight...

So to me this is a bit hard to respond too. Not because Silverlight doesn't support it, but because if it supports single click or, 'OnMouseDown' -- 'OnMouseUp' or anything similar, then we are good. Basic computer science 101 stuff, right? All you need to do is something like this example.

In my code I create a counter for counting ticks. Say like this in c#:

public long LastTicks = 0;

Then in my 'MouseLeftButtonDown' event I have an 'if' statement that basically checks to see if the number of ticks between the last two mouse clicks is less then some defined number like this:

if ((DateTime.Now.Ticks - LastTicks) < 2310000)
{
// double click
here...
}

...and then at the end of the method, we have a line that sets the LastTicks value like this:

LastTicks = DateTime.Now.Ticks;

Nice and simple. This gives us a good solid double-click that we can do with whatever we need. Now in this sample we are using ticks but we could use any date-comparision thing and use seconds, for example, and we would just have to calculate the differential we want to use. For me it was 23.1 million ticks which seemed to work good on my box :)

Now don't go sending me a billion emails on why we don’t use double clicks in web apps. I'm just saying that it can be done, and a number of people asked. I know very well that double-click is not a good plan generally in a web sort of paradigm.

Cool Tool Kaxaml

I know this guy Robby that wrote this cool Xaml tool... Kaxaml. It alot like Xaml pad with the split view but the coolest thing is the snippets, Xaml scrubber and intellisence. check it out at

http://www.kaxaml.com/

Silverlight 2.0 - more to come

So this is just killing me. So much goodness in the super secret builds that I can't talk about that its just killing me... SOOOO just so you know as soon as it is public there will be LOTS and LOTS of stuff to post that I cant really talk about at all. In fact probably the first day I'll post probalby 50 things plus. Anyway now that 'that' is almost off my chest.

Silverlight Game

Here is a cool silverlight game Tim H. found on silverlight insiders.

http://www.miniclip.com/games/zombomatic/en/