Binding Color in Gradient Stops

[David]

Hello,

I am trying to binding the colors of a GaugeBarIndicator, but it doesn't work. The error is: "Cannot assign property "Color": Property does not exist, or is not assignable, or mismatching type between value and property"

Code XAML file:

<telerikGauges:RadRadialGauge x:Name="gauge" AxisRadiusFactor="1"
     StartAngle="90" SweepAngle="360">
    <telerikGauges:RadRadialGauge.Axis>
        <telerikGauges:GaugeLinearAxis Minimum="0" Maximum="1"
             StrokeThickness="0" ShowLabels="False" />
    </telerikGauges:RadRadialGauge.Axis>
    <telerikGauges:RadRadialGauge.Indicators>
        <telerikGauges:GaugeBarIndicator Value="1"
             StartThickness="10" EndThickness="10" Fill="#ebebeb" />
        <telerikGauges:GaugeBarIndicator Value="0.5" StartCap="Oval"
             StartThickness="10" EndThickness="10" EndCap="Oval"
             IsOffsetRelative="True">
            <telerikGauges:GaugeBarIndicator.GradientStops>
                <telerikCommon:RadGradientStop Offset="0"
                     Color="{Binding StartColor}" />
                <telerikCommon:RadGradientStop Offset="1"
                     Color="{Binding EndColor}" />
            </telerikGauges:GaugeBarIndicator.GradientStops>
        </telerikGauges:GaugeBarIndicator>
    </telerikGauges:RadRadialGauge.Indicators>
</telerikGauges:RadRadialGauge>

 

The property in C# file:

private Color startColor;
public Color StartColor
{
    get { return startColor; }
    set {
        startColor = value;
        OnNotifyPropertyChanged("StartColor");
    }
}

 

Do you know how can I make it work?

 

Thank you.

[Lance | Senior Manager Technical Support]

Hello William,

The reason for the error is because the Color property of the RadGradientStop object is not a Xamarin.Forms BindableProperty. Therefore, using bindings is not supported at this time.

If you are only going to have those two gradient stops, you can give them an x:Name and set the color value on page load:

<telerikGauges:GaugeBarIndicator.GradientStops>
    <common:RadGradientStop x:Name="StartGradientStop" Offset="0" />
    <common:RadGradientStop x:Name="EndGradientStop" Offset="1"/>
</telerikGauges:GaugeBarIndicator.GradientStops>

protected override void OnAppearing()
{
    base.OnAppearing();

    StartGradientStop.Color = viewModel.StartColor;
    EndGradientStop.Color = viewModel.EndColor;
}

Alternatively, if you don't know the number of gradient stops you need, you can dynamically add them to the gauge at the same point. As an example, if the view model had a list of Colors that you wanted to be the gradients.

<telerikGauges:GaugeBarIndicator x:Name="MyBarIndicator" />

protected override void OnAppearing()
{
    base.OnAppearing();
    var offsetBase = 1 / vmColors.Count;

    for (int i = 1; i < vmColors.Count; i++)
    {
        var offset = i * offsetBase;
        var color = vmColors[i - 1];

        var gradientStop = new RadGradientStop(color, offset);

        MyBarIndicator.GradientStops.Add(gradientStop);
    }
}

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[ExaSystems]

Hello Support,

 

What if the telerikGauges:RadRadialGauge is in a list view?

this code is binding in a list:

The error is: "Cannot assign property "Color": Property does not exist, or is not assignable, or mismatching type between value and property"

 

 

<telerikGauges:RadHorizontalGauge Grid.Row="1"  VerticalOptions="Center" Margin="0,-4,0,-4">
        <telerikGauges:RadGaugeBase.Axis>
                   <telerikGauges:GaugeLinearAxis Minimum="0" Maximum="100" Step="10"
                             TickLength="0" TextColor="Transparent"
                             StrokeThickness="0" />
        </telerikGauges:RadGaugeBase.Axis>

        <telerikGauges:RadGaugeBase.Indicators>
                    <telerikGauges:GaugeBarIndicator Value="{Binding HddUsagePersentage}"
                              Position="End" StartCap="Flat"
                              EndCap="Flat" IsOffsetRelative="True" >
                              <telerikGauges:GaugeBarIndicator.GradientStops>
                                        <telerikCommon:RadGradientStop
                                                  Offset="0"
                                                  Color="{Binding HddUsagePersentage_Color}" />
                              </telerikGauges:GaugeBarIndicator.GradientStops>
                     </telerikGauges:GaugeBarIndicator>

                     </telerikGauges:RadGaugeBase.Indicators>
 </telerikGauges:RadHorizontalGauge>

[Petar Marchev]

Hello,

As Lance explained earlier, the binding does not work as the gradient stop is not a BindableObject, but the indicator is. So you can create your own attached property and bind its value to the underlying item. In the property changed handler of the attached property you can add the gradient stops based on the values in the business item.

I think you should be able to use a Behavior too.

Alternatively you can inherit the indicator and on its BindingContextChanged, update the gradient stops as required.

There are probably other options as well, so make sure to consider other approaches before making a final decision. Let us know how it goes.

Regards,
Petar Marchev
Progress Telerik