Getting started with Gauge

4 posts, 0 answers
  1. Gary Blakely
    Gary Blakely avatar
    63 posts
    Member since:
    Jan 2010

    Posted 21 Jun 2011 Link to this post

    I used your wizard to creat the xaml for a radial gauge (pasted below).  Nothing shows at design time.  I set indicator1 and indicator2 to some values in the code behind.  Nothing shows at run time.  Why doesn't anything show?  Why does it have to be so hard?  What is wrong with your generated xaml?

    I'll go ahead and build a gauge manually using your stark documentation but it would be cool if your wizards worked.
    Gary


     

     

     

    <telerikDataVisualization:RadGauge>

     

    <Grid>

    <Grid.Resources>

    <telerikDataVisualization:GaugeValueToBrushConverter DefaultColor="Gray" x:Key="converter1">

    <telerikDataVisualization:GaugeColorValueRange Color="Red" MaxValue="120" MinValue="120" />

    </telerikDataVisualization:GaugeValueToBrushConverter>

    <DataTemplate x:Key="redCircleTemplate">

    <StackPanel Orientation="Horizontal">

    <Rectangle Fill="Red" Height="2" Width="6" />

    <Ellipse Fill="{StaticResource PhoneBackgroundBrush}" Height="8" Stroke="Red" Width="8" />

    </StackPanel>

    </DataTemplate>

    <DataTemplate x:Key="rhombTemplate">

    <Rectangle Fill="Gray" Height="11" RenderTransformOrigin="0.5, 0.5" Width="11">

    <Rectangle.RenderTransform>

    <TransformGroup>

    <SkewTransform AngleX="20" AngleY="20" />

    <RotateTransform Angle="-40" />

    </TransformGroup>

    </Rectangle.RenderTransform>

    </Rectangle>

    </DataTemplate>

    </Grid.Resources>

    <telerikDataVisualization:RadialGaugeRange LabelRadiusScale="0.56" LabelStep="30" MaxAngle="225" MaxValue="180" MinAngle="-45" TickRadiusScale="0.75" TickStep="10">

    <telerikDataVisualization:RadialGaugeRange.LabelTemplate>

    <DataTemplate>

    <TextBlock FontSize="15" FontWeight="Bold" Foreground="Gray" Text="{Binding}" />

    </DataTemplate>

    </telerikDataVisualization:RadialGaugeRange.LabelTemplate>

    <telerikDataVisualization:RadialGaugeRange.TickTemplate>

    <DataTemplate>

    <Rectangle Fill="{Binding Converter={StaticResource converter1}}" Height="2" Width="10" />

    </DataTemplate>

    </telerikDataVisualization:RadialGaugeRange.TickTemplate>

    <telerikDataVisualization:SegmentedRadialGaugeIndicator telerikDataVisualization:RadialGaugeRange.IndicatorRadiusScale="0.82" telerikDataVisualization:RadialGaugeRange.MaxAngle="226" telerikDataVisualization:RadialGaugeRange.MinAngle="-46" Value="180">

    <telerikDataVisualization:BarIndicatorSegment Length="2" Stroke="Gray" Thickness="6" />

    <telerikDataVisualization:BarIndicatorSegment Length="1.66" Stroke="#FF333333" Thickness="6" />

    <telerikDataVisualization:BarIndicatorSegment Length="2.34" Stroke="Red" Thickness="10" />

    </telerikDataVisualization:SegmentedRadialGaugeIndicator>

    <telerikDataVisualization:MarkerGaugeIndicator MarkerTemplate="{StaticResource redCircleTemplate}" telerikDataVisualization:RadialGaugeRange.IndicatorRadiusScale="0.34" telerikDataVisualization:RadialGaugeRange.MaxAngle="225" telerikDataVisualization:RadialGaugeRange.MinAngle="-45" Value="120" />

    <telerikDataVisualization:ArrowGaugeIndicator ArrowBrush="{StaticResource PhoneForegroundBrush}" ArrowTailRadius="1.3" ArrowThickness="2" IsAnimated="True" telerikDataVisualization:RadialGaugeRange.IndicatorRadiusScale="0.67" telerikDataVisualization:RadialGaugeRange.MaxAngle="225" telerikDataVisualization:RadialGaugeRange.MinAngle="-45" Value="100" Name="indicator1" />

    <telerikDataVisualization:MarkerGaugeIndicator IsAnimated="True" MarkerTemplate="{StaticResource rhombTemplate}" telerikDataVisualization:RadialGaugeRange.IndicatorRadiusScale="0.82" telerikDataVisualization:RadialGaugeRange.MaxAngle="225" telerikDataVisualization:RadialGaugeRange.MinAngle="-45" Value="137" Name="indicator2" Height="121" />

    </telerikDataVisualization:RadialGaugeRange>

    </Grid>

    </telerikDataVisualization:RadGauge>

  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 24 Jun 2011 Link to this post

    Hello Gary Blakely,

     Thank you for writing.

    Pasting the XAML you provided in a newly created project immediately rendered in the designer, nothing special had to be done. This is most likely a local issue related to your project and assembly references. Please post a support ticket and attach a sample project that demonstrates the issue so that I may assist you further.

    I am looking forward to your reply.

    Greetings,
    Victor
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Gary Blakely
    Gary Blakely avatar
    63 posts
    Member since:
    Jan 2010

    Posted 24 Jun 2011 Link to this post

    Victor,
    Turns out that I had to manually put in Width and Height settings.  It renders out of your wizard so small it can't be seen.  Looks fine now.
    Gary
  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 27 Jun 2011 Link to this post

    Hi Gary Blakely,

     It is great that you found where the issue is. This is default layout behavior of RadGauge. If no size is specified directly or by the parent layout container, it will not render because its DesiredSize will be 0,0. For example if you put a gauge in a Grid panel, it will stretch over the whole grid, however if you put it inside a Canvas, it will disappear because the Canvas measures its children with infinity.

    Thank you for the feedback, we will add this piece of information to the online documentation in order to avoid further confusion.

    Please write again if you have other questions.

    Best wishes,
    Victor
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Back to Top