GaugeRange.Min and GaugeRange.Max not binding in 2013.2.724.40

14 posts, 0 answers
  1. Guy
    Guy avatar
    21 posts
    Member since:
    Oct 2012

    Posted 22 Aug 2013 Link to this post

    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?
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 26 Aug 2013 Link to this post

    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 >>
  3. Troy
    Troy avatar
    2 posts
    Member since:
    Feb 2012

    Posted 11 Dec 2013 Link to this post

    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.













  4. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 12 Dec 2013 Link to this post

    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 >>
  5. Troy
    Troy avatar
    2 posts
    Member since:
    Feb 2012

    Posted 12 Dec 2013 Link to this post

    That works perfect. Thanks.
  6. Alexey
    Alexey avatar
    1 posts
    Member since:
    Jan 2017

    Posted 26 Jan 2017 Link to this post

    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?

  7. Dinko
    Admin
    Dinko avatar
    540 posts

    Posted 31 Jan 2017 Link to this post

    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 allow you to write beautiful native mobile apps using a single shared C# codebase.
  8. Nick
    Nick avatar
    3 posts
    Member since:
    Jan 2015

    Posted 20 Jun 2017 in reply to Dinko Link to this post

    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')"

  9. Dinko
    Admin
    Dinko avatar
    540 posts

    Posted 21 Jun 2017 Link to this post

    Hello Nick,

    We are not aware of such warning when using the provided workaround. It will be great if you can send us 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.
  10. Alain
    Alain avatar
    3 posts
    Member since:
    Mar 2018

    Posted 22 Mar Link to this post

    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

     

     

     

     

  11. Dinko
    Admin
    Dinko avatar
    540 posts

    Posted 27 Mar Link to this post

    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.
  12. Alain
    Alain avatar
    3 posts
    Member since:
    Mar 2018

    Posted 27 Mar in reply to Dinko Link to this post

    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

  13. Dinko
    Admin
    Dinko avatar
    540 posts

    Posted 30 Mar Link to this post

    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.
  14. Alain
    Alain avatar
    3 posts
    Member since:
    Mar 2018

    Posted 03 Apr in reply to Dinko Link to this post

    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

Back to Top