Adding Text in Expression Blend

Adding a text control to the artboard is the same as adding any other control to the artboard. When you want to add text to the artboard, first you must determine what text control to use to contain it. In Expression Blend you can display text in a TextBox, RichTextBox, PasswordBox, Label or FlowDcoumentScrollViewer.

To add a text control to the artboard

• 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.
• 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.
• 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.

Figure 1: Showing text control option that can be used as text

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.

TextBox

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



Figure 2: Shows the TextBox control

Here is the xaml code for the TextBox

<Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="text.Window1"
          x:Name="Window"
          Title="Window1"
          Width="640" Height="480">
          <Grid x:Name="LayoutRoot">
                   <TextBox Margin="158,90,197,183" Text="Provides an editable region that accepts text input. Use this control when you want users to be able to enter new text or edit existing text in your application. You can specify the font of the text at design time." TextWrapping="Wrap"/>
          </Grid>
</Window>

RichTextBox

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



Figure 3: Shows the RichTextBox control

Here is the xaml code for the RichTextBox

<Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="text.Window1"
          x:Name="Window"
          Title="Window1"
          Width="640" Height="480">
          <Grid x:Name="LayoutRoot">
                   <RichTextBox Margin="45,52,311,196">
                             <FlowDocument>
                                      <Paragraph><Run Text="RichTextBox"/></Paragraph>
                                      <Paragraph/>
                                      <Paragraph FontSize="14.6666666666667" Margin="0,0,0,0" TextAlignment="Left"><Run FontSize="11" Text="Provides the same functionality as a TextBox object, but supports more text formatting properties and can contain any other type of object, such as an image or shape. Use this control when you want users to be able to enter rich text in multiple fonts with images and other objects. You can copy and paste content from most applications, including Microsoft Office Word and Internet Explorer."/></Paragraph>
                                      <Paragraph/>
                             </FlowDocument>
                   </RichTextBox>
          </Grid>
</Window>

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



Figure 4: Shows the TextBlock control

Here is the xaml code for the TextBlock

<Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="text.Window1"
          x:Name="Window"
          Title="Window1"
          Width="640" Height="480">
          <Grid x:Name="LayoutRoot">
                   <TextBlock HorizontalAlignment="Left" Margin="13,97,0,154" Width="176" TextWrapping="Wrap"><Run Text="TextBlock"/><LineBreak/><Run FontSize="11" Text="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 be edited by users of your application, you can change the text through the code-behind file. You can copy and paste content from most applications, including Microsoft Office Word and Internet Explorer."/><LineBreak/><Run Text=""/></TextBlock>
          </Grid>
</Window>

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.



Figure 5: Shows the PasswordBox control

Here is the xaml code for the PasswordBox

<Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="text.Window1"
          x:Name="Window"
          Title="Window1"
          Width="640" Height="480">
          <Grid x:Name="LayoutRoot">
                   <PasswordBox HorizontalAlignment="Left" Margin="44,104,0,0" VerticalAlignment="Top" Width="132" Height="58" Password="dfsfsdfsdfdsf"/>
          </Grid>
</Window>

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.



Figure 6: Shows the Label control

Here is the xaml code for the Label

<Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="text.Window1"
          x:Name="Window"
          Title="Window1"
          Width="640" Height="480"> 
          <Grid x:Name="LayoutRoot">
                   <Label HorizontalAlignment="Left" Margin="28,0,0,174" VerticalAlignment="Bottom" Width="102" Height="32" Content="Label"/>
          </Grid>
</Window>

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.



Figure 7: Shows the FlowDocumentScrollViewer control

Here is the xaml code for the FlowDocumentScrollViewer

<Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          x:Class="text.Window1"
          x:Name="Window"
          Title="Window1"
          Width="640" Height="480">
          <Grid x:Name="LayoutRoot">
                   <FlowDocumentScrollViewer HorizontalAlignment="Left" Margin="27,89,0,139" Width="286">
                             <FlowDocument>
                                      <Paragraph><Run Text="FlowDocumentScrollViewer"/></Paragraph>
                             </FlowDocument>
                   </FlowDocumentScrollViewer>
          </Grid>
</Window>

Conclusion

Hope the article would have helped you in understanding adding Text in Expression Blend I will be contributing more articles to make your Expression Blend learning easy and interesting. Have Fun while you learn.