Wrapped Rows with Silverlight DataGrid

Question

I'm trying to style a Silverlight DataGrid so that the content displayed in the grid wraps. I want each grid row (and the grid header), to consist of TWO lines of cells, instead of one. This makes each row taller, but keeps all of the content visible on screen simultaneously, instead of having to scroll horizontally to see all of the fields. Here is a picture to help illustrate what I am going for:

Screenshot (I don't have enough rep to post an image directly but the link above will show you an example screen shot)

I see the templates that let me customize how the different cells are styled, but I'm not seeing anything that will let me to control how those cells are displayed beside each other on the screen.

Chris Holmes Chris Holmes · Accepted Answer · 2011-01-10T16:06:28

Your best bet here is going to be to abandon the datagrid and use a ListView instead, and inside the ListView you will want to show a UserControl of your own design. I did something similar for an application I built.

In your XAML for your ListView you will want to set the ItemContainerStyle and inside that you'll want to display your custom UserControl (in which you can use a Grid to setup the rows/colums and their spans). It basically looks like this:

<ListView 
      Name="_listView"
       Grid.Row="0" Grid.Column="0"
      SelectionMode="Single"   
      IsSynchronizedWithCurrentItem="True"
      SelectedItem="{Binding SelectedAgent, Mode=TwoWay}"
      ItemsSource="{Binding Agents, Mode=OneWay}" 
      GridViewColumnHeader.Click="ListView_Click"
      DependencyProperties:ListBoxClickCommand.ClickCommand="{Binding ShowAgentDetailsCommand}">
      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="ListViewItem">
                <Border 
                  Name="_border"
                  Padding="2"
                  CornerRadius="5" 
                  SnapsToDevicePixels="true"
                  Background="Transparent">
                    <Controls:AgentStateControl></Controls:AgentStateControl>
                </Border>
                <ControlTemplate.Triggers>
                  <Trigger Property="IsSelected" Value="True">
                    <Setter TargetName="_border" Property="Background" Value="CornflowerBlue" />
                  </Trigger>
                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </ListView.ItemContainerStyle>

The AgentStateControl is my custom control, and it has two rows, the second has a bigger span on the columns. You can create that control however you want.

Wrapped Rows with Silverlight DataGrid

1 Answers