如何通过MVVM模式实现相互独立的ScrollViewer与ScrollBar的滚动同步

核心实现逻辑 #

要实现两个独立控件的双向滚动同步，只需要遵循以下3个核心规则：

• 先对齐ScrollBar和ScrollViewer的滚动参数，保证滚动比例完全一致
• 两端分别监听滚动变化事件，互相同步数值
• 加锁避免双向触发导致的死循环

基础场景代码实现（同View下） #

修改后的XAML代码 #

首先给两个控件命名，并添加事件监听，注意ScrollBar要指定垂直方向：

<Grid Height="200" Width="400">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="6*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
    <ScrollViewer x:Name="MyScrollViewer" Grid.Column="0" Background="Gray" ScrollChanged="MyScrollViewer_OnScrollChanged">
        <!-- 此处替换为你的实际内容 -->
        <StackPanel>
            <Rectangle Height="100" Fill="Red"/>
            <Rectangle Height="100" Fill="Green"/>
            <Rectangle Height="100" Fill="Blue"/>
            <Rectangle Height="100" Fill="Yellow"/>
        </StackPanel>
    </ScrollViewer>
    <ScrollBar x:Name="MyScrollBar" Grid.Column="1" Width="30" Orientation="Vertical" ValueChanged="MyScrollBar_OnValueChanged"/>
</Grid>

后台逻辑代码 #

添加锁标志位和两个事件的实现：

// 同步锁，避免双向触发死循环
private bool _isSyncing;

private void MyScrollViewer_OnScrollChanged(object sender, ScrollChangedEventArgs e)
{
    if (_isSyncing) return;
    _isSyncing = true;

    // 同步ScrollBar滚动参数
    MyScrollBar.Maximum = MyScrollViewer.ScrollableHeight;
    MyScrollBar.ViewportSize = MyScrollViewer.ViewportHeight;
    MyScrollBar.SmallChange = 16; // 可自定义为你需要的单行滚动高度
    MyScrollBar.LargeChange = MyScrollViewer.ViewportHeight;

    // 同步滚动偏移量
    MyScrollBar.Value = MyScrollViewer.VerticalOffset;

    _isSyncing = false;
}

private void MyScrollBar_OnValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    if (_isSyncing) return;
    _isSyncing = true;

    // 控制ScrollViewer滚动到对应位置
    MyScrollViewer.ScrollToVerticalOffset(MyScrollBar.Value);

    _isSyncing = false;
}

跨View场景适配（你的实际需求） #

因为ScrollViewer在另一个独立View中，无需控件间直接引用，用MVVM模式实现即可：

1. 定义公共ViewModel，实现INotifyPropertyChanged接口，添加ScrollableHeight、ViewportHeight、CurrentVerticalOffset三个通知属性
2. 两个View绑定同一个ViewModel实例
3. ScrollViewer所在View的ScrollChanged事件中，更新ViewModel的三个属性
4. ScrollBar所在View的ScrollBar，将Maximum、ViewportSize、Value双向绑定到ViewModel对应属性，ValueChanged事件中触发滚动逻辑即可

注意事项 #

• 如果ScrollViewer内容是动态加载的，每次内容更新后需要重新同步一次Maximum参数，避免滚动范围不匹配
• 如果是UWP/WinUI平台，ScrollToVerticalOffset方法替换为ChangeView(null, MyScrollBar.Value, null)即可使用

内容的提问来源于stack exchange，提问作者The Compiler