RadGauge Bezel Customization

[James]

Is there any way to customize the RadGauge Bezel?  Specifically I would like to be able to change the color?  This would be for linear or radial gauges. Thanks

[Andrey]

Hi James,

You can use the OuterBackground, OuterBorderBrush, OuterBorderThickness properties of the correspondent gauge. For example:

<telerik:RadRadialGauge OuterBackground="Blue"
        OuterBorderBrush="Red"
        OuterBorderThickness="2">
    <telerik:RadialScale x:Name="scale">
        <telerik:RadialScale.Indicators>
            <telerik:Needle Name="needle"/>
            <telerik:Pinpoint />
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</telerik:RadRadialGauge>

All the best,

Andrey Murzov

the Telerik team

[James]

Andrey,

The OuterBorderThickness appears to be for LinearGauges.  I see that there is a BorderThickness for the RadialGauges but this does not appear to cause the border around the RadialGauge to increase in Thichness when the number is increased.  Please help me with this.  I am using the WPF version 2011.2.712.35.

Thanks,

James

[Andrey]

Hi James,

The example in my previous post is for the new gauge control we've introduced in the 2011.Q3. Unfortunately there is no easy way to change the outer border thickness of the radial gauge in the old gauge control. You have to change the control template in this case.

Regards,

Andrey Murzov

the Telerik team

[James]

Andrey,

Can you show me some example code for changing the Thickness of the bezel using Templates?  I really need this done soon.  

Thanks,

James

[Andrey]

Hello James,

You can change the parameters I marked orrange in the sample code below to change the Thickness of the bezel.

<Window x:Class="OldGaugeControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:mscorlib="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <LinearGradientBrush x:Key="GaugeForeground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF202020"/>
            <GradientStop Color="#FF767676" Offset="0.8"/>
            <GradientStop Color="Black" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="GaugeForegroundStroke" Color="White" />
        <LinearGradientBrush x:Key="GaugeBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White"/>
            <GradientStop Color="#FFD4D4D4" Offset="1"/>
            <GradientStop Color="Gainsboro" Offset="0.5"/>
            <GradientStop Color="#FFADADAD" Offset="0.501"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="GaugeBackgroundStroke" Color="#FF848484" />
        <mscorlib:Double x:Key="GaugeBackgroundStrokeThickness">1</mscorlib:Double>
        <GridLength x:Key="Grid00Row1">6.5*</GridLength>
        <GridLength x:Key="Grid00Row2">87*</GridLength>
        <GridLength x:Key="Grid00Row3">6.5*</GridLength>
        <GridLength x:Key="Grid00Column1">6.5*</GridLength>
        <GridLength x:Key="Grid00Column2">87*</GridLength>
        <GridLength x:Key="Grid00Column3">6.5*</GridLength>
        <SolidColorBrush x:Key="GaugeForegroundOuterStroke" Color="Transparent" />
        <mscorlib:Double x:Key="GaugeForegroundOuterStrokeThickness">0</mscorlib:Double>
        <Thickness x:Key="GaugeForegroundMargin">0</Thickness>
        <mscorlib:Double x:Key="GaugeForegroundStrokeThickness">1</mscorlib:Double>
        <GridLength x:Key="Grid01Row1">32*</GridLength>
        <GridLength x:Key="Grid01Row2">36*</GridLength>
        <GridLength x:Key="Grid01Row3">32*</GridLength>
        <GridLength x:Key="Grid01Column1">32*</GridLength>
        <GridLength x:Key="Grid01Column2">36*</GridLength>
        <GridLength x:Key="Grid01Column3">32*</GridLength>
        <mscorlib:Double x:Key="EllipseStrokeThickness">0</mscorlib:Double>
        <SolidColorBrush x:Key="EllipseStroke" Color="Transparent" />
        <RadialGradientBrush x:Key="EllipseBackground">
            <GradientStop/>
            <GradientStop Color="#26FFFFFF" Offset="0.694"/>
            <GradientStop Offset="0.875"/>
        </RadialGradientBrush>
        <GridLength x:Key="Grid02Row1">2*</GridLength>
        <GridLength x:Key="Grid02Row2">96*</GridLength>
        <GridLength x:Key="Grid02Row3">2*</GridLength>
        <GridLength x:Key="Grid02Column1">2*</GridLength>
        <GridLength x:Key="Grid02Column2">96*</GridLength>
        <GridLength x:Key="Grid02Column3">2*</GridLength>
        <SolidColorBrush x:Key="EllipseGradientBackground" Color="Transparent" />
        <SolidColorBrush x:Key="EllipseGradientStroke" Color="Transparent" />
        <mscorlib:Double x:Key="EllipseGradientStrokeThickness">0</mscorlib:Double>
        <LinearGradientBrush x:Key="PathOuterBandBackground" EndPoint="0.5,1.001" StartPoint="0.5,-0.001" MappingMode="RelativeToBoundingBox">
            <GradientStop Color="#FFB9B9B9" Offset="0.5"/>
            <GradientStop Color="#007C7C7C" Offset="1"/>
            <GradientStop Color="#7FDCDCDC"/>
            <GradientStop Color="#7F686868" Offset="0.5"/>
        </LinearGradientBrush>
        <Geometry x:Key="PathOuterBandData">M99.5,5.4999981 C49.794373,5.5 5.5,49.794373 5.4999981,99.5 5.5,149.20563 49.794373,193.5 99.5,193.5 149.20563,193.5 193.5,149.20563 193.5,99.5 193.5,49.794373 149.20563,5.5 99.5,5.4999981 z M99.5,0 C154.45233,0 199,44.547668 199,99.5 199,154.45233 154.45233,199 99.5,199 44.547668,199 0,154.45233 0,99.5 0,44.547668 44.547668,0 99.5,0 z</Geometry>
        <SolidColorBrush x:Key="PathInnerBandBackground" Color="Transparent" />
        <PathGeometry x:Key="PathInnerBandData" />
        <TransformGroup x:Key="PathInnerBandTransform" ></TransformGroup>
        <SolidColorBrush x:Key="PathInnerBandStroke" Color="Transparent" />
        <RadialGradientBrush x:Key="PathRaysOpacityMask">
            <GradientStop Color="#E5FFFFFF" Offset="0"/>
            <GradientStop Color="#42FFFFFF"/>
            <GradientStop Color="Transparent" Offset="0.657"/>
            <GradientStop Color="Transparent" Offset="0.748"/>
        </RadialGradientBrush>
        <GridLength x:Key="Grid10Row1">0</GridLength>
        <GridLength x:Key="Grid10Row2">0</GridLength>
        <GridLength x:Key="Grid10Row3">*</GridLength>
        <GridLength x:Key="Grid10Row4">0</GridLength>
        <GridLength x:Key="Grid10Row5">0</GridLength>
        <GridLength x:Key="Grid10Column1">0</GridLength>
        <GridLength x:Key="Grid10Column2">*</GridLength>
        <GridLength x:Key="Grid10Column3">0</GridLength>
        <LinearGradientBrush x:Key="GaugeTopMaskBackground" EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox">
            <GradientStop Color="#00DCEAF5" Offset="0.612"/>
            <GradientStop Color="#E5DCEAF5" Offset="0.185"/>
        </LinearGradientBrush>
        <mscorlib:Int32 x:Key="GaugeTopMaskRow">2</mscorlib:Int32>
        <VerticalAlignment x:Key="GaugeTopMaskVerticalAlignment">Stretch</VerticalAlignment>
        <Thickness x:Key="GaugeTopMaskMargin">0</Thickness>
        <mscorlib:Double x:Key="GaugeMaskOpacity">0.4</mscorlib:Double>
        <Geometry x:Key="GaugeTopMaskData">M106,212.00001 L106.09999,212.00001 106.09999,212.10001 106,212.10001 z M212,106.00001 L212.1,106.00001 212.1,106.10001 212,106.10001 z M0,106.00001 L0.099998474,106.00001 0.099998474,106.10001 0,106.10001 z M106.05,31.150002 C140.29165,31.150002 178.05,59.297188 178.05,84.150002 178.05,109.00282 140.29165,129.15 106.05,129.15 71.808344,129.15 34.049999,109.00282 34.05,84.150002 34.049999,59.297188 71.808344,31.150002 106.05,31.150002 z M106,0 L106.09999,0 106.09999,0.099998474 106,0.099998474 z</Geometry>
        <LinearGradientBrush x:Key="GaugeBottomMaskBackground" EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox">
            <GradientStop Color="#00DCEAF5" Offset="0.85"/>
            <GradientStop Color="#66DCF3F5" Offset="0.36"/>
        </LinearGradientBrush>
        <mscorlib:Int32 x:Key="GaugeBottomMaskRow">2</mscorlib:Int32>
        <VerticalAlignment x:Key="GaugeBottomMaskVerticalAlignment">Stretch</VerticalAlignment>
        <Geometry x:Key="GaugeBottomMaskData">M106,212 L106.09999,212 106.09999,212.09999 106,212.09999 z M212,106 L212.1,106 212.1,106.09999 212,106.09999 z M0,106 L0.099998474,106 0.099998474,106.09999 0,106.09999 z M106.05,76.819001 C142.86861,76.819 172.716,99.950657 172.716,128.485 172.716,157.01934 142.86861,180.151 106.05,180.151 69.231384,180.151 39.383999,157.01934 39.383999,128.485 39.383999,99.950657 69.231384,76.819 106.05,76.819001 z M106,0 L106.09999,0 106.09999,0.099998474 106,0.099998474 z</Geometry>

        <ControlTemplate x:Key="CustomGauge" TargetType="telerik:RadialGauge">
            <Grid Height="{TemplateBinding CellSize}"
                          Width="{TemplateBinding CellSize}">
                <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Ellipse Stroke="{TemplateBinding OuterBorderBrush}"
                                     StrokeThickness="{StaticResource GaugeBackgroundStrokeThickness}"
                                     Fill="{TemplateBinding OuterBackground}" />
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="{StaticResource Grid00Row1}" />
                            <RowDefinition Height="{StaticResource Grid00Row2}" />
                            <RowDefinition Height="{StaticResource Grid00Row3}" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{StaticResource Grid00Column1}" />
                            <ColumnDefinition Width="{StaticResource Grid00Column2}" />
                            <ColumnDefinition Width="{StaticResource Grid00Column3}" />
                        </Grid.ColumnDefinitions>
                        <Ellipse Grid.Row="1"
                                                Grid.Column="1"
                                                Stroke="{StaticResource GaugeForegroundOuterStroke}"
                                                StrokeThickness="{StaticResource GaugeForegroundOuterStrokeThickness}" />
                        <Ellipse Grid.Row="1"
                                                Grid.Column="1"
                                                Margin="{StaticResource GaugeForegroundMargin}"
                                                Fill="{TemplateBinding Background}"
                                                Stroke="{TemplateBinding BorderBrush}"
                                                StrokeThickness="{StaticResource GaugeForegroundStrokeThickness}" />
                    </Grid>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="{StaticResource Grid01Row1}" />
                            <RowDefinition Height="{StaticResource Grid01Row2}" />
                            <RowDefinition Height="{StaticResource Grid01Row3}" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{StaticResource Grid01Column1}" />
                            <ColumnDefinition Width="{StaticResource Grid01Column2}" />
                            <ColumnDefinition Width="{StaticResource Grid01Column3}" />
                        </Grid.ColumnDefinitions>

                        <!-- Ellipse -->
                        <Ellipse Grid.Row="1"
                                            Grid.Column="1"
                                            StrokeThickness="{StaticResource EllipseStrokeThickness}"
                                            Stroke="{StaticResource EllipseStroke}"
                                            Fill="{StaticResource EllipseBackground}" />
                    </Grid>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="{StaticResource Grid02Row1}" />
                            <RowDefinition Height="{StaticResource Grid02Row2}" />
                            <RowDefinition Height="{StaticResource Grid02Row3}" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{StaticResource Grid02Column1}" />
                            <ColumnDefinition Width="{StaticResource Grid02Column2}" />
                            <ColumnDefinition Width="{StaticResource Grid02Column3}" />
                        </Grid.ColumnDefinitions>

                        <!-- Gradient only for Windows7 -->
                        <Ellipse Grid.Row="1"
                                            Grid.Column="1"
                                            Fill="{StaticResource EllipseGradientBackground}"
                                            Stroke="{StaticResource EllipseGradientStroke}"
                                            StrokeThickness="{StaticResource EllipseGradientStrokeThickness}"/>

                        <!-- Outer Band only for Windows7 / Office -->
                        <Path Grid.Row="1"
                                            Grid.Column="1"
                                            Stretch="Fill"
                                            HorizontalAlignment="Right"
                                            VerticalAlignment="Bottom"
                                            Fill="{StaticResource PathOuterBandBackground}"
                                            Data="{StaticResource PathOuterBandData}" />
                    </Grid>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="15*" />
                            <RowDefinition Height="70*" />
                            <RowDefinition Height="15*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="15*" />
                            <ColumnDefinition Width="70*" />
                            <ColumnDefinition Width="15*" />
                        </Grid.ColumnDefinitions>

                        <!-- Inner Band only for Windows7-->
                        <Path Grid.Row="1"
                                        Grid.Column="1"
                                        Stretch="Fill"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Bottom"
                                        RenderTransformOrigin="0.5,0.5"
                                        Fill="{StaticResource PathInnerBandBackground}"
                                        Data="{StaticResource PathInnerBandData}" />
                        <Ellipse Grid.Row="1"
                                            Grid.Column="1"
                                            StrokeThickness="10"
                                            RenderTransformOrigin="0.5,0.5"
                                            RenderTransform="{StaticResource PathInnerBandTransform}"
                                            Stroke="{StaticResource PathInnerBandStroke}" />

                        <!-- Rays only for Windows7 / Office -->
                        <Path Grid.Row="1"
                                            Grid.Column="1"
                                            Stretch="Fill"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch"
                                            Stroke="White"
                                            OpacityMask="{StaticResource PathRaysOpacityMask}"
                                            Data="M74.999957,0.5 L74.999957,149.50015 M82.787366,0.90814628 L67.212616,149.09199 M90.489422,2.128027 L59.510563,147.8721 M98.021773,4.1463092 L51.978215,145.85381 M105.30189,6.9408801 L44.6981,143.05923 M112.25002,10.481122 L37.749979,139.51898 M118.79003,14.728247 L31.209977,135.27185 M124.85026,19.635723 L25.149748,130.36436 M130.36433,25.149782 L19.63569,124.8503 M135.27181,31.210011 L14.728215,118.79006 M139.51895,37.750014 L10.481091,112.25005 M143.0592,44.698136 L6.9408496,105.30193 M145.85378,51.978253 L4.146279,98.02181 M147.87207,59.510601 L2.1279972,90.48946 M149.09196,67.212656 L0.90811659,82.787405 M149.50008,75.000031 L0.50000262,75.000031 M149.09197,82.787406 L0.90812663,67.212657 M147.87209,90.489462 L2.1280171,59.510603 M145.85381,98.021813 L4.1463087,51.978256 M143.05924,105.30193 L6.9408886,44.69814 M139.519,112.25006 L10.481139,37.750019 M135.27187,118.79007 L14.728272,31.210018 M130.36439,124.8503 L19.635754,25.149789 M124.85034,130.36437 L25.14982,19.635731 M118.79011,135.27185 L31.210055,14.728256 M112.2501,139.51899 L37.750062,10.481131 M105.30198,143.05924 L44.698188,6.9408901 M98.021864,145.85382 L51.978307,4.1463196 M90.489516,147.87211 L59.510657,2.1280377 M82.787461,149.092 L67.212712,0.90815718" />
                    </Grid>
                </Grid>
                <ItemsPresenter />
                <Grid  Height="{TemplateBinding CellSize}"
                               Width="{TemplateBinding CellSize}">
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="{StaticResource Grid10Row1}" />
                            <RowDefinition Height="{StaticResource Grid10Row2}" />
                            <RowDefinition Height="{StaticResource Grid10Row3}" />
                            <RowDefinition Height="{StaticResource Grid10Row4}" />
                            <RowDefinition Height="{StaticResource Grid10Row5}" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{StaticResource Grid10Column1}" />
                            <ColumnDefinition Width="{StaticResource Grid10Column2}" />
                            <ColumnDefinition Width="{StaticResource Grid10Column3}" />
                        </Grid.ColumnDefinitions>
                        <Path Fill="{StaticResource GaugeTopMaskBackground}"
                                      Grid.Row="{StaticResource GaugeTopMaskRow}"
                                      Grid.Column="1"
                                      VerticalAlignment="{StaticResource GaugeTopMaskVerticalAlignment}"
                                      Stretch="Fill"
                                      Margin="{StaticResource GaugeTopMaskMargin}"
                                      Opacity="{StaticResource GaugeMaskOpacity}"
                                      Data="{StaticResource GaugeTopMaskData}" />
                        <Path Fill="{StaticResource GaugeBottomMaskBackground}"
                                      Grid.Row="{StaticResource GaugeBottomMaskRow}"
                                      Grid.Column="1"
                                      VerticalAlignment="{StaticResource GaugeBottomMaskVerticalAlignment}"
                                      Stretch="Fill"
                                      Opacity="{StaticResource GaugeMaskOpacity}"
                                      Data="{StaticResource GaugeBottomMaskData}"  />
                    </Grid>
                </Grid>
            </Grid>
        </ControlTemplate>
    </Window.Resources>
    <Grid Name="layoutRoot" Height="348" Width="500">
        <telerik:RadGauge>
            <telerik:RadialGauge Template="{StaticResource CustomGauge}">
                <telerik:RadialScale>
                </telerik:RadialScale>
            </telerik:RadialGauge>
        </telerik:RadGauge>
    </Grid>
</Window>

Kind regards,
Andrey Murzov
the Telerik team