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 whattext 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 ofthe 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
Usea 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).
Somecontrols 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
Providesan 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="Providesan 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
Providesthe 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 cancopy 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="Providesthe 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 cancopy and paste content from most applications, including Microsoft
Office Word and Internet Explorer."/></Paragraph>
<Paragraph/>
</FlowDocument>
</RichTextBox>
</Grid>
</Window>
TextBlock
Providesa block of static text that the users of your application cannot edit. ATextBlock 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="Providesa block of static text that the users of your application cannot edit. ATextBlock 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
Providesbasic 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
Providesa 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 offersfunctionality for keyboard accessibility and navigation through labeledcontrols 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
Providesa 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 verticaland 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
Hopethe 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.