WPF - GridView.GridViewColumn two lines per row?

Question

Hello is it possible to have a ListView -> ListView.View -> GridView -> GridViewColumn with "two rows" per row.
eg.
            COLUMN 1 | COLUMN 2
ROW 1 blah          | data
            blah
ROW 2 etc            | more

I have tried unsuccessfully to use a Cell template but the item inside the template doesn't resize when its containing column is manually resized.

Code:

        <ListView Height="238" DockPanel.Dock="Top" ItemsSource="{Binding Blah}" 
              SelectedItem="{Binding Path=Selectedblah, UpdateSourceTrigger=PropertyChanged}">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="No." DisplayMemberBinding="{Binding Path=Id}" Width="25" />
                <GridViewColumn Header="Job Type" DisplayMemberBinding="{Binding Path=Something}" Width="165" />
                <GridViewColumn Header="Assigned To" DisplayMemberBinding="{Binding Path=SomethingElse}" Width="90" />
                <GridViewColumn Header="Created" DisplayMemberBinding="{Binding Path=DateCreated, Converter={StaticResource dateTimeFormat}, ConverterParameter='dd/MM/yy HH:mm'}" Width="65" />
                <GridViewColumn>
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="/Streetcar.UI.Modules.FleetTracker;component/Resources/Images/tick.png" Visibility="{Binding IsCompleted, Converter={StaticResource boolToVis}}" />
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

Any ideas?

EDIT: This is using MVVM so there is no code behind just a bounded ViewModel

Answer 1

Bear with me as I'm not 100% sure this is what you're asking for. But, assuming you're wanting to have each row have more text underneath it (a la the outlook autopreview feature), I think I can help.

You'll need to override the default style for ListViewItem and change the ControlTemplate to add a TextBlock underneath the GridViewRowPresenter. When you're done, it'll look something like this:

<Style TargetType="ListViewItem">
   <Setter Property="SnapsToDevicePixels" Value="true"/>
   <Setter Property="OverridesDefaultStyle" Value="true"/>
   <Setter Property="Template">
   <Setter.Value>
      <ControlTemplate TargetType="ListBoxItem">
         <Border Name="Border"
                 Padding="2"
                 SnapsToDevicePixels="true"
                 Background="Transparent">
            <StackPanel>
               <GridViewRowPresenter Columns="{TemplateBinding GridView.ColumnCollection}"  
                                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
               <TextBlock Text="This is where your text goes!"/>
            </StackPanel>
         </Border>

         <ControlTemplate.Triggers>
            <Trigger Property="IsSelected" Value="true">
               <Setter TargetName="Border"
                       Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
               <Setter Property="Foreground" 
                       Value="{StaticResource DisabledForegroundBrush}"/>
            </Trigger>
         </ControlTemplate.Triggers>
         </ControlTemplate>
   </Setter.Value>
   </Setter>
</Style>

You may have to get fancy with binding the Width of your TextBlock so that it will wrap within the ListView, but this should get you started.

Answer 2

Okay, I'll try again. Have you tried a CellTemplate with a TextBlock with TextWrapping set to Wrap?

For Example:

<ListView x:Name="MyListView">
   <ListView.View>
      <GridView>
         <GridViewColumn Header="Hello"
                         Width="50">
            <GridViewColumn.CellTemplate>
               <DataTemplate>
                  <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non nibh quis odio aliquet venenatis."
                             TextWrapping="Wrap"/>
               </DataTemplate>
            </GridViewColumn.CellTemplate>
         </GridViewColumn>
         <GridViewColumn Header="World"/>
      </GridView>
   </ListView.View>

   <ListViewItem/>
   <ListViewItem/>
   <ListViewItem/>
   <ListViewItem/>
</ListView>

Answer 3

First, the CellTemplate is the way to go to have custom content inside a cell. You could for example have a vertical StackPanel inside the CellTemplate.

Next, To have the content of your cell resized automatically when you change the column width, you need to specify HorizontalContentAlignment="Stretch" on the ListViewItem:

<ListView.ItemContainerStyle>
    <Style TargetType="{x:Type ListViewItem}">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
</ListView.ItemContainerStyle>