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

时间:2014-02-10 10:36:17

标签: textbox windows-store-apps winrt-xaml scrollviewer richedit-control

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

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

我已经根据光标位置想出了音符定位 - 当添加音符时,文本选择由光标直到。然后将该选择添加到RichEditBox内的第二个不可见的StackPanel。然后我得到这个控件的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中,并以编程方式设置VerticalOffset基于我RichEditBox的{​​{1}}事件。

ViewChanged

相关事件处理程序

<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有时在快速滚动后错误定位。

1 个答案:

答案 0 :(得分:1)

因此,难以理解的是文本的大小或文本在不同类型的TextBox中的位置意味着同步滚动条并不能保证您正在同步文本。话虽如此,这就是你如何做到的。

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上 - 有很多滚动方式是真正的问题。您可能需要处理所有这些。但是它就是这样啊。至少你可以。

祝你好运。