Setting ScaleObject properties on GaugeRange work in Xaml, not in code

[Mitchell]

In my scenario, I have an unknown number of ranges at run time. So, I have to create them in code, set their properties, and add them to a scale. I need to move the range well inside of the scale, so I use the ScaleObject.Location and ScaleObject.Offset properties to achieve that look. Below is a sample window's xaml showing a single gauge (windows 8 implicit style)

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="NoXamlTest.MainWindow"
        Title="MainWindow" Height="274" Width="426">


    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button Width="75" Height="23" Click="Button_Click" Content="Default"/>

        <!-- NE quadrant -->

        <telerik:RadQuadrantNEGauge Grid.Row="1">
            <telerik:QuadrantNEScale Min="1" Max="5" MajorTicks="4" MiddleTicks="1">
                <telerik:QuadrantNEScale.Indicators>
                    <telerik:Needle Value="3.28" OffPosition="0"/>
                    <telerik:Pinpoint/>
                </telerik:QuadrantNEScale.Indicators>

                <telerik:GaugeRange x:Name="MyGaugeRange" Min="1" Max="5"
                    StartWidth=".05"
                    EndWidth=".05"
                    Stroke="Black"
                    StrokeThickness="1"
                    telerik:ScaleObject.Location="Inside"
                    telerik:ScaleObject.Offset="0.15*"
                    >
                    <telerik:GaugeRange.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Offset="0" Color="Green"/>
                            <GradientStop Offset="1" Color="Red"/>
                        </LinearGradientBrush>
                    </telerik:GaugeRange.Background>
                </telerik:GaugeRange>

            </telerik:QuadrantNEScale>
        </telerik:RadQuadrantNEGauge>

    </Grid>
</Window>

In case these things are important, there are some oddities in Expression Blend (2012) when changing the ScaleObject properties: Blend does not recognize the change until the project is built, using the ScaleObject properties causes Blend to not display the indicator. Here is the designer in Blend (after the project is built) where you can see that the range is in the expected location:

Here is the windows actually running (where the indicator is visible).





My real issue is that I have to set those ScaleObject properties in code. So, I remove the xaml above that sets the ScaleObject properties & instead set them in code when the button at the top of the window is clicked.  That code is:

private void Button_Click(object sender, RoutedEventArgs e)
{
    GaugeRange range = FindName("MyGaugeRange") as GaugeRange;
    range.SetValue(ScaleObject.LocationProperty, ScaleObjectLocation.Inside);
    range.SetValue(ScaleObject.OffsetProperty, new GaugeMeasure( 0.15, GridUnitType.Star));
}

The result is that nothing happens.  Am I doing something wrong, or is there a different way to move the range the way I want via code?



Thanks - Mitch

[Andrey]

Hello Mitchell,

First I should note that the GaugeRange should be placed inside the Ranges property of the scale.
You can't set location and offset for the single gauge range. It can be done for the scale or for the gauge range group (GaugeRangeGroup).
You can use the RangeLocation and RangeOffset properties of the scale. Or you can use the Location and Offset properties of GaugeRangeGroup when the range is placed inside it.
The sample code is below.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    x:Class="NoXamlTest.MainWindow"
    Title="MainWindow" Height="274" Width="426">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button Width="75" Height="23" Click="Button_Click" Content="Default"/>

        <!-- NE quadrant -->

        <telerik:RadQuadrantNEGauge Grid.Row="1">
            <telerik:QuadrantNEScale Min="1" Max="5" MajorTicks="4" MiddleTicks="1">
                <telerik:QuadrantNEScale.Indicators>
                    <telerik:Needle Value="3.28" OffPosition="0"/>
                    <telerik:Pinpoint/>
                </telerik:QuadrantNEScale.Indicators>

                <telerik:QuadrantNEScale.Ranges>
                    <telerik:GaugeRangeGroup x:Name="MyRangeGroup">
                        <telerik:GaugeRange Min="1" Max="5"
                            StartWidth=".05"
                            EndWidth=".05"
                            Stroke="Black"
                            StrokeThickness="1">
                            <telerik:GaugeRange.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                    <GradientStop Offset="0" Color="Green"/>
                                    <GradientStop Offset="1" Color="Red"/>
                                </LinearGradientBrush>
                            </telerik:GaugeRange.Background>
                        </telerik:GaugeRange>
                    </telerik:GaugeRangeGroup>
                </telerik:QuadrantNEScale.Ranges>
            </telerik:QuadrantNEScale>
        </telerik:RadQuadrantNEGauge>

    </Grid>
</Window>

private void Button_Click(object sender, RoutedEventArgs e)
{
    GaugeRangeGroup group = FindName("MyRangeGroup") as GaugeRangeGroup;
    group.Location = ScaleObjectLocation.Inside;
    group.Offset = new GaugeMeasure(0.15, GridUnitType.Star);
}

Regards,
Andrey Murzov
Telerik

[Mitchell]

Goodness, how did I miss that. Things work great now that the ranges are in the Ranges collection :).

Thanks - Mitch