This is a migrated thread and some comments may be shown as answers.

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

10 Answers 203 Views
RichTextBox
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 30 Apr 2012, 01:49 PM
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

10 Answers, 1 is accepted

Sort by
0
Robert
Top achievements
Rank 1
answered on 30 Apr 2012, 05:23 PM
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.
0
Robert
Top achievements
Rank 1
answered on 30 Apr 2012, 05:32 PM
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.

0
Martin Ivanov
Telerik team
answered on 03 May 2012, 02:02 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Robert
Top achievements
Rank 1
answered on 03 May 2012, 05:31 PM
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.
0
Martin Ivanov
Telerik team
answered on 08 May 2012, 05:37 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Robert
Top achievements
Rank 1
answered on 09 May 2012, 03:07 PM
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: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
0
Martin Ivanov
Telerik team
answered on 14 May 2012, 11:51 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Robert
Top achievements
Rank 1
answered on 15 May 2012, 01:12 AM
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
0
Robert
Top achievements
Rank 1
answered on 15 May 2012, 01:48 AM
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

0
Robert
Top achievements
Rank 1
answered on 16 May 2012, 11:40 PM
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 
Tags
RichTextBox
Asked by
Robert
Top achievements
Rank 1
Answers by
Robert
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or