A Look at Text in Silverlight
Learn about Displaying Text, Font Properties and Embedding Fonts
Text is displayed and input using Controls that follow the same patterns as other Controls. Brushes, Layout and Transforms all apply to TextBlocks, TextBoxes and PasswordBoxes just like they apply to a Rectangle. To handle the rendering of Text there are a few additional properties that you would expect like FontFamily, FontSize, LineHeight and more.
In this tutorial we build a visual mockup of a login form testing out different Text capabilities as well as learn how to embed custom fonts in Silverlight.
Word
PDF
01 Start a New Project
Open Blend and go to File > New Project. Select Silverlight 3 Application + Website as your project type and name the project BasicText. After hitting OK, the new Project will be created for you and MainPage will be open on the Artboard.
02 Set the Stage
To make the incoming text pop change the Background Brush of LayoutRoot to Linear Gradient ranging from Dark Blue Gray to Black.
04 Style the Text
First, set the Foreground to white. Next find the Text Section on the Properties panel. Set the FontFamily to Times New Roman, one of the 11 fonts included by default with Silverlight. Set the FontSize to 8pt, LineHeight to 24 and TextAlignment to Right.
05 Add an OpacityMask
An OpacityMask Brush is used to define the opacity of element in a pattern as simple as a gradient or as complex as a path defined by an image. Select the OpacityMask Brush for the TextBlock and choose a GradientBrush type. Add a GradientStop in the center Gradient bar and set the Alpha of the color to 0%. Set the Alpha of the outer GradientStops to 30%.
06 Convert TextBlock to Path
Draw a large rectangular TextBlock. Set the Text to “Lipsum Login”, Foreground to white, FontFamily to TimeNewRoman and FontSize to 64pt. Right-click the new TextBlock and choose Path > Convert To Path. Notice that like other vector design tools, the Text is represented as a Compound Path. You can release the Compound Path, using the same context menu. Rotate the Path 90 degrees and align it to the left side.
07 Modify the Path
Using the Direct Selection Tool (A), select the bottom Points of the “L” in the word “Login”. You can Zoom in the Artboard using the a mousewheel or the dropdown on the bottom tool bar. Drag the two points out two-thirds across the way of the Grid. Add two new Points using the Pen Tool (P). Now position the points to make a square panel for our login form.
08 Fake 3D with a Gradient
Change the Fill of the Path to a GradientBrush. Change the first GradientStop to white and set the Alpha of the second to 40%. Add a GradientStop to the Gradient bar around 25% and set the Alpha to 40%. Add an additional GradientStop to the Gradient bar around 75% and set the Alpha to 80%. Now drag the two inner GradientStops towards the middle so they meet on the left edge of the login form.
09 Add Input Controls
Using the Assets Panel to locate the Controls, add a TextBox, PasswordBox and a Button. Change the Button’s Content to “Login” and change the FontFamily to Impact and set the FontSize to 18pt. Hit F5 to Run the Project, notice that because Impact is not a font included with Silverlight the Button’s Content is rendered using the default font.
10 Embed a Font
From the top menu select Tools > Font Manager. Type “Impact” into the Search box to filter the list. Check “Impact” and uncheck “All glyphs”. This will leave “Auto fill” checked which means that only the characters used will be embedded in the application. This is done to keep the file size of the application low. The other options are useful when planning for dynamic text or text input by the user. Run the Project and you will now see the Button’s Content rendered using the Impact font.
» Next Step
That was pretty simple, let's take a look Importing an Adobe Photoshop File into Expression Blend
To continue learning about Text in Silverlight read this Drawing text article on the Expression Community site.