Converters

The Telerik suite provides a set of built-in IValueConverters which can be used to perform conversion between different types. Some of the converters will have to be defined as resources, in order to be used.

The converters are located in the Telerik.Windows.Controls.dll assembly.

To use the CultureToLocalizationStringConverter converter, include the following namespace xmlns:telerikLocalization="clr-namespace:Telerik.Windows.Controls.Localization;assembly=Telerik.Windows.Controls".

Declare the converters as resources

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  
                    xmlns:telerikLocalization="clr-namespace:Telerik.Windows.Controls.Localization;assembly=Telerik.Windows.Controls"> 
    <telerik:BooleanToOpacityConverter x:Key="BooleanToOpacityConverter"/> 
    <telerik:InvertedBooleanToOpacityConverter x:Key="InvertedBooleanToOpacityConverter"/> 
    <telerik:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> 
    <telerik:InvertedBooleanToVisibilityConverter x:Key="InvertedBooleanToVisibilityConverter"/> 
    <telerik:VisibilityToBooleanConverter x:Key="VisibilityToBooleanConverter"/> 
    <telerik:EnumToBooleanConverter x:Key="EnumToBooleanConverter"/> 
    <telerik:EnumToVisibilityConverter x:Key="EnumToVisibilityConverter"/> 
    <telerik:ColorToBrushConverter x:Key="ColorToBrushConverter"/> 
    <telerik:CornerRadiusConverter x:Key="CornerRadiusConverter"/> 
    <telerik:NullToVisibilityConverter x:Key="NullToVisibilityConverter"/> 
    <telerik:DateTimeTypeConverter x:Key="DateTimeTypeConverter"/> 
    <telerik:UppercaseConverter x:Key="UppercaseConverter"/> 
    <telerik:LinearGradientToSolidColorBrushConverter x:Key="LinearGradientToSolidColorBrushConverter"/> 
    <telerik:BinaryImageConverter x:Key="BinaryImageConverter"/> 
    <telerik:DoubleToThicknessConverter x:Key="DoubleToThicknessConverter"/> 
    <telerik:OpacityConverter x:Key="OpacityConverter"/> 
    <telerik:ThicknessToOrientedThicknessConverter x:Key="ThicknessToOrientedThicknessConverter"/> 
    <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter"/> 
    <telerik:BrushToColorConverter x:Key="BrushToColorConverter"/> 
    <telerik:MultiBindingBooleanOrConverter x:Key="MultiBindingBooleanOrConverter"/> 
    <telerik:NumberToVisibilityConverter x:Key="NumberToVisibilityConverter"/> 
    <telerik:ColorToBrushWithOpacityConverter x:Key="ColorToBrushWithOpacityConverter"/> 
    <telerikLocalization:CultureToLocalizationStringConverter x:Key="CultureToLocalizationStringConverter"/> 
</ResourceDictionary> 

Merge the created ResourceDictionary that contains the declared converters

<Application>  
    <Application.Resources> 
        <ResourceDictionary Source="MyConvertersResourceDictionary.xaml"/>  
    </Application.Resources>  
</Application>  

BooleanToOpacityConverter

This converter converts Boolean values to 1 or 0 opacity. If the Boolean value is false the converter will return 0 opacity.

InvertedBooleanToOpacityConverter

This converter converts Boolean values to 1 or 0 opacity. If the Boolean value is false the converter will return 1 opacity.

BooleanToVisibilityConverter

This converter converts Boolean values to Visibility enumeration values. If the Boolean value is false the Convert() method will return Visibility.Collapsed.

InvertedBooleanToVisibilityConverter

This converter converts Boolean values to Visibility enumeration values. If the Boolean value is true the Convert() method will return Visibility.Collapsed.

VisibilityToBooleanConverter

This converter converts values from the Visibility enumeration to Boolean values. The Convert() method returns true if the passed value is Visibility.Visible and false otherwise.

To invert the results of the converter, set the IsInverted property. This way, Visibility.Visible will be converted to false and Visibility.Collapsed to true.

Setting the IsInverted property

<FrameworkElement.Resources> 
    <telerik:VisibilityToBooleanConverter x:Key="InvertedVisibilityToBooleanConverter" IsInverted="True"/> 
</FrameworkElement.Resources> 

EnumToBooleanConverter

The EnumToBooleanConverter converts an Enum to a Boolean value. The Convert() method returns true if the provided value matches the Enum value that is provided in the CommandParameter property. If the values do not match, the method will return false. Multiple enum values could be specified in the converter parameter, separated using , or ;.

Setting the view model

public class MainViewModel 
{ 
    public Visibility Visibility { get; set; } 
} 

Setting the converter to the IsChecked property

<CheckBox IsChecked="{Binding Visibility, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=Visible}"/> 

EnumToVisibilityConverter

Converts an Enum value to Visibility enumeration values. If the enum value is one of the values specified in the converter parameter, the Convert() method will return Visibility.Visible, otherwise it will return Visibility.Collapsed. Multiple enum values could be specified in the converter parameter, separated using , or ;.

Setting the view model

public class MainViewModel 
{ 
    public Gender Gender { get; set; } 
} 
 
public enum Gender 
{ 
    Female, 
    Male 
} 

Setting the converter to the Visibility property

    <telerik:RadRadioButton Visibility="{Binding MyGender, Converter={StaticResource EnumToVisibilityConverter}, ConverterParameter=Male}"/> 

ColorToBrushConverter

This converter converts Color values to Brush values.

NullToVisibilityConverter

This converter converts Null or empty string values to Visibility enumeration values. If the input value is Null or empty string, the converter will return Visibility.Collapsed.

NumberToVisibilityConverter

This converter converts a number (double or integer) value to Visibility enumeration value. If the value is less than or equal to 0, returns Visibility.Collapsed, otherwise returns Visibility.Visible.

DateTimeTypeConverter

The converter converts string to a DateTime format value.

UppercaseConverter

This converter converts all lowcase to uppercase letters.

BinaryImageConverter

The converter converts byte array to System.Windows.Media.Imaging.BitmapImage object.

DoubleToThicknessConverter

The converter converts numeric value to Thickness based on the parameter.

Setting the view model

public class MainViewModel 
{ 
    public double Thickness { get; set; } 
} 

Setting the converter to the BorderThickness property

 <Border Background="Green" BorderThickness="{Binding Thickness,Converter={StaticResource DoubleToThicknessConverter},ConverterParameter=LeftRight}" BorderBrush="Black"/> 

OpacityConverter

The converter applies opacity to a Color or Brush value based on the parameter.

Setting the view model

public class MainViewModel 
{ 
    public MainViewModel() 
    { 
        this.Color = Brushes.Red; 
    } 
    public SolidColorBrush Color { get; set; } 
} 

Setting the converter to the Background property

<Border Background="{Binding Color, Converter={StaticResource OpacityConverter},ConverterParameter=8}"  /> 

ThicknessToOrientedThicknessConverter

The converter applies Thickness to a property of type Thickness based on the parameter. The parameter expects string value which represents on which side you want to place border (LeftTopRightBottom). You can specify only two sides for example (LeftTop). The parameter is required.

Setting the ViewModel

    public class MainWindow 
    { 
         public MainWindow() 
        { 
            InitializeComponent(); 
 
            this.DataContext = this; 
            Value = new Thickness(2, 3, 4, 5);               
        } 
        public Thickness Value { get; set; } 
    } 

Setting the converter to the BorderThickness property

    <Border BorderThickness="{Binding Value,Converter={StaticResource ThicknessToOrientedThicknessConverter},ConverterParameter=LeftTop}" BorderBrush="Red" Width="200" Height="200" Background="Bisque"/> 

StringToGlyphConverter

The converter accepts a glyph string value (ex: ) and converts it to the corresponding char representation. The converter is useful when you store the glyph string value in your model and want to data bind it to the UI.

See all available glyphs in the Glyphs Reference Sheet article.

Setting the view model

public class MainViewModel 
{ 
    public MainViewModel() 
    { 
        this.GlyphString = ""; 
    } 
    public string GlyphString { get; set; } 
} 

Using the StringToGlyphConverter converter

<telerik:RadGlyph Glyph="{Binding GlyphString, Converter={StaticResource StringToGlyphConverter}}" />    

StringToGlyphConverter is available since R1 2019. If you use a previous version you can implement the converter on your own. See its implementation in the Font Glyphs Overview article.

BrushToColorConverter

The BrushToColorConverter converts a SolidColorBrush object to a Color object. The returned color comes from the Color property of the brush. The converter supports TwoWay bindings. If an empty or invalid value is passed to the Convert() method, the returned result is null.

ColorToBrushWithOpacityConverter

The ColorToBrushWithOpacityConverter converts a Color object with opacity to SolidColorBrush object. The opacity need to be pass as a parameter. This converter require the Value parameter to be of type Color and the Parameter to be different from null.

LinearGradientToSolidColorBrushConverter

The LinearGradientToSolidColorBrushConverter converts a LinearGradientBrush object to SolidColorBrush object. If the GradientStops collection of the LinearGradientBrush contains entries, the first one will be set to the Color property of the returned SolidColorBrush instance. The converter will return a different gradient stop if the index passed to the ConverterParameter is a valid one.

Using the LinearGradientToSolidColorBrushConverter converter

<Grid> 
    <Grid.Resources> 
        <telerik:LinearGradientToSolidColorBrushConverter x:Key="LinearGradientToSolidColorBrushConverter"/> 
 
        <LinearGradientBrush x:Key="LinearGradientBrush" EndPoint="0.5,1" StartPoint="0.5,0"> 
            <GradientStop Color="White" Offset="0"/> 
            <GradientStop Color="Orange" Offset="0.375"/> 
            <GradientStop Color="DarkOrange" Offset="0.375"/> 
            <GradientStop Color="Red" Offset="1"/> 
        </LinearGradientBrush> 
    </Grid.Resources> 
 
    <Button Background="{Binding Source={StaticResource LinearGradientBrush}, Converter={StaticResource LinearGradientToSolidColorBrushConverter}, ConverterParameter=1}"/> 
</Grid> 

CultureToLocalizationStringConverter

The CultureToLocalizationStringConverter will return the related localization string by providing its key.

MultiBindingBooleanOrConverter

The MultiBindingBooleanOrConverter expects boolean values and it will return true if at least one of the bindings evaluates to true. This converter implements the IMultiValueConverter interface.

CornerRadiusConverter

The CornerRadiusConverter expects a CornerRadius value and returns a new CornerRadius instance with the desired directions. To specify the directions that will retain their values, use the ConverterParameter property.

Using the CornerRadiusConverter converter

<Grid> 
    <Grid.Resources> 
        <telerik:CornerRadiusConverter x:Key="CornerRadiusConverter"/> 
 
        <CornerRadius x:Key="CornerRadius" TopLeft="10" TopRight="10" BottomLeft="10" BottomRight="10"/> 
    </Grid.Resources> 
    <Border Background="Red" CornerRadius="{Binding Source={StaticResource CornerRadius}, Converter={StaticResource CornerRadiusConverter}, ConverterParameter=TopLeft}"/> 
</Grid> 

TicksToDateTimeConverter

The TicksToDateTimeConverter converts a numeric or string (exponential) value representing date-time ticks to a System.DateTime object.

Defining model with tick values

public class DataItem 
{ 
    public long DateTimeTicks { get; set; } = 638355044051158302L; 
        public string DateTimeTicksAsString { get; set; } = "6.383550E+017"; 
} 

Using the TicksToDateTimeConverter converter

<StackPanel> 
    <StackPanel.Resources> 
        <telerik:TicksToDateTimeConverter x:Key="TicksToDateTimeConverter"/> 
    </StackPanel.Resources> 
    <telerik:RadDateTimePicker SelectedValue="{Binding DateTimeTicks, Converter={StaticResource TicksToDateTimeConverter}}" />  
        <telerik:RadDateTimePicker SelectedValue="{Binding DateTimeTicksAsString, Converter={StaticResource TicksToDateTimeConverter}}" />  
</StackPanel> 

See Also

• EventToCommandBehavior
• Attached Behavior
• DelegateCommand