Silverlight 2 - Expression Blend - Text & Typography
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Silverlight 2 - Expression Blend - Text & Typography as PDF for free.
More details
- Words: 8,670
- Pages: 22
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
Text and typography
Page 2 of 22
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
Available Available Supports in in rich text, Editable Microsoft at Microsoft shapes, Silverlight runtime Silverlight and 1.0 2 projects images projects
TextBox
Provides an editable region that accepts text input. Use No 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.
Yes
No
Yes
Yes
No
No
No
Yes
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 Yes 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 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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 3 of 22
be edited by users of your application, you can change the text through the codebehind 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
No
No
No
No
Yes
No
No
No
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. 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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 4 of 22
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 5 of 22
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 6 of 22
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Add an object to text flow
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 control.
From the Toolbox or the Asset Library element in the text control.
or Pen
, select a control (for example, a Grid panel
) and then draw the element in the text
or Button
), and then draw the
3. Drag the object to the desired location in the text object. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 7 of 22
To edit text 1. Select the text object that you want to edit, by using either the Selection text object under Objects and Timeline.
tool or the Direct Selection
tool, or by selecting the
2. Do one of the following:
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 Add an object to text flow Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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.
tool or the Direct Selection
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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Click Underline
Page 8 of 22
to underline the text.
See also Concepts Edit text Format paragraphs Add an object to text flow Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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 3. Set the Text Alignment
tab.
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 Selection
tool or the Direct
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
Set the Line Height paragraphs.
Set the Paragraph Spacing Before
Set Paragraph Spacing After
tab, and then do one or more of the following:
property as you want to set the amount of space between every pair of lines in the paragraph or
property to set the amount of space that comes before the paragraph or paragraphs.
to set the amount of space that follows the paragraph or paragraphs.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 9 of 22
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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 4. Set the Left Indent
, Right Indent
, and First Line Indent
tab. properties as you want.
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 10 of 22
Wrap options for text
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Make text editable or read-only
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 properties.
button to see the IsReadOnly and IsUndoEnabled
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.
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Check spelling
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 11 of 22
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 check spelling.
tool or the Direct Selection
tool, and then click the text object in which you want to
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 which you want to enable the spelling checker in your application.
tool, and then click the user-editable text object for
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 Make text editable or read-only Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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 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.
To format only some of the text in a TextBlock or RichTextBox text control object, click either the Selection
file://C:\Windows\Temp\~hh3BC9.htm
tool or the Direct Selection
tool or the
6/16/2009
Text and typography
Page 12 of 22
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. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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. 4. Do one of the following:
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.
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Create a hyperlink in a Page document
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
file://C:\Windows\Temp\~hh3BC9.htm
tool.
6/16/2009
Text and typography
Page 13 of 22
2. Click to select the TextBlock object to which you want to add a hyperlink, right-click the object, and then click Edit Text. 3. Do one of the following:
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Add a custom font to your application
Typically, users will already have most of the fonts that you can select in Microsoft Expression Blend 2. However, you can add custom fonts
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 14 of 22
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 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. 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 Open the Font Manager
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 15 of 22
Embed a font or a subset of a font in your application Format text Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Embed a font or a subset of a font in your application
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: 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: 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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 16 of 22
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 (Custom fonts are displayed at the top of the list.
tab, and then select your custom font from the FontFamily drop-down menu.
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 Add a custom font to your application Format text Open the Font Manager Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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. 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: 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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 17 of 22
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 2. In the Properties panel, under Text, click the Show advanced properties
tool or the Direct Selection
tool.
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Create a FlowDocumentReader control
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 18 of 22
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 19 of 22
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 20 of 22
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. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Create a hyperlink that opens a browser window
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 21 of 22
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 { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch {} }
Visual Basic
Copy Code
Private 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
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 { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch { } }
Visual Basic
Copy Code
Private 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
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 22 of 22
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 doubleclicking 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 { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch {} }
Visual Basic
Copy Code
Private 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
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
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
Text and typography
Page 2 of 22
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
Available Available Supports in in rich text, Editable Microsoft at Microsoft shapes, Silverlight runtime Silverlight and 1.0 2 projects images projects
TextBox
Provides an editable region that accepts text input. Use No 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.
Yes
No
Yes
Yes
No
No
No
Yes
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 Yes 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 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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 3 of 22
be edited by users of your application, you can change the text through the codebehind 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
No
No
No
No
Yes
No
No
No
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. 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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 4 of 22
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 5 of 22
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 6 of 22
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Add an object to text flow
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 control.
From the Toolbox or the Asset Library element in the text control.
or Pen
, select a control (for example, a Grid panel
) and then draw the element in the text
or Button
), and then draw the
3. Drag the object to the desired location in the text object. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 7 of 22
To edit text 1. Select the text object that you want to edit, by using either the Selection text object under Objects and Timeline.
tool or the Direct Selection
tool, or by selecting the
2. Do one of the following:
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 Add an object to text flow Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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.
tool or the Direct Selection
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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Click Underline
Page 8 of 22
to underline the text.
See also Concepts Edit text Format paragraphs Add an object to text flow Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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 3. Set the Text Alignment
tab.
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 Selection
tool or the Direct
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
Set the Line Height paragraphs.
Set the Paragraph Spacing Before
Set Paragraph Spacing After
tab, and then do one or more of the following:
property as you want to set the amount of space between every pair of lines in the paragraph or
property to set the amount of space that comes before the paragraph or paragraphs.
to set the amount of space that follows the paragraph or paragraphs.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 9 of 22
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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 4. Set the Left Indent
, Right Indent
, and First Line Indent
tab. properties as you want.
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 10 of 22
Wrap options for text
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Make text editable or read-only
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 properties.
button to see the IsReadOnly and IsUndoEnabled
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.
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Check spelling
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 11 of 22
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 check spelling.
tool or the Direct Selection
tool, and then click the text object in which you want to
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 which you want to enable the spelling checker in your application.
tool, and then click the user-editable text object for
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 Make text editable or read-only Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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 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.
To format only some of the text in a TextBlock or RichTextBox text control object, click either the Selection
file://C:\Windows\Temp\~hh3BC9.htm
tool or the Direct Selection
tool or the
6/16/2009
Text and typography
Page 12 of 22
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. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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. 4. Do one of the following:
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.
Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Create a hyperlink in a Page document
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
file://C:\Windows\Temp\~hh3BC9.htm
tool.
6/16/2009
Text and typography
Page 13 of 22
2. Click to select the TextBlock object to which you want to add a hyperlink, right-click the object, and then click Edit Text. 3. Do one of the following:
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Add a custom font to your application
Typically, users will already have most of the fonts that you can select in Microsoft Expression Blend 2. However, you can add custom fonts
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 14 of 22
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 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. 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 Open the Font Manager
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 15 of 22
Embed a font or a subset of a font in your application Format text Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Embed a font or a subset of a font in your application
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: 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: 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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 16 of 22
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 (Custom fonts are displayed at the top of the list.
tab, and then select your custom font from the FontFamily drop-down menu.
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 Add a custom font to your application Format text Open the Font Manager Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. 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. 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: 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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 17 of 22
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 2. In the Properties panel, under Text, click the Show advanced properties
tool or the Direct Selection
tool.
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Create a FlowDocumentReader control
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 18 of 22
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 19 of 22
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 20 of 22
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. Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved. Try it: Create a hyperlink that opens a browser window
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 21 of 22
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 { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch {} }
Visual Basic
Copy Code
Private 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
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 { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch { } }
Visual Basic
Copy Code
Private 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
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
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Text and typography
Page 22 of 22
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 doubleclicking 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 { System.Diagnostics.Process.Start("http://www.microsoft.com"); } catch {} }
Visual Basic
Copy Code
Private 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
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 Send feedback on this topic to Microsoft. © 2008 Microsoft Corporation. All rights reserved.
file://C:\Windows\Temp\~hh3BC9.htm
6/16/2009
Related Documents
Silverlight 2 - About Expression Blend
May 2020 7
Silverlight 2 - Expression Blend - Workspace
May 2020 10
Typography: Text Project
May 2020 11
Typography
December 2019 21More Documents from ""
On-time_delivery_toolkit
May 2020 7
Mediacom Phone Service User Guide (mound, Mn)
April 2020 10
Eeoc Field Guidance - Reasonable Accommodation Of Disabled Employees
December 2019 17
Harassment Investigation Checklist
November 2019 19