Horizontal Linear Gauge Resize Problem

[James]

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
         layoutRoot.Children.RemoveAt(0);

         //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
         linearGauge.Items.Add(linearScale);

         //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
         };
         linearScale.Indicators.Add(mLinearBar);

         //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
         };
         linearScale.Indicators.Add(mNeedle);


         //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;

         layoutRoot.Children.Add(mGaugeControl);
      }

void linearScale_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
{
   ((Telerik.Windows.Controls.Gauges.LinearScale)(sender)).Top = (e.NewSize.Height / e.NewSize.Width) / 2;
}

[James]

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.

Thanks,

james

[Andrey]

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.

Greetings,
Andrey Murzov
the Telerik team