Telerik Forums
UI for Silverlight Forum
3 answers
33 views

If my RadSemicircleNorthScale has a Min=0 and a Max=100, the 100 text will extended outside of the boundaries of the control making it look a little odd.  Is there any way to bring in the end tick so that the text "100" would stay within the boundaries of the gauge?

Cheers, Rob.

Rob Ainscough
Top achievements
Rank 1
 answered on 26 Sep 2016
6 answers
119 views
I'm having an issue when setting max values at or above 10,000 for my semi-circle radial gauge. The number 10000 is too long and bleeds throw the bottom of the gauge (see attached screenshot), is there some way I can change the label style so it would suffix "K" and show 10K instead of 10,000, and likewise M for numbers in the millions (1M, 10M, as opposed to 1000K, 10000K or 1000000 etc.)?

I know that there's a "Multiplier" property, but I feel that in the context of my application, the letter suffix would be more intuitive and easier to understand from the user's standpoint.

Thanks in advance.

Petar Marchev
Telerik team
 answered on 16 Jun 2016
4 answers
87 views
I create a gauge at runtime, assign the min and max values based on some XML file. The value is bound to a response from the server. When the value coming from the server is greater than the max value, the gauge is displayed wrongly. See the attached file. In this gauge, min=0, max=50 and value =100. Min and max remain the same, but the needle is somewhere random.
Martin Ivanov
Telerik team
 answered on 13 May 2016
3 answers
128 views
I have an app the runs in browser and OOB, when in browser, I get the following error:

Failed to create a 'System.Windows.DependencyProperty' from the text 'Background'. [Line: 6 Position: 30]

Digging deeper, it gives me this message at the bottom of the exception stack.

The DOM/scripting bridge is disabled.

Here's the inner exception:
   at System.Windows.Browser.HtmlPage.VerifyThreadAndEnabled()
   at System.Windows.Browser.HtmlPage.get_Plugin()
   at Telerik.Windows.Controls.Gauges.GaugeBase..cctor()

Its happening when initializing the Gauge control. I bought the full version as I was on trial but that didn't help.

Martin Ivanov
Telerik team
 answered on 04 Apr 2016
3 answers
97 views
Hi,

Im using the RadSemicircleNorthGauge in a MVVM Silvelright 4 application and need to define some ranges for the control. I added some GaugeRanges in Blend and the designer showed them as I added them without any problems. But when i began to run the application i started getting some weird errors. So i began commenting our some code and finally found out that it was the GaugeRanges defined in xaml that where acting up with Caliburn.Micro.

The error:
Reference is not a valid visual DependencyObject.

{System.InvalidOperationException: Reference is not a valid visual DependencyObject.
   at System.Windows.Media.VisualTreeHelper.GetRelative(DependencyObject reference, RelativeKind relativeKind)
   at System.Windows.Media.VisualTreeHelper.GetChildrenCount(DependencyObject reference)
   at Caliburn.Micro.BindingScope.<.cctor>b__3(DependencyObject elementInScope)
   at Caliburn.Micro.ViewModelBinder.<.cctor>b__3(Object viewModel, DependencyObject view, Object context)
   at Caliburn.Micro.Bootstrapper.DisplayRootViewFor(Application application, Type viewModelType)
   at Caliburn.Micro.Bootstrapper`1.OnStartup(Object sender, StartupEventArgs e)
   at MS.Internal.CoreInvokeHandler.InvokeEventHandler(UInt32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
   at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName, UInt32 flags)}

Code that gives the error in Caliburn.Micro:
current in this case is {Telerik.Windows.Controls.Gauge.GaugeRange}
BindingScope.cs
 var childCount = VisualTreeHelper.GetChildrenCount(current); 

This is the code that gave me the error:
<telerik:RadSemicircleNorthGauge Grid.Row="1" Style="{StaticResource RadSemiCircleNorthGaugeStyle}">
           <telerik:RadialScale x:Name="radialScale" MajorTickStroke="{StaticResource BackgroundBlack}"
                                            Foreground="{x:Null}" MiddleTickStroke="{x:Null}"
                                            MiddleTickBackground="{x:Null}" MajorTickBackground="{x:Null}"
                                            MinorTickBackground="{x:Null}" MinorTickStroke="{x:Null}">
               <telerik:RadialScale.Ranges>
                   <telerik:GaugeRange Min="0" Max="32" TickBackground="{StaticResource ControlGreen}"
                                                           Background="{StaticResource BackgroundBlack}" StartWidth="0.15" EndWidth="0.15"/>
                   <telerik:GaugeRange Min="34" Max="65"  TickBackground="{StaticResource ControlGreen}"
                                                           Background="{StaticResource ControlGreen}" StartWidth="0.15" EndWidth="0.15"/>
                   <telerik:GaugeRange Min="67" Max="100" TickBackground="{StaticResource ControlGreen}"
                                                           Background="{StaticResource BackgroundBlack}" StartWidth="0.15" EndWidth="0.15"/>
               </telerik:RadialScale.Ranges>
               <telerik:RadialScale.Indicators>
                   <telerik:Needle IsAnimated="True" Value="91" Style="{StaticResource GaugeNeedleStyle}" />
               </telerik:RadialScale.Indicators>
           </telerik:RadialScale>
       </telerik:RadSemicircleNorthGauge>

My workaround:
I added the ranges to the Gauge in code behind.
public partial class TestView : UserControl
   {
       public TestView ()
       {
           InitializeComponent();
           this.Loaded += new RoutedEventHandler(TestView _Loaded);
       }
 
       void TestView _Loaded(object sender, RoutedEventArgs e)
       {
           this.Dispatcher.BeginInvoke(() =>
               {
                   this.GaugeRadialScale.Ranges.Add(new GaugeRange() { Min = 0, Max = 32, Background = new SolidColorBrush(Colors.Magenta), StartWidth = 0.15, EndWidth = 0.15, TickBackground = new SolidColorBrush(Colors.Blue) });
                   this.GaugeRadialScale.Ranges.Add(new GaugeRange() { Min = 34, Max = 65, Background = new SolidColorBrush(Colors.Magenta), StartWidth = 0.15, EndWidth = 0.15, TickBackground = new SolidColorBrush(Colors.Blue) });
                  this.GaugeRadialScale.Ranges.Add(new GaugeRange() { Min = 67, Max = 100, Background = new SolidColorBrush(Colors.Magenta), StartWidth = 0.15, EndWidth = 0.15, TickBackground = new SolidColorBrush(Colors.Blue) });
               });
       }
   }

Below is a link to a sample project that will give the error.
http://www.burgundi.com/wp-content/uploads/2012/03/CaliburnGaugeTest.zip

Is this something that can be resolved since i don´t want any code in my code behind?

Regards,
Sebastian
Doug
Top achievements
Rank 1
Veteran
 answered on 15 Feb 2015
1 answer
63 views
Hi,

I have a RadSemicircleNorthGauge where I want to have a thicker needle.
I use a tooltip and it is very hard to make it display when the needle is just one pixels wide.

Here is my XAML:
<telerik:RadSemicircleNorthGauge OuterBorderBrush="Transparent" OuterBackground="Transparent" InnerBorderBrush="Transparent" InnerBackground="Transparent" Foreground="{StaticResource TextBrush}" Margin="0,0,0,5">
                    <telerik:SemicircleNorthScale Center="0.5,1" Radius="0.9" MajorTickStep="20" Foreground="{StaticResource TextBrush}" FontSize="9" StartAngle="190" SweepAngle="160">
                        <telerik:SemicircleNorthScale.Indicators>
                            <telerik:Needle Name="Needle" Background="{StaticResource SelectedBrush}" IsAnimated="True" Duration="00:00:00.5" TooltipFormat=" {Value|F1} %" />
                            <telerik:BarIndicator x:Name="BarIndicator" Background="{StaticResource ShiftAbsenceBrush}" Value="{Binding Value, ElementName=Needle}" />
                            <telerik:Pinpoint Background="{StaticResource SelectedBrush}" BorderBrush="{StaticResource SelectedBrush}" />
                        </telerik:SemicircleNorthScale.Indicators>
                    </telerik:SemicircleNorthScale>
                </telerik:RadSemicircleNorthGauge>


Regards,
HÃ¥kan

Sia
Telerik team
 answered on 24 Nov 2014
7 answers
60 views
If you put gauge in RadListBox or HeaderedItemsControl or simple ItemsControl and enable negative scale* and not set Width and Height property. Will find that this control have fatal UI bug.
Strech, Width and Height property not work correctly. Entire control is showing like one simple pixel that do noting.

For test set BarIndicator to value 90 or -90

Other problems is scale Ticks. It is apear only at half part.

*enable negative scale:
- HorizontalLinearScale min=0, max=100;
- GaugeRange1 min= -100, max=0
- GaugeRange2 min=0, max=100

If you cannot reproduce bugs... write here and I will send to you example.
kity
Top achievements
Rank 2
 answered on 26 Oct 2014
7 answers
93 views
hi team,
i have Rad gauge within a listbox so that i can add the number of gauges dynamically. since i am using MVVM pattern for my project, i should have all my properties and populate them in ViewModel.
now i am creating a class which is having all the properties of gauge and add the gauge object to list then set the list as itemssource for that created list box. here i have a big challenge that i need to add the range list dynamically if i have them static it is working good 
but i need to have them as dynamic for eg one gauge will have 2 ranges and another one will have 4 ranges. 
how could i add these rangelist dynamically from viewmodel. please give me a sample code in mvvm.

thanks
Muthukumar Nagarajan  
<Grid x:Name="LayoutRoot" Background="White">
        <ListBox ItemsSource="{Binding GaugeList}" >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="{Binding View}"></StackPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>                  
                    <telerik:RadGauge Width="280"
                                            Height="160"
                                            IsEnabled="True"
                                            Tag=""
                                            x:Name="rdg" Cursor="Hand" FontFamily="Calibri" FontSize="13.333">
  
  
                         
  
  
                        <telerik:RadGauge x:Name="RadialGauge1"
                                                IsEnabled="{Binding IsGaugeEnabled}"
                                                Tag="1" Cursor="Hand">
                              
  
  
                            <telerik:RadialGauge
                                                    Style="{StaticResource NewGaugeStyle}"
                                                    Background="{x:Null}"
                                                    BorderBrush="{x:Null}"
                                                    OuterBackground="{x:Null}"
                                                    OuterBorderBrush="#FF1E212A"
                                                    x:Name="RadialGauge1VR" >
  
  
                                <telerik:RadialScale
                                                        Style="{StaticResource RadialScaleHalfCircleNStyle}"
                                                        Min="{Binding Min}" Max="{Binding Max}"
                                                        MajorTickStep="{Binding MajorTickStep}"
                                                        LabelRotationMode="None"
                                                        FontWeight="Normal"
                                                        x:Name="RadialScale1" Radius="1.6" EndWidth="0.4" StartWidth="0.4" StartAngle="181" SweepAngle="177" MiddleTicks="5" MinorTicks="2">                                  
                                    <telerik:RadialScale.MiddleTick>
                                        <telerik:MiddleTickProperties Background="White" Location="CenterOutside" Length="0.12" TickWidth="0.08"/>
                                    </telerik:RadialScale.MiddleTick>
                                    <telerik:RadialScale.Label>
                                        <telerik:LabelProperties Format="{}{0:F1}" Location="CenterInside" FontSize="16" Offset="0.25" />
                                    </telerik:RadialScale.Label>
                                    <telerik:RadialScale.MajorTick>
                                        <telerik:MajorTickProperties
                                                                Length="0.4"
                                                                Location="CenterInside"
                                                                Background="White" Offset="-0.15" TickWidth="0.05" />
                                    </telerik:RadialScale.MajorTick>
                                    <telerik:RangeList FontWeight="Normal">
  
  
                                        <telerik:RadialRange
                                                                x:Name="1"
                                                                StartWidth="0.3"
                                                                EndWidth="0.3"
                                                                Location="OverCenter"
                                                                BorderBrush="{x:Null}"
                                                                Min="{Binding Min}" Max="{Binding Max1}" Background="Transparent" />
  
  
                                        <telerik:RadialRange
                                                                x:Name="2"
                                                                StartWidth="0.3"
                                                                EndWidth="0.3"
                                                                Location="OverCenter"
                                                                BorderBrush="{x:Null}"
                                                                Min="{Binding Max1}" Max="{Binding Max2}" Background="Transparent" />
  
  
                                        <telerik:RadialRange
                                                                x:Name="3"
                                                                StartWidth="0.3"
                                                                EndWidth="0.3"
                                                                Location="OverCenter"
                                                                      
                                                                BorderBrush="{x:Null}"
                                                                Min="{Binding Max2}" Max="{Binding Max3}" Background="Transparent" />                                     
  
  
                                    </telerik:RangeList>
                                    <telerik:IndicatorList HorizontalAlignment="Center">
                                        <telerik:Needle
                                                                x:Name="gauge1_needle1"
                                                                Value="{Binding FirstNeedleValue}"
                                                                ArrowBackground="Black"
                                                                ArrowBorderBrush="Black"
                                                                IsAnimated="True
                                                                Background="{x:Null}"
                                                                BorderBrush="{x:Null}"
                                                                HorizontalAlignment="Stretch" Style="{StaticResource NewNeedleStyle}" Location="CenterInside" RelativeShift="0" Offset="0.1" RelativeHeight="0.2" RelativeWidth="0"/>
  
  
                                    </telerik:IndicatorList>
                                </telerik:RadialScale>
                            </telerik:RadialGauge>
                        </telerik:RadGauge>
  
  
                    </telerik:RadGauge>                  
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
Renier Pretorius
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 04 Aug 2014
1 answer
50 views
I'm working with the RadHorizontalLinearGuage and there is some extra space at the bottom I cant seem to get rid of.

Here is my xaml. I put the border around it so I could show the space I am talking about.
 
<Border BorderBrush="Red" BorderThickness="2" HorizontalAlignment="Left">
<telerik:RadHorizontalLinearGauge HorizontalAlignment="Left" Height="100" Width="325" Margin="2" VerticalAlignment="Top">
    <telerik:HorizontalLinearScale Min="0" Max="100"  MajorTicks="1" MiddleTicks="1" MinorTicks="1" LabelTemplate="{StaticResource EmptyLabel}" RelativeX="0" RelativeY="0.2" />
    <telerik:HorizontalLinearScale Min="0" Max="100" LabelLocation="Inside" MajorTickLocation="Inside" MiddleTickLocation="Inside" MinorTickLocation="Inside" RelativeX="0" RelativeY="0.2" >
        <telerik:HorizontalLinearScale.Indicators>
            <telerik:BarIndicator Value="0" StrokeThickness="0" StartWidth="0.06" IsAnimated="True"/>
        </telerik:HorizontalLinearScale.Indicators>
        <telerik:HorizontalLinearScale.CustomItems>
            <Border telerik:ScaleObject.Value="50" Style="{StaticResource CustomScaleBorder}" />
        </telerik:HorizontalLinearScale.CustomItems>
    </telerik:HorizontalLinearScale>
</telerik:RadHorizontalLinearGauge>
</Border>

Andrey
Telerik team
 answered on 10 Jun 2014
1 answer
45 views
Is it possible to customize the Radial Scale in a RadGauge control so that it displays letters (A-F) instead of numbers?
Andrey
Telerik team
 answered on 27 Mar 2014
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?