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