Custom Fonts In Windows Phone 7 With Expression Blend

In my previous post I went through how to use custom fonts in a Windows Phone 7 application using Visual Studio.  In this part I’ll go through how to use Expression Blend for Windows Phone to leverage custom fonts.

Expression Blend is primarily used for designing your applications and offers a more intuitive interface to help design your Windows Phone 7 applications.  I don’t use it to code and fall back to Visual Studio when code needs to be written. Unlike Visual Studio, it also renders any custom fonts you are using in the visual designer so you get a better representation of what your application will look like.

In Expression Blend, you can change the FontFamily property using the properties tab as follows


Here I changed ‘page name’ TextBlock and you will notice it will render in the visual designer nicely


But when deployed to the emulator the font will fallback to the Segoe WP default font


As you can see, the TextBlock that we added in the previous post is using the custom font but the ‘page name’ falls back to the regular font.

In the following steps, I’ll outline how to fix this building off the project from the previous post but instead we’ll use Expression Blend.

Using Expression Blend & Custom Fonts

IN the following steps, I’ll go through making the custom font a resource so it can be leveraged in other controls within the Windows Phone 7 application.  Making the font as a resource allows you to easily reference the font on other controls.  So instead of copying FontFamily=".\Fonts\BuxtonSketch.ttf#Buxton Sketch" everywhere, you simply point it to your static resource. 

  1. First thing we want to do is open up your project using Expression Blend for Windows Phone
  2. Open MainPage.xaml in design view
  3. Within Expression Blend (two ways)
    1. in the menu click on View –> Active Document View –> Design
    2. Click on the view icon in the designer
  4. Click on the TextBlock that was added in the previous tutorial (Text property should be “Sample Text Font”)
  5. In the Properties Tab expand up the Text section to see the selected font
  6. Beside the FontFamily combo box you will notice a ‘white box’, click on this to view the Advanced Options
  7. Click on Convert to New Resource
  8. This will bring up a dialog called Create FontFamily Resource as follows
    Here you have the option of
    1. Creating a local Resource (only useable by MainPage.xaml)
    2. Creating an application resource in app.xaml (useable throughout your entire application)
    3. Creating a Resource Dictionary (creates a separate resource file)
  9. Change the name to BuxtonSketchFont
  10. Select the Application radio button.  Your dialog should look like this
  11. Click OK
  12. You will notice the FontFamily combo box is now highlighted green which means the property is using a resource.  If you open up App.xaml in XAML view, you will also notice the following added
  13. <Application.Resources>
        <FontFamily x:Key="BuxtonSketchFont">.\Fonts\BuxtonSketch.ttf#Buxton Sketch</FontFamily>
  14. Click on the Page Title TextBlock
  15. Open the advance options in the FontFamily combo box
  16. In the popup menu select Local Resource –> BuxtonSketchFont


  17. You will notice the ComboBox highlight to green to signify it’s using a resource
  18. Run the application in the emulator (you can do this from Expression Blend by pressing F5).  If done correctly, your emulator should now render the following (Notice Page Name now uses the BuxtonSketch font) 

There you have it, using custom fonts in Windows Phone 7 applications.  Of course you don’t have to use custom fonts and can just use the default Segoe WP font.  But you never know when a customer might say ‘hmmm…don’t like that font, what else you got?”

Questions, ping me via this blog or via twitter @MarkArteaga or just add a comment!

Custom Fonts in Windows Phone 7 Application

While working on a Windows Phone 7 project, I got a customer request to use a custom font instead of just the Segoe WP font that is included with Windows Phone 7.

I have done this before on Windows Mobile so I’ll re-cap how to do it pre Windows Phone 7.

  1. Get the True Type Font (TTF) you want on your Windows Mobile device
  2. Copy the TTF File to the Windows directory
  3. Reset the device

We have automated this process through a custom a setup DLL (which is native code) with an installer and alleviates the pain for the customer to do this manual process.  But still somewhat of a pain to automate this process.

Using Silverlight for Windows Phone 7, this process is simplified and considering as a third party developer you don’t have access to the file system or the ability to write native code this is a good thing.

Here is a quick tutorial on getting this working with Visual Studio Express for Windows Phone 7.  In this tutorial I’ll be using the standard Windows Phone 7 project that comes with Visual Studio.

Adding Custom Font With Visual Studio

The first thing you need to do is create a Fonts folder in your project as follows

  1. Within the Solution Explorer right click on your project
  2. Click Add –> New Folder


  3. Name the folder to Fonts
  4. Add your custom font here.  (For the purpose of this blog post I will be using the BuxtonSketch.ttf)
  5. Right click on the font and click on Properties and change the Build Action to Content
  6. Your Solution Explorer should look something like the following

Now that we have the font in our project we need to use the font with the application.

  1. Within Visual Studio, open MainPage.xaml and view the page in XAML mode
  2. Find the ContentGrid within the XAML
  3. Add a Textblock to the ContentGrid
  4. Set the Size property to 48
  5. Set the Text property to Sample Text Font.  Your XAML should look something like this
    <Grid x:Name="ContentGrid" Grid.Row="1">

    <TextBlock FontSize="48" HorizontalAlignment="Left" Margin="36,225,0,0"
    Text="Sample Text Font" VerticalAlignment="Top" />

  6. Now we need to set the font.  Add the FontFamily attribute to your Textblock
  7. Set the value to .\Fonts\[YOUR_TTF_FILE].ttf#[FONT_NAME] .  If BuxtonSketch.ttf is being used then it should be as follows .\Fonts\BuxtonSketch.ttf#Buxton Sketch.  Your XAML should now look similar to the following

    <Grid x:Name="ContentGrid" Grid.Row="1">

    <TextBlock FontFamily=".\Fonts\BuxtonSketch.ttf#Buxton Sketch"
    FontSize="48" HorizontalAlignment="Left" Margin="36,225,0,0" Name="textBlock1"
    Text="Sample Text Font" VerticalAlignment="Top" />

  8. Run the application in the emulator and you should get something as follows. image

You should be able to embed any True Type Font within your Windows Phone 7 application.  In the next post I’ll follow up on how to use custom fonts with Expression Blend.

Silverlight WebBrowser Control and Windows Phone 7

Silverlight for Windows Phone 7 contains a WebBrowser control and there is nothing to impressive about that other than you have the ability to load a web page within your Silverlight application. But there is a hidden gem, the ability for two way communication with the webpage within your Silverlight app. There is a mini browser sample available on the Windows Phone Development section on MSDN which basically places a web browser control with a textBox and button so you can navigate to a URL. If you know the basics of using the control skip to the Hidden Gem section below.

The Basics

Using the WebBrowser control is nothing too exciting or complicated.  Just drag it from your ToolBox within Visual Studio Express for Windows Phone and drop it on your page in the designer.  Visual Studio will automatically add a reference to Microsoft.Phone.Controls.Webbrowser and Microsoft.Phone.Controls.WebbrowserInterop.


Then doing a quick call to WebBrowser.Navigate() on the button click event and your done.  Again nothing too exciting or complicated but can be useful in some situations within your app.

The Hidden Gem

The hidden gem I learned during Mike Harsh’s MIX10 session.  I was really excited about it because it solved a few problems I had on previous versions. This gem comes in the form of the WebBrowser.IsScriptEnabled property.    Basically this property will allow the loaded page within the webBrowser control invoke the ScriptNotify Event handler within your Silverlight app.  But that’s not all, using the WebBrowser.InvokeScript allows the Silverlight for Windows Phone app invoke a Javascript function on the web page loaded within the webBrowser control.  Basically you have two way communication which could be valuable in some situations.  Here’s how it works.

First step is making sure the IsScriptEnabled property is set to true.  This allows the communication to work between the two layers.  Default value is false.


In the sample code, I created a textBox to type in the URL to browse to and a button to call WebBrowser.Navigate().  I also created an extra textBox and button to invoke a javascript function within the loaded web page.  You will also have to wire up the WebBrowser.ScriptNotify event.  I did this via Xaml but can also be done in code as follows:

webBrowser1.ScriptNotify+=new EventHandler<NotifyEventArgs>(webBrowser1_ScriptNotify);

and the handler is just a messagebox to show the data received

private void webBrowser1_ScriptNotify(object sender, NotifyEventArgs e)
string.Format("New value received from web browser control (\"{0}\")", e.Value)); }

To invoke a script in the web browser control use the InvokeScript method passing in the Javascript method  to invoke and the string to send as follows:

webBrowser1.InvokeScript("DataReceivedFromPhoneApp", textBox1.Text);

The page is very basic and looks like this.


The other side of this sample is a web page to load.  Again I kept it basic but here is the web page rendered

image and the source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""> <
html xmlns=""> <head runat="server"> <meta name="mobileoptimized" content="480" /> <title>SamplePage1</title> <script type="text/javascript"> function DataReceivedFromPhoneApp(input) { textReceived.innerHTML = input; return true; } function SendDataToPhoneApp() { window.external.Notify(textToSend.value); } </script> </head> <body> <div> Enter your text: <input name="textToSend" type="text" value="send to app" /> </div> <div> <input type="button" value="Send to Phone" onClick="SendDataToPhoneApp()"/> <br /> <br /> </div> <div>Value received from phone app:</div> <div id="textReceived" style="font-size: x-large; font-weight: bold; color:
border: thin solid #000000"></div> </body> </html>

When you run the app an navigate to the page (I hosted it on my local IIS on my dev machine) it will render up the web page.  Clicking the button inside the web browser control produces the following.


And clicking the button within the Silverlight app modifies the html via javascript producing the following



There you have it two way communication between your Silverlight for Windows Phone 7 app and a web page within the WebBrowser control.

Pre-Windows Phone 7 using .NET Compact Framework this was possible but again with a lot of extra effort.  As far as I know, you would need to create an ActiveX control, register it on the device and somehow communicate with the web browser and the .NET CF app using some form of Inter-Process Communication (IPC).  Not fun or easy!

Explore some more and download the sample code here

Screen Capture on Windows Phone 7

In some instances when working on projects we would require to take a screen capture of the current screen the user is working on.  I regularly did this on .NET Compact Framework 3.5 (pre Windows Phone 7) and is a little bit of mess because of all the PInvokes involved. 

I decided to create a quick sample app that captures the screen on both platforms to compare the code.  The sample app basically just places the captured screen inside a pictureBox control (NETCF 3.5) or Image control (Silverlight for WP7).  The outer PictureBox/Image control just displays some standard images that come with Windows 7.

Compact Framework 3.5   Silverlight (Windows Phone 7)
image   image

Here is a comparison of capture an image of the current screen on Windows Phone 7 using Silverlight and .NET Compact Framework

.NET Compact Framework

private Bitmap CaptureScreen()
    Bitmap b = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height);
    using (Graphics g = Graphics.FromImage(b))
        IntPtr hdcSrc = IntPtr.Zero;
        IntPtr hdcDest = g.GetHdc();
            //get the entire window by passing in IntPtr.Zero
            hdcSrc = GetWindowDC(IntPtr.Zero);
            //blit to the graphics object g
            BitBlt(hdcDest, 0, 0, b.Width, b.Height, 
                hdcSrc, 0, 0, SRCCOPY); 
            //Release any native src hdcs
            if (hdcSrc != IntPtr.Zero)

            //Release the graphics hdc

    return b;

public static extern IntPtr GetWindowDC(IntPtr hWnd);

public static extern int DeleteDC(IntPtr hdc);

internal static extern IntPtr ReleaseDC(IntPtr hdc);

public const int SRCCOPY = 0x00CC0020;

public static extern bool BitBlt(IntPtr hdcDest, 
    int nXDest, int nYDest, int nWidth, 
    int nHeight, IntPtr hdcSrc, int nXSrc, 
    int nYSrc, uint dwROP);

Windows Phone 7 using Silverlight

private void btnCaptureScreen_Click(object sender, RoutedEventArgs e)
    //Capture the screen and set it to the internal picture box
    WriteableBitmap bmp = new WriteableBitmap((int)this.ActualWidth, (int)this.ActualHeight);
    bmp.Render(this, null);
    this.image1.Source = bmp;
    //Set a new background
    ImageBrush brush = new ImageBrush();
    brush.ImageSource = new BitmapImage(new Uri(NextImage,UriKind.Relative));
    ContentGrid.Background = brush;

Essentially the apps do the same thing but it’s a lot easier to do it on one than the other.  Here are some quick highlights on the differences.

  1. Silverlight for Windows Phone 7 has 7 lines of code while the .NET Compact Framework version has 28 lines of code
  2. With Silverlight for Windows Phone 7 you don’t have to deal with PInvokes anymore.
  3. Windows Phone 7 codebase is a lot smaller and more maintainable.
  4. With silverlight for Windows Phone 7, controls automatically support transparencies which was a challenge on NETCF 3.5 (notice the white box on NETCF 3.5 screen, that’s a PictureBox control
  5. Currently on Windows Phone 7 there is no way to get the images from your device in the form of a file unless you upload to a web service or something similar

Give it a try for yourself and download the sample code here.