This is a migrated thread and some comments may be shown as answers.

[Solved] Programmtically Setting Arrow Indicator Value

2 Answers 111 Views

Gauge for XAML

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

George asked on 28 Jul 2014, 12:24 PM

gauge.jpg

Hi,

I have reated a gauge indicator with an arrow pointer as follows:

<DataVisualization:RadRadialGauge x:Name="rgAttention" Grid.Column="0" Grid.Row="1"

HorizontalAlignment="Stretch" Margin="0,0,0,0"

VerticalAlignment="Stretch" MinAngle="0" MaxAngle="180"

LabelRadiusScale="1" TickRadiusScale="0.9" LabelStep="25"

MaxValue="100" MajorTickStep="5" TickStep="5">

<DataVisualization:RadRadialGauge.Resources>

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

<DataVisualization:GaugeColorValueRange Color="Red" MaxValue="100" MinValue="75"/>

</DataVisualization:GaugeValueToBrushConverter>

<DataVisualization:GaugeValueToBrushConverter x:Key="converter2" DefaultColor="#FF444444">

<DataVisualization:GaugeColorValueRange Color="Red" MaxValue="100" MinValue="75"/>

</DataVisualization:GaugeValueToBrushConverter>

</DataVisualization:RadRadialGauge.Resources>

<DataVisualization:RadRadialGauge.TickTemplate>

<DataTemplate>

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

</DataTemplate>

</DataVisualization:RadRadialGauge.TickTemplate>

<DataVisualization:RadRadialGauge.MajorTickTemplate>

<DataTemplate>

<Rectangle Fill="{Binding Converter={StaticResource converter2}}" Height="3" Width="10">

<Rectangle.RenderTransform>

<TranslateTransform X="-2"/>

</Rectangle.RenderTransform>

</Rectangle>

</DataTemplate>

</DataVisualization:RadRadialGauge.MajorTickTemplate>

<DataVisualization:RadRadialGauge.LabelTemplate>

<DataTemplate>

<TextBlock Foreground="{Binding Converter={StaticResource converter1}}" FontWeight="Bold" FontSize="13" Text="{Binding}"/>

</DataTemplate>

</DataVisualization:RadRadialGauge.LabelTemplate>

<DataVisualization:SegmentedRadialGaugeIndicator DataVisualization:RadRadialGauge.IndicatorRadiusScale="0.88" Value="100">

<DataVisualization:BarIndicatorSegment Length="2" Stroke="#FF444444" Thickness="3"/>

<DataVisualization:BarIndicatorSegment Length="1" Stroke="Red" Thickness="6"/>

</DataVisualization:SegmentedRadialGaugeIndicator>

<DataVisualization:ArrowGaugeIndicator ArrowTailRadius="1.4" Brush="Red" IsAnimated="True" DataVisualization:RadRadialGauge.IndicatorRadiusScale="0.85" Thickness="2" Value="25"/>

<DataVisualization:MarkerGaugeIndicator IsAnimated="True" DataVisualization:RadRadialGauge.IndicatorRadiusScale="0.76" Value="75">

<DataVisualization:MarkerGaugeIndicator.ContentTemplate>

<DataTemplate>

<Path Data="M0,0 L5,-4 L5,4 L0,0 L25,0" Fill="#FFFFFFFF" Stroke="#FFFFFFFF" StrokeThickness="2"/>

</DataTemplate>

</DataVisualization:MarkerGaugeIndicator.ContentTemplate>

</DataVisualization:MarkerGaugeIndicator>

</DataVisualization:RadRadialGauge>

I need to programmatically access and set the value of the Arrow Indicator, I have tried to follow the example from the documentation but not very much success.

Also, as per jpg example attached, I would like to set the red starting zone on the gauge to paint from value 75 up to 100, cannot figure out how to do this.

Any help will be greatly appreciated.

Regards,

George

2 Answers, 1 is accepted

answered on 31 Jul 2014, 10:49 AM

ArrowIndicatorValue.zip

Hi George,

Thank you for the question.

I have attached a sample project that demonstrates how you can bind the Value of the ArrowGaugeIndicator to a view model property and change it programmatically.

As to your second question, you will have to set the right ratio of the BarIndicatorSegment lengths. In your case it should be 3:1.

<DataVisualization:SegmentedRadialGaugeIndicator DataVisualization:RadRadialGauge.IndicatorRadiusScale="0.88" Value="100">

<DataVisualization:BarIndicatorSegment Length="3" Stroke="#FF444444" Thickness="3"/>

<DataVisualization:BarIndicatorSegment Length="1" Stroke="Red" Thickness="6"/>

</DataVisualization:SegmentedRadialGaugeIndicator>

I hope this helps. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.