Silverlight 2 - Expression Blend - Text & Typography

Text and typography Page 1 of 22
Text and 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 overview
file://C:\Windows\Temp\~hh3BC9.htm 6/16/2009
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

Available
Supports Available
in
rich text, Editable in
Microsoft
Text control shapes, at Microsoft
Silverlight
and runtime Silverlight
1.0
images 2 projects
projects
TextBox
Provides an editable region

that accepts text input. Use No Yes No Yes
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.
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 Yes Yes No No
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.
TextBlock
Provides a block of static

text that the users of your
application cannot edit. A
TextBlock can contain any Yes No Yes Yes
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
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 No Yes No Yes
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.
Label

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 No No No No
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.
FlowDocumentScrollViewer

text with a scrollbar that the
user can use to navigate
through the text. It can also Yes No No No
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.
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.
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.
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
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.
Note:
Only the Canvas layout container is available in a Silverlight 1.0 project.
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.
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.
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.
Note:
Font embedding is not available in a Silverlight 1.0 project.
Back to top
Add a text control to the artboard
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.
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.
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.
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.
Edit text
In Microsoft Expression Blend, you can edit text that is displayed in text controls directly on the artboard.
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.
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.
See also
Concepts
Format text
Format text
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.
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).
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.
 Click Underline to underline the text.
See also
Concepts
Edit text
Format paragraphs
Format paragraphs
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.
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.
To set line height or paragraph spacing for text in a RichTextBox

object
Note:
RichTextBox is not available in Silverlight 2.
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.
Indent a line or a paragraph
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.
Set text wrapping
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.
Note:
The TextBox control is not available in Microsoft Silverlight 1.0 projects.
2. In the Properties panel, under Text, click the Show advanced properties button to see the TextWrapping property.
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 in
control. To exit text-editing mode, press ESC.
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.
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.
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. T
exit text-editing mode, press ESC.
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.
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.
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.
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
Change the color of text objects
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

 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
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.
Create a bulleted or numbered list
You can create bulleted lists in Microsoft Expression Blend, for text that is contained in RichTextBox or TextBlock objects.
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.
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.
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.
To create a hyperlink in a Page document

1. In the Toolbox, click either the Selection tool or the Direct Selection tool.
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

Create a hyperlink in a Silverlight application
Convert text to a path
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").
Caution:
You can convert text to a path only if the text is contained in a TextBlock or RichTextBox.
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
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.
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
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.
Note:
Custom fonts are not available when you open a Microsoft Silverlight 1.0 project.
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

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.
Important:
Note:
Font embedding is not available when you open a Microsoft Silverlight 1.0 project.
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
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).
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.
See also
Concepts

Format text
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.
Important:
Note:
Font embedding is not available when you open a Microsoft Silverlight 1.0 project.
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
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

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.
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.
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.
Note:
Properties that will display a subproperty editor are typically identified by a New button next to them, and an expander arrow (if the
property has content). If the property has default subproperties associated with them, a drop-down arrow will also appear next to the pro
For example, the BitmapEffect property provides a drop-down list that includes the BevelBitmapEffect, BlurBitmapEffect, and other
subproperties that you can select from.
The subproperty editor of the Document property showing the Blocks collection property
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.
Note:
Properties that will display a collection editor are typically identified by the word (Collection) next to the property name, and by an Edit
items in this collection button.
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.
Note:
It can be difficult to understand which objects are valid for a given collection. For collection properties of common controls (such as the
Items collection property of the ListBox control), the collection editor provides a drop-down list of suggested items in addition to the Ad
another item button. However, for less common controls (such as the FlowDocumentReader control), if might help you understand whic
elements are valid for the collection to view the MSDN documentation for the control type. For example, in the Flow Related Classes se
of the Flow Document Overview on MSDN, a diagram shows the structure of flow document controls. From that diagram, you can see t
the Blocks property can contain a Paragraph, Section, List, Table, and/or a BlockUIContainer element. In the following steps, you will a
Run element to the Inlines collection property of the Paragraph object.
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
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.
Important:
Do not click the New button next to the Document property of the FlowDocumentViewer object unless you want to delete the content th
you 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.
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
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:
C# Copy Code
try
{
System.Diagnostics.Process.Start("http://www.microsoft.com");
}
catch {}
Visual Basic Copy Code

Try
System.Diagnostics.Process.Start("http://www.microsoft.com")
Catch
'Code to handle the error.
End Try
If you used a Click event, and named it OnClick, your event handler method should resemble the following:
C# Copy Code
private void OnClick(object sender, RoutedEventArgs e)
{
try
{
}
catch {}
}

Private Sub OnClick(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Try
Catch
End Try
End Sub
If you used a MouseDown event, and named it OnMouseDown, your event handler method should resemble the following:
C# Copy Code
private void OnMouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
try
{
}
catch { }
}

Private Sub OnMouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
Try
Catch
End Try
End Sub
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:
Copy Code
<TextBlock TextWrapping="Wrap">
<Run Text="Click "/>
<Hyperlink Click="OnClick">
<Run Text="here"/>
</Hyperlink>
<Run Text=" for more information"/>
</TextBlock>
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):
C# Copy Code
private void OnClick(object sender, RoutedEventArgs e)
{
try
{
}
catch {}
}

Private Sub OnClick(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
Try
Catch
End Try
End Sub
7. Save your files, and then press F5 to run your application and test your hyperlink.
See also
Concepts

Create a hyperlink in a Silverlight application

Silverlight 2 - Expression Blend - Text & Typography

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Silverlight 2 - Expression Blend - Text & Typography

Încărcat de

Drepturi de autor:

Formate disponibile

Text and typography Page 1 of 22

Text and typography

Add an object to text flow

Indent a line or a paragraph

Set text wrapping

Make text editable or read-only

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: Create a hyperlink that opens a browser window

Animate the points on a path or clipping path

Text and typography overview

Special types of text controls

Provides an editable region

Provides the same

Provides a block of static

be edited by users of your

Provides basic password

Provides a block of static

Provides a block of static

Working with text controls

 Text Change typographic properties such as font and paragraph alignment.

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

Modifying the content of a text control

Making text editable in your application

Laying out text

Add a text control to the artboard

To add a text control to the artboard

Add an object to text flow

To add an object to a text object

2. Do one of the following:

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

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

2. Do one of the following:

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

Expression Blend enters text-editing mode for the control.

To set font properties

 Click Bold to make the text bold.

 Click Italic to italicize the text.

 Click Underline to underline the text.

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

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

Indent a line or a paragraph

 Indent the first line of a paragraph.

 Indent the whole left edge of a paragraph.

 Indent the whole right edge of a paragraph.

Set text wrapping

To set text wrapping

Wrap options for text

Make text editable or read-only

To designate whether text can be edited

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

To enable the spelling checker in your application (WPF only)

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

Make text editable or read-only

Change the color of text objects

 Foreground The color of the text itself.