Horizontal Linear Gauge Resize Problem

3 posts, 1 answers
  1. James
    James avatar
    44 posts
    Member since:
    Jan 2012

    Posted 17 Feb 2012 Link to this post

    I am using a linear gauge set to horizontal orientation inside a User Control class.  Because of the number of different ways that a user needs to be able to configure this control class I am building the whole gauge in the code behind and none in the xaml.  When I go to re-size the gauge by dragging it horizontally then the scale will re-size appropriately in the height and width dimensions, but when I attempt to re-size the control vertically the scales height and width will not decrease with the re-size of the control.  This will happen until the scale is covered up by the bottom edge of the gauge.  How can I get the scale to correctly size within the UserControl?

    I have attached screenshots to see how the control looks when it is re-sized vertically and horizontally.

     Thanks for any help.

    The first code sample creates the gauge in the codebehind and the second code sample keeps the top of the scale in the correct spot when re-sizing.
    private void SetupHorizontalSlider()
             //clear the grid of any controls before setting up a control
             //create the RadGauge
             mGaugeControl = new RadGauge() { Name = "mGaugeControl" };
             //create the LinearGauge
             LinearGauge linearGauge = new LinearGauge();
             //add the LinearGauge to the RadRauge container
             mGaugeControl.Content = linearGauge;
             //create the LinearScale
             LinearScale linearScale = new LinearScale()
                Name = "linearScale",
                Min = 0,
                Max = 10,                       
                StartWidth = 0.1,
                EndWidth = 0.1,
                StrokeThickness = 1,
                MajorTicks = 10,
                MiddleTicks = 1,
                MinorTicks = 5,
                Orientation = Orientation.Horizontal,                       
                Left = 0.15,
                Top = 0.13,           
                RelativeHeight = 0.70
             linearScale.MajorTick.Length = 0.01;
             linearScale.MajorTick.TickWidth = 0.1;
             linearScale.MajorTick.Location = ScaleObjectLocation.OverCenter;
             linearScale.MiddleTick.Length = 0.025;
             linearScale.MiddleTick.TickWidth = 0.5;
             linearScale.MiddleTick.Location = ScaleObjectLocation.OverCenter;
             linearScale.MinorTick.Length = 0.02;
             linearScale.MinorTick.TickWidth = 0.3;
             linearScale.MinorTick.Location = ScaleObjectLocation.OverCenter;
             linearScale.SizeChanged += new System.Windows.SizeChangedEventHandler(linearScale_SizeChanged);
             linearScale.Label.Location = ScaleObjectLocation.Inside;
             //add the RadialScale to the RadialGauge Items collection
             //use the marker styled in the resource section of this page
             mMarkerTemplate = this.Resources["HorizontalTopMarkerTemplate"] as ControlTemplate;
             //create the LinearBar indicator and add it to the indicators collection
             mLinearBar = new LinearBar()
                Name = "bar",
                Location = ScaleObjectLocation.OverCenter,
                EmptyFill = System.Windows.Media.Brushes.Transparent,
                Background = System.Windows.Media.Brushes.Green,
                IsAnimated = true,
                Duration = new Duration(TimeSpan.FromSeconds(2)),
                Value = 2
             //create marker indicator to add to the indicators collection
             mNeedle = new Marker()
                Name = "needle",
                Template = mMarkerTemplate,
                IsAnimated = true,
                Duration = new Duration(TimeSpan.FromSeconds(2)),
                Location = ScaleObjectLocation.OverCenter,           
                RelativeHeight = 0.1,
                RelativeWidth = 0.09,
                Value = 2
             //register the needle with the page so that the animation will work correctly
             RegisterControl(mNeedle.Name, mNeedle);
             RegisterControl(mLinearBar.Name, mLinearBar);
             //create NumericIndicator to add to the RadialScale Indicators collection
             //mValueIndicator = new NumericIndicator();
             mGaugeScale = linearScale;
             mGauge = linearGauge;
    void linearScale_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
       ((Telerik.Windows.Controls.Gauges.LinearScale)(sender)).Top = (e.NewSize.Height / e.NewSize.Width) / 2;
  2. James
    James avatar
    44 posts
    Member since:
    Jan 2012

    Posted 20 Feb 2012 Link to this post

    Can anyone tell if it is possible to have the contents of the linear gauge in horizontal orientation as shown above re-size so that all of the internal pieces such as the scale, linear bar and marker will also shrink in relative terms.  This works when re-sizing the control in the horizontal direction, just not in the vertical direction.  I need to get this to work for a project that I have coming due.  Please let me know if this can or can't be done.


  3. Answer
    Andrey avatar
    1681 posts

    Posted 22 Feb 2012 Link to this post

    Hello James,

    In old gauge control the linear scale with horizontal orientation uses its width as the cell size for relative management. The height of the scale is not used for calculation of size of elements. You can use the code like below to recalculate the size of the scale bar and the size of tick marks.
    public partial class MainWindow : Window
        // The width of the scale bar relatively to height of the scale
        private const double ScaleRelativeWidth = 0.3d;
        // The tick's length relatively to width of the scale bar
        private const double MajorTickLength = 0.5d;
        private const double MiddleTickLength = 0.4d;
        private const double MinorTickLength = 0.25d;
        private void scale_SizeChanged(object sender, SizeChangedEventArgs e)
            LinearScale linearScale = sender as LinearScale;
            if (linearScale != null)
                // height to width ratio
                double ratio = e.NewSize.Height / e.NewSize.Width;
                // correction of scale top
                linearScale.Top = ratio / 2d;
                // correction of scale width
                double scaleWidth = ScaleRelativeWidth * ratio;
                linearScale.StartWidth = linearScale.EndWidth = scaleWidth;
                // correction of tick's length
                linearScale.MajorTick.Length = MajorTickLength * scaleWidth;
                linearScale.MiddleTick.Length = MiddleTickLength * scaleWidth;
                linearScale.MinorTick.Length = MinorTickLength * scaleWidth;

    Also I should note that in the 2011.Q3 release we introduced a new gauge control. It is almost a new control redesigned from scratch. Some its features are similar to the old control’s features but they are implemented in absolutely different way (using different set of properties), some features are completely new.
    Our demo application now references new gauge control and demonstrates its features.
    We strong recommend using of the new gauge control in the new applications. We also would recommend replace old control with new one in existing applications if there is a timeframe for this task.

    Andrey Murzov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top