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
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:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
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
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 >>
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: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.
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
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 >>
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?
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
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')"
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
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
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
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
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
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