WPF - How to have certain ListView items span columns? - wpf

Question

I have a set of data that I'd like to present via a WPF ListView in this way:
Column1 Column2 Column3
--GroupName1--
Item1 part2 part3
Item2 part2 part3
--GroupName2--
Item3 part2 part3
Item4 long_text_in_both_columns
Item5 part2 part3
--GroupName1--
Item6 part2 part3
Item7 long_text_in_both_columns
--GroupName3--
Item8 part2 part3
I am starting by working with this basic sample: http://msdn.microsoft.com/en-us/library/ms771309(VS.90).aspx
Item4 and Item7 above have long text that I would like to span the remaining columns (ignoring what the original column headings were for). How can I do this?
I already have some XAML setup with a DataTrigger to replace the default GridViewRowPresenter with a custom TextBlock, but this isn't quite what I'm looking for. I need the data in column 1 to be displayed normally and the width of the first column recognized.

Answer 1

Here's how I ended up solving this with a proper ListView:
<ListView.ItemContainerStyle >
<Style TargetType="ListViewItem">
<Style.Triggers>
<DataTrigger Binding="{Binding ShowAcrossColumns}" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=myListView, Path=View.Columns[0].Width}" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Padding="6,3,6,3" Text="{Binding Column1Text}" />
<TextBlock Grid.Column="1" Padding="6,3,6,3" Text="{Binding ColumnSpanningText}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid>
<GridViewRowPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
The key is that the DataTriggered Template does not use GridViewRowPresenter, and instead fakes the use of it with its own grid. Some of the padding/margins had to be guessed at to sort of match what GridViewRowPresenter uses internally. The other tricky part was binding the internal Grid columns to the overall ListView column widths. Resizing columns then works as expected.

Answer 2

I think for this, you use ListBox instead of ListView and use its ItemTemplate to split each columns.
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Text1}"/>
<TextBlock Text="{Binding Text2}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this way you will have chance to put Trigger in or based on some data, you could make one control invisible and show the long text.
:)

Answer 3

I have a similar problem, where I want some lines to have a multi-column-spanning item that starts in the 5th (of nine) columns. I implemented a variation on #PeteVasi's answer, with two main changes:
You want to bind to ActualWidth rather than Width, or it doesn't work right when e.g. columns are auto-sized.
You can use RelativeSource to avoid specifying myListView by name (which makes it more suitable for use in a style resource).
To do this, change the Width assignment in the ColumnDefinition entries from this:
Width="{Binding ElementName=myListView, Path=View.Columns[0].Width}"
to this:
Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ListView}}, Path=View.Columns[0].ActualWidth}"
Further, you don't need to use a nested <Grid>, and if you want to keep the mouse-over and selection highlighting effects, you need to clone the default style.
I experimented with a minor variation on the answer that uses GridViewRowPresenter, and played with a bad idea (watching for column resize events and using them to set a property to which a column width was bound). The various experiments, including a fully-styled version, can be found in the DisasmUiTest project on github.