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

GaugeRange.Min and GaugeRange.Max not binding in 2013.2.724.40

13 Answers 91 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Guy
Top achievements
Rank 2
Guy asked on 22 Aug 2013, 02:34 PM
I use data binding to set the Min and Max properties for a RadialScale GaugeRange. In the prior version I had (Q1 2013), the data binding worked fine and the ranges displayed correctly, but in 2013.2.724.40 (Q2 2013) I find that the ranges do not show at all if their Min and Max values are data bound. They show fine if the values are hard coded.
I have a TextBlock in the RadialScale.CustomItems collection bound to the same member of the same data object, and that is showing correctly so I know the DataContext is right and the value exists.

Has the handling of Min/Max binding in 2013.2.724.40 changed? Should I use a different property?

13 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 26 Aug 2013, 04:27 PM
Hi Guy,

Thank you for the feedback.
We have created the PITS issue to fix this problem in future versions of our control. You can track it using the following link:
http://www.telerik.com/support/pits.aspx#/public/wpf/15607

As workaround you can create the view model in XAML code. Also you can bind the DataContext property of the gauge to this view model as a static resource. In addition you can specify the Source property of binding expression for GaugeRange's properties.
The sample code is below.

<Window x:Class="TestRadialGauge.MainWindow"
        xmlns:local="clr-namespace:TestRadialGauge"
        Title="MainWindow" Height="350" Width="525">
    <Grid Name="LayoutRoot">
        <Grid.Resources>
            <local:DataModel x:Key="Data"/>
        </Grid.Resources>
  
        <telerik:RadRadialGauge DataContext="{StaticResource Data}">
            <telerik:RadialScale>
                <telerik:RadialScale.Ranges>
                    <telerik:GaugeRange Background="DarkOliveGreen"
                                Min="{Binding Min1, Source={StaticResource Data}}"
                                Max="{Binding Max1, Source={StaticResource Data}}"
                                StartWidth="0.1"
                                EndWidth="0.1" />
                </telerik:RadialScale.Ranges>
            </telerik:RadialScale>
        </telerik:RadRadialGauge>
    </Grid>            
</Window>

Regards,
Andrey Murzov
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Troy
Top achievements
Rank 1
answered on 11 Dec 2013, 06:39 PM

Hi,



I have same issue in newest software v.2013.3.1204.40.



My application is using common DataContext assigned in a main window. User Controls receive all the bindings without any issues. Radial gage below has multiple controls with values populated from DataContext dynamically, only one that does not work is Range with its Min and Max values.



<UserControl x:Class="KaydenRCMWPF.UserControls.ThermalSignalRadialGage"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:l="clr-namespace:KaydenRCMWPF.UserControls"
             mc:Ignorable="d"
             Height="Auto" Width="Auto" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <l:RangeToThermalConverter x:Key="rangeConverter"></l:RangeToThermalConverter>
        <BooleanToVisibilityConverter x:Key="BoolToVis"/>
        <Style x:Key="SetPoint1" TargetType="telerik:Marker" >
            <Setter Property="Background" Value="#FF42A2FF" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:Marker" x:Name="SetPoint1ControlTemplate">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="gridSetPoint1">
                            <Polygon Points="1,1 -1,1 0,0"
                                 Stretch="Fill"
                                 Fill="{TemplateBinding Background}"
                                 Stroke="{TemplateBinding BorderBrush}"
                                 StrokeThickness="{TemplateBinding BorderThickness}" Width="Auto"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="SetPoint2" TargetType="telerik:Marker" >
            <Setter Property="Background" Value="#025ABA" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:Marker" x:Name="SetPointControlTemplate">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="gridSetPoint2">
                            <Polygon Points="1,1 -1,1 0,0"
                                 Stretch="Fill"
                                 Fill="{TemplateBinding Background}"
                                 Stroke="{TemplateBinding BorderBrush}"
                                 StrokeThickness="{TemplateBinding BorderThickness}" Width="Auto"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid Background="White">
        <StackPanel >
            <telerik:RadRadialGauge x:Name="radialGauge" Width="300" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top" telerik:StyleManager.Theme="Windows8" Margin="15,15,15,0">
                <telerik:RadialScale Name="scale"
                                    Max="60000"
                                     LabelRotationMode="None"
                                 LabelOffset="0.05*"
                                     IsInteractive="False"   
                                     MajorTickOffset="-0.015*"
                                     MiddleTickOffset="-0.015*"
                                     MinorTickOffset="-0.015*">
                    <telerik:RadialScale.Ranges>
                        <telerik:GaugeRange
                                Min="0" Max="60000"
                                StartWidth="0.01"
                                EndWidth="0.01"
                                Background="#FFA3A3A3" />
                        <telerik:GaugeRange x:Name="range"
                                            Min="{Binding Path=LedPointer0, Converter={StaticResource rangeConverter}, Mode=OneWay}" Max="{Binding Path=LedPointer100, Converter={StaticResource rangeConverter}, Mode=OneWay}"
                                            StartWidth="0.02"
                                            EndWidth="0.02"
                                            Background="#FFE50000"/>
                    </telerik:RadialScale.Ranges>
                    <telerik:RadialScale.Indicators>
                        <telerik:RadialScaleMarker Name="setpoint1"
                                                Visibility="{Binding Path=ThermalSetpoint1Visible, Converter={StaticResource BoolToVis}}"
                                        IsAnimated="True"
                                        Duration="0:0:1"
                                        telerik:ScaleObject.Offset="0.07*"
                                        Style="{StaticResource SetPoint1}"
                                        Value="{Binding Path=ThermalSetpoint1, Converter={StaticResource rangeConverter}, Mode=OneWay}" ToolTip="Thermal Setpoint 1 value: {Value|F0}" />
                        <telerik:RadialScaleMarker Name="setpoint2"
                                                Visibility="{Binding Path=ThermalSetpoint2Visible, Converter={StaticResource BoolToVis}}"
                                        IsAnimated="True"
                                        Duration="0:0:1"
                                        telerik:ScaleObject.Offset="0.07*"
                                        Style="{StaticResource SetPoint2}"
                                        Value="{Binding Path=ThermalSetpoint2, Converter={StaticResource rangeConverter}, Mode=OneWay}" ToolTip="Thermal Setpoint 2 value: {Value|F0}"/>
                        <telerik:Needle Name="needle" Value="{Binding Path=ThermalDelta, Mode=OneWay}" Background="Black" ToolTip="Thermal Signal value: {Value|F0}"/>
                        <telerik:Pinpoint BorderBrush="Black">
                            <telerik:Pinpoint.Background>
                                <SolidColorBrush />
                            </telerik:Pinpoint.Background>
                        </telerik:Pinpoint>
                    </telerik:RadialScale.Indicators>
                </telerik:RadialScale>
            </telerik:RadRadialGauge>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Horizontal" ToolTip="Current value of thermal signal." Margin="0,-20,0,0">
                <TextBlock Name="thermalLabel" Foreground="#FFA3A3A3" FontFamily="Arial" FontWeight="Bold" Text="Thermal Signal:"></TextBlock>
                <TextBlock Name="thermalValue" Foreground="Black" FontFamily="Arial" FontWeight="Bold" Text="{Binding Path=ThermalDelta, Mode=OneWay}" Margin="5,0,0,0"></TextBlock>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>




Here's Main Window code behind where I set DataContext. HoldingRegisters class which I use as a DataContext is a non static class.



using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Management;
using KaydenRCMWPF.ModbusCommunication;
using System.Windows.Threading;
using KaydenRCMWPF.UserControls;
using System.ComponentModel;
 
 
 
namespace KaydenRCMWPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
 
        private string ConnectionStatus { get; set; }
 
        private string Connected { get; set; }
 
        private ModbusService modbusService = new ModbusService();
 
        private HoldingRegisters _holding = new ModbusCommunication.HoldingRegisters();
 
        private DispatcherTimer timerRead;
 
        private DispatcherTimer timerGraph;
 
        public MainWindow()
        {
            InitializeComponent();
            timerRead = new DispatcherTimer();
            timerGraph = new DispatcherTimer();
 
            this.DataContext = _holding;
            HoldingRegisters.IsFormDirty = false;
        }
 
        private void btnRead_Click(object sender, RoutedEventArgs e)
        {
            ReadAll();
        }
 
        private void ReadAll()
        {
            object unit = GetComboBoxSelectedItemTag(cboUnitNumber);
            if (unit != null)
            {
                byte Unit = Convert.ToByte(unit);
                _holding = modbusService.ReadAllHolding(Unit);
                this.DataContext = _holding;
                HoldingRegisters.IsFormDirty = false;
            }
        }
}




I hope that description is sufficient.













0
Andrey
Telerik team
answered on 12 Dec 2013, 10:42 AM
Hi Troy,

You can use other ways of data binding. You can bind the Min and Max values of the range using data context of the scale. You can specify the ElementName and Path for binding like the following:

<telerik:RadRadialGauge>
    <telerik:RadialScale Name="scale"
                            RangeLocation="Inside"
                            RangeOffset="0.1*">
        <telerik:RadialScale.Ranges>
            <telerik:GaugeRange x:Name="range" 
                                Min="{Binding ElementName=scale, Path=DataContext.RangeMin}"
                                Max="{Binding ElementName=scale, Path=DataContext.RangeMax}"
                                StartWidth="0.1"
                                EndWidth="0.12"
                                Background="#FFE50000" />
        </telerik:RadialScale.Ranges>
    </telerik:RadialScale>
</telerik:RadRadialGauge>

I have also attached a sample solution. I hope it helps.

Regards,
Andrey Murzov
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.

Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.

Sign up for Free application insights >>
0
Troy
Top achievements
Rank 1
answered on 12 Dec 2013, 05:51 PM
That works perfect. Thanks.
0
Alexey
Top achievements
Rank 1
answered on 26 Jan 2017, 08:41 PM

I use revision 2016.3.1024.45 and have absolutely the same issue! I try to use Binding with GaugeRange and it doesn't work at all. The code I have binding problem looks like that:

<telerik:GaugeRange Background="Transparent"
                                        IndicatorBackground="White"
                                        Max="{Binding MaxTarget}"
                                        Min="{Binding MinTarget}" />

I tried any binding value, nothing work.However any  plain number value (25, 75, 100 etc.) works just fine. Also, same binding in the telerik:VerticalLinearScale works well:

<telerik:VerticalLinearScale Max="{Binding Target}" Min="0">

I already have ViewModel assigned in this View, so I can't get the point of proposed workaround. 

Don't you have a fix for that problem yet, after so long time?

0
Dinko
Telerik team
answered on 31 Jan 2017, 02:37 PM
Hello Alexey,

The GaugeRange is a Freezable element. It is not added to the visual tree and the binding does not work. The root reason behind this behavior is an issue with the propagation of the DataContext for freezable elements in WPF itself. 

Looking at the provided code snippet of the GaugeRange you haven't bound to the DataContext of the RadialScale as Andrey mentioned in his last post. In your case, you can check the following code snippet.
<telerik:RadialScale x:Name="scale" >
    <telerik:RadialScale.Ranges>
        <telerik:GaugeRange x:Name="greenRange" 
                            Background="Transparent"
                            IndicatorBackground="White"
           Min="{Binding ElementName=scale, Path=DataContext.MinTarget}"
           Max="{Binding ElementName=scale, Path=DataContext.MaxTarget}"/>
    </telerik:RadialScale.Ranges>  
</telerik:RadialScale>

Let us know if it works for you.

Regards,
Dinko
Telerik by Progress
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which you to write beautiful native mobile apps using a single shared C# codebase.
0
Nick
Top achievements
Rank 1
answered on 20 Jun 2017, 12:04 PM

For me this seemed to fix the binding for display but it produces a ton of warnings because I have the gauge in a ItemTemplate and it really seems to introduce some lag. Each ItemTemplate has 5 ranges with 2 bindings each. Is this warning expected with the work around?

The warning is "System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=DataContext.LowerCritical; DataItem='SemicircleNorthScale' (Name='Scale'); target element is 'GaugeRange' (HashCode=8240522); target property is 'Min' (type 'Double')"

0
Dinko
Telerik team
answered on 21 Jun 2017, 07:20 AM
Hello Nick,

We are not aware of such warning when using the provided workaround. It will be great if you can send isolate project from your application reproducing this behavior. This way we can directly investigate it on our side.

Regards,
Dinko
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Alain
Top achievements
Rank 1
answered on 22 Mar 2018, 02:53 PM

Hello,

I am using a VerticalLinearScale inside a RadVerticalLinearGauge and defining two GaugeRange to get two different visual regions.

I followed the advice regarding the DataContext to use when binding Min and Max properties of the GaugeRange; I refer to the DataContext of the parent VerticalLinearScale control; in my case, one ViewModel instance is the DataContext for all the view controls, including the RadVerticalLinearGauge .

Setting the GaugeRange Min and Max values work ok on *initial* display of both GaugeRange: GaugeRange Min and Max binded values are used.  However, I am unable to get the GaugeRanges to react to a modification of its Min or Max properties, through the binded properties.  In my case, as seen in the provided XAML, it is the frontier between the two GaugeRange that is modified, the Max of the first GaugeRange and the Min of the second GaugeRange.

Note that the telerik:BarIndicator Value responds properly to the changes of the property it is binded to.

 

Here is the relevant XAML:

 

<telerik:RadVerticalLinearGauge x:Name="VialLinearGauge"  telerik:StyleManager.Theme="Windows8"
                                            Background="White" Margin="0" Padding="0" 
                                            OuterBorderBrush="White" 
                                            OuterBorderThickness="10" >
                <telerik:VerticalLinearScale x:Name="VialLinearScale"                                              
                                             IsInteractive="True"
                                             Min="0"
                                             Max="1000"
                                             MajorTicks="10"
                                             MinorTicks="5"
                                             Foreground="Black"
                                             RelativeX="0.6"
                                             RelativeY="0.025"
                                             RelativeHeight="0.95"
                                             StartWidth="0.6"
                                             EndWidth="0.6"
                                             RangeLocation="Inside"
                                             RangeOffset="-0.05*">
                     <telerik:VerticalLinearScale.Indicators>
                        <telerik:BarIndicator UseRangeColor="True" 
                                              Value="{Binding MyViewModelVolumeValue}"
                                              StartWidth="0.6"
                                              EndWidth="0.6"
                                              Background="Yellow"
                                              EmptyFill="LightGray"        
                                              RangeColorSmoothing="0.5"
                                              RangeColorMode="ProportionalLastRangesBrush"
                                          />
                    </telerik:VerticalLinearScale.Indicators>
                    <telerik:VerticalLinearScale.Ranges>
                        <telerik:GaugeRange Background="{StaticResource VolumeVialColorBrush}"
                                            IndicatorBackground="{StaticResource VolumeVialColorBrush}"
                                            StartWidth="0.02"
                                            EndWidth="0.02"
                                            Min="0" 
                                            Max="{Binding ElementName=VialLinearScale, Path=DataContext.VolumeInVial}"
                                            />
                        <telerik:GaugeRange Background="{StaticResource VolumeVialAndSyringeColorBrush}"
                                            IndicatorBackground="{StaticResource VolumeVialAndSyringeColorBrush}" 
                                            StartWidth="0.02"
                                            EndWidth="0.02"
                                            Min="{Binding ElementName=VialLinearScale, Path=DataContext.VolumeInVial}"
                                            Max="1000"
                                            />
                    </telerik:VerticalLinearScale.Ranges>
                </telerik:VerticalLinearScale>
            </telerik:RadVerticalLinearGauge>

 

Telerik Version: WPF_2017_3_913_Hotfix

Thanks in advance,

Alain

 

 

 

 

0
Dinko
Telerik team
answered on 27 Mar 2018, 11:25 AM
Hello Alain,

Thank you for the provided code snippet.

I tested the described behavior, but it seems to work as expected on my side. Attached to this reply is the project (based on the provided code snippet) which I used to test your scenario. Can you take a look and let me know if I am doing something different?

Regards,
Dinko
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Alain
Top achievements
Rank 1
answered on 27 Mar 2018, 11:54 AM

Hello Dinko,

I slightly modified the test sample code you provided and could reproduce the issue I was describing in my post.

The problem arises when the telerik:BarIndicator.Value does not change - in my scenario this value is constant; in your test sample, both this value and the telerik:GaugeRange.Min/Max values are modified.

Awaiting your feedback on this issue,

Best Regards,

Alain

0
Dinko
Telerik team
answered on 30 Mar 2018, 08:15 AM
Hi Alain,

Thank you for the updated information. I manage to reproduce this behavior. Basically, the BarIndicator is not updated when the GaugeRange Min/Max value is changed. This behavior is already logged in our Feedback Portal. You can subscribe to the item in order to receive notification for its status changed.

As a workaround, you can measure/arrange the BarIndicator. I have updated the project from my last reply to demonstrate this workaround.

Regards,
Dinko
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Alain
Top achievements
Rank 1
answered on 03 Apr 2018, 02:23 PM

Hi Dinko,

Thank you for the information.  By forcing the refresh of the BarIndicator.Value by a modification of its value, I can now modify the Gauge 'A' Min / Gauge 'B' Max value .

Your example code uses code-behind to access the BarIndicator control; it also works through the view model property binded to  BarIndicator.Value (memorize the binded property value, then set it to 0, then restore the memorized value).

Thanks for your support!

Alain

Tags
Gauges
Asked by
Guy
Top achievements
Rank 2
Answers by
Andrey
Telerik team
Troy
Top achievements
Rank 1
Alexey
Top achievements
Rank 1
Dinko
Telerik team
Nick
Top achievements
Rank 1
Alain
Top achievements
Rank 1
Share this question
or