WPF ListView Headers Repositioning

Question

I have a ListView (with an inner ListView) that displays data like this:

I would like to display the inner ListView headers above the grouping like so:

Is it possible to re-position the column headers as shown or simply create some fake headers on the outer ListView?

Here is the XAML code I have so far:

<ListView Name="ListView_GarnishmentCalculations"
          ItemsSource="{Binding GarnishedEmployees, UpdateSourceTrigger=PropertyChanged}"
          MaxHeight="{Binding ActualHeight, 
              RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollContentPresenter}}, 
              Converter={StaticResource MathConverter}, ConverterParameter=x-220}"
          Margin="5,20,10,10"
          ScrollViewer.CanContentScroll="True"
          ScrollViewer.VerticalScrollBarVisibility="Auto"
          Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4">

    <!-- Required for right justifying text in a TextBlock -->
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListView.ItemContainerStyle>

    <!-- Group results and show EmpNo, Name and WorkState -->
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid ShowGridLines="False">
                       <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="175" />
                            <ColumnDefinition Width="50" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding Items[0].EmpNo}"
                                   FontWeight="Bold"
                                   Grid.Column="0" />
                        <TextBlock Text="{Binding Items[0].FullName}"
                                   FontWeight="Bold"
                                   Grid.Column="1" />
                        <TextBlock Text="{Binding Items[0].WorkState}"
                                   FontWeight="Bold"
                                   Grid.Column="2" />
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListView.GroupStyle>

    <ListView.ItemTemplate>
    <DataTemplate>

        <!-- Inner ListView of garnishment details -->
        <ListView ItemsSource="{Binding Garnishments}">

            <ListView.View>
                <GridView>

                    <!-- CaseID -->
                    <GridViewColumn Width="100">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding CaseNumber, Converter={StaticResource StringIsNullOrEmptyConverter}, ConverterParameter='No Case ID'}"
                                           TextAlignment="Left">
                                </TextBlock>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                        <GridViewColumn.Header>
                            <GridViewColumnHeader Content=" Case ID" />
                        </GridViewColumn.Header>
                    </GridViewColumn>

                    <!-- Vendor -->
                    <GridViewColumn Width="150"
                                    DisplayMemberBinding="{Binding Vendor}">
                        <GridViewColumn.Header>
                            <GridViewColumnHeader Content=" Vendor" />
                        </GridViewColumn.Header>
                    </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

score 1 · Answer 1 · answered Dec 30 '17 at 00:33

This is what I came up with, NOT by my self I used my google fu skills for this.
Credit to this SO post.
So here is what I have for my model:

namespace Model
{
    public class Case
    {
        public int CaseID { get; set; }
        public int Vendor { get; set; }
    }
}

And now user:

namespace Model
{
    public class User
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public string State { get; set; }
        public List<Case> Cases { get; set; }
    }
}

Now in my MainViewModel:

using Model;
using System.Collections.Generic;

namespace VM
{
    public class MainViewModel : BaseViewModel
    {
        public MainViewModel()
        {
            Users = new List<User>();
            for (int i = 0; i < 20000; i++)
            {
                Users.Add(new User
                {
                    ID = i,
                    Name = $"John the {i + 1}",
                    State = i % 2 == 0 ? "CA" : "IL",
                    Cases = new List<Case>() { new Case { CaseID = (i + 1) * 10, Vendor = ((i + 1) * 10) - 2 }, new Case { CaseID = (i + 1) * 10, Vendor = ((i + 1) * 10) - 2 } }
                });
            }
        }

        private List<User> users;

        public List<User> Users
        {
            get { return users; }
            set { users = value; OnPropertyChanged(); }
        }
    }
}

On to the View:

<Window x:Class="SO_App.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="clr-namespace:VM;assembly=VM"
    xmlns:model="clr-namespace:Model;assembly=Model"
    xmlns:local="clr-namespace:SO_App"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <vm:MainViewModel/>
</Window.DataContext>
<Window.Resources>
    <CollectionViewSource Source="{Binding Users}" x:Key="Users"/>
</Window.Resources>
<Grid>
    <ListView>
        <ListView.ItemsSource>
            <CompositeCollection>
                <CollectionContainer Collection="{Binding Source={StaticResource Users}}"/>
            </CompositeCollection>
        </ListView.ItemsSource>
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Case ID" Width="100"/>
                <GridViewColumn Header="Vendor" Width="100"/>
            </GridView>
        </ListView.View>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate>
                <DataTemplate.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="FontWeight" Value="Bold"/>
                    </Style>
                </DataTemplate.Resources>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding ID}" MinWidth="50"/>
                    <TextBlock Text="{Binding Name}" MinWidth="250" Grid.Column="1"/>
                    <TextBlock Text="{Binding State}" MinWidth="50" Grid.Column="2"/>
                    <ListView Grid.Row="1" ItemsSource="{Binding Cases}" Grid.ColumnSpan="3">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Text="{Binding CaseID}" MinWidth="100"/>
                                    <TextBlock Text="{Binding Vendor}" MinWidth="100" Grid.Column="1"/>
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

Caveat:
You will need to handle the scroll event on the inner ListView so it doesn't swallow the mouse scroll.
P.S.
this is the BaseViewModel implementation:

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace VM
{
    public class BaseViewModel : INotifyPropertyChanged
    {

        #region INPC
        public event PropertyChangedEventHandler PropertyChanged; 

        protected virtual void OnPropertyChanged([CallerMemberName] string prop = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop));
        }
        #endregion
    }
}

Which then produces this as a result:

WPF ListView Headers Repositioning

1 Answers1