WinUI Markup Extensions

The Telerik WinUI suite contains several custom markup extensions, which can simplify the creation of BitmapIcon and FontIcon objects.

BitmapIconExtension and BitmapIconSourceExtension

The BitmapIconExtension and BitmapIconSourceExtension classes can be used to provide a BitmapIcon and BitmapIconSource objects respectively. They expose the following properties:

• Source (Uri): Gets or sets the Uri representing the image to display.

• ShowAsMonochrome (bool): Gets or sets a value indicating whether to display the icon as monochrome.

Example 1: Using the BitmapIconExtension and BitmapIconSourceExtension_

<StackPanel xmlns:telerik="using:Telerik.UI.Xaml.Controls"                           
            xmlns:telerikCore="using:Telerik.Core"> 
    <telerik:RadRibbonButton Content="Test" LargeIcon="{telerikCore:BitmapIcon Source=ms-appx:///Images/MyPicture1.png, ShowAsMonochrome=True}" /> 
 
    <IconSourceElement IconSource="{telerikCore:BitmapIconSource Source=ms-appx:///Images/MyPicture1.png, ShowAsMonochrome=True}" Width="10" Height="10" /> 
</StackPanel> 

TextIconExtension

This is an abstract class that provides some common properties for the FontIconExtension, FontIconSourceExtension, SymbolIconExtension and SymbolIconSourceExtension classes:

• FontSize (double): Gets or sets the size of the icon to display.

• FontWeight (FontWeight): Gets or sets the thickness of the icon glyph.

• FontStyle (FontStyle): Gets or sets the font style for the icon glyph.

• Foreground (Brush): Gets or sets the foreground Brush for the icon.

• IsTextScaleFactorEnabled (bool): Gets or sets a value indicating whether automatic text enlargement, to reflect the system text size setting, is enabled.

• MirroredWhenRightToLeft (bool): Gets or sets a value indicating whether the icon is mirrored when the flow direction is right to left.

FontIconExtension and FontIconSourceExtension

The FontIconExtension and FontIconSourceExtension classes inherit the TextIconExtension. They can be used to provide FontIcon and FontIconSource objects respectively. They expose the following additional properties:

• Glyph (string): Gets or sets the string value representing the icon to display.

• FontFamily (FontFamily): Gets or sets the font family to use to display the icon. If null, "Segoe MDL2 Assets" will be used.

Example 2: Using the FontIconExtension and FontIconSourceExtension_

<StackPanel xmlns:telerik="using:Telerik.UI.Xaml.Controls" 
            xmlns:telerikCore="using:Telerik.Core"> 
    <telerik:RadRibbonButton Content="Test" Size="Large" LargeIcon="{telerikCore:FontIcon FontSize=15, FontStyle=Italic, FontWeight=Bold, Foreground=Red, Glyph=&#xE700;}" /> 
 
    <IconSourceElement IconSource="{telerikCore:FontIconSource FontSize=15, FontStyle=Italic, FontWeight=Bold, Foreground=Red, Glyph=&#xE700;}" /> 
</StackPanel> 

SymbolIconExtension and SymbolIconSourceExtension

The SymbolIconExtension and SymbolIconSourceExtension classes inherit the TextIconExtension. They can be used to provide FontIcon and FontIconSource objects respectively. They expose the following additional properties:

• Symbol (Symbol): Gets or sets the Symbol value representing the icon to display.

Example 3: Using the SymbolIconExtension and SymbolIconSourceExtension_

<StackPanel xmlns:telerik="using:Telerik.UI.Xaml.Controls" 
            xmlns:telerikCore="using:Telerik.Core"> 
    <telerik:RadRibbonButton Content="Test" Size="Large" LargeIcon="{telerikCore:SymbolIcon FontSize=15, FontStyle=Italic, FontWeight=Bold, Foreground=Red, Symbol=Add}" /> 
 
    <IconSourceElement IconSource="{telerikCore:SymbolIconSource FontSize=15, FontStyle=Italic, FontWeight=Bold, Foreground=Red, Symbol=Add}" /> 
</StackPanel> 

You can find a list of possible values for the Symbol property in this MSDN article.

See Also

• Accessibility