Displaying Text

The Text class is based on the UIElement class, but adds properties and methods to manage the text that it is to display. We have already seen the Text element in our examples; now it is time to examine how it works a little more closely.

The Text element uses a Font to render the text. The font resource is exactly the same as that used to render text using the Bitmap class. These are loaded and assigned to a particular text element. You can use different fonts for different text elements, depending on your requirements.

 Text text = new Text(); Font ninaB = Resources.GetFont(Resources.FontResources.NinaB); text.Font = ninaB; 

You can also select the alignment and wrapping behavior of the text.

 text.TextWrap = true; text.TextAlignment =    Microsoft.SPOT.Presentation.Media.TextAlignment.Left; 

The alignment can be set as Left, Right, or Center. If TextWrap is set to false, any text that is longer than the width of the display available for the text control will not be displayed.

If the string of text to be displayed is larger than the area available to the text element, the text will be cropped. You can calculate the area of text required by using the ComputeTextInRect method on the selected font. We already used this method when drawing text with the Bitmap class previously; when using it with a text area, it can be supplied with an additional parameter that gives the width of the area into which the text is to be drawn.

 int renderWidth, renderHeight; string content = "Text that is to be fitted into the window"); ninaB.ComputeTextInRect(    content,                                     // string to be measured    out renderWidth,                             // width result    out renderHeight,                            // height result    win.Width);                                  // width of the target area 

This call would set the renderWidth and renderHeight variables with the required width for the text. It is supplied with the width of the destination window. If the renderHeight value is greater than the height of the window, the text is too large.

Creating a Paged Display Component

At the moment, there is no way to display pages of text in a window on the display. However, we can create a new kind of display element that will manage this for us. We will do this by overriding the Panel display element and adding our own draw behavior.

 public class PagedTextPanel : Panel 

We can now create customized behavior for the PagedTextPanel that we are about to create. It turns out that the only method we need to override is OnRender. The WPF calls it to ask our panel to draw itself. We can make use of the paged text display method used with our Bitmap text writer to get the required behavior.

 public override void OnRender(DrawingContext dc) {    if (this.Visibility == Visibility.Visible)    {       // get the offset into the bitmap of our container       int left, top;       Parent.GetLayoutOffset(out left, out top);       // draw a rectangle to clear the background       dc.Bitmap.DrawRectangle(         Background,                              // background color         1,                                       // border thickness         left, top,                               // offset into bitmap         this.Parent.Width,                       // width to draw         this.Parent.Height,                      // height to draw         0, 0,                                    // corner radii         Background, 0, 0,                        // gradient start         Background, 0, 0,                        // gradient end         0xff);                                   // opacity      int relX, relY;      // move to the top of the rectangle      relX = 0;      relY = 0;      // copy the curent string      nextString = textValue;      // draw this page of text      bool result = dc.Bitmap.DrawTextInRect(         ref nextString,                          // remainder of string         ref relX,                                // start X         ref relY,                                // start Y         left + marginValue,                      // left position         top + marginValue,                       // top position         this.Parent.Width - marginValue,         // width of text area         this.Parent.Height - marginValue,        // height of text area         (uint)textAlignmentValue,                // alignment         Foreground,                              // text color         TextFont);                               // font    } } 

When the OnRender method is called, it receives a reference to a DrawingContext instance that contains the destination Bitmap that will be the target of the draw action. This is effectively the entire display buffer. We want to affect only the area underneath the text element itself, which can be determined by getting the offset of our parent panel and also its Width and Height. The draw action is very similar to the previous example.

The alignment option is specified by the value of an enumerated type that we create to hold the allowable values.

 public enum Alignment {    LeftTextRun = 0,    Left = 1,    CenterTextRun = 2,    Center = 3 } 

An enumerated type can be given a range of values. In the case of the alignment values, these are actually going to map onto setting values to be used by the method DrawTextInRect.

With this in mind, we assign the numbers as required. Then, in the call of the method, we can cast the enumerated type to an unsigned integer that will get the desired display.

The actual value of the alignment property is held within the PagedTextPanel instance. This is so that we can capture the set behavior and request that the panel be redrawn when the alignment of the text in it changes.

 private Alignment textAlignmentValue; public Alignment TextAlignment {    get    {       return textAlignmentValue;    }    set    {       textAlignmentValue = value;       Invalidate();    } } 

A property is used exactly like a member variable, but it results in get and set behaviors executing when the program reads or assigns it, respectively. Thus, when the alignment changes, the program redraws the text display without the control element taking any further action.

 panel.TextAlignment = PagedTextPanel.Alignment.Center; 

We can use the same technique to manage all the properties of the text display so that changing any one of them will result in an immediate redraw.

When the user wishes to move on to the next page of the paged display, the control provides a method that sets the next page of text to that set by the call of DrawTextInRect. If this is an empty string, the method returns false to indicate that the end of the string has been reached.

 public bool nextPage() {    if (nextString == null)    {       return true;    }    else    {       Text = nextString;       return false;    } } 

There is not enough space to include the complete code of this class, but a fully working version and sample code are at the Web site for this book.