Wpf grid with dynamic columns

Question

I have a collection that I want to associate with a WPF grid.

The problem I am facing is that the number of columns is dynamic and depends on the collection. Here is a simple layout:

public interface IRows { string Message{get;} IColumns[] Columns{get;} } public interface IColumns { string Header {get;} AcknowledgementState AcknowledgementState{get;} } public interface IViewModel { ObservableCollection<IRows> Rows {get;} } 

I want my view to bind to the Rows collection, which contains a collection of columns.

My Columns collection contains an enumeration that should be represented by an image (1 out of 3 possible). It also contains the Message property, which should be displayed in only one column (static and plain text information). It also contains a title bar, which should be displayed as a title for this column.

Note that the number of columns is variable (the moment the headers are set to Acknowledge, but this will change to represent dynamic data).

Update: this is after introducing offers from Rachel

  <ItemsControl ItemsSource="{Binding Items, Converter={StaticResource PresentationConverter}}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Grid ShowGridLines="true" local:GridHelpers.RowCount="{Binding RowCount}" local:GridHelpers.ColumnCount="{Binding ColumnCount}" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemContainerStyle> <Style> <Setter Property="Grid.Row" Value="{Binding RowIndex}"/> <Setter Property="Grid.Column" Value="{Binding ColumnIndex}"/> </Style> </ItemsControl.ItemContainerStyle> <ItemsControl.ItemTemplate> <DataTemplate> <ContentControl Content="{Binding}"> <ContentControl.Resources> <DataTemplate DataType="{x:Type UI:MessageEntity}"> <TextBox Text="{Binding Message}"></TextBox> </DataTemplate> <DataTemplate DataType="{x:Type UI:StateEntity}"> <TextBox Text="{Binding State}"></TextBox> </DataTemplate> </ContentControl.Resources> </ContentControl> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> 

It almost gives me what I want now. I was just stuck in what I should do for the headlines. Any suggestions are welcome.

Answer 1

You can use nested ItemsControls for this

Here is a basic example:

 <!-- Bind Rows using the default StackPanel for the ItemsPanel --> <ItemsControl ItemsSource="{Binding Rows}"> <!-- Set the Template for each row to a TextBlock and another ItemsControl --> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <!-- Need to set Width of name TextBlock so items line up correctly --> <TextBlock Width="200" Text="{Binding Name}" /> <ItemsControl ItemsSource="{Binding Columns}"> <!-- Use a horizontal StackPanel to display columns --> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> </ItemsControl> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> 

Answer 2

Using a grid approach can make things more complex than they should be. Have you tried changing the list template or using a DataGrid for this?

As an example, consider this project: http://www.codeproject.com/Articles/25058/ListView-Layout-Manager

Or this one: http://www.codeproject.com/Articles/16009/A-Much-Easier-to-Use-ListView

If you go with the Grid, I believe that you will need to add a lot of code to control the number of columns and rows, their size, cell contents ... While ListView / DataGrid will allow you to do this dynamically through Templates.

Answer 3

Create a grid using the code as shown at http://msdn.microsoft.com/en-us/library/system.windows.controls.grid(v=vs.90).aspx#feedback

create a property of type ColumnDefinition (and use the changed property) to create columns.

Answer 4

There is also the possibility of using a dynamic object to create columns. This is a bit complicated, but the results are very effective, and the solution as a whole is quite flexible.

Does this show you the basics of a dynamic object Linking a DynamicObject to a DataGrid with automatic column generation?

I am having trouble using it with nested objects, columns that have objects, and then try to associate the contents of the cell with the object.

Here is the question I raised with an example of how to do this

Issues with binding to WPF DataGridCell content in XAML