Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The Grid panel is the most powerful layout panel in Silverlight. It is the default layout panel. When you create a new XAML document in Visual Studio or Expression Blend, you automatically get a grid as the main UI element. When you add a grid, it contains one row and one column. It is up to you to add the additional rows or columns. When you have the grid structure the way you want, you assign each child element a location in a suitable row and column within the Grid. I am inside Visual Studio and I have opened a project called UsingGrid. I'm going to start by looking at the AddingRows.xaml file.
Here is the root element I was referring to. When you create a brand new document, you get this Grid as the root. It's usually named LayoutRoot. I've added a second grid down here which is part of my demo. It currently has three rows. They are defined in a section called the RowDefinition section. If I wanted to add some columns, I would come down here to the ColumnDefinition section and then I can type in ColumnDefinition. And now if you look in the top half of a screen, you will say I now have some blue lines. Those blue lines only show up inside Visual Studio.
They don't show up at runtime. If I want to show lines permanently on the screen, I need to set this ShowGridlines to true on the Grid element itself. Let's see what this looks like so far. I will press F5 to run the application and then I'm looking at this adding rows demo. Now you can see the gridlines. They are nice for debugging. They are very ugly for a real UI however. Notice that my Child Element is in the top row and the top column.
Another way of defining a column or a row is to use the Visual Studio Designer. If I move my mouse up to the designer surface and hover over this blue bar at the top of the grid, or on the left side of the grid, I can click and add another column or row. Let me show you. Click here and then you will see that I now have a second column, actually I have three columns now because it's added a second column and sized both of them using the Star Sizing. I will talk more about that soon.
I'll press Ctrl+Z to remove that additional column I added and then I'm going to show you how I can move this Child Element to a new location. I do that by setting an Attached Property on the child. Go to this Button, I will move into the text and I will say Grid. in my drop-down you will see I have a choice of Column and Row and ColumnSpan and RowSpan. I'm going to move this button to the second column, so I will say Column= 1. The numbers starts counting at 0.
And as you can see in the designer at the top half of the screen, it's moved to the second column. I can use the drag-and-drop designer to move it if I pick the button up and drag it around, you will see that it's moving to different locations. Now if I drop it and look at the XAML, you will see that it is moved it to Grid.Row 1, and now it's been moved into Grid.Row 1 and Grid.Column= 1. If I make the button larger than it currently is, now also notice that I get a ColumnSpan now.
This button is going to cross two columns. Ctrl+Z to undo. Next I want to look at the XAML file, PlacingStackPanelInGrid. Sophisticated layout in Silverlight is accomplished with nested panels. The Grid is usually filled with dense layers of child panels. This is a simple example to show you what I mean. I have a child panel called the StackPanel that is contained in the third column of this Grid. Let's scroll down to my XAML and you will see that I have a Grid to find here.
I have a number of rows and columns defined. I have a StackPanel created and I've told the StackPanel to go in Column number 2. StackPanels are optimized for layering items in a stack, in this case it's stacking them from top to bottom. I can control the sizes of my columns or rows. There is a Width property and a Height property available in the RowDefinition and ColumnDefinition elements. I'll show you an example. I'll go to ControllingSizes.xaml and I'll scroll down again to my ColumnDefinitions section.
There are three different sizes available. Currently I am using what's called the Star Size. I can use a Fix Size by typing a hard coded number and you can see that my first column is now 120 pixels, now its 12 pixels. I can also use the Auto size where it sizes to the content, in this case, it's sizing to the width of the three buttons that are in size column one. And the last size setting is the Star Size setting. Star sizing is similar to a proportional size.
Let me show you what I mean. I'll type in 2 star here, and 2 star for the second one, and for the third column, I will type in 6 star. You can think of this as 20% of their size for the first column, 20% of the size for the second column and 60% of the size for the third column. The other way of setting the size in Visual Studio is to hover your mouse over this bar at the top. It's very subtle but there are three translucent buttons up there.
If I mouse up above that bar, I can now change this to Fixed, Star or Auto. Here is another example of Auto sizing a column. I have got this second column and it is currently in a Fixed size, it's 100 pixels in width. And as you can see when I click on some of these shapes, they are wider than 100 pixels. So if I change this to Auto size, the column sizes to whatever the largest item is. For my last demo, I would like to show you the Grid Splitter.
So I will open up UsingGridSplitter.xaml. I have three columns in this grid and currently I cannot size them dynamically at runtime. Run the application, click on the Grid Splitter button, and I'll move my mouse inside this area, and you see there is no change in the pointer. I will return back to my XAML, I'm going to uncomment at this section of code, Ctrl+K, Ctrl+U.So this adds two Grid Splitters and one has it's ShowPreview set to True and one does not.
Now you see when I hover over the edge of the column, I can resize that column. This is the ShowsPreview setting. I get this gray bar as I am dragging it and it's not until I let go of my mouse button that it resizes the column. The grid is an essential layout control. I use it in nearly every project that I create.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104331 Viewers
56 Video lessons · 116251 Viewers
71 Video lessons · 85469 Viewers
131 Video lessons · 40922 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.