New to Telerik UI for WPF? Download free 30-day trial

Dynamic Creation of RadGauge Indicators

Environment

Product Version 2019.3.917
Product RadGauge for WPF

Description

How to data bind the Indicators collection of RadGauge.

Solution

The Indicators property doesn't support data binding. One way to achieve this requirement, is to use an attached property.

<telerik:VerticalLinearScale local:IndicatorsBehavior.ItemsSource="{Binding Markers}" /> 

public class IndicatorsBehavior 
{ 
    public static IEnumerable GetItemsSource(DependencyObject obj) 
    { 
        return (IEnumerable)obj.GetValue(ItemsSourceProperty); 
    } 
 
    public static void SetItemsSource(DependencyObject obj, IEnumerable value) 
    { 
        obj.SetValue(ItemsSourceProperty, value); 
    } 
 
    public static readonly DependencyProperty ItemsSourceProperty = 
        DependencyProperty.RegisterAttached( 
            "ItemsSource",  
            typeof(IEnumerable),  
            typeof(IndicatorsBehavior),  
            new PropertyMetadata(null, OnItemsSourceChanged)); 
 
    private static void OnItemsSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
        if (e.NewValue != null) 
        { 
            var scale = (VerticalLinearScale)d; 
            var markers = (List<double>)e.NewValue; 
            foreach (var markerValue in markers) 
            { 
                var marker = new Marker() 
                { 
                    Value = markerValue 
                }; 
                LinearScale.SetRotateForVertical(marker, true); 
                ScaleObject.SetRelativeWidth(marker, new GaugeMeasure(0.05, GridUnitType.Star)); 
                ScaleObject.SetRelativeHeight(marker, new GaugeMeasure(0.04, GridUnitType.Star)); 
                ScaleObject.SetOffset(marker, new GaugeMeasure(0.04, GridUnitType.Star)); 
                scale.Indicators.Add(marker); 
            } 
        } 
    } 
} 

public class MainViewModel 
{ 
    public List<double> Markers { get; set; } = new List<double>() { 20, 50, 66 }; 
} 
In this article