I am honored to start the series of short Blend lessons for the North Texas Silverlight User Group (http://www.ntsilverlight.com ) on October 11th. The first topic will be handling the Grid with Expression Blend. Join us next month for fun with the pathlist box.
Today let’s get started with Grids.
Put a grid on the canvas and set it to auto width and height by using the set to auto arrow. Also set the vertical and horizontal alignment to stretch.
 |
| If you mouse over the top or side bar, you will see a yellow line. From the top, a click will create columns, from the side, a click will create rows. |
After you create the rows or columns, you can control if the width is Auto to fill available space, set by Pixels, or Star which will grow by percentage. To set these options in the gui, click on the lock, open lock or auto symbol. |
| Auto=Auto, Lock= Pixel, Open=Star |
|
![image[9]](http://geekswithblogs.net/images/geekswithblogs_net/tburger/WindowsLiveWriter/ExploringtheGridwithBlendNorthTexasUserG_133D7/image%5B9%5D_thumb.png "image[9]") |
OK so now we have some columns. Rows work the same way. We need some objects to place so lets spice it up with a little sample data. For this example, I am going to use Sample Data to describe and show images.
click on the Data tab. Choose the data symbol at the top with the + to get the menu shown to the right. Choose New Sample Data.
In the menu that comes up, name your data source “ImageSampleDataSource” and Define it in the Project. You should also Enable Sample data when application is running for this example. |
 |
- Name the collection Images
Change Property 1 to Title and leave the defaults under the options.
- Change Property 2 to Description Change it to a type string with max word count of 60
- Add Property 3 as Image. Change it to type image and choose a folder with images. I chose the sample directory.
|
 |
 |
After you have your sample data setup, click the database icon with a pencil shown circled in red below and you should see the data as shown below.
Change the number of records from 10 to 50. You can also experiment with changing some of the values to something familiar to you to show that you can put in custom Sample Data. You can also define sample data in other ways but this session is not directly about sample data.
So now we have sample data. I changed my layout to have two columns. It doesn’t matter if you want them locked, auto, or star width. I am now going to create a list in the left column and details in the right column. To do this, simply click and hold on Title and drag over the first column on your grid.
To fill the column with the list, you have one of two choices 1. highlight the list box in the objects and timeline, open the properties pane and use the “magic” box to reset the Margins (just click the little white box next to margins and click reset). 2. right click on the list, go to AutoSize and choose Fill. Make sure your vertical and horizontal alignment are set to stretch.
To add the picture, hold down the Alt key while you drag Image from your ImageSampleDataSource and place it in the right column. Before you straighten this one out, go ahead and run the project. Notice that when you click on titles in the list, the images automatically change to the right ones.
When the image was added, it was added inside of a detail grid. We want the description under the image so let’s split the detail grid into two rows both with star width. Then we can reset the margins of the image using one of the methods described with the list.
Now we have the Detail Grid filling the right column of the main grid and the list of images in the left column.
Next add the description to the second row of the detail grid by drag and drop. This will create a textBlock. In the textBlock properties, set the textWrapping to Wrap and the width to 450 then center it.
Last, we are going to add a GridSplitter.
To find the GridSplitter, use the search function in Blend.
Bring up the search window by clicking on the icon with >>. Type the word “grid” in the search window.
A list of items with “grid” in them will come up.
click on grid and it will appear right below the search icon and the search window will go away.
Highlight the grid you want to split and double click on the GridSplitter. This puts one on the working canvas. |
 |
when you first place it, it will not be in the location you want and it will be small.
Highlight the GridSplitter in the Objects and timeline.
Set the Vertical Alignment to stretch.
Move the grid spitter to the area that you want the user to click and drag to grow or shrink the columns. I sugest between the listBox and Detail Grid.
|
 |
Here is what your finished product should look like. As you click on the GridSplitter next to the list and drag right and left, you will see the column widths change. It is important to note that a GridSpliter will not resize a column that is set to auto size.
Here is the source code: NTSiverlightBlendlet1