Getting started with Gauge

[Gary Blakely]

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>

[Victor]

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

[Gary Blakely]

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

[Victor]

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