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

Customizing various Gauge Needles colors

1 Answer 162 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Guilherme
Top achievements
Rank 1
Guilherme asked on 19 Jun 2012, 05:58 PM
Hello there!

I have a RadialGauge with various Needles and I need to customize each needle color. As I've defined a unique needle style, I couldn't set each color in a separated way. I tried setting Needle.Foreground and Needle.Background but it didn't work.

Could anyone help me?

BR
Guilherme Campos

---

            <!-- Region Radial Gauge Styles and Templates -->
 
            <!-- Region Radial Gauge Background -->
            <ControlTemplate x:Key="RadialGaugeBackground" TargetType="{x:Type ContentControl}">
                <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="0"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="0"/>
                    </Grid.RowDefinitions>
                    <!--<Ellipse Stretch="Fill" Grid.ColumnSpan="3" Grid.RowSpan="3" Fill="LightGray" />-->
                    <Ellipse Grid.Row="1" Grid.Column="1" Stretch="Fill" Fill="Transparent" />
                    <Ellipse Grid.Row="1" Grid.Column="1" Stretch="UniformToFill" Fill="Transparent" Height="300" Width="300"/>
                    <Path Grid.Row="1" Grid.Column="1" Stretch="None" Fill="LightGray" Stroke="Transparent" StrokeThickness="0" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Path.Data>
                            <PathGeometry>
                                <PathFigure StartPoint="0,0">
                                    <LineSegment Point="0,2" />
                                    <LineSegment Point="265,2"/>
                                    <LineSegment Point="265,0" />
                                </PathFigure>
                            </PathGeometry>
                        </Path.Data>
                    </Path>
                    <Path Grid.Row="1" Grid.Column="1" Stretch="None" Fill="LightGray" Stroke="Transparent" StrokeThickness="0" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <Path.Data>
                            <PathGeometry>
                                <PathFigure StartPoint="0,265">
                                    <LineSegment Point="2,265" />
                                    <LineSegment Point="2,0"/>
                                    <LineSegment Point="0,0" />
                                </PathFigure>
                            </PathGeometry>
                        </Path.Data>
                    </Path>
                </Grid>
            </ControlTemplate>
            <!-- End Region -->
 
            <!-- Region Radial Gauge Foreground -->
            <ControlTemplate x:Key="RadialGaugeForeground" TargetType="{x:Type ContentControl}">
                <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.3*"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="0.3*"/>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="0.3*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.25*"/>
                        <RowDefinition/>
                        <RowDefinition Height="0.25*"/>
                        <RowDefinition/>
                        <RowDefinition Height="0.25*"/>
                    </Grid.RowDefinitions>
 
                </Grid>
            </ControlTemplate>
            <!-- End Region -->
 
            <!-- Region Radial Gauge Needle -->
            <Style x:Key="NewNeedleStyle" TargetType="{x:Type telerik:Needle}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Grid Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="{TemplateBinding ActualWidth}" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="{TemplateBinding ActualHeight}" />
                                </Grid.RowDefinitions>
                                <Grid Grid.ColumnSpan="2">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="0.2*" />
                                        <RowDefinition Height="0.6*" />
                                        <RowDefinition Height="0.2*" />
                                    </Grid.RowDefinitions>
 
                                    <Grid Grid.Row="1" Grid.Column="1" Margin="0,0,0,0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="3*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="0.2*" />
                                            <RowDefinition Height="0.6*" />
                                            <RowDefinition Height="0.2*" />
                                        </Grid.RowDefinitions>
                                        <Path Grid.Row="1" Grid.Column="0" Stretch="None" Fill="Black" Stroke="Transparent" StrokeThickness="0" HorizontalAlignment="Left" VerticalAlignment="Center">
                                            <Path.Data>
                                                <PathGeometry>
                                                    <PathFigure StartPoint="40,0">
                                                        <LineSegment Point="40,3" />
                                                        <LineSegment Point="160,3"/>
                                                        <!--<LineSegment Point="110,9"/>
                                                        <LineSegment Point="120,4.5"/>
                                                        <LineSegment Point="110,0"/>-->
                                                        <LineSegment Point="160,0"/>
                                                    </PathFigure>
                                                </PathGeometry>
                                            </Path.Data>
                                        </Path>
                                        <Path Grid.Row="1" Grid.Column="1" Stretch="None" Fill="Black" Stroke="Transparent" StrokeThickness="0" HorizontalAlignment="Left" VerticalAlignment="Center">
                                            <Path.Data>
                                                <PathGeometry>
                                                    <PathFigure StartPoint="0,3">
                                                        <LineSegment Point="0,9" />
                                                        <LineSegment Point="10,4.5"/>
                                                        <LineSegment Point="0,0"/>
                                                        <LineSegment Point="0,3"/>
                                                    </PathFigure>
                                                </PathGeometry>
                                            </Path.Data>
                                        </Path>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <!-- End Region -->
 
            <!-- Region Radial Gauge Template -->
            <ControlTemplate x:Key="RadialGaugeTemplate" TargetType="{x:Type telerik:RadialGauge}">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <ContentControl Template="{DynamicResource RadialGaugeBackground}"/>
                        <ItemsPresenter />
                        <ContentControl Template="{DynamicResource RadialGaugeForeground}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
 
            <Style x:Key="RadialGaugeStyle" TargetType="{x:Type telerik:RadialGauge}">
                <Setter Property="Template" Value="{StaticResource RadialGaugeTemplate}" />
            </Style>
            <!-- End Region -->
 
            <!-- End Region -->
 
 
------------------------------------------------------------------------------------------------
 
            <!-- Region Radial Gauge -->
            <telerik:RadialGauge x:Name="radialGauge" Style="{StaticResource RadialGaugeStyle}" Width="300" Height="300" Background="White" >
                <telerik:RadialScale Min="-180" Max="180" SweepAngle="360" StartAngle="180" Radius="0.87" IsReversed="True" ShowLastLabel="True" ShowFirstLabel="False" MajorTickStep="30" >
                    <telerik:IndicatorList x:Name="RadialIndicator" >
                        <telerik:Needle x:Name="Needle0" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle1" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle2" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle3" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle4" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle5" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle6" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle7" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle8" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                        <telerik:Needle x:Name="Needle9" Style="{StaticResource NewNeedleStyle}" Visibility="Hidden" ></telerik:Needle>
                    </telerik:IndicatorList>
 
                    <telerik:RadialScale.MajorTick>
                        <telerik:MajorTickProperties TickWidth="0.01" Length="0.7" Background="LightGray"></telerik:MajorTickProperties>
                    </telerik:RadialScale.MajorTick>
 
                    <telerik:RadialScale.MiddleTick>
                        <telerik:MajorTickProperties TickWidth="0.01" Length="0.4" Background="LightGray"></telerik:MajorTickProperties>
                    </telerik:RadialScale.MiddleTick>
 
                    <telerik:RadialScale.MinorTick>
                        <telerik:MajorTickProperties TickWidth="0.01" Length="0.2" Background="LightGray"></telerik:MajorTickProperties>
                    </telerik:RadialScale.MinorTick>
 
                    <telerik:RadialScale.Label>
                        <telerik:LabelProperties Foreground="Gray"></telerik:LabelProperties>
                    </telerik:RadialScale.Label>
 
 
                </telerik:RadialScale>
 
            </telerik:RadialGauge>
            <!-- End Region -->

1 Answer, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 22 Jun 2012, 08:02 AM
Hello Guilherme,

It is very complicated and it is hard to reproduce the problem without your solution. But I can see that in your control template for needle you set color of filling statically and don't bind it to any property of the control. So changing of the Needle.Foreground and Needle.Background properties don't change any color in your template:

<!-- Region Radial Gauge Needle -->
<Style x:Key="NewNeedleStyle" TargetType="{x:Type telerik:Needle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid Width="{TemplateBinding ActualWidth}"
                        Height="{TemplateBinding ActualHeight}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="{TemplateBinding ActualWidth}" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
 
                    <Grid.RowDefinitions>
                        <RowDefinition Height="{TemplateBinding ActualHeight}" />
                    </Grid.RowDefinitions>
 
                    <Grid Grid.ColumnSpan="2">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
 
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.2*" />
                            <RowDefinition Height="0.6*" />
                            <RowDefinition Height="0.2*" />
                        </Grid.RowDefinitions>
 
                        <Grid Grid.Row="1" Grid.Column="1" Margin="0,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="3*"/>
                            </Grid.ColumnDefinitions>
 
                            <Grid.RowDefinitions>
                                <RowDefinition Height="0.2*" />
                                <RowDefinition Height="0.6*" />
                                <RowDefinition Height="0.2*" />
                            </Grid.RowDefinitions>
 
                            <Path Grid.Row="1" Grid.Column="0"
                                    Stretch="None"
                                    Fill="Black"
                                    Stroke="Transparent"
                                    StrokeThickness="0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure StartPoint="40,0">
                                            <LineSegment Point="40,3" />
                                            <LineSegment Point="160,3"/>
                                            <!--<LineSegment Point="110,9"/>
                                            <LineSegment Point="120,4.5"/>
                                            <LineSegment Point="110,0"/>-->
                                            <LineSegment Point="160,0"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                            <Path Grid.Row="1" Grid.Column="1"
                                    Stretch="None"
                                    Fill="Black"
                                    Stroke="Transparent"
                                    StrokeThickness="0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure StartPoint="0,3">
                                            <LineSegment Point="0,9" />
                                            <LineSegment Point="10,4.5"/>
                                            <LineSegment Point="0,0"/>
                                            <LineSegment Point="0,3"/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                        </Grid>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>



Regards,
Andrey Murzov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
Gauges
Asked by
Guilherme
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Share this question
or