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

Customizing various Gauge Needles colors

1 Answer 248 Views

Gauges

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

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

---

<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 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>

<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>

<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>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

<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>

------------------------------------------------------------------------------------------------

<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>

1 Answer, 1 is accepted

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:

<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>

</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 >>