Gauges getting stretched in Full Screen

6 posts, 0 answers
  1. Kaustubh Wadi
    Kaustubh Wadi avatar
    26 posts
    Member since:
    Apr 2010

    Posted 30 Jun 2010 Link to this post

    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.
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 01 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Kaustubh Wadi
    Kaustubh Wadi avatar
    26 posts
    Member since:
    Apr 2010

    Posted 01 Jul 2010 Link to this post

    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.

  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 02 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Kaustubh Wadi
    Kaustubh Wadi avatar
    26 posts
    Member since:
    Apr 2010

    Posted 02 Jul 2010 Link to this post

    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.
  7. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 02 Jul 2010 Link to this post

    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"
        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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
DevCraft banner