Data Grids - columns, rows, etc RRS feed

  • Question

  • I don't see how to add columns or rows to a datagrid. I've also read a lot about data binding but am not sure that I understand how to get the data laid out into columns. I'm also not even sure how to dummy up some data. The best I can figure is put it into excel and export to xml but that seems like hitting an ant with a jackhammer. 

    I'm a UI person, not a software engineer. And this whole thing seems way more complicated than what I'd really want. I just need some dummy data in a table. It seems like it shouldn't be this hard. 

    I've searched everywhere for the info I want and found out many things, but nothing that looks like a simple, direct answer, to what should be a simple, direct question. 

    Can anyone help?

    Kayla Block User Experience Team Lead PAR Springer-Miller Systems
    Friday, August 12, 2011 3:43 PM

All replies

  • Easy way:

    1. Create sample data in Blend.

    2. Add a datagrid to artboard,

    3. Drag the sampledata collection to the datagrid and let it bind.


    Then start customizing the datagrid, via property panel

    Friday, August 12, 2011 4:01 PM
  • Adding sample data:

    1. In the Data window (it's a tab on the right side of the screen by default), click the Create Sample Data icon.
    2. Select "New Sample Data". Change whatever fields you like (e.g., name) and click OK.
    3. The structure of your data is now visible in the Data tab. If you don't like the defaults (a string and a boolean), go ahead and change them.

    Binding your data to the grid:

    1. Select your DataGrid the in artboard.
    2. Go to the ItemsSource property in the Properties window.
    3. Click the little box on the far right side of the property. Select "Data Binding".
    4. Make sure you're in the "Data Context" tab.
    5. Expand the SampleDataSource field (or whatever you named your data source).
    6. Select the Collection. Click OK.

    Your sample data should now appear inside the DataGrid.

    In case it doesn't, here's what my XAML looks like:

    	Width="640" Height="480">
    	<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
    		<sdk:DataGrid Margin="113,85,116,77" ItemsSource="{Binding Collection}"/>


    Friday, August 12, 2011 4:22 PM
  • Okay, with help, I'm making some progress, but...I have more questions.

    • I have a column that should be formatted like 123-4567 but see no way to do that unless I just make it a string. (Maybe it should be a string anyway?)
    • I have several columns that should be $ but I see no way to do that, again, unless it's a string. And I know that's wrong.
    • I have a column that should consist of a series of combo box widgets and I see no way to do that
    • I have rows that should be a set of user controls. (Trying to figure out how to do CRUD within a data grid)


    Thank you so much for the help thus far! 

    (Figuring out a bit more with the Properties tab.)

    Kayla Block User Experience Team Lead PAR Springer-Miller Systems

    Friday, August 12, 2011 5:39 PM
  • It sounds like you're looking for custom converters. There isn't going to be a pure-UI way of doing that. Here's a good article on custom converters: http://timheuer.com/blog/archive/2008/07/30/format-data-in-silverlight-databinding-valueconverter.aspx
    Friday, August 12, 2011 7:01 PM
  • Brian, that answer makes me sad. I was hoping for a different answer!

    I'm wondering what the downside to dev is if I fake it and use the line tool, labels, combo boxes and make my own thing which looks like a datagrid?

    Brian, do you have any answers on how cells in the grid can contain controls like combo boxes, radio buttons, etc??


    Thanks for your assistance.

    Kayla Block User Experience Team Lead PAR Springer-Miller Systems
    Friday, August 12, 2011 8:25 PM
  • First, to amend my earlier comment, you should be able to get things like simple string formatting done without using any code-behind modification, although it will require you to write some manual XAML. Check out the StringFormat binding property here: http://msdn.microsoft.com/en-us/library/system.windows.data.bindingbase.stringformat.aspx


    DataGrids can contain anything you can create a template for. Click the ellipsis (...) next to the Columns property on your DataGrid. Here you can create a DataGridTemplateColumn under the "Add another item" dropdown. You can make the template display data however you like (e.g., as a radio button). Check out the documentation on DataGridTemplateColumns for more information: http://msdn.microsoft.com/en-us/library/system.windows.controls.datagridtemplatecolumn(v=vs.95).aspx

    • Proposed as answer by Brian Hilstrom Friday, August 12, 2011 8:52 PM
    Friday, August 12, 2011 8:52 PM