Programmtically Setting Arrow Indicator Value

[George]

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

[Rosy Topchiyska]

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

 

 

[George]

Thank you, that worked as expected.

Regards,

George