Tag Archives: windows phone

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.

IE10 Compatibility List

Sometimes on IE10 websites don’t look like you expect them to: images might not appear, menus might be out of place, and text could be jumbled together. This might be caused by a compatibility problem between Internet Explorer and the site you’re on.
I found out yesterday that IE10 checks a compatibility list before opening a web site. That compatibility list defines a list of web sites that are automatically displayed in Compatibility View.
It even changes the UA string if the site you’re loading is in that list. On my Windows Phone 8 device the UA string was switched to Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; NOKIA; Lumia 820)¬†instead the original UA string I was expecting on the server was something like this:¬†Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone OS 8.0; Trident/6.0; IEMobile/10.0; ARM; TOUCH; NOKIA; Lumia 820).

The Compatibility List is available here: http://cvlist.ie.microsoft.com/ie10/201112/iecompatviewlist.xml

More resources about the Compatibility View are available on the links below:

Seems that there is no way to disable the Compatibility mode on mobile, but I’m still investigating this. If your site is in that list, you need to fix the page, and fill the form at the bottom of the page in the link above.

Debugging the PhotoChooserTask and other media related tasks on WinPhone 7

Some choosers, such as the PhotoChooserTask, can’t be accessed while the Zune software is running because it locks the local media database. Fortunately there is a tool that solves the problem by removing the need to have “Zune” running during the debug session. It’s called the Windows Phone Connect Tool. Details and instructions here.