Mango : How to use RichTextBox in Windows Phone 7.1

Today I am going to talk about RichTextBox, I know you must be having lot of expectations from this RichTextBox. Here I will try my best to make you aware of what will work and what will not work in this short post for RichTextBox in Windows Phone 7.1

RichTextBox control is not new for Silverlightians, We have already seen amazing implementation of the same in Apps developed using Silverlight on top of RichTextBox Control.It is supported in Silverlight ver. 4 & 5 and now in Windows Phone 7.1

Use of RichTextBox is to display text in rich format which includes images and hyperlinks and also various styles of font,font family and sizes in formatted form. You can find RichTextBox control in System.Windows.dll, v2.0.50727 and you can invoke the same using Namespace System.Windows.Controls where RichTextBox Class is inherited from Control Class and it exposes various properties and events.

To add RichTextBox control on your design layout of your Windows Phone 7.1 you don’t need to add any extra references and stuff however you will find that RichTextBox though its part of System.Windows.Controls does not sit in Toolbox. So all you need to do is put a Container as StackPanel and hit Control + Space and pick RichTextBox from intellisense.

<StackPanel>
       <RichTextBox … />
</StackPanel>

It will look like this on your Designer inside Visual Studio :

Please make a kind note that there is no design support for RichTextBox in Windows Phone 7.1, Also no default style present so I used Static Resource, Firstly I fumbled a lot and saw that output was not coming on the phone.

Well, Before I move ahead please make note of this :

• RichTextBox does not have Default Style
• It is not part of your Toolbox but also you don’t need to add any extra references,you can find it in intellisense
• It supports FlowDirect property so you can have RightToLeft and LeftToRight flow of text
• However by default it is in ReadOnly mode so at the moment with current bits you cannot play with it beyond limit
• Hyperlinks and Images can be part of content but since currently this control is in ReadOnly mode hence these features might not add value
• Indic does not getting displayed thought with Mango core platform goes as Silverlight 4. Indic simply breaks..Sorry for my friends in India for this
• Like Silverlight 5 Beta RichTextBox, It does not supporting any OverflowContentTarget so as to push text in next RichTextBox

Lets now see what all we can do with this :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
      <Run FontFamily="Lucida Sans Unicode"
       Text="春が来た
                春が来た 春が来た どこに来た
                山に来た 里に来た 野にも来た

                花が咲く 花が咲く どこに咲く
                山に咲く 里に咲く 野にも咲く

                鳥がなく 鳥がなく どこでなく
                山でなく 里でなく 野でもなく"/>
      </Paragraph>
      </RichTextBox>
</StackPanel>

This will look like following on your emulator :

Kindly make note that though its Non English language here or symbolic that does not mean you cannot apply styles. You can very well make such text Bold,Italic and Underline.

To emphasize my bulleted point above about Language rendering capability and FlowDirection, here is a small piece of XAML to showcase Arabic text flowing from LeftToRight :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
       <Run FontSize="24" FontFamily="Lucida Sans Unicode" 
         Text="مرحبا! أنا فيكرام من الهند وأنا أتعلم اللغة العربية" />    
      </Paragraph>
      </RichTextBox>
</StackPanel>

and it will look like this on your emulator :

As I mentioned above that you can make Text as Bold Italic and even you can insert Hyperlink, for that here is a small piece of XAML to showcase that area :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
          <Run FontFamily="Lucida Sans Unicode" Text=" Windows Phone Developer Tools 7.1 Beta makes significant strides forward, and enables you to build many classes of applications that were not previously possible. "/>
            <Bold Foreground="Yellow">I am Bold !</Bold>
                <Italic Foreground="Green">I am Italic ! </Italic>
                <Underline Foreground="Gold"> Its line under me !! </Underline>
    A first look at the new <Hyperlink NavigateUri="http://www.buildwindows.com">"Windows 8"</Hyperlink> user interface.  
      </Paragraph>
      </RichTextBox>
</StackPanel>

and it will look like this on your emulator :

No wonder that we can always play with it from Code behind, Well if you want to see XAML behind this in your app then you can also use snippet like this :

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
     MessageBox.Show(txtMyRTBx.Xaml.ToString());
}

This will show the Xaml piece of code on screen like this :

So that’s all I want to share on this topic at the moment,Being ReadOnly it pulls me back from lot of ideas but I am sure I will be putting up amazing and crazy samples in coming days, I don’t want to bombard you with <bold><italic> and <Underline> etc tags in the post so I pushed some language support in between which I hope you will like it very much. I know by looking at that language you will surely give try to your local language and build app on top of it. Go ahead and enjoy every bit of this control.

As I said above,I don’t want to waste your valuable time in small small snippets on <bold><italic> so if you still want to dig down on this, you can visit this MSDN Page where you will get all relevant stuff about usage of RichTextBox. So check that out, meanwhile I will go back and come here with some more cool stuff on Mango and Silverlight in coming week. So have a great weekend ahead with Mango and Silverlight 5 !

Vikram.

*Note : I used Translator tools for Arabic and Japanese demos here, I know Japanese because I learn that for 2 years but I do not know anyting about Arabic, So if you find the Arabic or Japanese Text in above demo irrelevant or not grammatically correct then please forgive me since its only used for demonstration purpose.