# Horizontal Linear Gauge scaling problem

Gauge
Top achievements
Rank 2
Zero Gravity Chimp asked on 11 Jun 2010, 05:12 AM
Hi.

I've got a Linear gauge on my page with the Orientation set to horizontal.

Here is the description of the problem:

The gauge is in a dynamically sizing container, for example, It might be 100x500 at first. When the height reaches a smaller amount than the width (which i am checking on sizechanged event), I automatically set the linearscale element to horizontal alignment.

When this starts off it is fine. So the width is now (for example) 200x199 and the gauge fits in well.

When I keep dragging the container outwards, the width of the elements increase (as can be observed using actualwidth property) but the height does not increase. Yet, linearscale i am working with seems to be moving downwards as i add width.

If you have a look at the following example (from http://www.telerik.com/community/forums/silverlight/gauge/horizontal-linear-gauge.aspx):



you will see that the "Top" property is set to 0.15 to make the gauge fit into 300x100 size. "Top" property of 0.5 will work if the width and height are roughly the same, putting the scale in the middle.

If i keep adding width to the container of the linearscale (but not adding any height) I need to keep reducing the 'top' property of the gauge for it to fit, until eventually the physical size of the linear bar is too big to fit into the container's height.

If you compare this to vertical gauge, a "left" property of 0.5 will always keep the linearscale positioned right in the horizontal-centre of the area, whether we add or remove height it does not move out to the side.

Any suggestions? Can you please test this and see if there is some kind of setting that will avoid this scenario?

Thank you!

Paul

## 7 Answers, 1 is accepted

0
Accepted
Andrey
Telerik team
answered on 15 Jun 2010, 01:11 PM
Hi Paul,

If initially it is easier to use settings for vertical oriented linear gauge, then within sizechanged handler you can recalculate Top and Left properties depends on the scale orientation.
<UserControl x:Class="SilverlightTempApplication2.MainPage"
xmlns:gauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="Aqua">
<gauge:LinearScale Name="linearScale"
Left="0.5"
Top="0.05"
RelativeHeight="0.9"
SizeChanged="linearScale_SizeChanged">
<gauge:IndicatorList>
<gauge:LinearBar Name="linearBar" Value="20" Background="Blue" />
</gauge:IndicatorList>
</gauge:LinearScale>
</Grid>
</UserControl>
using System.Windows;
using System.Windows.Controls;

namespace SilverlightTempApplication2
{
public partial class MainPage : UserControl
{
private double originalLeft;

public MainPage()
{
InitializeComponent();
}

private void linearScale_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Width > e.NewSize.Height)
{
if (linearScale.Orientation != Orientation.Horizontal)
{
linearScale.Orientation = Orientation.Horizontal;
this.originalLeft = linearScale.Left;
linearScale.Left = linearScale.Top;
}

// the top is recalculated according to the Height
linearScale.Top = this.originalLeft * e.NewSize.Height / e.NewSize.Width;
}
else if (linearScale.Orientation != Orientation.Vertical)
{
linearScale.Orientation = Orientation.Vertical;
linearScale.Top = linearScale.Left;
linearScale.Left = this.originalLeft;
}

// change tick width to refresh ticks and labels
double tickWidth = linearScale.MajorTick.TickWidth;
linearScale.MajorTick.TickWidth = 0;
linearScale.MajorTick.TickWidth = tickWidth;
}
}
}

Sincerely yours,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Zero Gravity Chimp
Top achievements
Rank 2
answered on 17 Jun 2010, 04:11 AM
Hi Andrey,

Your solution is very helpful to me and i will be using this in my application. For that I will mark your post as answer.

I am still left with a question though, and I've realised that this is for horizontal and vertical gauges: When the width to height proportion is not 'standard', It would seem that the "bar" part of the scale for your default themes will blow up outside their constraints.

What I mean is this: If you have roughly 700width and 100 height and put a horizontal gauge in there, or have 700 height and 100 width and put a vertical gauge in there, The part of the scale that has your tickmarks, marker lines, radial ranges, etc, will become too big to fit into the small width/height of the container.

IF you were to keep lengthening this container area, the gauge blows up more and more.

I am getting around this now by changing the templates for my application so that the proportions never reach these extremes, but it is limiting. For example if i wanted to place 1 radgauge for silverlight accross the top of the window with a height of roughly 50-100pixels, it would scale way out of proportion for any standard resolution.

Does that make sense to you? I hope this helps.

Regards,

Paul
0
Zero Gravity Chimp
Top achievements
Rank 2
answered on 17 Jun 2010, 04:34 AM
Hello again,

I seem to have a slightly related problem with scaling linear gauges.

It seems that the radial ranges are getting 'lost' floating around somewhere nearby the radialbar/values, but not exactly where it ought to be. When you keep resizing, they eventually redraw and catch up, so i reasoned that the way to ensure this happens is to redraw the LinearScale objects somehow.

I've subsequently added the following bit of code to your "SizeChanged" event handler which you supplied, right at the end, to rectify this for now:

 foreach (LinearRange obj in linearScale.Ranges) { obj.StartWidth = 0.02; obj.EndWidth = 0.02; obj.StartWidth = 0.01; obj.EndWidth = 0.01; }

It seems this will cause the LinearRanges to redraw upon sizechanged event and that will smooth the problem that I experienced where the the ranges "float" around not quite where they are supposed to be.

Thanks for all of your assistance and time!

Regards,

Paul
0
Andrey
Telerik team
answered on 17 Jun 2010, 02:24 PM
Hello Paul,

I'm sorry, I am not sure I understand the problem completely. The RadialRange and RadialBar should be used within RadialScale only. They have no concerns to the LinearScale. And your question mentions them both. And your code is for the LinearScale as well.
Could you, please, clarify what the problem is? A sample solution which demonstrates the problem you have would be greatly appreciated.

Kind regards,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Zero Gravity Chimp
Top achievements
Rank 2
answered on 18 Jun 2010, 06:27 AM
Sorry, I meant LinearRanges on a LinearScale.

This is simply a 'typo', there is no radial involved, sorry!

I am simply resizing a linear scale that has some linear ranges on it. When I do so, with the sizechanged event handler that you suggested for me, the ranges stay in 1 place while the rest of the gauge resizes accordingly.

I will try to make a sample application for this when I have some time, but I hope the clarification might assist you for now.

Regards,

Paul
0
Andrey
Telerik team
answered on 18 Jun 2010, 12:26 PM
Hello Paul,

Thanks for the clarification!
We logged this issue in our  PITS system. You can check its progress on the following link:
http://www.telerik.com/support/pits.aspx#/public/silverlight/2477

Best wishes,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Zero Gravity Chimp
Top achievements
Rank 2
answered on 22 Jun 2010, 03:56 AM
Hello again.

Thank you very much for that timely and constructive response :)

I have since found 2 other properties that seem to have problems causing a 'draw' when you set them to the same value.

Tags
Gauge