将网格的垂直滚动位置与RichEditBox或TextBox相匹配

Question

我有一个Windows应用商店应用程序，带有RichEditBox(编辑器)和Grid(MarginNotes)。

我需要两个元素的垂直滚动位置始终匹配。这样做的目的是允许用户在文档的页边空白处添加注释。

我已经根据光标位置计算出了Note的位置——当添加一个Note时，文本选择是由光标之前的所有内容组成的。然后，该选择被添加到StackPanel内部的第二个不可见的RichEditBox。然后我得到这个控件的ActualHeight，它给出了音符在网格中的位置。

我的问题是，当我上下滚动RichEditBox时，Grid不会相应地滚动。

第一技术

我试着把它们都放在ScrollViewer中，并在RichEditBox上禁用滚动

<ScrollViewer x:Name="EditorScroller" 
VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="{Binding *" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Grid x:Name="MarginNotes" Grid.Column="0" HorizontalAlignment="Right"                  
Height="{Binding ActualHeight, ElementName=editor}">
</Grid>
<StackPanel Grid.Column="1">
<RichEditBox x:Name="margin_helper" Opacity="0" Height="Auto"></RichEditBox>
</StackPanel>
<RichEditBox x:Name="editor" Grid.Column="1" Height="Auto"
ScrollViewer.VerticalScrollBarVisibility="Hidden" />
</Grid>
</ScrollViewer>

当我滚动到RichEditBox控件的底部，并点击回车键几次时，光标就会消失。ScrollViewer不会随光标自动滚动。

我尝试添加C#代码，它会检查光标的位置，将其与VerticalOffset和编辑器的高度进行比较，然后相应地调整滚动。这起到了作用，但速度慢得令人难以置信。最初，我在KeyUp事件中使用了它，当我键入一句话时，该事件使应用程序陷入停顿。之后，我将其设置在5秒计时器上，但这仍然降低了应用程序的性能，也意味着光标从视线中消失到RichEditBox滚动之间可能会有5秒的延迟。

第二种技术

我还尝试将MarginNotes放在它自己的ScrollViewer中，并根据我的RichEditBox的ViewChanged事件以编程方式设置VerticalOffset。

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="{Binding *" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<ScrollViewer x:Name="MarginScroller" Grid.Column="0" 
VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid x:Name="MarginNotes" HorizontalAlignment="Right"                  
Height="{Binding ActualHeight, ElementName=editor}">
</Grid>
</ScrollViewer>
<StackPanel Grid.Column="1">
<RichEditBox x:Name="margin_helper" Opacity="0" Height="Auto"></RichEditBox>
</StackPanel>
<RichEditBox x:Name="editor" Grid.Column="1" Height="Auto" 
Loaded="editor_loaded" SizeChanged="editor_SizeChanged" />
</Grid>

相关事件处理程序

void editor_Loaded(object sender, RoutedEventArgs e)
{
// setting this in the OnNavigatedTo causes a crash, has to be set here. 
// this uses WinRTXAMLToolkit as suggested by Nate Diamond to find the 
// ScrollViewer and add the event handler
editor.GetFirstDescendantOfType<ScrollViewer>().ViewChanged += editor_ViewChanged;
}
private void editor_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
{
// when the RichEditBox scrolls, scroll the MarginScroller the same amount
double editor_vertical_offset = ((ScrollViewer)sender).VerticalOffset;
MarginScroller.ChangeView(0, editor_vertical_offset, 1);       
}
private void editor_SizeChanged(object sender, SizeChangedEventArgs e)
{
// when the RichEditBox size changes, change the size of MarginNotes to match
string text = "";
editor.Document.GetText(TextGetOptions.None, out text);
margin_helper.Document.SetText(TextSetOptions.None, text);
MarginNotes.Height = margin_helper.ActualHeight;
}

这起到了作用，但相当滞后，因为在滚动停止后，直到ViewChanged事件触发才应用滚动。我尝试使用ViewChanging事件，但由于某种原因，它根本没有启动。此外，Grid有时在快速滚动后定位错误。

Answer 1

因此，让这件事变得困难的是，文本的大小或文本在不同类型的文本框中的位置意味着同步滚动条并不能保证同步文本。话虽如此，以下是您的操作方法。

void MainPage_Loaded(object sender, RoutedEventArgs args)
{
MyRichEditBox.Document.SetText(Windows.UI.Text.TextSetOptions.None, MyTextBox.Text);
var textboxScroll = Children(MyTextBox).First(x => x is ScrollViewer) as ScrollViewer;
textboxScroll.ViewChanged += (s, e) => Sync(MyTextBox, MyRichEditBox);
}
public void Sync(TextBox textbox, RichEditBox richbox)
{
var textboxScroll = Children(textbox).First(x => x is ScrollViewer) as ScrollViewer;
var richboxScroll = Children(richbox).First(x => x is ScrollViewer) as ScrollViewer;
richboxScroll.ChangeView(null, textboxScroll.VerticalOffset, null);
}
public static IEnumerable<FrameworkElement> Children(FrameworkElement element)
{
Func<DependencyObject, List<FrameworkElement>> recurseChildren = null;
recurseChildren = (parent) =>
{
var list = new List<FrameworkElement>();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
{
var child = VisualTreeHelper.GetChild(parent, i);
if (child is FrameworkElement)
list.Add(child as FrameworkElement);
list.AddRange(recurseChildren(child));
}
return list;
};
var children = recurseChildren(element);
return children;
}

决定何时调用同步很棘手。也许在PointerReleased、PointerExit、LostFocus、KeyUp上，有很多滚动方式才是真正的问题。你可能需要处理所有这些。但是，事实就是这样。至少你可以。

祝你好运。