programming4us
programming4us
WEBSITE

Using Additional Fonts with Silverlight

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
I_section2_d1e8009.html

As usual, we start with a simple XAML file that will be enriched with JavaScript code. Example 1 contains a rectangle (for visual reasons) and a . The text block uses the Lucida font by default . We want to change this using JavaScript, therefore we set up an event handler for the Loaded event so that we can load a font once the XAML has been loaded.

Example 11-6. Loading a font, the XAML file (TrueTypeFont.xaml)

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="loadFont">
<Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />
<TextBlock x:Name="FancyText" FontSize="64" Canvas.Left="20" Canvas.Top="35"
Foreground="Black" Text="Silverlight" />
</Canvas>

Loading the font starts the same as loading any file using the downloader object—it makes an HTTP request and sets up a Completed event handler. Make sure you have the calibri.ttf (the Calibri font installed as part of Office 2007 and Windows Vista) file available or use another font file and change the code accordingly:

function loadFont(sender, eventArgs) {
var plugin = sender.getHost();
var d = plugin.createObject('downloader');
d.addEventListener('Completed', displayFont); d.open('GET', 'CALIBRI.TTF');
d.send();
}

In the event handler function, we cannot use the HTTP response as a string. However, the object supports a method called setFontSource(). If you provide the downloader object as an argument, you can use the font you just downloaded!

function displayFont(sender, eventArgs) {
var textBlock = sender.findName('FancyText');
textBlock.setFontSource(sender);

Remember that the downloader object is automatically the event sender and, therefore, the first argument for any event handler function attached to the object.

The rest is easy: you can now set the fontSize property of the element to the name of the downloaded font:

  textBlock.fontFamily = 'Calibri';
}

Example 2 contains the complete code, and you can see the result in Figure 1.

Example 2. Loading a font, the JavaScript file (TrueTypeFont.js)

function loadFont(sender, eventArgs) {
var plugin = sender.getHost();
var d = plugin.createObject('downloader');
d.addEventListener('Completed', displayFont);
d.open('GET', 'CALIBRI.TTF');
d.send();
}

function displayFont(sender, eventArgs) {
var textBlock = sender.findName('FancyText');
textBlock.setFontSource(sender);
textBlock.fontFamily = 'Calibri';
}

Figure 1. The text now uses the Calibri font, which is on all supported systems


But that's not all! You can even download a ZIP file containing several font files, and use every font in there. The XAML file does not change from that shown in Example 1, except for one thing: clicking on the canvas executes an event handler. The application will change the currently displayed font whenever the user clicks on it. See Example 3 for the code.

Example 3. Loading multiple fonts, the XAML file (TrueTypeFonts.xaml)

<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="loadFont" MouseLeftButtonDown="displayFont">
<Rectangle Width="300" Height="150" Stroke="Orange" StrokeThickness="15" />
<TextBlock x:Name="FancyText" FontSize="64" Canvas.Left="20" Canvas.Top="35"
Foreground="Black" Text="Silverlight" />
</Canvas>

Now create a ZIP file containing several TTF files; we are using Consolas and Calibri here. Then load the ZIP file as usual, in the loadFont() function. The displayFont() function will now be called on two occasions: when the font ZIP file has been loaded and when the user clicks on the rectangle. In the former case, the font source of the text box needs to be set to the downloader object. This works only if the event sender (first argument of the event handler function) is the downloader object, and not the <Canvas> element (when the user clicks it). A try...catch block avoids any JavaScript errors:

function displayFont(sender, eventArgs) {
var textBlock = sender.findName('FancyText');
try {
textBlock.setFontSource(sender);
} catch (ex) {
}
//...
}

Loading Images

You can also use the downloader class to load images that are then loaded into an <Image> or <ImageBrush> element. The object method is called setSource() again, but this time it expects two arguments:

  • The downloader object.

  • The filename of the image to use, if you downloaded a ZIP with multiplied images inside. If you directly downloaded just one image, use an empty string as the second method argument.

When downloading big images, you can also track the download progress of those images.


The rest is easy. Once the font source is set, you can set the TextBlock element's fontFamily property to the name of any font within the ZIP file. Example 4 shows the complete code, which also sets the correct font size depending on the font being used. You can see in Figure 2 that the application now also uses the Consolas font.

Example 4. Loading multiple fonts, the XAML JavaScript file (TrueTypeFonts.xaml.js)

var font = 'Calibri';

function loadFont(sender, eventArgs) {
var plugin = sender.getHost();
var d = plugin.createObject('downloader');
d.addEventListener('Completed', displayFont);
d.open('GET', 'fonts.zip');
d.send();
}

function displayFont(sender, eventArgs) {
var textBlock = sender.findName('FancyText');
try {
textBlock.setFontSource(sender);
} catch (ex) {
}
if (font == 'Calibri') {
font = 'Consolas';
var fontSize = '40';
} else {
font = 'Calibri';
var fontSize = '64';
}
textBlock.fontFamily = font;
textBlock.fontSize = fontSize;
}


Figure 2. Clicking on the canvas changes the font


So, you can use the downloader class not only to download text information, but also to provide dynamic resources such as TrueType/OpenType fonts.

Other  
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
REVIEW
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.
programming4us
 
 
programming4us