Setting the Gauge Background

2 posts, 0 answers
  1. Campbell
    Campbell avatar
    1 posts
    Member since:
    Aug 2008

    Posted 11 Mar 2009 Link to this post

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

    Posted 12 Mar 2009 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top