如何同步兩個ScrollViewers？

Question

我有四個方面。 其中三個滾動。 我必須同步它們的運動，所以如果用戶移動區域A（僅水平）區域C模仿運動。 如果用戶移動areaC areaA模仿水平和areaB垂直移動。

由於某些區域可以“移動”在其他區域之下，因此我看不到使用單個ScrollView的方法：

• C在'A'下垂直移動
• C在'B'下水平移動
• B在固定區域下方垂直移動
• A在固定區域下方水平移動

請注意，我正在開發一個針對WinRT運行時的Windows Phone 8.1應用程序（如果這是它的當前名稱？它不是Silverlight。）。

關於尺寸：

• areaA和areaC具有相同的寬度
• areaB和areaC具有相同的高度

到目前為止我管理的是通過訂閱ViewChanging事件讓它們同步，從事件arg讀取NextView偏移值並在相應的其他滾動條上調用ScrollTo[Vertical,Horizontal]Offset 。 正如我所說，它以某種方式起作用，但它們的口吃相當多。 另外，我還沒有找到一種方法來模仿'滾動視圖到達的結束，因此內容現在會被壓縮一點上/下'效果。

//adding event handler
areaCScroller.ViewChanging += HandleAreaCScrolls;

//handler
void HandleAreaCScrolls(object sender, ScrollViewerViewChangingEventArgs e)
{
    areaAScroller.ScrollToHorizontalOffset(e.NewView.HorizontalOffset);
    areaBScroller.ScrollToVerticalOffset(e.NewView.VerticalOffset);
}

我還嘗試了FinalView值（導致StackOverFlowExceptions）並在滾動條上禁用慣性（這沒有幫助，但讓他們感覺不那么'酷'）。

所以我的問題是：我怎樣才能以更好的方式做到這一點？

我對WPF / XAML並不熟悉，所以我可能會很好地忽略（或者谷歌的低谷歌）控制或功能，它可以滿足我的需要。 打開所有建議（布局本身幾乎被鎖定）。 我看這里 ， 這里和這里的例子，但他們都做了同樣的嘗試。

Answer 1

我在ScrollViewer中使用了ViewChanged。 一切都對我很好。 以下是MainPage.xaml.cs中的代碼：

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        var list = new List<int>();
        for (int i = 0; i < 100; ++i)
        {
            list.Add(i);
        }

        ItemsControl1.ItemsSource = list;
        ItemsControl2.ItemsSource = list;
    }

    private void ScrollViewer1_OnViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        if (ScrollViewer1.VerticalOffset != ScrollViewer2.VerticalOffset)
        {
            ScrollViewer2.ScrollToVerticalOffset(ScrollViewer1.VerticalOffset);
        }
    }

    private void ScrollViewer2_OnViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
    {
        if (ScrollViewer1.VerticalOffset != ScrollViewer2.VerticalOffset)
        {
            ScrollViewer1.ScrollToVerticalOffset(ScrollViewer2.VerticalOffset);
        }
    }

和來自MainPage.xaml的XAML代碼

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <ScrollViewer Grid.Column="0"
                  x:Name="ScrollViewer1"
                  ViewChanged="ScrollViewer1_OnViewChanged">
        <ItemsControl x:Name="ItemsControl1">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
    <ScrollViewer Grid.Column="2"
                  x:Name="ScrollViewer2"
                  ViewChanged="ScrollViewer2_OnViewChanged">
        <ItemsControl x:Name="ItemsControl2">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>

試試這個，希望它有所幫助。