Edit long content of text in Win Phone 7

There are many scenarios where you need to display and edit long chunck of text in your WP7 application.
Editing text is easy with TextBlock, but there are problems when the content you’d edit is longer than approx. 2000 characters, since any UI element that must be displayed beyond the area which is larger than 2048×2048 pixels would be clipped by the platform. If you try that, you will see that the size of the TextBlock is still as if it contains all the characters, but the bottom of it is just blank.

Display long content of text
There are different work arounds to this limitation, that are pretty simple to implement if you just need to display text:
1. Break out the text into a separate blocks, and create a TextBlock for each of this text blocks (details here: http://blogs.msdn.com/b/priozersk/archive/2010/09/08/creating-scrollable-textblock-for-wp7.aspx).
2. Just use a WebBrowser control, load the content into a simple HTML document string, and display it on the screen.

Edit long content of text
Editing the content instead is not that easy as displaying it.
You can see an implementation of the text editor I’m going to explain below in Evernote app, and soon in the WordPress app. Basically you should do the following:

  • Use a WebBrowser control
            <phone:WebBrowser x:Name="browser"
                              Style="{StaticResource BrowserBoxStyle}"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"
                              IsScriptEnabled="True"
                              ScriptNotify="browser_ScriptNotify_1"
                              Margin="15,10,15,10" Height="Auto" Width="Auto">
            </phone:WebBrowser>
    

    Remember to set IsScriptEnabled="True".

  • Create a template HTML document with a div tag in it, that has the contentEditable=true.
  • Load the content into a string, and if targeting WinPhone 7.1 you even need to replace any character that doesn’t fall in the ASCII character set with their numeric entity.Major details here, and here.
  • Include the content into the template and use the method browser.NavigateToString(content);

To retrieve the edited content call innerHTML on the HTML element that holds it. You can define a JS method and call it from C#.
Below is an example of JS function that returns the content of the text available in the div.

      function getContent() {
           return document.getElementById("example-one").innerHTML;
      }

And you can call the JS function from C# code with a simple method like the one below:

object result = browser.InvokeScript("getContent");

Just for the record, it’s possible to call any JS function, even with parameters, as shown below:

object[] parameters = new object[] { 'parameters list here' };
object result = browser.InvokeScript("name of the JS function", parameters.Select(c => c.ToString()).ToArray());

It’s even possible to add a toolbar/menu in the PhonePage (XAML/C#), and call JS methods that programmatically modify the content of text.
C# button -> C# events handler function -> JS function -> execCommand.

4 thoughts on “Edit long content of text in Win Phone 7

  1. Ren Lin

    did you find that the editor can not load and then edit a large content , such as the text content’s size over 1.2M

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s