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

Programmtically Setting Arrow Indicator Value

2 Answers 11 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
Top achievements
Rank 1
George asked on 28 Jul 2014, 12:24 PM
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

Sort by
0
Rosy Topchiyska
Telerik team
answered on 31 Jul 2014, 10:49 AM
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.

 
0
George
Top achievements
Rank 1
answered on 31 Jul 2014, 11:06 AM
Thank you, that worked as expected.

Regards,

George
Tags
Gauge for XAML
Asked by
George
Top achievements
Rank 1
Answers by
Rosy Topchiyska
Telerik team
George
Top achievements
Rank 1
Share this question
or