This is a migrated thread and some comments may be shown as answers.

Binding Color in Gradient Stops

3 Answers 552 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 30 May 2018, 01:24 PM

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.

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 30 May 2018, 02:25 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
ExaSystems
Top achievements
Rank 1
answered on 09 May 2020, 10:39 PM

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>
0
Petar Marchev
Telerik team
answered on 11 May 2020, 12:38 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Gauges
Asked by
David
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
ExaSystems
Top achievements
Rank 1
Petar Marchev
Telerik team
Share this question
or