Share via

MSDN TV Demo Part 1: Creating an OpenType menu in WPF

  • Article

Hi, my name is Chris Han, I’m the program manager in Windows Presentation Foundation working on text and globalization. You might have seen our recent MSDN TV episode “Overview of text and flow layout in Windows Presentation Foundation” where I demonstrated a text box with a context menu which allows a user to turn on and off certain OpenType features. The code to achieve this is attached below.

I want to point out a few parts of this code… let’s look at Page1.xaml first. Here we’re creating a RichTextBox and a ContextMenu to pop up whenever you right click on text (or left click if you’re left handed like me).

The interesting thing to note here is the value of the FontFamily property. We’re referencing a font file that’s actually embedded in the assembly of the application so your app is never dependent on whether your user has Pericles installed on his or her machine. If you set FontFamily=”Pericles”, then we would still look for it in the user’s Windows\Fonts directory and fallback to Segoe UI or Tahoma if it didn’t exist.

<RichTextBox

  DockPanel.Dock="Top"

  Name="MyRichTextBox"

  FontFamily="fonts/#Pericles"

  FontSize="60pt"

  Foreground="White"

  Background="Black">

  <RichTextBox.ContextMenu>

    <ContextMenu

      Name="FontMenu"

      Opened="ContextMenuOpen"

      Foreground="White"

      Background="Black">

      <!-- Populated with C# -->

    </ContextMenu>

  </RichTextBox.ContextMenu>

</RichTextBox>

Notice that in the Visual Studio project, the font files under ‘fonts’ folder have build action set to ‘Resource’. Setting it to ‘Resource’ embeds these files in the assembly. You can make this work too by setting build action to ‘Content’ and Copy to Output to ‘Copy if newer’ which would keep the fonts as loose files in the directory that your application is deployed.

 

In Page1.xaml.cs there are two event handlers which enable this OpenType menu. In ContextMenuOpen, we’re creating new MenuItems on the fly to give the user a preview of what the text would look like if they applied a particular OpenType feature. In ContextMenuClick we’re actually applying the property to the selected text in MyRichTextBox.

The font you see is in the screenshot above is one of the many cool OpenType sample fonts Ascender Corp created for our SDK. All of which you can download here today:

https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/wpf_conceptual/html/56b46fa1-a44e-419b-8f14-25ad51c715c3.asp

Check out some of features below. I only hooked up 3 of them in the code above. Note this is a sample font so there are some limitations. Most of Pericles’ features are only available on capital letters.

Here are some relevant articles:

Packaging Fonts with Applications:

https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/wpf_conceptual/html/db15ee48-4d24-49f5-8b9d-a64460865286.asp

OpenType Font Features:

https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/wpf_conceptual/html/4061a9d1-fe8b-4921-9e17-18ec7d2e3ea2.asp

Sample Font Pack:

https://windowssdk.msdn.microsoft.com/library/default.asp?url=/library/en-us/wpf_conceptual/html/56b46fa1-a44e-419b-8f14-25ad51c715c3.asp

Look for my next blog post, MSDN TV Demo Part 2 : Painting your text foreground with an animating rotatable star sitting in 3-D space which will finish the stuff I went through in the MSDN TV segment.

Chris Han

TextBoxWithOpenTypeMenu.zip

Comments

  • Anonymous
    June 14, 2006
    I just gave a talk at TechEd in Boston on Creating Rich Content Experiences in WPF (DEV326), for those...

  • Anonymous
    August 14, 2007
    It is a real shame about the link Rot - I would have loved to try this out...

  • Anonymous
    June 01, 2009
    PingBack from http://woodtvstand.info/story.php?id=13146