Setting the Gauge Background

[Campbell]

Greetings,

I am trying to customize the background of the RadGauge control. Ironically, I stumbled upon Bill's unanswered question here: http://www.telerik.com/community/forums/wpf/gauges/radguage-background.aspx#761772

I am having the exact same problem. How do you replace the default red/orange with a Brush?

Thank you,
Chad Campbell

[Andrey]

Hi Campbell,

You have 2 options here:
1. Use scales without containers. The RadGauge, RadialGauge and LinearGauge controls are just containers which intended to create similar look for number of scales. You can use RadialScale or LinearScale controls without this containers at all. For example:

<Grid Width="300" Height="300">
    <Ellipse Fill="CadetBlue" Stretch="Fill" />
    <telerik:RadialScale>
        <telerik:RadialScale.Indicators>
            <telerik:Marker x:Name="marker"
                    Location="Outside"
                    RelativeHeight="0.1"
                    Value="5"  />
        </telerik:RadialScale.Indicators>
    </telerik:RadialScale>
</Grid>

2. Change template of the RadialGauge control so the container looks different. I’ve checked templates are provided here http://www.telerik.com/help/wpf/radial-gauge-customizing-appearance.html and they seem to work OK. Here it is full XAML of the Window which change template of the RadialGauge control as it is described in the documentation:

<Window x:Class="Telerik.WPF.Gauge.Window1"
        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"
        Title="Window1" Height="400" Width="500">
    <Window.Resources>
        <ControlTemplate x:Key="NewGaugeBackground" TargetType="{x:Type ContentControl}">
            <Grid Width="{TemplateBinding Width}"
                  Height="{TemplateBinding Height}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="15"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="15"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="15"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="15"/>
                </Grid.RowDefinitions>

                <Ellipse Stretch="Fill"
                     Grid.ColumnSpan="3"
                     Grid.RowSpan="3"
                     Fill="SkyBlue">
                    <Ellipse.BitmapEffect>
                        <BevelBitmapEffect BevelWidth="15"
                                   EdgeProfile="BulgedUp"
                                   Relief="0.2"
                                   Smoothness="0.2"  />
                    </Ellipse.BitmapEffect>
                </Ellipse>

                <Ellipse Grid.Row="1"
                     Grid.Column="1"
                     Stretch="Fill"
                     Fill="Blue" />
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="NewGaugeForeground" TargetType="{x:Type ContentControl}">
            <Grid Width="{TemplateBinding Width}"
                  Height="{TemplateBinding Height}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.15*"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="0.3*"/>
                    <ColumnDefinition/>
                    <ColumnDefinition Width="0.15*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.15*"/>
                    <RowDefinition/>
                    <RowDefinition Height="0.3*"/>
                    <RowDefinition/>
                    <RowDefinition Height="0.15*"/>
                </Grid.RowDefinitions>
                <Path Stretch="Fill"
                      Height="Auto"
                      RenderTransformOrigin="0.5,1.31"
                      Data="M136.99973,92.000117 C60.784439,92.000117 1.6558759,113.43244 4.7598601,101.93656 20.616215,43.211116 74.261859,0 138,0 200.39567,0 251.72642,41.847141 270.18819,98.246777 275.99955,116.00015 213.21503,92.000117 136.99973,92.000117 z"
                      HorizontalAlignment="Stretch"
                      Margin="2,2,2,8"
                      Grid.Column="1"
                      Grid.ColumnSpan="3"
                      Grid.Row="1"
                      Grid.RowSpan="1">
                    <Path.Fill>
                        <LinearGradientBrush StartPoint="0.499997,-0.29169" EndPoint="0.499997,1.57502">
                            <GradientStop Color="#34F0F0F0" Offset="0"/>
                            <GradientStop Color="#34A1A1A1" Offset="0.482804"/>
                            <GradientStop Color="#34535353" Offset="0.554947"/>
                            <GradientStop Color="#34535353" Offset="1"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="NewGaugeTemplate" TargetType="{x:Type telerik:RadialGauge}">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <Grid>
                    <ContentControl Template="{DynamicResource NewGaugeBackground}"/>
                    <ItemsPresenter />
                    <ContentControl Template="{DynamicResource NewGaugeForeground}"/>
                </Grid>
            </Border>
        </ControlTemplate>

        <Style x:Key="NewGaugeStyle" TargetType="{x:Type telerik:RadialGauge}">
            <Setter Property="Template" Value="{StaticResource NewGaugeTemplate}" />
        </Style>
    </Window.Resources>

    <Grid>
        <telerik:RadGauge x:Name="radGauge"
                          Width="300"
                          Height="300">
            <telerik:RadialGauge Style="{StaticResource NewGaugeStyle}">
                <telerik:RadialScale Min="0"
                                   Max="100">
                    <telerik:RadialScale.MajorTick>
                        <telerik:TickProperties  />
                    </telerik:RadialScale.MajorTick>
                    <telerik:RadialScale.Indicators>
                        <telerik:Marker x:Name="marker"
                                Location="Outside"
                                RelativeHeight="0.1"
                                Value="5"  />
                    </telerik:RadialScale.Indicators>
                </telerik:RadialScale>
            </telerik:RadialGauge>
        </telerik:RadGauge>
    </Grid>
</Window>

All the best,
Andrey Murzov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.