Glyphs Glyphs Glyphs Class

Provides a visual representation of letters, characters, or symbols, in a specific font and style.

Syntax

Declaration

public sealed class Glyphspublic sealed class GlyphsPublic NotInheritable Class Glyphs
<Glyphs><Fill>singleBrush</Fill></Glyphs>

Inheritance Hierarchy

Inherited Members

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Tag
Tag
Tag
, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

Remarks

The Glyphs class provides a light weight text element that you can use to display small amounts of text, such as icons. The Glyphs element can be faster than a TextBlock in some cases, so you should consider using Glyphs when performance is a concern. However, the Glyphs element doesn't have the same localization and stylistic properties as a TextBlock control. For example, Glyphs does not support FontWeight or bidirectional text.

The Glyphs element can be used only with a font that is included in the app package as a resource. Only use fonts that you have the rights to ship with your app. Take this into consideration when choosing between TextBlock and Glyphs.

Starting in Windows 10, the Glyphs control supports the display of color fonts. (See IsColorFontEnabled and @Windows.UI.Xaml.Documents.Glyphs.ColorFontPaletteIndex.)

Usage

To use the Glyphs control, you must include the font file in your project as a resource with its Build Action set to Content.

(The examples here use the Segoe UI Emoji Regular font and assume that it's been added to the Assets folder of the project. This font is included by default with Windows 10 systems in the location C:\Windows\Fonts\seguiemj.ttf. To try this code yourself, you can copy the file from there into your project.)

With the font file added to your project, you can add a Glyphs element to display text. You must set 4 properties to make the Glyphs element show in your app.

  • FontUri: set to the path of the font file that you add to the project.
  • FontRenderingEmSize: specify the Em size at which to render the font.
  • Indices: specify the glyphs you want to use from the font.
  • Fill: specify the color in which to render glyphs.

Here's how to use a Glyphs element in XAML and in code.

<Glyphs FontUri="ms-appx:///Assets/seguiemj.ttf" 
        FontRenderingEmSize="30" 
        Indices="300;301;305;318;500;501;506" 
        Fill="Blue"/>
// Requires using Windows.UI.Xaml.Documents 
Glyphs glyph = new Glyphs();
glyph.FontUri = new Uri("ms-appx:///Assets/seguiemj.ttf");
glyph.FontRenderingEmSize = 30;
glyph.Indices = "300;301;305;318;500;501;506";
glyph.Fill = new SolidColorBrush(Windows.UI.Colors.Blue);

// Add to the visual tree (assumes stackPanel is defined in XAML page).
stackPanel.Children.Add(glyph);

The results look like this.

Glyphs from a color font Here, the glyphs aren't actually rendered in blue. This is because Segoe UI Emoji is a color font. This means that there is a color palette defined in the font file for each glyph, and this is used to render the font instead of the color you specify. (However, you are still required to specify a Fill color.)

Color fonts

If a font has more than one color palette defined, you can set the ColorFontPaletteIndex property to the index of the color palette you want to use. You might want to use an alternate color palette to better match the colors of your app. If you set the property value to an index that doesn't exist in the font, the font is rendered in the color specified by the Fill property.

For example, the Segoe UI Emoji font has two color palettes defined. Index 0 is the default. If you set the index to 1, you can see the secondary color palette. The color differences in the glyphs below are subtle, but if you look at the color of the umbrella you will notice a difference in both the red top and the gray handle.

A glyph rendered in different color palettes Here, the ColorFontPaletteIndex property is set to 1.

<Glyphs FontUri="ms-appx:///Assets/seguiemj.ttf" 
        FontRenderingEmSize="30" 
        Indices="301" 
        Fill="Blue" 
        ColorFontPaletteIndex="1"/>

If you don’t want the glyphs to be shown as a color font, but instead as monochromatic, you can set the IsColorFontEnabled property to false to turn off the color font functionality. You might do this to improve accessibility and support high contrast settings.

Here, the IsColorFontEnabled property is set to false.

<Glyphs FontUri="ms-appx:///Assets/seguiemj.ttf" 
        FontRenderingEmSize="30" 
        Indices="301" 
        Fill="Blue" 
        IsColorFontEnabled="False"/>

The rendered glyphs look like this.

Glyphs from a disabled color font

Constructors summary

Initializes a new instance of the Glyphs class.

Properties summary

Gets or sets the index of the palette to use for the color font.

Identifies the ColorFontPaletteIndex dependency property.

Gets or sets the Brush that is used to render the glyphs.

Identifies the Fill dependency property.

Gets or sets the em size used for rendering the glyphs.

Identifies the FontRenderingEmSize dependency property.

Gets or sets the location of the font used for rendering the glyphs.

Identifies the FontUri dependency property.

Gets or sets the glyph indices for the glyphs.

Identifies the Indices dependency property.

Gets or sets a value that determines whether font glyphs that contain color layers, such as Segoe UI Emoji, are rendered in color.

Identifies the IsColorFontEnabled dependency property.

Gets or sets the x origin for the glyphs.

Identifies the OriginX dependency property.

Gets or sets the y origin for the glyphs.

Identifies the OriginY dependency property.

Gets or sets the style simulations applied to the glyphs.

Identifies the StyleSimulations dependency property.

Gets or sets the Unicode string to render in glyphs.

Identifies the UnicodeString dependency property.

Constructors

  • Glyphs()
    Glyphs()
    Glyphs()
    Glyphs()

    Initializes a new instance of the Glyphs class.

    public Glyphs()public Glyphs()Public Function Glyphs() As

Properties

  • ColorFontPaletteIndex
    ColorFontPaletteIndex
    ColorFontPaletteIndex
    ColorFontPaletteIndex

    Gets or sets the index of the palette to use for the color font.

    public int ColorFontPaletteIndex { get; set; }public int ColorFontPaletteIndex { get; set; }Public ReadWrite Property ColorFontPaletteIndex As int

    Property Value

    • int
      int
      int

      The index of the palette to use for the color font.

    Remarks

    If IsColorFontEnabled is false, the ColorFontPaletteIndex is ignored.

    Color fonts can have different color palettes that specify the colors of the layers in the font. You can set the ColorFontPaletteIndex value to specify which palette to use. If the specified value isn't valid for the font, color is disabled.

  • ColorFontPaletteIndexProperty
    ColorFontPaletteIndexProperty
    ColorFontPaletteIndexProperty
    ColorFontPaletteIndexProperty

    Identifies the ColorFontPaletteIndex dependency property.

    public static DependencyProperty ColorFontPaletteIndexProperty { get; }public static DependencyProperty ColorFontPaletteIndexProperty { get; }Public Static ReadOnly Property ColorFontPaletteIndexProperty As DependencyProperty

    Property Value

  • Fill
    Fill
    Fill
    Fill

    Gets or sets the Brush that is used to render the glyphs.

    public Brush Fill { get; set; }public Brush Fill { get; set; }Public ReadWrite Property Fill As Brush
    <Glyphs Fill="{StaticResource resourceName"/>
    
    

    Property Value

    Remarks

    Because the default is null, you almost always should define a value for Fill somehow if you want your Glyphs to render in UI.

  • FillProperty
    FillProperty
    FillProperty
    FillProperty

    Identifies the Fill dependency property.

    public static DependencyProperty FillProperty { get; }public static DependencyProperty FillProperty { get; }Public Static ReadOnly Property FillProperty As DependencyProperty

    Property Value

  • FontRenderingEmSize
    FontRenderingEmSize
    FontRenderingEmSize
    FontRenderingEmSize

    Gets or sets the em size used for rendering the glyphs.

    public double FontRenderingEmSize { get; set; }public double FontRenderingEmSize { get; set; }Public ReadWrite Property FontRenderingEmSize As double
    <Glyphs FontRenderingEmSize="double"/>
    

    Property Value

    • double
      double
      double

      The em size used for rendering. The default is 0.

  • FontRenderingEmSizeProperty
    FontRenderingEmSizeProperty
    FontRenderingEmSizeProperty
    FontRenderingEmSizeProperty

    Identifies the FontRenderingEmSize dependency property.

    public static DependencyProperty FontRenderingEmSizeProperty { get; }public static DependencyProperty FontRenderingEmSizeProperty { get; }Public Static ReadOnly Property FontRenderingEmSizeProperty As DependencyProperty

    Property Value

  • FontUri
    FontUri
    FontUri
    FontUri

    Gets or sets the location of the font used for rendering the glyphs.

    public Uri FontUri { get; set; }public Uri FontUri { get; set; }Public ReadWrite Property FontUri As Uri
    <Glyphs FontUri="uriString"/>
    

    Property Value

    • An object describing the Uniform Resource Identifier (URI) source of the font. The default is null.

    Remarks

    Examples

    This example shows how to reference a font file that's included in the Assets folder of a project. To embed a font file in a project, set it's Build Action to Content in Microsoft Visual Studio.

    glyph.FontUri = new Uri("ms-appx:///Assets/segoeui.ttf");
    
  • FontUriProperty
    FontUriProperty
    FontUriProperty
    FontUriProperty

    Identifies the FontUri dependency property.

    public static DependencyProperty FontUriProperty { get; }public static DependencyProperty FontUriProperty { get; }Public Static ReadOnly Property FontUriProperty As DependencyProperty

    Property Value

  • Indices
    Indices
    Indices
    Indices

    Gets or sets the glyph indices for the glyphs.

    public string Indices { get; set; }public string Indices { get; set; }Public ReadWrite Property Indices As string
    <Glyphs Indices="string"/>
    

    Property Value

    • string
      string
      string

      A string that defines glyph indices as well as other glyph specifics in a string mini-language. The default is null.

  • IndicesProperty
    IndicesProperty
    IndicesProperty
    IndicesProperty

    Identifies the Indices dependency property.

    public static DependencyProperty IndicesProperty { get; }public static DependencyProperty IndicesProperty { get; }Public Static ReadOnly Property IndicesProperty As DependencyProperty

    Property Value

  • IsColorFontEnabled
    IsColorFontEnabled
    IsColorFontEnabled
    IsColorFontEnabled

    Gets or sets a value that determines whether font glyphs that contain color layers, such as Segoe UI Emoji, are rendered in color.

    public bool IsColorFontEnabled { get; set; }public bool IsColorFontEnabled { get; set; }Public ReadWrite Property IsColorFontEnabled As bool

    Property Value

    • bool
      bool
      bool

      true if color glyphs show in color; otherwise, false. The default is true.

    Remarks

    Starting in Windows 10, you can set the IsColorFontEnabled property on the Glyphs element. Prior to Windows 10, you could enable or disable color fonts only on text controls, like TextBlock.

    Color fonts in Windows

    Starting in Windows 8.1, fonts can include multiple colored layers for each glyph. For example, the Segoe UI Emoji font defines color versions of the Emoticon and other Emoji characters. By default, the IsColorFontEnabled property is true and fonts with these additional layers are rendered in color.

    In Windows 8, Extensible Application Markup Language (XAML) text controls don't render multi-color fonts in color. When an app that was compiled for Windows 8 is recompiled for Windows 8.1 or later, color rendering of multi-color fonts is enabled by default. Some glyphs in multi-color fonts have different layout metrics when rendered in color. This could cause different layout in apps when they are recompiled for Windows 8.1 or later. To retain the Windows 8 behavior when your app is recompiled, set IsColorFontEnabled to false.

  • IsColorFontEnabledProperty
    IsColorFontEnabledProperty
    IsColorFontEnabledProperty
    IsColorFontEnabledProperty

    Identifies the IsColorFontEnabled dependency property.

    public static DependencyProperty IsColorFontEnabledProperty { get; }public static DependencyProperty IsColorFontEnabledProperty { get; }Public Static ReadOnly Property IsColorFontEnabledProperty As DependencyProperty

    Property Value

  • OriginX
    OriginX
    OriginX
    OriginX

    Gets or sets the x origin for the glyphs.

    public double OriginX { get; set; }public double OriginX { get; set; }Public ReadWrite Property OriginX As double
    <Glyphs OriginX="double"/>
    

    Property Value

    • double
      double
      double

      The x origin of the Glyphs, in pixels. The default is 0.

  • OriginXProperty
    OriginXProperty
    OriginXProperty
    OriginXProperty

    Identifies the OriginX dependency property.

    public static DependencyProperty OriginXProperty { get; }public static DependencyProperty OriginXProperty { get; }Public Static ReadOnly Property OriginXProperty As DependencyProperty

    Property Value

  • OriginY
    OriginY
    OriginY
    OriginY

    Gets or sets the y origin for the glyphs.

    public double OriginY { get; set; }public double OriginY { get; set; }Public ReadWrite Property OriginY As double
    <Glyphs OriginY="double"/>
    

    Property Value

    • double
      double
      double

      The y origin of the Glyphs, in pixels. The default is 0.

  • OriginYProperty
    OriginYProperty
    OriginYProperty
    OriginYProperty

    Identifies the OriginY dependency property.

    public static DependencyProperty OriginYProperty { get; }public static DependencyProperty OriginYProperty { get; }Public Static ReadOnly Property OriginYProperty As DependencyProperty

    Property Value

  • StyleSimulations
    StyleSimulations
    StyleSimulations
    StyleSimulations

    Gets or sets the style simulations applied to the glyphs.

    public StyleSimulations StyleSimulations { get; set; }public StyleSimulations StyleSimulations { get; set; }Public ReadWrite Property StyleSimulations As StyleSimulations
    <Glyphs StyleSimulation="styleSimulationsMemberName"/>
    

    Property Value

  • StyleSimulationsProperty
    StyleSimulationsProperty
    StyleSimulationsProperty
    StyleSimulationsProperty

    Identifies the StyleSimulations dependency property.

    public static DependencyProperty StyleSimulationsProperty { get; }public static DependencyProperty StyleSimulationsProperty { get; }Public Static ReadOnly Property StyleSimulationsProperty As DependencyProperty

    Property Value

  • UnicodeString
    UnicodeString
    UnicodeString
    UnicodeString

    Gets or sets the Unicode string to render in glyphs.

    public string UnicodeString { get; set; }public string UnicodeString { get; set; }Public ReadWrite Property UnicodeString As string
    <Glyphs UnicodeString="string"/>
    

    Property Value

    • string
      string
      string

      A Unicode string with XAML-compatible encoding. The default is an empty string.

  • UnicodeStringProperty
    UnicodeStringProperty
    UnicodeStringProperty
    UnicodeStringProperty

    Identifies the UnicodeString dependency property.

    public static DependencyProperty UnicodeStringProperty { get; }public static DependencyProperty UnicodeStringProperty { get; }Public Static ReadOnly Property UnicodeStringProperty As DependencyProperty

    Property Value

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

Windows.Foundation.Metadata.StaticAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.ContractVersionAttribute
Windows.Foundation.Metadata.MarshalingBehaviorAttribute
Windows.Foundation.Metadata.StaticAttribute
Windows.Foundation.Metadata.ActivatableAttribute
Windows.Foundation.Metadata.WebHostHiddenAttribute

Details

Assembly

Windows.UI.Xaml.Documents.dll