WPF：如何让两个面板共享同一个垂直滚动条，并且每个面板都拥有自己的水平滚动条？

Question

我们需要创建一个新的 WPF 工具来比较两个文件。 此比较工具逐行显示两个文件的内容，并指示同一行的差异。 首先，我们创建两个 ListView 来显示源文件和目标文件。 因此，每个 ListView 都有自己的垂直滚动条和水平滚动条。 我们注意到的是，如果我们在左侧列表视图中滚动垂直条，而右侧列表视图不会滚动。所以行号是彼此关闭的。这不是我们想要的。 我们需要滚动垂直条，并且两个 ListView 一起移动。因此，我们总是看到同一条线对齐在一起。 有没有人有一个很好的建议，我们应该使用什么控件，以便两个面板共享相同的垂直滚动条并拥有自己的水平滚动条。感谢！

Note：此问题总结整理于: WPF: How to make two panels share the same vertical scroll bar and each panel owns itself horizontal scroll bar?

Answer 1

可以使用 ScrollChanged 事件来实现该函数： cs代码为：

 public MainWindow()  
        {  
            InitializeComponent();  
            initList();  
        }  
        public void initList()  
        {  
            List<Book> listBook = new List<Book>();  
            for (int i = 0; i < 30; i++)  
            {        
                listBook.Add(new Book(){Num="00"+i.ToString(), Name="testBook"+i, Type="Math", Author="qiaobus"});                  
            }             
            listView1.ItemsSource = listBook;          
            listView2.ItemsSource = listBook;          
        }  
  
        ScrollViewer sv1, sv2;  
        private void Window_Loaded(object sender, RoutedEventArgs e)  
        {  

            sv1 = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(this.listView1, 0), 0) as ScrollViewer;  
            sv2 = VisualTreeHelper.GetChild(VisualTreeHelper.GetChild(this.listView2, 0), 0) as ScrollViewer;  
  
            sv1.ScrollChanged += new ScrollChangedEventHandler(sv1_ScrollChanged);  
            sv2.ScrollChanged += new ScrollChangedEventHandler(sv2_ScrollChanged);  
        }  
  
        void sv1_ScrollChanged(object sender, ScrollChangedEventArgs e)  
        {  
            sv2.ScrollToVerticalOffset(sv1.VerticalOffset);  
        }  
  
        void sv2_ScrollChanged(object sender, ScrollChangedEventArgs e)  
        {  
            sv2.ScrollToVerticalOffset(sv2.VerticalOffset);  
        }  
    }  
    public class Book  
    {  
       public string Num { get; set; }  
       public string Name { get; set; }  
       public string Type { get; set; }  
       public string Author { get; set; }  
    }  

xaml 代码为 （add Window_Loaded for the window）：

 <WrapPanel>  
            <ListView x:Name="listView1" Width="350" Height="400" ItemsSource="{Binding}" >  
                <ListView.View>  
                    <GridView>  
                        <GridViewColumn Header="Num" Width="80" DisplayMemberBinding="{Binding Num}" />  
                        <GridViewColumn Header="Name" Width="80" DisplayMemberBinding="{Binding Name}"/>  
                        <GridViewColumn Header="Type" Width="80"  DisplayMemberBinding="{Binding Tyep}" />  
                        <GridViewColumn Header="Author" Width="80"  DisplayMemberBinding="{Binding Author}"/>  
                    </GridView>  
                </ListView.View>  
            </ListView>  
            <ListView x:Name="listView2" Width="350" Height="400" ItemsSource="{Binding}" >  
                <ListView.View>  
                    <GridView>  
                        <GridViewColumn Header="Num" Width="80" DisplayMemberBinding="{Binding Num}" />  
                        <GridViewColumn Header="Name" Width="80" DisplayMemberBinding="{Binding Name}"/>  
                        <GridViewColumn Header="Type" Width="80"  DisplayMemberBinding="{Binding Tyep}" />  
                        <GridViewColumn Header="Author" Width="80"  DisplayMemberBinding="{Binding Author}"/>  
                    </GridView>  
                </ListView.View>  
            </ListView>  
        </WrapPanel>  

---

如果答案是正确的，请点击“接受答案”并点赞。 如果您对此答案还有其他疑问，请点击“评论”。

注意：如果您想接收相关电子邮件，请按照我们的文档中的步骤启用电子邮件通知 此线程的通知。