RadHorizontalLinearGauge issue

[Keith]

Hi

I have recently upgraded to 2012 Q2 controls and am now experiencing a problem with a UserControl which contains 2 horizontal gauges - basically they don't display correctly. I've attached an image (horizontalgauge.png) showing how a very basic linear scale (copied and pasted from your help) renders. Has something major changed between Q1 and Q2?

Please find below the xaml from my usercontrol

<UserControl x:Class="ESR.Parts.CounterGaugeComboPart"
    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:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>

        <LinearGradientBrush x:Key="GreenRangeBrush" EndPoint="1,0.5" StartPoint="0,0.5">
            <LinearGradientBrush.RelativeTransform>
                <MatrixTransform />
            </LinearGradientBrush.RelativeTransform>
            <LinearGradientBrush.Transform>
                <MatrixTransform />
            </LinearGradientBrush.Transform>
            <GradientStop Color="#ffa5fd6c" Offset="0" />
            <GradientStop Color="#FF61b322" Offset="1" />
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="AmberRangeBrush" EndPoint="1,0.5" StartPoint="0,0.5">
            <LinearGradientBrush.RelativeTransform>
                <MatrixTransform />
            </LinearGradientBrush.RelativeTransform>
            <LinearGradientBrush.Transform>
                <MatrixTransform />
            </LinearGradientBrush.Transform>
            <GradientStop Color="#FFF8CD12" Offset="0" />
            <GradientStop Color="#FFFae8a6" Offset="1" />
        </LinearGradientBrush>

        <LinearGradientBrush x:Key="RedRangeBrush" EndPoint="1,0.5" StartPoint="0,0.5">
            <LinearGradientBrush.RelativeTransform>
                <MatrixTransform />
            </LinearGradientBrush.RelativeTransform>
            <LinearGradientBrush.Transform>
                <MatrixTransform />
            </LinearGradientBrush.Transform>
            <GradientStop Color="Red" Offset="0" />
            <GradientStop Color="#FFf86f12" Offset="0.2" />
            <GradientStop Color="#FFfdb57b" Offset="1" />
        </LinearGradientBrush>

        <ControlTemplate x:Key="MarkerTemplate" TargetType="telerik:Marker">
            <Polygon Points="2,0 4,5 4,15 0,15 0,5" Stretch="Fill" Stroke="#ff84a4bb" Fill="White"  StrokeThickness="2"/>
        </ControlTemplate>

        <Style x:Key="MarkerStyle" TargetType="telerik:Marker">
            <Setter Property="Width" Value="20" />
            <Setter Property="Height" Value="20" />
            <Setter Property="Template" Value="{StaticResource MarkerTemplate}" />
        </Style>

    </UserControl.Resources>

    <telerik:RadBusyIndicator x:Name="LayoutRoot" IsBusy="{Binding IsBusy}" BusyContent="">
        <Grid Margin="5" VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="20"/>
            </Grid.RowDefinitions>

            <Grid Grid.Column="0" Grid.Row="0">
                <TextBlock Text="{Binding Caption, FallbackValue=''}" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center" Padding="5"/>
            </Grid>

            <Grid Margin="2" Grid.Column="1">
                <telerik:RadHorizontalLinearGauge>
                    <telerik:NumericScale Min="0" Max="999">
                        <telerik:NumericScale.Indicators>
                            <telerik:NumericIndicator
                                            telerik:ScaleObject.RelativeX="0.0"
                                            telerik:ScaleObject.RelativeY="0.0"
                                            telerik:ScaleObject.RelativeHeight="1"
                                            telerik:ScaleObject.RelativeWidth="1"
                                            Format="{}{0:F0}"
                                            FontSize="24"
                                            Value="{Binding CounterValue, FallbackValue=0}">
                                <telerik:NumericIndicator.Background>
                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                        <GradientStop Offset="0" Color="Gainsboro" />
                                        <GradientStop Offset="0.5" Color="WhiteSmoke" />
                                        <GradientStop Offset="1" Color="Gainsboro" />
                                    </LinearGradientBrush>
                                    </telerik:NumericIndicator.Background>
                                <telerik:NumericIndicator.Positions>
                                    <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                    <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                    <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                    <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                    <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                    <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                    <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                </telerik:NumericIndicator.Positions>
                            </telerik:NumericIndicator>
                        </telerik:NumericScale.Indicators>
                    </telerik:NumericScale>
                </telerik:RadHorizontalLinearGauge>
            </Grid>

            <Grid Grid.Row="1" Margin="2" Grid.ColumnSpan="2">
                <telerik:RadHorizontalLinearGauge Margin="2">
                    <telerik:LinearScale
                        Min="0"
                        Max="100"
                        LabelFormat="{}{0}%"
                        LabelLocation="OverCenter"
                        FontSize="8"

                        MajorTickLocation="OverCenter"
                        MiddleTickLocation="OverCenter"
                        MinorTickLocation="OverCenter"

                        RangeLocation="OverCenter"
                        MiddleTicks="1"
                        MinorTicks="1"
                        MajorTicks="4"
                        MajorTickRelativeHeight="0.0"
                        RelativeHeight="1"
                        RelativeWidth="1"
                        RelativeX="0"
                        RelativeY="0.5"
                        Foreground="Black"
                        >
                        <telerik:LinearScale.Ranges>
                            <telerik:GaugeRange Min="0" Max="80" StartWidth="1" EndWidth="1" Background="{StaticResource RedRangeBrush}"/>
                            <telerik:GaugeRange Min="80" Max="90" StartWidth="1" EndWidth="1" Background="{StaticResource AmberRangeBrush}"/>
                            <telerik:GaugeRange Min="90" Max="100" StartWidth="1" EndWidth="1" Background="{StaticResource GreenRangeBrush}"/>
                        </telerik:LinearScale.Ranges>

                        <telerik:LinearScale.Indicators>
                            <telerik:Marker telerik:ScaleObject.Location="Inside" Style="{StaticResource MarkerStyle}" telerik:ScaleObject.RelativeWidth="0.02" telerik:ScaleObject.RelativeHeight="0.8" Value="{Binding GaugeValue}"/>
                        </telerik:LinearScale.Indicators>
                        <telerik:LinearScale.CustomItems>
                            <!--<Rectangle telerik:ScaleObject.Value="80" telerik:ScaleObject.Location="OverCenter" telerik:ScaleObject.Offset="0" telerik:ScaleObject.RelativeHeight="1" Stroke="DarkGray" Width="2" Canvas.ZIndex="1001"/>
                            <Rectangle telerik:ScaleObject.Value="90" telerik:ScaleObject.Location="OverCenter" telerik:ScaleObject.Offset="0" telerik:ScaleObject.RelativeHeight="1" Stroke="DarkGray" Width="2" Canvas.ZIndex="1001"/>-->
                        </telerik:LinearScale.CustomItems>
                    </telerik:LinearScale>
                </telerik:RadHorizontalLinearGauge>
            </Grid>
        </Grid>
    </telerik:RadBusyIndicator>
</UserControl>

and this displays as per attachment usercontrol.png.

Thanks
Keith

[Lancelot]

Hi Keith,

I was able to reproduce the effects you are getting. Attached is the image of my design surface using only your code. The only change I made was to widen the design surface to 840x480 to give it room to render.

You have your root grid set to 740x520, which means it is larger than the design size. This would account for everything. What I would do is widen your design surface to 740x520. 
  
Good Luck,
Lancelot

[Keith]

Hi Lancelot

Thanks for your response but changing my design width / height hasn't made any difference - the gauge renders like this at run time too when, as you can see in the XAML, it should take up the available space within the parent grid (around 500 pixels on my screen).

Hopefully I'm doing something stupid but this only happened after upgrading the control versions from Q1 to Q2.

Cheers
Keith

[Lancelot]

Hi Keith,

I have not been able to reproduce the problem (outside of the fix I stated that repaired your code on my end). There must be something else in your environment putting a restraint on the page. Can you give me a little more information? For instance, are you using this as a UserControl inside of another page like a popup? The parent UserControl can squeeze the child UserControl if it has adjustable grids in it.

What I recommend if that is the case, explicitly set the height and width of the BusyIndicator's dimensions. This way the Parent page cant compress it if there is not enough room for the full 720x520.

How are you using this UC and what is it being placed in?

Lancelot

[Keith]

Hi

I'm a little confused where you're seeing that the dimensions should be a minimum of 720x520. As far as I can tell, there are no fixed widths or heights so I thought the the gauges should resize accordingly. Is that not the case?

Again this only started to occur after we upgraded from Q1 to Q2 of the controls, prior to that everything was displaying correctly.

Thanks
Keith

[Lancelot]

Hi Keith,

I found another issue in your code. There were some breaking changes with the RadGauges and you'll need to make a small modification. Here is the breaking change:

• Part of the measurement properties can now be specified in both relative and absolute mode. What was once considered a relative measurement - “0.5” now must be written “0.5*” (similar to the XAML notation for the RowDefinition.Width property of the Grid container), otherwise it would be considered as the absolute value in pixels (or 0 pixels).
• When using Vertical/Horizontal gauges you must put in them exactly Vertical/HorizontalLinearScale. The main reason behind this was to enable the implicit theming mechanisms.

You can read more about the breaking changes here. Basically the properties that have been effected are the following:

• telerik:ScaleObject.RelativeWidth
• telerik:ScaleObject.RelativeHeight
• telerik:ScaleObject.Offset
• MajorTickRelativeHeight
• MiddleTickRelativeHeight
• MinorTickRelativeHeight
• MajorTickRelativeWidth
• MiddleTickRelativeWidth
• MinorTickRelativeWidth
• LabelOffset
• MajorTickOffset
• MiddleTickOffset
• MinorTickOffset
• RangeOffset

I've gone ahead and made the changes in your code along with some comments at the places I altered. Below is the adjusted code.

<telerik:RadBusyIndicator x:Name="LayoutRoot" IsBusy="{Binding IsBusy}" BusyContent="">
            <Grid Margin="5" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>

                <Grid Grid.Column="0" Grid.Row="0">
                    <TextBlock Text="{Binding Caption, FallbackValue=''}" Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center" Padding="5"/>
                </Grid>

                <Grid Margin="2" Grid.Column="1">
                    <telerik:RadHorizontalLinearGauge>
                        <telerik:NumericScale Min="0" Max="999">
                            <telerik:NumericScale.Indicators>
                                <!-- Changed telerik:ScaleObject.RelativeWidth="1*" telerik:ScaleObject.RelativeHeight="1*" -->
                                <telerik:NumericIndicator
                                            telerik:ScaleObject.RelativeX="0.0"
                                            telerik:ScaleObject.RelativeY="0.0"
                                            telerik:ScaleObject.RelativeHeight="1*"
                                            telerik:ScaleObject.RelativeWidth="1*"
                                            Format="{}{0:F0}"
                                            FontSize="24"
                                            Value="{Binding CounterValue, FallbackValue=0}">
                                    <telerik:NumericIndicator.Background>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Offset="0" Color="Gainsboro" />
                                            <GradientStop Offset="0.5" Color="WhiteSmoke" />
                                            <GradientStop Offset="1" Color="Gainsboro" />
                                        </LinearGradientBrush>
                                    </telerik:NumericIndicator.Background>
                                    <telerik:NumericIndicator.Positions>
                                        <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                        <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                        <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                        <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                        <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                        <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                        <telerik:FontNumberPosition FontSize="18" BorderThickness="0.5,0.5,0.25,0.5" BorderBrush="#ff84A4BB" Foreground="Black" Background="Transparent" />
                                    </telerik:NumericIndicator.Positions>
                                </telerik:NumericIndicator>
                            </telerik:NumericScale.Indicators>
                        </telerik:NumericScale>
                    </telerik:RadHorizontalLinearGauge>
                </Grid>

                <Grid Grid.Row="1" Margin="2" Grid.ColumnSpan="2">
                    <telerik:RadHorizontalLinearGauge Margin="2">
                        <!-- Changed MajorTickRelativeHeight="0.0*"-->
                        <telerik:LinearScale
                        Min="0"
                        Max="100"
                        LabelFormat="{}{0}%"
                        LabelLocation="OverCenter"
                        FontSize="8"

                        MajorTickLocation="OverCenter"
                        MiddleTickLocation="OverCenter"
                        MinorTickLocation="OverCenter"


                        RangeLocation="OverCenter"
                        MiddleTicks="1"
                        MinorTicks="1"
                        MajorTicks="4"
                        MajorTickRelativeHeight="0.0*"
                        RelativeHeight="1"
                        RelativeWidth="1"
                        RelativeX="0"
                        RelativeY="0.5"
                        Foreground="Black"
                        >
                            <telerik:LinearScale.Ranges>
                                <telerik:GaugeRange Min="0" Max="80" StartWidth="1" EndWidth="1" Background="{StaticResource RedRangeBrush}"/>
                                <telerik:GaugeRange Min="80" Max="90" StartWidth="1" EndWidth="1" Background="{StaticResource AmberRangeBrush}"/>
                                <telerik:GaugeRange Min="90" Max="100" StartWidth="1" EndWidth="1" Background="{StaticResource GreenRangeBrush}"/>
                            </telerik:LinearScale.Ranges>

                            <!-- Changed telerik:ScaleObject.RelativeWidth="0.02*" telerik:ScaleObject.RelativeHeight="0.8*"-->

                            <telerik:LinearScale.Indicators>
                                <telerik:Marker telerik:ScaleObject.Location="Inside" Style="{StaticResource MarkerStyle}" telerik:ScaleObject.RelativeWidth="0.02*" telerik:ScaleObject.RelativeHeight="0.8*" Value="{Binding GaugeValue}"/>
                            </telerik:LinearScale.Indicators>
                            <telerik:LinearScale.CustomItems>
                                <!--<Rectangle telerik:ScaleObject.Value="80" telerik:ScaleObject.Location="OverCenter" telerik:ScaleObject.Offset="0" telerik:ScaleObject.RelativeHeight="1" Stroke="DarkGray" Width="2" Canvas.ZIndex="1001"/>
                            <Rectangle telerik:ScaleObject.Value="90" telerik:ScaleObject.Location="OverCenter" telerik:ScaleObject.Offset="0" telerik:ScaleObject.RelativeHeight="1" Stroke="DarkGray" Width="2" Canvas.ZIndex="1001"/>-->
                            </telerik:LinearScale.CustomItems>
                        </telerik:LinearScale>
                    </telerik:RadHorizontalLinearGauge>
                </Grid>
            </Grid>
        </telerik:RadBusyIndicator>

Good Luck,
Lancelot

[Keith]

Hi Lancelot

Thanks for your response again. I've modified the xaml as indicated and the numeric gauge now displays correctly although I'm still having issues with the horizontal linear gauge. It always seems to render vertically. I've created a very simple project which should just display the linear gauge horizontally. When I reference the Q1 DLLs it words as it should however if I change the DLLs to be the Q2 ones it stops working. I'm going to create an incident which will contain both solutions and take it from there.

Thanks
Keith

[Andrey]

Hello Keith,

As Lance mentioned in his last post in the 2012.Q2 release we introduced a few breaking changes in the gauge control.

When you create horizontal linear gauge it is not enough just create right type of the gauge control, but you must use right type of the scale inside the container. I.e. instead of LinearScale you should use HorizontalLinearScale:

<telerik:RadHorizontalLinearGauge Margin="2">
    <telerik:HorizontalLinearScale
                        Min="0"
                        Max="100"
                        LabelFormat="{}{0}%"
                        LabelLocation="OverCenter"
                        FontSize="8"
                        MajorTickLocation="OverCenter"
                        MiddleTickLocation="OverCenter"
                        MinorTickLocation="OverCenter"
                        RangeLocation="OverCenter"
                        MiddleTicks="1"
                        MinorTicks="1"
                        MajorTicks="4"
                        MajorTickRelativeHeight="0.0"
                        RelativeHeight="1"
                        RelativeWidth="1"
                        RelativeX="0"
                        RelativeY="0.5"
                        Foreground="Black">

        <telerik:LinearScale.Ranges>
            <telerik:GaugeRange Min="0" Max="80"
                    StartWidth="1"
                    EndWidth="1"
                    Background="{StaticResource RedRangeBrush}"/>
            <telerik:GaugeRange Min="80" Max="90"
                    StartWidth="1"
                    EndWidth="1"
                    Background="{StaticResource AmberRangeBrush}"/>
            <telerik:GaugeRange Min="90" Max="100"
                    StartWidth="1"
                    EndWidth="1"
                    Background="{StaticResource GreenRangeBrush}"/>
        </telerik:LinearScale.Ranges>

        <telerik:LinearScale.Indicators>
            <telerik:Marker telerik:ScaleObject.Location="Inside"
                    Style="{StaticResource MarkerStyle}"
                    telerik:ScaleObject.RelativeWidth="0.02*"
                    telerik:ScaleObject.RelativeHeight="0.8*"
                    Value="{Binding GaugeValue}"/>
        </telerik:LinearScale.Indicators>
    </telerik:HorizontalLinearScale>
</telerik:RadHorizontalLinearGauge>

Pay attention, there are few other braking changes are described on the same page. For example, the ScaleObject.RelativeWidth and ScaleObject.RelativeHeight properties type as well.

Greetings,

Andrey Murzov

the Telerik team