Get Caret Position to Set Location of ListBox (Autocomplete/Intellisense)

[Robert]

Good afternoon,

I'm trying to build my own Autocomplete (intellisense) RadRichTextBox. For the autocomplete popup I'm using your RadListView.


<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition />

<ColumnDefinition />

</Grid.ColumnDefinitions>

<!-- RichTextBox -->

<telerik:RadRichTextBox x:Name="radRichTextBox" AcceptsReturn="True" Width="800" Margin="10" Grid.Column="0" DocumentContentChanged="radRichTextBox_DocumentContentChanged">

<telerik:RadRichTextBox.Effect>

<DropShadowEffect ShadowDepth="10" Color="Gray" Opacity=".4" Direction="320" RenderingBias="Performance" />

</telerik:RadRichTextBox.Effect>

<telerik:RadRichTextBox.LayoutTransform>

<ScaleTransform ScaleX="{Binding ElementName=Scale, Path=Value}" ScaleY="{Binding ElementName=Scale, Path=Value}" />

</telerik:RadRichTextBox.LayoutTransform>

<telerik:RadDocument x:Name="radDocument" />

</telerik:RadRichTextBox>

<!-- AutoCompltete ListBox-->

<telerik:RadListBox Width="100" Height="100">

<ListBoxItem Content="Item 1" />

<ListBoxItem Content="Item 2" />

<ListBoxItem Content="Item 3" />

<ListBoxItem Content="Item 4" />

</telerik:RadListBox>

</Grid>

Do you know how I can get the caret position and set the RadListBox position next to it / slightly offset?

Thank you very much for your time,

Rob

[Robert]

Ok I've managed to work it out in the end.
Here's my code:

private void radRichTextBox_DocumentContentChanged(object sender, EventArgs e)
{
    DocumentPosition position = this.radRichTextBox.Document.CaretPosition;
    double myMarginX = Math.Round(position.Location.X, 0) + 20;
    double myMarginY = Math.Round(position.Location.Y, 0) + 40;
    radListBox.Margin = new Thickness(myMarginX, myMarginY, 0, 0);
    radListBox.Visibility = Visibility.Visible;
}

If anyone has a better solution then I'm all ears! :).

Thank you very much.

[Robert]

There is one little downside to this. My RadRichTextBox has a slider bar to zoom in and out on the document like so:

<telerik:RadRichTextBox.LayoutTransform>
                        <ScaleTransform ScaleX="{Binding ElementName=radSliderZoom, Path=Value}" ScaleY="{Binding ElementName=radSliderZoom, Path=Value}" />
                        </telerik:RadRichTextBox.LayoutTransform>

I need to find a way to compensate for the RadSlider zoom value.

[Martin Ivanov]

Hello Robert,

 We are glad that you have found a solution. However, we recommend you that you use  the GetViewPointFromDocumentPosition method of the ActiveEditorPresenter of the RadRichTextBox to get the proper coordinates:  

this.RichTextBox.ActiveEditorPresenter.GetViewPointFromDocumentPosition(this.RichTextBox.Document.CaretPosition);

 
You can also use the presenter's offset properties to make your custom calculations. If you encounter any difficulties, contact us again. All the best,
Martin
the Telerik team

[Robert]

Thanks for the advice.
Is this correct? It seems to work :).

Point position = this.radRichTextBox.ActiveEditorPresenter.GetViewPointFromDocumentPosition(this.radRichTextBox.Document.CaretPosition);
position.Offset(16, 35);
radListBox.Margin = new Thickness(position.X, position.Y, 0, 0);
//Make listbox visible
radListBox.Visibility = Visibility.Visible;

There is only little problem with it. When I zoom in on the document then the position of the Intellisense ListBox isn't where it should be until I zoom back out again.

Any idea how I can compensate for the zooming? You can see from one of my examples above that I alter the richtextbox scale transform.

[Martin Ivanov]

Hi Robert,

 The problem about zooming in your case is that the Scale transform you use is not taken into consideration by the rich text box. To have a proper position from GetViewPointFromDocumentPosition method, you should use the ScaleFactor of the rich text box instead of using a LayoutTransformation. For instance, you can set the ScaleFactor in the following way: 

this.radRichTextBox.ScaleFactor = new Size(0.5, 0.5);

You can also use RadRichTextBoxStatusBar which uses the scale factor to zoom in and out:

<telerik:RadRichTextBoxStatusBar AssociatedRichTextBox="{Binding ElementName=radRichTextBox}" ></telerik:RadRichTextBoxStatusBar>

Working with the scale factor will give you proper view point to place your list box.
Don't hesitate to contact us if you have other questions.

Kind regards,
Martin
the Telerik team

[Robert]

Hi,

Thanks for getting back to me. What namespace should I add to my XAML so that the RadRichTextBoxStatusBar shows up?
Currently if I try to use what you have provided to me it doesn't work.

Current References:
T.Windows.Controls
T.Windows.Controls.Docking
T.Windows.Controls.GridView
T.Windows.Controls.Input
T.windows.Controls.Navigation
T.Windows.Controls.RibbonView
T.Windows.Data
T.Windows.Documents
T.Windows.Documents.FormatProviders.Xaml

 

I have the following telerik namespaces:

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:telerikXaml="clr-namespace:Telerik.Windows.Documents.FormatProviders.Xaml;assembly=Telerik.Windows.Documents.FormatProviders.Xaml"

xmlns:telerikDocking="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Docking"

Thanks,

Rob

[Martin Ivanov]

Hello Robert,

You need a reference to Telerik.Windows.Controls.RichTextBoxUI as well.
Get back to us, if you encounter any other issues.

Greetings,
Martin
the Telerik team

[Robert]

Hi,

Thanks for getting back to me. I have managed to add the StatusBar to my project, however I think that the binding doesn't seem to work as the zoom slider bar doesn't zoom the RichTextBox. I'm not quite sure what I'm doing wrong.

Is the "ScrollViewer" causing an issue do you think? see my complete Markup below (sorry it's quick long, I thought that you had better see the complete markup).

    <Grid Tag="Content" Background="LightGray" x:Name="RootLayout">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <!-- Scroll Viewer -->
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>

            <!-- RichTextBox -->
            <telerik:RadRichTextBox x:Name="radRichTextBox" AcceptsReturn="True" Width="800" Margin="10" Padding="10" Grid.Column="0"
                                    FontSize="14" IsSpellCheckingEnabled="False" DocumentInheritsDefaultStyleSettings="True"
                                    PreviewKeyDown="radRichTextBox_PreviewKeyDown"
                                    DocumentContentChanged="radRichTextBox_DocumentContentChanged"
                                    KeyUp="radRichTextBox_KeyUp"
                                    Loaded="radRichTextBox_Loaded"
                                    PreviewMouseDown="radRichTextBox_PreviewMouseDown">
                <telerik:RadRichTextBox.Effect>
                    <DropShadowEffect ShadowDepth="10" Color="Gray" Opacity=".4" Direction="320" RenderingBias="Performance" />
                </telerik:RadRichTextBox.Effect>
            </telerik:RadRichTextBox>

            <!-- AutoCompltete ListBox-->
            <telerik:RadListBox MinWidth="100" MaxHeight="250" x:Name="radListBox"
                                Grid.ColumnSpan="2" Visibility="Collapsed"
                                HorizontalAlignment="Left" VerticalAlignment="Top"
                                CanAutocompleteSelectItems="True" IsTextSearchEnabled="True" TextSearchMode="Contains" TextPath="Name"
                                ItemTemplate="{StaticResource AutoCompleteListBoxTemplate}"
                                ItemsSource="{Binding autoCompleteListItems}"
                                MouseDoubleClick="radListBox_MouseDoubleClick"
                                MouseUp="radListBox_MouseUp">
                <telerik:RadListBox.Effect>
                    <DropShadowEffect ShadowDepth="10" Color="Gray" Opacity=".4" Direction="320" RenderingBias="Performance" />
                </telerik:RadListBox.Effect>
            </telerik:RadListBox>

                <!-- XAML View -->
            <telerikXaml:XamlDataProvider Name="xamlDP" RichTextBox="{Binding ElementName=radRichTextBox}" Grid.Column="1" />
            <TextBox Name="textBox" Margin="10" TextWrapping="Wrap" AcceptsReturn="True" IsReadOnly="True"  Text="{Binding ElementName=xamlDP, Path=Xaml, Mode=TwoWay}" Grid.Column="1" >
                <TextBox.Effect>
                    <DropShadowEffect ShadowDepth="10" Color="Gray" Opacity=".4" Direction="320" RenderingBias="Performance" />
                </TextBox.Effect>

            </TextBox>
        </Grid>
    </ScrollViewer>
        <!-- Zoom Slider -->
        <!--<telerik:RadSlider x:Name="radSliderZoom" Minimum="1" Maximum="20" Width="400" Grid.Row="1" />-->
    <telerik:RadRichTextBoxStatusBar x:Name="radRichTextBoxStatusBar" Grid.Row="1" AssociatedRichTextBox="{Binding ElementName=radRichTextBox}" />
</Grid>

Thank you very much for your time.

Rob

[Robert]

Hi,

Sorry I have just realised the document is kind of zooming. The text in the RadRichTextBox is getting larger relative to the Slider in the ToolBar. However, I need the document width/height to expand as well as the text.

I've attached some images showing what is happening. Notice that the text is getting bigger but not the document.

Thanks,

Rob

[Robert]

Ok I think it does work. It isn't working because of the way I have explicitly set the size of my rich text box. By changing view modes the document appears to expand as expected.

I will get back to this thread if there are any more issues. Thanks again for your help.

rob