All right so at this point of two things that I want to cover. The first of these is how we actually assign objects to the different column. We do that by using an attach property. Remember, we use the attach properties earlier with canvas. Canvas.Top and Canvas.Left. Remember that in attach properties are property that gets defined by the panel for use on elements within the panel.
Here we are going to use of attach property called Grid.column to move something into the next column. So first of all, let me maximize the window again and then let us scroll down a little bit, and we will set the grid.column property on one of our ellipses. Now, grid.column refers to the column definition using a zero based index. In other words, if you assign something to a column zero, it will actually show up in the first column. And if you assign something into column one, it will actually show up in the second column and that is what happened here.
The default value for grid.column is zero and that is why by default, everything was showing up in the first column. But if we assign something to column one like we just did, we can see that it shows up in the second column.
It is also possible to specify that an item should span across more than one column. You can do this with another attach property called Column Span. By default, the value for this property is one and that is why everything shows up in just one column. But if we were to set this value to two, for example, it would span across two columns. So watch what happens if I set the column span to two on our blue ellipse.
So you can see how this is incredibly flexible for specifying how elements get placed into the various columns that you have defined. And if you combine that with the way that grid takes advantage of horizontal and vertical alignment properties and also the way it uses margins. You can see that is a really powerful panel.
The thing that is still missing of course is our ability to customize the size of the columns itself. Basically, columns sizes come in three flavors. The default value and one that we are seeing right now is a special value that we generally call a star. It is when using asterisk and basically value of star tells the column to take up one portion of the available space.
So here we have three columns and each one is taking up one portion. So the result, is that each gets 1/3 of the available space. If we were to change one of these a value of two star, it will get two portions of the now four spaces that are available. Let me show you what I mean.
If we scroll up to look at the definition of the first column and then change the width property of this to be two star and then hit F5 to refresh. You can see that that first column now gets half of the available space, and the remaining half is divided between the other two columns. That is four portions because the first is two star and the other are one star each. In other words, the total number of stars gets normalized and an appropriate portion gets assign to each of the columns according to the relative number of stars.
Now, here is a trick. If you are coming from an environment where you use to specifying these kinds of values using percentages, you can actually just replace the percentage sign for a star. Let me show you what I mean. You can replace the width of this one to be 0.5 stars and then the width of the other two to be 0.25 stars. All right, now if I hit F5 to refresh, you can see that the distribution stays exactly the same, but now we are using what looks like percentage values in order to divide up the distribution of the columns.
