Gauges getting stretched in Full Screen

[Kaustubh Wadi]

Hello,
    I am developing a Silverlight application using Telerik RadGauges. I have given Full Screen Functionality in that application. When user will click on Full Screen button, it will occupy the height and width of monitor screen. Also I am using widescreen monitor.

    My problem is, in Full screen mode rad gauges are getting stretched horizontally. Can any one tell me whatt i can do if i want the rad gauges should remain circle in Full screen. Here I have attached image of stretched gauges.

Waiting for your valuable response.
Many Thanks,
Kaustubh.

[Andrey]

Hi Kaustubh,

Unfortunately, we cannot reproduce the problem using RadControls for Silverlight 4 v 2010 Q1 build 0603.
Could you, please, create sample XAML code which demonstrates the stretched gauges?

Best wishes,
Andrey Murzov
the Telerik team

[Kaustubh Wadi]

Hello,
Andrey Murzov.

I am giving here code snippet. In that I am using viewbox control whose stretch property i have set to Fill. I want the same effect of stretch="Fill" property without stretching the rad gauges on any monitor screen. It may be wide screen or normal. It should maintain the aspect ratio of height and width. 

<UserControl x:Class="MultiGaugeDashboard.MainPage"
  xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
        xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"
        xmlns:gauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"
        xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
        xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
        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="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
      xmlns:local="clr-namespace:MultiGaugeDashboard;assembly=MultiGaugeDashboard">

    <Canvas x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" Width="1050">
        <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="1" ScaleY="1" x:Name="Scale" />
                <TranslateTransform X="0" Y="0" x:Name="Translate" />
            </TransformGroup>
        </Canvas.RenderTransform>
        <controlsToolkit:Viewbox x:Name="ScreenResolution" Background="Black" Stretch="Fill">
            <Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="650" Width="830" x:Name="target">

            <!--<Grid.Background>
                <ImageBrush ImageSource="SS.png" />
            </Grid.Background>-->
            <Grid.Resources>
                <ResourceDictionary>

                    <ControlTemplate x:Key="CarNeedleTemplate" TargetType="gauge:Needle">
                        <Grid x:Name="PART_Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <!-- Column 0 - tail -->
                                <ColumnDefinition Width="*" />
                                <!-- Column 1 - pin point -->
                                <ColumnDefinition Width="5*" />
                                <ColumnDefinition Width="15*" />
                                <ColumnDefinition Width="20*" />
                                <ColumnDefinition Width="60*" />
                            </Grid.ColumnDefinitions>

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

                            <Ellipse Grid.Column="1" Grid.Row="0" Grid.RowSpan="5" Stroke="Red" StrokeThickness="0"
                    Stretch="Fill">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                                        <GradientStop Color="#FF979797" Offset="0" />
                                        <GradientStop Color="#FF000000" Offset="1" />
                                        <GradientStop Color="#FF434343" Offset="0.377" />
                                        <GradientStop Color="#FF474747" Offset="0.594" />
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>

                            <Ellipse Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3"
                    Stretch="Fill" Stroke="Yellow" StrokeThickness="0">
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                                        <GradientStop Color="#FF979797" Offset="0" />
                                        <GradientStop Color="#FF000000" Offset="1" />
                                        <GradientStop Color="#FF434343" Offset="0.377" />
                                        <GradientStop Color="#FF474747" Offset="0.594" />
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>

                            <Path Grid.ColumnSpan="2" Grid.Row="2" Grid.Column="1" Stretch="Fill"
                    StrokeThickness="0">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,0">
                                            <LineSegment Point="1,0" />
                                            <LineSegment Point="1,1" />
                                            <LineSegment Point="0,1" />
                                            <LineSegment Point="0,0" />
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                                <Path.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF0C0C0C" Offset="0" />
                                        <GradientStop Color="#FF000000" Offset="1" />
                                        <GradientStop Color="#FF292929" Offset="0.148" />
                                        <GradientStop Color="#FFA3A3A3" Offset="0.365" />
                                        <GradientStop Color="#FF353535" Offset="0.631" />
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>
                            <Path Grid.ColumnSpan="4" Grid.Row="2" Grid.Column="2" Stretch="Fill" StrokeThickness="0">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure StartPoint="1,0.5">
                                            <LineSegment Point="0.1,0.8" />
                                            <ArcSegment Point="0.1,0.2" Size="0.03,0.03" SweepDirection="Clockwise" />
                                            <LineSegment Point="1,0.5" />
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                                <Path.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFF8D79" Offset="0" />
                                        <GradientStop Color="#FFE43A10" Offset="1" />
                                        <GradientStop Color="#FFF8785F" Offset="0.148" />
                                        <GradientStop Color="#FFF9AC9C" Offset="0.365" />
                                        <GradientStop Color="#FFF46F54" Offset="0.631" />
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>

                        </Grid>
                    </ControlTemplate>

                    <Style x:Key="CarNeedleStyle" TargetType="gauge:Needle">
                        <Setter Property="Location" Value="OverCenter" />
                        <Setter Property="RelativeHeight" Value="0.2" />
                        <Setter Property="RelativeShift" Value="0" />
                        <Setter Property="Template" Value="{StaticResource CarNeedleTemplate}" />
                    </Style>

                </ResourceDictionary>
            </Grid.Resources>

<control:RadGauge x:Name="radGauge1"  Margin="0,0,630,252"  Width="135"  Height="135" >
                <gauge:RadialGauge>
                    <gauge:RadialScale x:Name="radialScale1" Min="0" Max="100" MajorTicks="10"
                        MiddleTicks="2" MinorTicks="2">

                        <gauge:RadialScale.Label>
                            <gauge:LabelProperties Location="Inside" Foreground="Black" FontSize="10"/>
                        </gauge:RadialScale.Label>
                        <gauge:RangeList>
                            <gauge:RadialRange  x:Name="rngeval11"   StartWidth="0.14" EndWidth="0.14"
                                Location="Inside" Background="Red" BorderBrush="#7FFFFFFF" />
                            <gauge:RadialRange x:Name="rngeval12"   StartWidth="0.14" EndWidth="0.14"
                                Location="Inside" Background="Yellow" BorderBrush="#7FFFFFFF" />
                            <gauge:RadialRange x:Name="rngeval13"   StartWidth="0.14" EndWidth="0.14"
                                Location="Inside" Background="Green" BorderBrush="#7FFFFFFF" />
                        </gauge:RangeList>
                        <gauge:IndicatorList>
                            <gauge:Marker Name="marker1"  RelativeWidth="0.1"  RelativeHeight="0.1"  Location="Outside" Value="{Binding Path=Baseline}"/>
                            <gauge:Needle x:Name="needle1" IsAnimated="true"  Value="{Binding Path=Pressure}" Style="{StaticResource CarNeedleStyle}"/>
                        </gauge:IndicatorList>
                    </gauge:RadialScale>
                </gauge:RadialGauge>
            </control:RadGauge>
            <control:RadGauge x:Name="radGauge2"   Margin="0,0,205,252"  Width="135"  Height="135" >
                <gauge:RadialGauge>
                    <gauge:RadialScale x:Name="radialScale2" Min="0" Max="100" MajorTicks="10"
                        MiddleTicks="2" MinorTicks="2">

                        <gauge:RadialScale.Label>
                            <gauge:LabelProperties Location="Inside" Foreground="Black" FontSize="10"/>
                        </gauge:RadialScale.Label>
                        <gauge:RangeList>
                            <gauge:RadialRange x:Name="rngeval21"   StartWidth="0.14" EndWidth="0.14"
                                Location="Inside" Background="Red" BorderBrush="#7FFFFFFF" />
                            <gauge:RadialRange x:Name="rngeval22"   StartWidth="0.14" EndWidth="0.14"
                                Location="Inside" Background="Yellow" BorderBrush="#7FFFFFFF" />
                            <gauge:RadialRange x:Name="rngeval23"   StartWidth="0.14" EndWidth="0.14"
                                Location="Inside" Background="Green" BorderBrush="#7FFFFFFF" />
                        </gauge:RangeList>
                        <gauge:IndicatorList>
                            <gauge:Marker Name="marker2"  RelativeWidth="0.1"  RelativeHeight="0.1"  Location="Outside" Value="{Binding Path=Baseline}"/>
                            <gauge:Needle x:Name="needle2" IsAnimated="true"  Value="{Binding Path=Pressure}" Style="{StaticResource CarNeedleStyle}"/>
                        </gauge:IndicatorList>
                    </gauge:RadialScale>
                </gauge:RadialGauge>
            </control:RadGauge>

 </Grid>
        </controlsToolkit:Viewbox>


    </Canvas>
</UserControl>

Waiting for your valuable response.
Thanks,

Kaustubh.

[Andrey]

Hello Kaustubh Wadi,

When you use Stretch="Fill" property, the Viewbox stretches ALL its content including gauges according to its actual size. It is impossible to use gauges within Viewbox of this sort keeping their original size and proportion.

Greetings,
Andrey Murzov
the Telerik team

[Kaustubh Wadi]

Hi,
Andrey Murzov.
    Thanks for your reply.
Yes, it is impossible to maintain apect ratio if i am using viewbox's stretch="Fill" property. 
If i use Stretch="Uniform", it will increase the size of gauges in proper aspect ratio. But it will not occupy the whole space of monitor screen.
If i use Stretch="UnifirmToFill", it will clipped the image.

Is there any other alternative so that, my silverlight application will occupy whole space of monitor screen and also the rad gauges will maintain their aspect ratio.? I am facing this problem mainly for wide screen monitors. My aim is to keep the aspect ratio of rad gauges on any monitor screen. It may be normal monitor, or wide screen monitors or HDTV monitors. Is it possible to keep the aspect ratio? Can you suggest me some other alternative if it is not possible using the Viewbox control?  

Please help. i have stucked here from last 3 days.
Waiting for your valuable response.

Thanks,
Kaustubh.

[Andrey]

Hello Kaustubh Wadi,

As alternative way you can use the approach with resizable design of the control without specifying a certain width, height and margins of elements in pixels. The following example implements markup using grid element:

<UserControl x:Class="SilverlightApplication6.MainPage"
    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">
    <Grid x:Name="LayoutRoot">
        <Grid.Background>
            <ImageBrush ImageSource="/SS.png" Stretch="Fill"/>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="10*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <telerik:RadGauge x:Name="radGauge1"
                          Grid.Column="1" VerticalAlignment="Top">
            <telerik:RadialGauge>
                ...
            </telerik:RadialGauge>
        </telerik:RadGauge>
        <telerik:RadGauge x:Name="radGauge2"
                          Grid.Column="3" VerticalAlignment="Top">
            <telerik:RadialGauge>
                ...
            </telerik:RadialGauge>
        </telerik:RadGauge>
        <telerik:RadGauge x:Name="radGauge3"
                          Grid.Column="5" VerticalAlignment="Top">
            <telerik:RadialGauge>
                ...
            </telerik:RadialGauge>
        </telerik:RadGauge>
    </Grid>
</UserControl>

Best wishes,
Andrey Murzov
the Telerik team