Semicircle Gauge sizing issue in GridView

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    8 posts
    Member since:
    Jul 2011

    Posted 21 Mar 2012 Link to this post

    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:controls="clr-namespace:iCentralSLDash.Controls"
        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: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>
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 26 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
Back to Top