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

3 posts, 0 answers
  1. Mitchell
    Mitchell avatar
    45 posts
    Member since:
    Mar 2013

    Posted 07 Nov 2013 Link to this post

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



  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 08 Nov 2013 Link to this post

    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
        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
    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
  4. Mitchell
    Mitchell avatar
    45 posts
    Member since:
    Mar 2013

    Posted 08 Nov 2013 Link to this post

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


    Thanks - Mitch

Back to Top