WPF ListView:GridView: is it possible to fix first several columns when scrolling Horizonal scroll bar?

Question

We have developed a WPF application.

It displays a list of samples. Each sample includes several attributes to describe this sample.
Each sample includes two fixed attributes: sample name and sample type.
It requires to allow select one or multiple samples and click Export button to export those selected samples.

We implement WPF ListView which includes a GridView to display each attribute as GridViewColumn.
since different sample type may include different number of attributes, some samples may include a lot more attributes.
when loading a long list of attributes, not all samples' attributes (columns) can be visible. Horizontal scroll bar is displayed.
When scrolling horizonal scroll bar to right, the first two columns (name and type) are move out of visible area.

There is a new requirement coming up: when moving Horizonal scroll bar right, can we fix first two columns (Sample Name and Type)?
In other word, first two columns are always visible.

is it possible to fix first several columns when scrolling Horizonal scroll bar? Thx!

Answer 1

Hi HuiLiu,

thanks for your reply and provide your solutions.

first solution: two listViews, I forget mention that one requirement is sort.
sample list needs to be able to sort on any column.
when sorting on one column of ListView, columns on other listView need to be sync.

second solution: DataGrid: FrozenColumnCount="2"

we are switching to use DataGrid instead of ListView and GridView.
Notice that multiple selection is not that straight forward in DataGrid.
users click to press Ctrl key and manually select rows.
In ListView:SelectionMode="Multiple", users can easily manually select rows.

thanks,
-Jane

Answer 2

It is difficult to freeze first several columns when scrolling horizontal scroll bar in a ListView. You could set FrozenColumnCount="2" in the DataGrid to freeze the first two columns when scrolling the horizontal scroll bar. The following are examples of ListView workaround and DataGrid.
The code of xaml:

<Grid>  
        <ListView x:Name="lv" Height="300" Width="170" HorizontalAlignment="Left"  >  
            <ListView.View>  
                <GridView  >  
                    <GridViewColumn  Header="Id" Width="80" DisplayMemberBinding="{Binding Id}" />  
                    <GridViewColumn Header="Name" Width="80" DisplayMemberBinding="{Binding Name}"/>  
                </GridView>  
            </ListView.View>  
        </ListView>  
        <ListView x:Name="lv2" Margin="170,55,400,35" Height="320" Width="200" HorizontalAlignment="Left" >  
            <ListView.View>  
                <GridView ScrollViewer.CanContentScroll="True"  >  
                    <GridViewColumn Header="Age" Width="80" DisplayMemberBinding="{Binding Age}"/>  
                    <GridViewColumn Header="Address" Width="80" DisplayMemberBinding="{Binding Address}"/>  
                    <GridViewColumn Header="School" Width="80" DisplayMemberBinding="{Binding School}"/>  
                    <GridViewColumn Header="Gender" Width="80" DisplayMemberBinding="{Binding Gender}"/>  
                </GridView>  
            </ListView.View>  
        </ListView>  
        <DataGrid x:Name="dg" Width="200" HorizontalAlignment="Right" FrozenColumnCount="2" >  
        </DataGrid>  
</Grid>  

The code of xaml.cs:

 using System.Collections.ObjectModel;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Media;  
  
namespace ListViewScorll  
{  
  public partial class MainWindow : Window  
  {  
    public MainWindow()  
    {  
      InitializeComponent();  
      ObservableCollection<Person> samplePersons = new ObservableCollection<Person>();  
      for(int i = 0; i < 20; i++)  
      {  
        samplePersons.Add(new Person() {Id=i, Name = "name"+i, Age = i + 10,Address="address"+i,School="school"+i,Gender="boy" } );  
      }  
      lv.ItemsSource = samplePersons;  
      lv2.ItemsSource = samplePersons;  
      dg.ItemsSource = samplePersons;  
    }  
    ScrollViewer sv1, sv2;  
    private void Window_Loaded(object sender, RoutedEventArgs e)  
    {  
      sv1 = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(this.lv, 0), 0) as ScrollViewer;  
      sv2 = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(this.lv2, 0), 0) as ScrollViewer;  
      sv1.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;  
      sv1.ScrollChanged += new ScrollChangedEventHandler(sv1_ScrollChanged);  
      sv2.ScrollChanged += new ScrollChangedEventHandler(sv2_ScrollChanged);  
    }  
    void sv1_ScrollChanged(object sender, ScrollChangedEventArgs e)  
    {  
      sv1.ScrollToVerticalOffset(sv1.VerticalOffset);  
    }  
    void sv2_ScrollChanged(object sender, ScrollChangedEventArgs e)  
    {  
      sv1.ScrollToVerticalOffset(sv2.VerticalOffset);  
    }  
  }  
  public class Person  
  {  
    public int Id { get; set; }  
    public string Name { get; set; }  
    public int Age { get; set; }  
    public string Address { get; set; }  
    public string School { get; set; }  
    public string Gender { get; set; }  
  }  
}  

The picture of result:

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.