LinearScale: CustomItems spanning range

2 posts, 0 answers
  1. Alexander
    Alexander avatar
    77 posts
    Member since:
    Apr 2013

    Posted 08 Oct 2013 Link to this post

    LinearScale.CustomItems spanning range

    Is it possible to have a custom item inside a linear scale span a certain range of values?
    When you use the attached property ScaleObject.Value, it centers the item at the specified value. However, I would like to have the left end of the item (e.g. an rectangle or border) at one value and the right end at another.

    Thank you.
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 10 Oct 2013 Link to this post

    Hello Alexander,

    In the case you like to have a resizable custom item you can use the relative measurement and relative location for the item. You can use the ScaleObject.RelativeX, RelativeY, RelativeWidth, RelativeHeight and HotSpot properties.
    The following example places the Rectangle from 25 to 50 in HorizontalLinearScale:
    <Window x:Class="LinearScaleCustomItems.MainWindow"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <telerik:RadHorizontalLinearGauge>
                <telerik:HorizontalLinearScale             
                    x:Name="scale"
                    Min="0" Max="100"
                    RelativeX="0.1" RelativeY="0.5"
                    RelativeHeight="0.1" RelativeWidth="0.8">
                    <telerik:HorizontalLinearScale.CustomItems>
                        <Rectangle
                            x:Name="item" Fill="Red"
                            telerik:ScaleObject.RelativeX="0.3"
                            telerik:ScaleObject.RelativeY="0.57"
                            telerik:ScaleObject.HotSpot="0, 1"
                            telerik:ScaleObject.RelativeWidth="0.2*"
                            telerik:ScaleObject.RelativeHeight="0.075*" />
                    </telerik:HorizontalLinearScale.CustomItems>
                </telerik:HorizontalLinearScale>
            </telerik:RadHorizontalLinearGauge>
        </Grid>
    </Window>


    The ScaleObject.RelativeX and RelativeWidth properties for the item are calculated using the following formulas which you can use also in the case when you should add the item dynamically or you should change its position when the Min-Max of the scale is changed):
    double leftValue = 25;
    double rightValue = 50;
    double scaleFactor = this.scale.RelativeWidth / (this.scale.Max - this.scale.Min);
     
    ScaleObject.SetRelativeX(this.item, this.scale.RelativeX + ((leftValue - this.scale.Min) * scaleFactor));
    ScaleObject.SetRelativeWidth(this.item, new GaugeMeasure((rightValue - leftValue) * scaleFactor, GridUnitType.Star));

    Regards,
    Andrey Murzov
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top