Glyphs Glyphs Glyphs Class

Definition

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

public sealed class Glyphs : FrameworkElement, IGlyphs, IGlyphs2public sealed class Glyphs : FrameworkElement, IGlyphs, IGlyphs2Public NotInheritable Class Glyphs Inherits FrameworkElement Implements IGlyphs, IGlyphs2
<Glyphs><Fill>singleBrush</Fill></Glyphs>
Inheritance
Attributes
Windows 10 requirements
Device family
Windows 10 (introduced v10.0.10240.0)
API contract
Windows.Foundation.UniversalApiContract (introduced v1)

Inherited Members

Inherited properties

Inherited events

Inherited methods

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

Glyphs() Glyphs() Glyphs()

Initializes a new instance of the Glyphs class.

public Glyphs()public Glyphs()Public Sub New()
Attributes

Properties

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

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

Attributes

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

Identifies the ColorFontPaletteIndex dependency property.

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

The identifier for the ColorFontPaletteIndex dependency property.

Attributes
See Also

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

Value
Brush Brush Brush

The brush to use to render the glyphs. The default is null, which is evaluated as Transparent for rendering.

Attributes

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.

See Also

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

The identifier for the Fill dependency property.

Attributes

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"/>
Value
double double double

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

Attributes

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

The identifier for the FontRenderingEmSize dependency property.

Attributes

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"/>
Value
Uri Uri Uri

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

Attributes

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

Identifies the FontUri dependency property.

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

The identifier for the FontUri dependency property.

Attributes

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

Attributes

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

The identifier for the Indices dependency property.

Attributes

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

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

Attributes

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

Identifies the IsColorFontEnabled dependency property.

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

The identifier for the IsColorFontEnabled dependency property.

Attributes
See Also

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"/>
Value
double double double

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

Attributes

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

The identifier for the OriginX dependency property.

Attributes

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"/>
Value
double double double

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

Attributes

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

The identifier for the OriginY dependency property.

Attributes

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"/>
Value
StyleSimulations StyleSimulations StyleSimulations

One of the enumeration values that specifies the style simulations to apply to the glyphs. The default is "None".

Attributes

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

The identifier for the StyleSimulations dependency property.

Attributes

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"/>
Value
string string string

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

Attributes

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

The identifier for the UnicodeString dependency property.

Attributes