[Solved] Circular RadialGaugeRange

[Nazia]

Hi,

I facing issue in creating a circular guage.

The code I am using is

<telerik:RadialGaugeRange MaxValue="100"

TickStep="25"

LabelStep="25"

Grid.Row="2"

x:Name="GaugeChart"

Margin="10,25,20,20"

VerticalAlignment="Top" d:LegendStyle="{}" MaxAngle="360" MinAngle="0">

<telerik:RadialGaugeRange.TickTemplate>

<DataTemplate>

<Ellipse Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="6" Height="6" Stroke="{StaticResource ApplicationSecondaryForegroundThemeBrush}"/>

</DataTemplate>

</telerik:RadialGaugeRange.TickTemplate>

<telerik:RadialGaugeRange.LabelTemplate>

<DataTemplate>

<TextBlock Text="{Binding}" FontSize="12" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}"/>

</DataTemplate>

</telerik:RadialGaugeRange.LabelTemplate>

<telerik:SegmentedRadialGaugeIndicator Value="360" telerik:RadialGaugeRange.IndicatorRadiusScale="1">

<telerik:BarIndicatorSegment Thickness="2" Stroke="Red" Length="1" />

<telerik:BarIndicatorSegment Thickness="2" Stroke="#999999" Length="1"/>

</telerik:SegmentedRadialGaugeIndicator>

</telerik:RadialGaugeRange>



Though I set maxangle to 360, it shows me only 180-half circle (attached image - guage.png)

Let me know how to achieve the complete circle? (attached image- circularGuage.png)

[Tsvyatko]

Hello Nazia,

 Since gauge indicators are relatively independent from the parent gauge the need max angle defined as well. Thus, the setup will look like this:

        <telerik:RadRadialGauge MaxValue="100"
TickStep="25"
LabelStep="25"
Grid.Row="2"
x:Name="GaugeChart"
Margin="50"
VerticalAlignment="Top" MaxAngle="360" MinAngle="0" LabelRadiusScale="1.15">
            <telerik:RadRadialGauge.TickTemplate>
                <DataTemplate>
                    <Ellipse Fill="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="6" Height="6" Stroke="{StaticResource ApplicationSecondaryForegroundThemeBrush}"/>
                </DataTemplate>
            </telerik:RadRadialGauge.TickTemplate>
            <telerik:RadRadialGauge.LabelTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" FontSize="12" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}"/>
                </DataTemplate>
            </telerik:RadRadialGauge.LabelTemplate>
            <telerik:SegmentedRadialGaugeIndicator Value="360" telerik:RadRadialGauge.IndicatorRadiusScale="1" telerik:RadRadialGauge.MaxAngle="360">
                <telerik:BarIndicatorSegment Thickness="2" Stroke="Red" Length="1" />
                <telerik:BarIndicatorSegment Thickness="2" Stroke="#999999" Length="1"/>
            </telerik:SegmentedRadialGaugeIndicator>
        </telerik:RadRadialGauge>

We are currently considering some improvements in the API and behavior in order to make it easier for use.

If you have any further questions do not hesitate to contact us.
Greetings,
Tsvyatko
the Telerik team

[Nazia]

Hi Tsvyatko,

When I use telerik:RadRadialGauge.MaxAngle="360", the App gets crashed.

Any specific reason?

[Tsvyatko]

Hi Nazia,

 It seems that you have our beta preview. We have recently released our public beta (where this issue is resolved). You can download it from here - http://www.telerik.com/products/windows-metro/overview.aspx . 

Please have a look and let us know if we can assist any further.

Regards,
Tsvyatko
the Telerik team