# Wednesday, 21 January 2009

I needed to build a survey (a course evaluation in this case, but name-your-survey…) and I wanted to be able to add new questions and question categories to the database without having to touch my (Silverlight) survey app.  I wanted the basic layout to look like this…

CropperCapture[2]

It took a little experimentation, and I’m sure there are other ways to make this work, but here’s what worked for me:

The questions and categories live in the database, like so

CropperCapture[3]

Categories contain questions, questions have text, and what we store when the survey is complete are the answers to the questions.

In the XAML, first there is an ItemsControl to deal with the categories, so that each category will have it’s own DataGrid.  The ItemsControl has a DataTemplate that defines what each category name and data grid of questions will look like (some formatting details removed for clarity)

<ItemsControl x:Name="dgPanel" >

    <ItemsControl.ItemTemplate>

        <DataTemplate>

            <StackPanel Orientation="Vertical">

                <TextBlock Text="{Binding CategoryName}"/>

                <data:DataGrid x:Name="dgOverall" ItemsSource="{Binding Questions}">

                <data:DataGrid.Columns>

                    <data:DataGridTextColumn Header="Question"

                   Binding="{Binding Text}" IsReadOnly="True"/>

                    <data:DataGridTemplateColumn Header="Rating">

                        <data:DataGridTemplateColumn.CellTemplate>

                            <DataTemplate>

                                <t:Rating UserRating="{Binding Path=Answer, Mode=TwoWay}" />

                            </DataTemplate>

                        </data:DataGridTemplateColumn.CellTemplate>

                        <data:DataGridTemplateColumn.CellEditingTemplate>

                            <DataTemplate>

                                <t:Rating UserRating="{Binding Path=Answer, Mode=TwoWay}"/>

                            </DataTemplate>

                        </data:DataGridTemplateColumn.CellEditingTemplate>

                    </data:DataGridTemplateColumn>

                </data:DataGrid.Columns>

 

            </data:DataGrid>

            </StackPanel>

        </DataTemplate>

    </ItemsControl.ItemTemplate>

</ItemsControl>

The questions come from a WCF call, and get bound in the form load

void client_GetQuestionsCompleted(object sender, GetQuestionsCompletedEventArgs e)

{

    dgPanel.ItemsSource = e.Result;

}

Each row that comes back has the category header text and a collection of questions, so that for each item in the ItemsControl, the text is bound to the header, and the questions are bound to the datagrid.  The DataGridTemplateColumn stuff above maps the Answer property of each question to a UserControl called Rating that contains the radio buttons.  Depending on which radio button gets checked, the value of the user control represents an enum value with their answer.  Because the data binding is defined as TwoWay, the user’s answers are updating in the in-memory copy of the questions, and when the user eventually hits the “Submit” button, the collection of questions (and answers) is sent back to the web service. 

Now I can add new questions to the database and have those questions show up in the survey, and previously submitted evaluations will only have answers for the questions that were present at the time the survey was submitted.  There’s still some work to do here, like setting up groups of questions so that different sets of questions could be used for different circumstances, etc, but this is a decent start.