Archives For Silverlight

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

image

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

image

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

image

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
      image
  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
    image
  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
    image
  8. This will bring up a dialog called Create FontFamily Resource as follows
    image
    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
    image
  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. Click on the Page Title TextBlock
  14. Open the advance options in the FontFamily combo box
  15. In the popup menu select Local Resource –> BuxtonSketchFont

    image

  16. You will notice the ComboBox highlight to green to signify it’s using a resource
  17. 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) 
    image

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!

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

    image

  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
    image

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

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

image

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.

image

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:

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

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:

The page is very basic and looks like this.

image

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

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.

image

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

image

Conclusion

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

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

Windows Phone 7 using Silverlight

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.