Technique SL31:Using Silverlight Font Properties to Control Text Presentation

Description

The objective of this technique is to change the presentation / visual appearance of text, by setting several of the font-specific properties in the Silverlight API. Changing such properties does not change the semantic meaning of the text, nor does it alter the representation of the text that is available to assistive technologies through the Silverlight support of the UIA accessibility framework. By using font properties, it is possible to introduce a wide variety of presentation changes to fonts that do not introduce semantic elements that interfere with an assistive technology's view of text in the Silverlight application. In particular, adjusting font properties will make it possible to avoid any need for use of images of text, yet still provide a wide range of choices for text presentation.

Silverlight font properties exist on all controls, as well as on other text elements that are not true controls. For controls, the font properties apply in any case where the control enables a presentation mode that has enclosed text areas in its layout. By setting Silverlight font properties, it is possible to adjust presentation of font features without changing the structural connotation of that control, or the value of any control-specific property that contains plain-text. For example, the FontSize property can be set on a Paragraph (not a control) or on a Button (a control, and in this case the font size changes apply to any text displayed in the button content area). Font properties are also inheriting properties, meaning that if applying a font property value to a container in a relationship, those font property values can apply to child elements in the relationship. For example, if a FontSize is applied to a RichTextBox, that FontSize value is used by default by all the Paragraph items displayed in the RichTextBox.

Similar to CSS, Silverlight font properties can be grouped as a Style. That Style can be applied to all instances of a text element type (for example to all cases of Paragraph) or specifically referenced as a resource that is only used by certain instances of a text element type. Either way, the Style feature enables the separation of presentation from semantics for text elements, and enables workflows where content authors supply the semantic text and design-oriented authors adjust the related Silverlight styles. For more information on the Silverlight concept of styles, see Control Customization on MSDN.

The following Silverlight font properties are useful to style text and avoid the need for text in images. Links in this list refer to the Control class version of these properties.

• The FontFamily property is used to display the code aspect in a monospace font family (specifically, FontFamily="Courier New").
• The FontSize property is used to display the text in a larger size.
• The FontStyle property is used to display text in italics.
• The FontWeight property is used to set how thick or thin characters in text should be displayed.
• The FontStretch property is used to control the spacing of letters in text.
• The Foreground property is used to display the color of text or text containers.
• The Background property can be used to display text on a non-text background.

So long as images of text are avoided, the text within a Silverlight text element can be reported to the UI Automation accessibility framework that Silverlight supports. That text is reported using the same basic text content as is used for semantic text display in the UI. In other words, exposing that text to assistive technologies that use UIA as a framework does not require the Silverlight application author to resort to automation-specific override properties such as AutomationProperties.HelpText; the automation peers for text elements report all necessary text content to automation as a built-in behavior of the text element controls. For more information on UI Automation and text containers, see .

Examples

<UserControl x:Class="DocumentStructure.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
   <UserControl.Resources>
       <Style x:Key="NewStyle" TargetType="Control">
           <Setter Property="FontFamily" Value="Arial"/>
           <Setter Property="FontSize" Value="30"/>
           <Setter Property="Height" Value="40"/>
       </Style>
   </UserControl.Resources>
   <StackPanel x:Name="LayoutRoot" Background="White">
   <RichTextBox IsReadOnly="True" Name="rtb" FontFamily="Algerian" FontSize="20">
           <Paragraph>Call me Ishmael. Some years ago--never mind how long precisely--having little or no money in my purse, 
           and nothing particular to interest me on shore, I thought I would sail about a little 
and see the watery part of the world. It is a way I have of driving off the spleen and 
regulating the circulation. Whenever I find myself growing grim about the mouth; whenever 
it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before 
coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my 
<Hyperlink NavigateUri="http://en.wiktionary.org/wiki/hypo">hypos</Hyperlink>
get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into 
the street, and methodically knocking people's hats off--then, I account it high time to get to sea as soon as I can. 
This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself 
upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, 
almost all men in their degree, some time or other, cherish very nearly the same 
feelings towards the ocean with me.
           </Paragraph>
           <Paragraph>There now is your
               <Hyperlink 
               NavigateUri="https://en.wikipedia.org/wiki/New_York_Harbor">insular city of the Manhattoes</Hyperlink>
, belted round by wharves as Indian isles by coral reefs--commerce surrounds it 
with her surf. Right and left, the streets take you waterward. Its extreme downtown is the 
battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours 
previous were out of sight of land. Look at the crowds of water-gazers there.
           </Paragraph>
           <Paragraph>Circumambulate the city of a dreamy Sabbath afternoon. 
Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?
--Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men 
fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; 
some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving 
to get a still better seaward peep. But these are all landsmen; of week days pent up in lath 
and plaster--tied to counters, nailed to benches, clinched to desks. How 
then is this? Are the green fields gone? What do they here?
           </Paragraph>
       </RichTextBox>
       <Button Name="swapper" Click="swapper_Click" Width="220">Swap styles</Button>
   </StackPanel>
</UserControl>

       private void swapper_Click(object sender, RoutedEventArgs e)
       {
           rtb.Style = this.Resources["NewStyle"] as Style;
       }

Related Resources

No endorsement implied.

• RichTextBox Overview
• Control Customization

Related Techniques

• G140: Separating information and structure from presentation to enable different presentations
• C22: Using CSS to control visual presentation of text

Tests