HowTo: Change Mouse Cursor for C1RichTextBox Table Element

In this blog lets discuss how we can change the mouse pointer over a table in a ComponentOne RichTextBox document. For example if we have a document in ComponentOne RichTextBox which contains a paragraph and a table and we want that the table should behave differently from the whole paragraph. If we hover the mouse over paragraph and in between there is a table in it the mouse cursor remains the same. Here we would want that the mouse pointer should remain same for the paragraph but different for the table. This is to discriminate between a Table and a paragraph. Have a look at the image below. MouseCursorChanging Here in above image we have changed the mouse cursor when it comes over the text in table. Lets discuss how to achieve this. Lets start by putting some text document in ComponentOne RichTextBox first by converting an HTML string which contains a 2x3 table.


   string myHTMLString =  
@"<html><head><style type='text/css'>.c0 { font-family: 'Verdana'; font-size: 18.6666666666667px } .c1 { margin: 0px 0px 12px } .c2 { font-family: 'Arial'; font-size: 13.3333333333333px } .c3 { margin: 0px 0px 10px } .c4 { border-collapse: collapse; width: 100% } .c5 { width: 33% } .c6 { border-color: Black; border-style: solid; border-width: thin; padding: 0px 7px } .c7 { margin: 0px } .c8 { font-family: 'Arial'; font-size: 13.33px } </style></head><body class='c0'><p class='c1'><span class='c2'>This table has 2 rows and 3 columns. Mouse pointer wil change to hand cursor when hovered over the table text.</span></p><p class='c3'><span class='c2'>&#x200b;</span></p><table class='c4'><col class='c5'/><col class='c5'/><col class='c5'/><tr><td class='c6'><p class='c7'>row1 col1</p></td><td class='c6'><p class='c7'>row1 col2</p></td><td class='c6'><p class='c7'>row1 col3</p></td></tr><tr><td class='c6'><p class='c7'>row2 col1</p></td><td class='c6'><p class='c7'>row2 col2</p></td><td class='c6'><p class='c7'>row2 col3</p></td></tr></table><p class='c3'><span class='c2'>&#x200b;</span></p><div><p class='c1'><span class='c8'>This table has 2 rows and 3 columns. Mouse pointer wil change to hand cursor when hovered over the table text.</span></p></div><p class='c3'><span class='c2'>&#x200b;</span></p></body></html>";

We can use HTMLFilter's ConvertToDocument() method to get a document from the above HTMLstring.


   C1RichTextBox1.Document = C1RichTextBox1.HtmlFilter.ConvertToDocument(myHTMLString);

Now to get the ComponentOne RichTextBox's table element listen to ElementMouseMove event and change the mouse cursor when it is over the text part of Table.


   void C1RichTextBox1_ElementMouseMove(object sender, MouseEventArgs e)  
      {  
         var element = sender as C1TextElement;  
         if (element != null && element.GetParents().Any(p => p is C1Table))  
            {  
               C1RichTextBox1.Cursor = Cursors.Hand;  
            }  
         else  
            {  
                C1RichTextBox1.Cursor = Cursors.IBeam;  
            }  
      }

In the code above we are checking if the mouse pointer is over the C1TextElement and if it's parent element is C1Table. If yes we change the cursor to Hand cursor otherwise it will be a IBeam cursor for whole ComponentOne RichTextBox document. WPF_Sample Silverlight_Sample

MESCIUS inc.

comments powered by Disqus