Exploring the Grid and Grid Splitter with Blend–North Texas User Group–Blendlet #1

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.

image
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]
image

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.
image
  1. Name the collection Images
    Change Property 1 to Title and leave the defaults under the options.
  2. Change Property 2 to Description Change it to a type string with max word count of 60
  3. Add Property 3 as Image.  Change it to type image and choose a folder with images.  I chose the sample directory.
image image

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. 

image

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.

image image

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. 

image image

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.
image
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.
 
image

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.

image

Here is the source code: NTSiverlightBlendlet1

Comments

# re: Exploring the Grid and Grid Splitter with Blend–North Texas User Group–Blendlet #1
Gravatar I tried to run this tutorial but I'm hung up on the part where you pull over the Image data. It show up in a ListBox just like the Titles instead of a detail grid. What am I doing wrong?
Left by thebirdbath on 10/12/2010 3:05 PM
# re: Exploring the Grid and Grid Splitter with Blend–North Texas User Group–Blendlet #1
Gravatar There are two ways to get an associated details grid.

The way I generally do it is to hold down the ALT key while I drag the item to the main grid.

The other way is to click the Details Mode icon a the top of the data panel. You will see two icons at the top of the data panel. The one to the left looks like a contol window -- if you mouse over it you will see list mode. The one to the right looks like 6 dashes and if you mouse over it, it says detail mode. You can click detail mode them move the image to the main window.

Both ways work fine so take your pick :)
Left by Teresa on 10/12/2010 3:17 PM
# re: Exploring the Grid and Grid Splitter with Blend–North Texas User Group–Blendlet #1
Gravatar Hmm..ok, either way brings up a dialog window titled: "Create Data Binding" with a whole list of options but none of them being a detail grid.

I'm wondering if I missed another step somewhere because how would the images be tied to the titles unless I created some sort of data binding to begin with?

Left by thebirdbath on 10/12/2010 3:34 PM
# re: Exploring the Grid and Grid Splitter with Blend–North Texas User Group–Blendlet #1
Gravatar The Binding is pretty basic but is "auto" wired. The detail box will be bound to whatever list in the same collection that you put on the grid first. so if you put two lists, only the first list would be automatically bound to the detail box.

After it binds them together, you can view the xaml to see what the binding looks like.

If you send me your e-mail address in a comment, I will gladly send you my e-mail, IM, and (if in the us) phone number. One way or another, we can walk through it. I won't publish that comment so your e-mail address will not be published.
Left by Teresa on 10/12/2010 4:24 PM
Comments have been closed on this topic.