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