Horizontal Linear Gauge scaling problem

[Zero Gravity Chimp]

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):

<Grid Width="300" Height="100" Background="Aqua">
    <gauge:LinearScale Name="linearScale"
           Orientation="Horizontal"
           Left="0.05"
           Top="0.15"
           RelativeHeight="0.9">
        <gauge:IndicatorList>
            <gauge:LinearBar Name="linearBar" Value="20" />
        </gauge:IndicatorList>
    </gauge:LinearScale>
</Grid>

 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

[Andrey]

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.
Please see the following example:

<UserControl x:Class="SilverlightTempApplication2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    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.

[Zero Gravity Chimp]

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

[Zero Gravity Chimp]

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

[Andrey]

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

[Zero Gravity Chimp]

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

[Andrey]

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
 

[Zero Gravity Chimp]

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.

Please see my posting here: (wait for a link..)