silverlight 2 - expression blend - text & typography

This section includes topics that describe how to work with controls that display text. Some of these are simple controls, such as a Button. Others are special Windows Presentation Foundation text controls that allow for input or rich text editing.

In This Section

Conceptual Text and typography overview

How to Add a text control to the artboard

Add an object to text flow

Edit text

Format text

Format paragraphs

Indent a line or a paragraph

Set text wrapping

Make text editable or read-only

Check spelling

Change the color of text objects

Create a bulleted or numbered list

Create a hyperlink in a Page document

Convert text to a path

Add a custom font to your application

Embed a font or a subset of a font in your application

Open the Font Manager

Try it! Try it: Create a FlowDocumentReader control

Try it: Create a hyperlink that opens a browser window

See also Concepts

Animate the points on a path or clipping path

Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.

Text and typography

Text and typography overview

of 22Text and typography

6/16/2009file://C:\Windows\Temp\~hh3BC9.htm

Use a text control to display text in your application. This can include text that your user can modify, text that labels parts of your application, long passages of text with scrollbars, or text that is dynamically bound to data (see Bind data to a property or element).

Some controls are considered text controls because they display text (such as a button or check box). However, these other controls do not allow for rich-text editing. For this reason, Microsoft Expression Blend includes a set of special text controls.

Special types of text controls

Text control

Supports rich text, shapes,

and images

Editable at

runtime

Available in

Microsoft Silverlight

1.0 projects

Available in

Microsoft Silverlight 2 projects

TextBox

Provides an editable region that accepts text input. Use this control when you want users to be able to enter new text or edit existing text in your application. You can specify the font of the text at design time.

No Yes No Yes

RichTextBox

Provides the same functionality as a TextBox object, but supports more text formatting properties and can contain any other type of object, such as an image or shape. Use this control when you want users to be able to enter rich text in multiple fonts with images and other objects. You can copy and paste content from most applications, including Microsoft Office Word and Internet Explorer.

Yes Yes No No

TextBlock

Provides a block of static text that the users of your application cannot edit. A TextBlock can contain any other type of object, such as an image or shape. Use this control when you must give instructions to your users, or to communicate information that doesn't require editing. Note that although text in this kind of control cannot

Yes No Yes Yes



be edited by users of your application, you can change the text through the code-behind file. You can copy and paste content from most applications, including Microsoft Office Word and Internet Explorer.

PasswordBox

Provides basic password functionality. Use this control to promote privacy in your application. When you do this, text that a user enters in the text control is masked by showing bullet point characters ( ), or another character that you specify in the PasswordChar property, instead of the characters that the user types.

No Yes No Yes

Label

Provides a block of static content that you can use for basic labeling of other controls or user interface elements. A Label can contain text or content (such as an image or shape) but not both text and content at the same time. Additionally, this control provides mnemonic support, which offers functionality for keyboard accessibility and navigation through labeled controls that the user can access by pressing the ALT key in Windows-based applications.

No No No No

FlowDocumentScrollViewer

Provides a block of static text with a scrollbar that the user can use to navigate through the text. It can also contain any other type of object, such as an image or shape. You can set properties for this control under Miscellaneous in the Properties panel to hide or show the vertical and horizontal scrollbars.

Yes No No No



Back to top

Working with text controls Many aspects of working with text controls are the same as working with any other objects or controls in Expression Blend. As with other objects, you can set the size and other layout properties of text control objects under Layout and Transform in the Properties panel. Likewise, you can set visual properties under Brushes and Appearance.

Certain attributes are unique to text control objects. You can modify these attributes in the following areas of the Properties panel, depending on the type of text control you are using:

Text Change typographic properties such as font and paragraph alignment.

Brushes and Appearance Change visual properties such as color and opacity.

Layout and Transform Change size, layout, shape, and positioning.

Common Properties and Miscellaneous Change functional properties such as whether a text box includes a scroll bar.

Back to top

Modifying the content of a text control To modify the content of a text control at design time in Expression Blend, select the control and press F2, or double-click the control on the artboard. When in this editing mode, you can set the properties in the preceding list, or type text directly into the control. You can also copy content from another source (such as a web page or Microsoft Word document) and paste it into the text control. If you copy rich text and other objects, the formatting and objects will be preserved if you are pasting into the RichTextBox, TextBlock, or FlowDocumentScrollViewer controls. Images can also be added to these text controls by dragging the image from under Files in the Projects panel, or from outside Expression Blend. For more information, see Edit text.

You can also set the content of a text control by binding the relevant property (for example, the Content property of a Button or the Text property of a TextBlock) to data. For more information, see Data handling overview and Bind data to a property or element.

Back to top

Making text editable in your application You can control whether users of your Expression Blend application can change the text that is contained in certain types of text controls (TextBox, RichTextBox, PasswordBox) in the application. For example, you can control whether users can enter new values or change existing values, or whether the text in your application is read-only. You can also disable text boxes in your application, so that functionality such as selection or scrolling is unavailable. By default, text boxes that you add to your application are editable and enabled. For more information, see Make text editable or read-only.

Back to top

Formatting text Options for formatting text in Expression Blend appear under Text in the Properties panel. By setting these properties, you can control characteristics of the text in your application. These characteristics include font size and style, line height, paragraph spacing, text alignment, list style, and other typographic options. For more information, see Format text, Format paragraphs, Indent a line or a paragraph, or Create a bulleted or numbered list.

You can set additional properties to format your text under Common Properties in the Properties panel. These properties enable you to control text wrapping, to set whether the text is read-only or is editable by users of your application, and more. For more information, see Set text wrapping and Make text editable or read-only.

You can set the color of your text by setting properties under Brushes in the Properties panel. For more information, see Change the color of text objects.

Back to top

Note:If you want to animate formatting properties, then do not specify the properties when in text-editing mode (F2). Instead, press the ESC key to exit text-editing mode and then set the properties on the text object itself.



Laying out text You can use text controls in Expression Blend in layout containers, just as you can any other object, and you draw them the same way. The text control shows more or less of its content depending on how you size the layout container. Additionally, RichTextBox, TextBlock, Label, and FlowDocumentScrollViewer text control objects themselves can contain other objects or controls.

When you put a text control in a layout container, you can anchor the edges of the text control to the edges of the container by using margins. When you set a margin and link alignment to that edge, the text control resizes to always keep that relationship intact. You can control the size of a text control even more by letting the text control expand or decrease either to the container (auto-size) or to the container with a minimum and maximum limit set, or by fixing the size of the control to absolute values.

Back to top

Transforming text You can transform text control objects in Expression Blend just as you can any other vector object. Text in a text object remains editable even after you transform the object. Additionally, any changes that you or users of your application make to the content of a text control object, whether the changes are made during design time or during run time, will inherit the transformation that is applied to the parent control.

Back to top

Font embedding Expression Blend 2 contains new functionality for embedding fonts in your project. Embedding makes sure that the font that you select for your application is the font that users will see when they run your application. Typically, users will already have most of the fonts that you can select in Expression Blend, and therefore you do not have to embed them. If the user does not have your chosen font, a default system font will appear.

For the fonts that come with Expression Blend, see the Microsoft Software License Terms (EULA.language.rtf) file for full license terms. For other commercial fonts, see the Microsoft Typography website for information that can help you locate a particular font vendor or find a font vendor for custom work. To embed fonts in an Expression Blend application, you can use the new Font Manager available in the Tools menu and available in the Advanced Properties section under Text in the Properties panel when you select a text control. For information about how to embed fonts in an Expression Blend application, see Add a custom font to your application or Embed a font or a subset of a font in your application in this user guide, or see Packaging Fonts with Applications on MSDN.

Back to top


Adding a text control to the artboard is the same as adding any other control to the artboard. The difference is that if the control is one of the special types of text controls, Microsoft Expression Blend immediately enters text-editing mode, so that you can modify the text.

To add a text control to the artboard 1. With a document open in Design view of Expression Blend, select a control that displays text (such as a Button, a TextBlock, and so

on) from the Toolbox or from the Asset Library.

2. Draw the control on the artboard with your pointer, or double-click the control in the Toolbox to insert the control at its default size.

Note:Only the Canvas layout container is available in a Silverlight 1.0 project.

Important:If you do decide to embed, subset, or otherwise redistribute fonts in your application, it is your responsibility to make sure that you have the required license rights for those fonts.

Note:Font embedding is not available in a Silverlight 1.0 project.

Add a text control to the artboard



3. If the control is one of the special types of text controls, Expression Blend enters text-editing mode and positions your cursor at the start of the text. You can exit text-editing mode by pressing ESC, and you can re-enter text-editing mode by pressing F2.

See also Concepts

Edit text Format text


The text control objects RichTextBox, TextBlock, Label, and FlowDocumentScrollViewer in Microsoft Expression Blend can contain other objects, such as images, shapes, and other text controls. After you add an object to one of these text controls, you can drag the object to wherever you want it to appear in the text.

For information about how to add one object to another object, see Add an element to a layout panel.

To add an object to a text object 1. Under Objects and Timeline, double-click the RichTextBox, TextBlock, Label, and FlowDocumentScrollViewer object to which you

want to add an element.

Notice that a yellow highlight appears around the object to indicate that it is now the active element. Any new object created on the artboard is always added as a child element of the active element.

2. Do one of the following:

Drag an image file from outside Expression Blend onto the artboard over the text object.

Right-click an image in the Project panel, and then click Insert.

From the Toolbox, select one of the drawing tools (for example, Ellipse or Pen ) and then draw the element in the text control.

From the Toolbox or the Asset Library , select a control (for example, a Grid panel or Button ), and then draw the element in the text control.

3. Drag the object to the desired location in the text object.


In Microsoft Expression Blend, you can edit text that is displayed in text controls directly on the artboard.

Add an object to text flow

Caution:You can also add an object to content controls (such as a Button), but the object will replace any existing text because those controls can contain only one child element.

Edit text

Note:You can edit the text that is displayed in any control that contains text, such as a Button or ComboBoxItem. However, some text controls do not allow for rich text editing like the RichTextBox or TextBlock control do.



To edit text

1. Select the text object that you want to edit, by using either the Selection tool or the Direct Selection tool, or by selecting the text object under Objects and Timeline.


Double-click the text control on the artboard, to set the cursor in the text box.

Right-click the text box and then click Edit Text.

Press F2.

Expression Blend enters text-editing mode for the control.

3. When in text-editing mode, you can set formatting properties under Text in the Properties panel, and you can type text directly into the control. You can also copy content from another source (such as a web page or Microsoft Word document) and paste it into the text control. If you copy rich text and other objects such as images, the formatting and objects will be preserved if you are pasting into a RichTextBox, TextBlock, or FlowDocumentScrollViewer control.

See also Concepts

Format text Add an object to text flow


You can use the Font properties in Microsoft Expression Blend to format the text in your application. If you use a RichTextBox, TextBlock, or FlowDocumentScrollViewer object, you can selectively apply formatting to particular words or characters in the object. With all other text object types, the formatting properties that you set will affect all text in the object.

To set font properties

1. Select the text object that contains the text that you want to format, by using either the Selection tool or the Direct Selection tool.

2. To format only part of the text in a TextBlock or RichTextBox object, right-click the object, click Edit Text, and then drag the pointer to select the text that you want to format. Otherwise, continue to the next step.

3. In the Properties panel, under Text, click the Font tab, and then do one or more of the following:

Select a font from the FontFamily list to change the font for the text.

Select a size from the FontSize list to change the size of the text.

Click Bold to make the text bold.

Click Italic to italicize the text.

Tip:You can also let users of your application modify the text that is contained in certain types of text controls (TextBox, RichTextBox, PasswordBox) in the application, or you can make the text boxes read-only. You can also specify whether users can undo their edits. For more information, see Make text editable or read-only.

Format text

Note:You cannot animate the properties under Text in the Properties panel except for the FontSize property. If you animate the FontSize property, you must set the property for the whole object (in other words, you cannot animate the FontSize property when you are in text-editing mode).



Click Underline to underline the text.

See also Concepts

Edit text Format paragraphs Add an object to text flow


You can align text relative to the bounding boxes of the objects that contain the text in your Microsoft Expression Blend application, for text that is contained in TextBox, TextBlock, or RichTextBox objects. Specifically, you can align text to the left, right, or center, or you can justify the text to the left and right edges of the bounding box that contains the text. For RichTextBox objects, you can set the alignment of individual paragraphs separately, and you can also control the line height and paragraph spacing of text in the objects.

To align text in a TextBox, TextBlock, or RichTextBox object

1. Select the TextBox, TextBlock, or RichTextBox object that contains the text that you want to align, by using either the Selection

tool or the Direct Selection tool.

2. In the Properties panel, under Text, click the Paragraph tab.

3. Set the Text Alignment as you want.

To set line height or paragraph spacing for text in a RichTextBox object

1. Select the RichTextBox object that contains the text that you want to format, by using either the Selection tool or the Direct

Selection tool.

2. To format individual paragraphs separately in the text object, right-click the object, click Edit Text, and then click to position your cursor anywhere in the paragraph that you want to format. Otherwise, to uniformly format all paragraphs in the object, continue to the next step.

3. In the Properties panel, under Text, click the Paragraph tab, and then do one or more of the following:

Set the Line Height property as you want to set the amount of space between every pair of lines in the paragraph or paragraphs.

Set the Paragraph Spacing Before property to set the amount of space that comes before the paragraph or paragraphs.

Set Paragraph Spacing After to set the amount of space that follows the paragraph or paragraphs.

Format paragraphs

Note:If you are in text-editing mode for a TextBox or TextBlock object, the Text Alignment button will not be enabled. Press the ESC key to exit text-editing mode and to enable Text Alignment.

Note:RichTextBox is not available in Silverlight 2.




You can indent text that is contained in RichTextBox objects in Microsoft Expression Blend in the following ways:

Indent the first line of a paragraph.

Indent the whole left edge of a paragraph.

Indent the whole right edge of a paragraph.

You can apply one or more of these different kinds of indents to a single paragraph. If your text object contains multiple paragraphs, you can apply indent properties to each paragraph separately in the object, or you can apply properties collectively to all paragraphs in the object.

To indent a paragraph

1. Select the RichTextBox object that you want to format, by using either the Selection tool or the Direct Selection tool.

2. To format only part of the text in the object, right-click the object, click Edit Text, and then drag the pointer to select the text that you want to format. To format only one paragraph at a time, position your cursor somewhere in the paragraph that you want to format. Otherwise, continue to the next step.

3. In the Properties panel, under Text, select the Line Indent tab.

4. Set the Left Indent , Right Indent , and First Line Indent properties as you want.


You can control whether text that is contained in a TextBox or TextBlock object in Microsoft Expression Blend will wrap onto multiple lines when the text cannot fit within the width of the text box object.

To set text wrapping

1. Select the TextBox or TextBlock object that you want to format, by using either the Selection tool or the Direct Selection tool.

2. In the Properties panel, under Text, click the Show advanced properties button to see the TextWrapping property.

3. Click the TextWrapping value, and then click one of the following options:

No Wrap, to prevent text from wrapping. This option confines each line of text to a single line regardless of the width of the text box.

WrapWithOverflow, to allow the text to break onto multiple lines when the lines of text in the object are longer than the width of the text box. This makes sure that the text will fit within the width of the text box. Note that this option does not wrap single words on individual lines; if a word on a line by itself is longer than the width of the text box, part of the word will not be displayed.

Wrap, to make a line of text break across multiple lines when the line is longer than the width of the text box. This option also wraps an individual word onto multiple lines if the word is longer than the width of the text box.

Indent a line or a paragraph

Set text wrapping

Note:The TextBox control is not available in Microsoft Silverlight 1.0 projects.

Tip:If you do not see the TextWrapping property, you might be in text-editing mode (F2), which lets you change the text that is displayed incontrol. To exit text-editing mode, press ESC.



Wrap options for text


You can control whether users of your Microsoft Expression Blend application can edit the text that is contained within TextBox or RichTextBox objects in the application, or whether the text in those objects is read-only. If you set the text to be editable, you can also specify whether users can undo the last text edit that they performed.

To designate whether text can be edited 1. Select the TextBox or RichTextBox object that you want to format.

2. In the Properties panel, under Text, click the Show advanced properties button to see the IsReadOnly and IsUndoEnabled properties.

3. Select or clear the following properties:

IsReadOnly, to set whether users can edit the text in the object.

IsUndoEnabled, to set whether users can press CTRL+Z to undo text edits.



Tip:If you do not see the properties, you might be in text-editing mode (F2), which lets you change the text that is displayed in the control. Texit text-editing mode, press ESC.

Check spelling



When you start to modify text in a text object in Microsoft Expression Blend, the spelling checker automatically indicates, with a wavy red underline, all words in the text object that are not included in the current dictionary. You can select from a list of suggested alternative words to replace an underlined word, or you can decide to have the spelling checker ignore all instances of that word.

To check spelling

1. In the Toolbox, click either the Selection tool or the Direct Selection tool, and then click the text object in which you want to check spelling.

2. Right-click the text object and then click Edit Text or press F2 to enter text-editing mode.

3. Right-click any word in the text object that has a wavy red underline to see suggested alternative spellings for the word, and then use one of the following methods:

Click a word in the list to select it to replace the underlined word.

Click Ignore All to stop the spelling checker from underlining instances of the word during that session of checking the spelling.

To enable the spelling checker in your application (WPF only) Not only can you use the spelling checker to check the spelling in your application during design time, but you can also build the spelling checker into your application so that users can check spelling when they enter text in your application during run time.

1. In the Toolbox, click either the Selection tool or the Direct Selection tool, and then click the user-editable text object for which you want to enable the spelling checker in your application.

2. Make sure that you are not in text-editing mode by pressing the ESC key.

3. In the Properties panel, under Miscellaneous, select the SpellCheck.IsEnabled box.

See also Concepts



To set the color of text in Microsoft Expression Blend, you set properties under Brushes in the Properties panel. Depending on the type of text object that you use, you can set two or more of the following color properties:

Foreground The color of the text itself.

Background The background color of the text box that contains the text.

BorderBrush The color of the outline of the text box that contains the text.

To set the color of text 1. Do one of the following:

To format all the text in a text box, select the text control object by using either the Selection tool or the Direct Selection tool.

To format only some of the text in a TextBlock or RichTextBox text control object, click either the Selection tool or the

Note:The spelling checker feature is available only for English, French, German, and Spanish. To use additional language dictionaries with the spelling checker, install the Microsoft .NET Framework Language Packs from the Microsoft Download Center.

Change the color of text objects



Direct Selection tool in the Toolbox, right-click the text box object, click Edit Text or press F2 to enter text-editing mode, and then drag your pointer to highlight the text that you want to format.

2. In the Properties panel, under Brushes, select a property such as Foreground, and then use the brush options underneath to set the desired appearance. For more information about setting colors for a brush, see Apply a brush to an object's fill or stroke.


You can create bulleted lists in Microsoft Expression Blend, for text that is contained in RichTextBox or TextBlock objects.

To create a bulleted list

1. In the Toolbox, click either the Selection tool or the Direct Selection tool.

2. Right-click the RichTextBox or TextBlock object in which you want to create the list, and then click Edit Text or press F2 to enter text-editing mode.

3. Drag your pointer to highlight the text that you want to format as a bulleted list, or click to insert the cursor where you want to start a bulleted list.


In the Properties panel, under Text, on the List tab , select the type of Bullet Character that you want to apply, and then select an Indent at value to set the distance at which the text is indented from the bullet.

Press CTRL+SHIFT+L.


You can create a hyperlink inside a TextBlock object in a Page document that will navigate to another Page document in your application, or to a web page.

To create a hyperlink in a Page document

1. In the Toolbox, click either the Selection tool or the Direct Selection tool.

Create a bulleted or numbered list

Caution:The TextBlock control cannot contain a Windows Presentation Foundation list. For this reason, Expression Blend converts list bullets in a TextBlock into glyphs. For the best experience, use a RichTextBox to contain a bulleted or numbered list.

Create a hyperlink in a Page document

Important:You can create hyperlinks only in a Page document (on the File menu, select New Item) and thus in a NavigationWindow element. The linked-to topic must be a Page document in your application, or a web page. Additionally, you can apply a hyperlink to text only if the text is contained in a TextBlock. If you want to create a hyperlink that opens an Internet browser, you need to create a custom control or an event handler that responds to a mouse click. For more information see Try it: Create a hyperlink that opens a browser window. Another option is to create a TextBlock inside a Frame object (available in the Asset Library) in a Window document, and then paste a link into the TextBlock object. The Frame object will act like a mini browser window in your application.



2. Click to select the TextBlock object to which you want to add a hyperlink, right-click the object, and then click Edit Text.


To apply a hyperlink to existing text, drag to select the text.

To create a hyperlink from scratch, click where you want the hyperlink text to appear.

4. In the Properties panel, under Text, on the Font tab, click Hyperlink .

5. In the Create Hyperlink dialog box, enter the text that you want to be hyperlinked next to Hyperlink Text, enter the URL or URI (Universal Resource Identifier) for the link next to Hyperlink URI, and then click OK.

See also Concepts

Try it: Create a hyperlink that opens a browser window Create a hyperlink in a Silverlight application


When you change text to a path in Microsoft Expression Blend, the whole block of text becomes a single path that has vector points that define the shape of each character from the original text. After you convert text to a path, you can then release the resulting single path to multiple paths, with one path per character of text, plus one path per enclosed loop in a character (such as in an "o").

To convert text to a path 1. Select the TextBlock or RichTextBox object that contains the text that you want to change to a path.

2. Click the Object menu, point to Path, and then click Convert to Path.

3. To separate the resulting path into multiple paths, one path for each character in the text, click the Object menu, point to Path, and then click Release Compound Path.

4. To recombine any paths, such as those that make up a character with enclosed loops, select the paths (hold the CTRL key to select multiple items), and then click Create Compound Path under Path in the Object menu.

See also Concepts

Animate the points on a path or clipping path Change the shape of a curve Add or remove a point on a path


Typically, users will already have most of the fonts that you can select in Microsoft Expression Blend 2. However, you can add custom fonts

Convert text to a path

Caution:You can convert text to a path only if the text is contained in a TextBlock or RichTextBox.

Add a custom font to your application



to your project and then apply those fonts to text controls in your application. If you add a custom font to your application, you must embed it in your application for users to see the font.

For the fonts that come with Expression Blend, see the Microsoft Software License Terms (EULA.language.rtf) file for full license terms. For other commercial fonts, see the Microsoft Typography website for information that can help you locate a particular font vendor or find a font vendor for custom work. Expression Blend 2 supports embedding fonts that are contained in .ttf, .ttc, .otf, and .tte files.

To add a custom font to your application 1. In an open project in Expression Blend, under Files in the Project panel, right-click your project name, and then click Add Existing

Item.

The Add Existing Item window appears.

2. Browse to the custom font file (typically with a .ttf file name extension), select the custom font file so that it appears in the File text box, and then click Open.

The custom font file is added to your application and appears under Files in the Project panel.

3. You can now embed the complete font or a subset the font in your application, and apply the font to text controls in your application.

For more information, see Embed a font or a subset of a font in your application, and Format text.

See also Concepts


Important:If you decide to embed, subset, or otherwise redistribute fonts in your application, it is your responsibility to make sure that you have the required license rights for those fonts.

Note:Custom fonts are not available when you open a Microsoft Silverlight 1.0 project.



Embed a font or a subset of a font in your application Format text


After you have added a custom font to your application, you must embed the whole font or a subset of the font so that the users of your application will be able to see the font. Typically, users will already have most of the fonts that you can select in Microsoft Expression Blend 2, and therefore you do not have to embed them. However, you must embed a custom font so that your users will see it. If the user does not have your font, a default system font will be used to format your text.

To embed a font using the Font Manager 1. Open the Font Manager using one of the procedures from Open the Font Manager. The Font Manager window appears.

2. Under Embed Fonts, select the check box next to the font that you want to embed, select the font name by clicking it, and then, under

Subset Characters, do one of the following:

To embed the whole font, select the All Glyphs check box.

To embed only those characters that you use in your application, select the Auto Fill check box.

To embed a static subset of the font, select one or more of the remaining character sets under Subset Characters. You can also enter individual characters in the Include Glyphs text box to embed those characters.

To embed a font while modifying a text control

Embed a font or a subset of a font in your application


Note:Font embedding is not available when you open a Microsoft Silverlight 1.0 project.



1. Select the object that contains the text that you want to format, by using either the Selection tool or the Direct Selection tool.

2. If your text object supports rich text, press F2 to enter text-editing mode for the object, and then select the text that you want to format.

3. In the Properties panel, under Text, click the Font tab, and then select your custom font from the FontFamily drop-down menu. (Custom fonts are displayed at the top of the list.

4. Select the Embed check box to embed the font in your application.

5. Next to the Embed check box, in the Subset selection drop-down menu, do one of the following:

To embed the characters that are used in the selected object, select Static. Use this option when you know that the text will not be updated at runtime.

To embed all the characters in the font, select Dynamic. Use this selection when you know that the text will be updated at runtime (for example, in an editable control such as a TextBox).

See also Concepts

Add a custom font to your application Format text Open the Font Manager


Use the Font Manager to manage fonts and select subsets of fonts that you want to embed in your application. Typically, users will already have most of the fonts that you can select in Microsoft Expression Blend 2, and therefore you do not have to embed them. However, if you add a custom font to your application, you must embed it in your application so that your users will see the font.

To open the Font Manager from the Tools menu In an open project in Expression Blend, on the Tools menu, click Font Manager.

The Font Manager appears and lists all the available fonts that come with Expression Blend. If you have added any custom font files to

Note:You can further refine the subset in the Font Manager by clicking the Show advanced properties button under Text, clicking Font Manager, selecting your font under Embed Fonts, and then selecting various character sets under Subset Characters.



Note:Font embedding is not available when you open a Microsoft Silverlight 1.0 project.



your project, they will appear at the top. For information about how to embed a font, see Embed a font or a subset of a font in your application.

To open the Font Manager when you are working with a text control

1. Select the object that contains the text that you want to format, by using either the Selection tool or the Direct Selection tool.

2. In the Properties panel, under Text, click the Show advanced properties button.

The advanced properties section expands under Text.

3. Next to Embed and Subset, click Font Manager.

The Font Manager appears and lists all the available fonts that come with Expression Blend. If you have added any custom font files to your project, they will appear at the top. Fonts that are already embedded in your application are checked.

See also Concepts

Add a custom font to your application Embed a font or a subset of a font in your application Format text


Try it: Create a FlowDocumentReader control



In the Properties panel, some properties are more complex than a single value. For example, some properties represent a collection of values, or represent an object with properties of its own. You can use the collection editor and the subproperty editor to modify these values.

The following procedure uses the subproperty and collection editors to show you how to add content to a FlowDocumentReader control.

To add content to a FlowDocumentReader control 1. The FlowDocumentReader control is available from the Asset Library. In the Toolbox, click the Asset Library button .

2. Select the Show All check box to see all the available controls.

3. In the Controls tab, select System Controls (default), and then select the FlowDocumentReader control. A generic icon appears above the Asset Library button in the Toolbox, selected and ready to be added to the artboard.

4. Draw a FlowDocumentReader on the artboard.

A FlowDocumentReader control drawn on the artboard

5. With the FlowDocumentReader object selected under Objects and Timeline, expand the Miscellaneous category in the Properties

panel.

6. Click the New button next to the Document property. The Document property is populated with a FlowDocument object, and the subproperty editor for the FlowDocument opens. You can expand and collapse the subproperty editor. The Document property can contain only one FlowDocument.

The subproperty editor of the Document property showing the Blocks collection property

Note:You do not have to use this procedure to modify text in a FlowDocumentScrollViewer control. Instead, you can use the procedures in Edit text, Format text, and the other topics that are listed in the "How to" section in Text and typography.

Note:

Properties that will display a subproperty editor are typically identified by a New button next to them, and an expander arrow (if theproperty has content). If the property has default subproperties associated with them, a drop-down arrow will also appear next to the proFor example, the BitmapEffect property provides a drop-down list that includes the BevelBitmapEffect, BlurBitmapEffect, and other subproperties that you can select from.



7. In the subproperty editor for the Document property, click the Edit items in this collection button next to the Blocks (Collection)

property. The collection editor opens for the Blocks property.

The collection editor of the Blocks subproperty

8. In the collection editor for the Blocks subproperty, click the Add another item button. The Select Object window appears, from which

you can select any Windows Presentation Foundation (WPF) object.

9. In the Search text box, type Paragraph to quickly locate the Paragraph class. Select Paragraph from the list under System.Windows.Documents, and then click OK. The Select Object window closes, and a Paragraph item is added to the collection editor at index 0. The properties of the Paragraph object are displayed on the right side.

10. In the Properties window of the Paragraph object, click the Edit items in this collection button next to the Inlines property. The collection editor switches to the scope of the Inlines property.

11. Click the Add another item button, and then select the Run class from the Select Object window. A Run object has been added to the collection editor at index 0.

12. In the Properties window of the Run object, add content by typing in the Text property. You can also use some of the properties of the Brushes and Text categories to style the text. Other properties are disabled because they have to be set at the level of the FlowDocumentViewer control.

The collection editor of the Inlines property after adding a Run object and editing the Text

Note:Properties that will display a collection editor are typically identified by the word (Collection) next to the property name, and by an Edititems in this collection button.

Note:It can be difficult to understand which objects are valid for a given collection. For collection properties of common controls (such as theItems collection property of the ListBox control), the collection editor provides a drop-down list of suggested items in addition to the Adanother item button. However, for less common controls (such as the FlowDocumentReader control), if might help you understand whicelements are valid for the collection to view the MSDN documentation for the control type. For example, in the Flow Related Classes seof the Flow Document Overview on MSDN, a diagram shows the structure of flow document controls. From that diagram, you can see tthe Blocks property can contain a Paragraph, Section, List, Table, and/or a BlockUIContainer element. In the following steps, you will aRun element to the Inlines collection property of the Paragraph object.



13. Click OK to exit the collection editor for the Inlines property, and then click OK to exit the collection editor of the Blocks property.

The text that you entered in the previous step is displayed in the FlowDocumentViewer control.


To create a hyperlink that opens an Internet browser window, you must use an event handler method. The following procedure shows you how to create a hyperlink in a text control that will open a browser window to a URL that you specify.

If you only want to create a hyperlink in a Page document that will move to another Page document in your application or to a web page, you can use the Hyperlink button in the Properties panel. For more information, see Create a hyperlink in a Page document.

To create a hyperlink in a text control 1. In Design view, draw a text control such as a Button or a Label on the artboard. For more information, see Add a text control to the

artboard.

2. Select the new text object under Objects and Timeline.

3. In the Properties panel, click the Events button in the upper-right area of the Properties panel.

The Properties panel switches to Events view.

4. Locate one of the following events:

Click This event exists for controls such as Button, CheckBox, and others.

MouseDown This event exists for most other controls such as Label or Grid.

5. Enter a name in the text box for the event, or double-click in the text box to create the initial code for the event handler method.

If you have Microsoft Visual Studio 2008 installed, Microsoft Expression Blend generates the event handler method in your document's code-behind file and then opens the file in Visual Studio 2008. If you do not have Visual Studio 2008 installed, Expression

Important:Do not click the New button next to the Document property of the FlowDocumentViewer object unless you want to delete the content thyou just created, because the Document property can contain only one FlowDocument object. Unless a property name includes the word(Collection), the property can contain only a single object.

Note:If you are editing a FlowDocumentScrollViewer or a RichTextBox object, you can use the Microsoft Expression Blend text editor, which can be accessed by selecting the object and then pressing F2. For more information, see Edit text. If you are editing a DocumentViewer or a FlowDocumentPageViewer object, content is added programmatically. For more information, see Flow Document Overview and Documents in Windows Presentation Foundation on MSDN. Also see the DocumentViewer Samples and FlowDocumentReader Samples that you can download from Windows SDK .NET Framework 3.0 Samples.

Try it: Create a hyperlink that opens a browser window



Blend copies the event handler method code to the Clipboard, and then you must open the code-behind file in a text editor to paste in the code. For more information, see Edit a code-behind file.

6. Paste the following code inside the event handler method:

If you used a Click event, and named it OnClick, your event handler method should resemble the following:

If you used a MouseDown event, and named it OnMouseDown, your event handler method should resemble the following:

7. Save your files, and then press F5 to run your application and test your hyperlink.

To create a hyperlink in a portion of a TextBlock 1. Draw a TextBlock control on the artboard. For more information, see Add a text control to the artboard.

2. Right-click the TextBlock under Objects and Timeline, and then click View XAML.

The artboard switches to Split view with the line of XAML code for the TextBlock highlighted.

3. Replace your TextBlock object with the following XAML code:

C# Copy Codetry { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch {}

Visual Basic Copy CodeTry System.Diagnostics.Process.Start("http://www.microsoft.com") Catch 'Code to handle the error. End Try

C# Copy Codeprivate void OnClick(object sender, RoutedEventArgs e) { try { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch {} }

Visual Basic Copy CodePrivate Sub OnClick(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Try System.Diagnostics.Process.Start("http://www.microsoft.com") Catch 'Code to handle the error. End Try End Sub

C# Copy Codeprivate void OnMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e) { try { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch { } }

Visual Basic Copy CodePrivate Sub OnMouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Try System.Diagnostics.Process.Start("http://www.microsoft.com") Catch 'Code to handle the error. End Try End Sub

Copy Code



In this XAML code, the TextBlock has child elements for the text before and after the link, and the hyperlink itself. You might have to reposition or resize your TextBlock element because this sample XAML code positions the TextBlock in the upper-left area of the artboard.

4. If you want to format the content of your TextBlock element or add more text, select your TextBlock object in Design view, and then press F2 to enter text-editing mode. In text-editing mode, you can also add other content to your TextBlock, such as images, or other objects. For more information, see Edit text, Format text, and Add an object to text flow.

5. To make the hyperlink work, you must add a Click event handler method. Open the code-behind file for your document by double-clicking the file in the Project panel. Expression Blend opens the file in Visual Studio 2008 if it is installed. If you do not have Visual Studio 2008 installed, Expression Blend opens the code-behind file in whichever text editor is associated with .cs or .vb file name extensions. If you do not have any program associated with those file name extensions, you will have to open a text editor and then open your code-behind file in the text editor. For more information, see Edit a code-behind file.

6. In your code-behind file, paste the following code inside the class declaration (for example, before the End Class line in a .vb file, or before the second last } in a .cs file):

7. Save your files, and then press F5 to run your application and test your hyperlink.

See also Concepts

Create a hyperlink in a Page document Create a hyperlink in a Silverlight application


<TextBlock TextWrapping="Wrap"> <Run Text="Click "/> <Hyperlink Click="OnClick"> <Run Text="here"/> </Hyperlink> <Run Text=" for more information"/> </TextBlock>

C# Copy Codeprivate void OnClick(object sender, RoutedEventArgs e) { try { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch {} }

Visual Basic Copy CodePrivate Sub OnClick(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Try System.Diagnostics.Process.Start("http://www.microsoft.com") Catch 'Code to handle the error. End Try End Sub

