Customizing various Gauge Needles colors

2 posts, 0 answers
  1. Guilherme
    Guilherme avatar
    3 posts
    Member since:
    Jun 2012

    Posted 19 Jun 2012 Link to this post

    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 -->
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 22 Jun 2012 Link to this post

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

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top