Semicircle Gauge sizing issue in GridView

[Andrew]

I'm having a problem with the auto-sizing of a Semicircle Gauge inside of a GridView. When the GridView first displays, the Gauge is taking up all the space in the column. And as I decrease the width of that column, it auto-sizes and gets smaller. However, if I then go and increase the width of the column, the Gauge never expands to fill the space. It just stays the same size as when it was smaller.

I don't think it's the GridView, because the linear gauge to the right of the semicircle works as expected. As I increase/decrease the column width for the linear gauge, it's width will increase/decrease as expected.

I wanted to attach my project but only image file extensions are allowed. I've attached before resizing and after resizing images.
I'm using the Silverlight controls, version 2012.1.215.1050.

What I did was implement a base UserControl class which does all the work and then I derived classes from that for the semicircle and linear gauges. The only difference between the two is the xaml. And neither one contains any code which attempts to handle sizing of the control. Also, neither xaml contains an explicit Width or Height for the semicircle or linear gauge. I have tried setting Width and Height to Auto for the semicircle, but that doesn't seem to help.

Here's the xaml I am using for linear gauge:

<controls:DashGaugeBase x:Class="iCentralSLDash.Controls.DashBarControl"
    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:controls="clr-namespace:iCentralSLDash.Controls"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <Style x:Key="CustomScaleBorder"
               TargetType="Border">
            <Setter Property="BorderBrush"
                    Value="Black" />
            <Setter Property="BorderThickness"
                    Value="0,1" />
            <Setter Property="telerik:ScaleObject.Location"
                    Value="OverCenter" />
            <Setter Property="telerik:ScaleObject.RelativeWidth"
                    Value="0.8" />
            <Setter Property="telerik:ScaleObject.RelativeHeight"
                    Value="0.24" />
        </Style>
        <DataTemplate x:Key="EmptyLabel">
            <Grid />
        </DataTemplate>
        <telerik:MetroColors x:Key="MetroColors" />
    </UserControl.Resources>

        <telerik:RadHorizontalLinearGauge x:Name="gauge1"
                                          MinHeight="55"
                                          MinWidth="110"
                                          BorderBrush="Transparent"
                                          Foreground="Transparent"
                                          OuterBorderBrush="Transparent">
        <telerik:RadHorizontalLinearGauge.OuterBackground>
            <SolidColorBrush Color="Transparent" />
        </telerik:RadHorizontalLinearGauge.OuterBackground>
        <telerik:RadHorizontalLinearGauge.Background>
            <SolidColorBrush Color="Transparent" />
        </telerik:RadHorizontalLinearGauge.Background>
        <telerik:LinearScale x:Name="scale2"
                             Min="0"
                             Max="50"
                             RelativeY=".45"
                             MajorTicks="1"
                             MiddleTicks="1"
                             MinorTicks="1"
                             MajorTickStrokeThickness="1"
                             MajorTickStroke="Black"
                             RangeLocation="Outside"
                             LabelTemplate="{StaticResource EmptyLabel}">
            <telerik:LinearScale.Ranges>
                <telerik:GaugeRange x:Name="range1"
                                    Min="0"
                                    Max="10"
                                    StartWidth="0.1"
                                    EndWidth="0.1"
                                    Background="Red" />
                <telerik:GaugeRange x:Name="range2"
                                    Min="10"
                                    Max="20"
                                    StartWidth="0.1"
                                    EndWidth="0.1"
                                    Background="Yellow" />
                <telerik:GaugeRange x:Name="range3"
                                    Min="20"
                                    Max="30"
                                    StartWidth="0.1"
                                    EndWidth="0.1"
                                    Background="Green" />
                <telerik:GaugeRange x:Name="range4"
                                    Min="30"
                                    Max="40"
                                    StartWidth="0.1"
                                    EndWidth="0.1"
                                    Background="Yellow" />
                <telerik:GaugeRange x:Name="range5"
                                    Min="40"
                                    Max="50"
                                    StartWidth="0.1"
                                    EndWidth="0.1"
                                    Background="Red" />
            </telerik:LinearScale.Ranges>
        </telerik:LinearScale>
        <telerik:LinearScale x:Name="scale1"
                             Min="0"
                             Max="50"
                             MiddleTickStrokeThickness="1"
                             MiddleTickStroke="Black"
                             MinorTickStrokeThickness="1"
                             MinorTickStroke="Black"
                             MajorTickStrokeThickness="1"
                             MajorTickStroke="Black"
                             LabelLocation="Inside"
                             MajorTickLocation="Inside"
                             MiddleTickLocation="Inside"
                             MinorTickLocation="Inside"
                             StartWidth="0.25"
                             EndWidth="0.25"
                             >
            <telerik:LinearScale.Indicators>
                <telerik:BarIndicator x:Name="bar1"
                                      Value="35"
                                      StrokeThickness="0"
                                      StartWidth="0.2"
                                      IsAnimated="False" />
            </telerik:LinearScale.Indicators>

            <telerik:LinearScale.CustomItems>
                <Border x:Name="border1"
                        telerik:ScaleObject.Value="25"
                        Style="{StaticResource CustomScaleBorder}"/>
                <TextBlock x:Name="textBlockValue"
                           telerik:ScaleObject.Value="25"
                           telerik:ScaleObject.Location="Outside"
                           telerik:ScaleObject.Offset="0.09"
                           Text="10"/>
            </telerik:LinearScale.CustomItems>
        </telerik:LinearScale>
    </telerik:RadHorizontalLinearGauge>
</controls:DashGaugeBase>

Here is the xaml I am using for the semicircle gauge:

<controls:DashGaugeBase x:Class="iCentralSLDash.Controls.DashGaugeControl"
    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"
    xmlns:controls="clr-namespace:iCentralSLDash.Controls"
    mc:Ignorable="d"
    d:DesignHeight="90" d:DesignWidth="150">
          <telerik:RadSemicircleNorthGauge x:Name="gauge1"
                                          MinHeight="55"
                                          MinWidth="110"
                                          >
        <telerik:RadialScale x:Name="scale1"
                             Min="0"
                             Max="10"
                             MajorTicks="4"
                             MiddleTicks="1"
                             MinorTicks="2"
                             LabelLocation="Outside"
                             LabelOffset="0.10"
                             LabelRotationMode="Automatic">
                <telerik:RadialScale.Ranges>
                    <telerik:GaugeRange x:Name="range1"
                                        StartWidth="0.1"
                                        EndWidth="0.1"
                                        Background="Red" />
                    <telerik:GaugeRange x:Name="range2"
                                        StartWidth="0.1"
                                        EndWidth="0.1"
                                        Background="Yellow" />
                    <telerik:GaugeRange x:Name="range3"
                                        StartWidth="0.1"
                                        EndWidth="0.1"
                                        Background="Green" />
                    <telerik:GaugeRange x:Name="range4"
                                        StartWidth="0.1"
                                        EndWidth="0.1"
                                        Background="Yellow" />
                    <telerik:GaugeRange x:Name="range5"
                                        StartWidth="0.1"
                                        EndWidth="0.1"
                                        Background="Red" />
                </telerik:RadialScale.Ranges>
                    <telerik:RadialScale.Indicators>
                    <telerik:Needle x:Name="needle1"
                                TailHeight="0.15"
                                telerik:ScaleObject.RelativeWidth="0.04"
                                Foreground="Black"
                                IsAnimated="False" />
                <telerik:Pinpoint />
            </telerik:RadialScale.Indicators>
            <telerik:RadialScale.CustomItems>
        <TextBlock x:Name="textBlockValue"
                   telerik:ScaleObject.RelativeY="1"
                   telerik:ScaleObject.RelativeX=".4"
                   Text="val" />
            </telerik:RadialScale.CustomItems>
        </telerik:RadialScale>
    </telerik:RadSemicircleNorthGauge>
</controls:DashGaugeBase>

[Andrey]

Hello Andrew,

It is very complicated and it is hard to reproduce the problem without your solution, but using just the code snippet you sent. Could you, please, open a support ticket and provide us with your solution or with a small sample solution which reproduces it?

Kind regards,
Andrey Murzov
the Telerik team