Change Indicators Background

2 posts, 0 answers
  1. Joel
    Joel avatar
    41 posts
    Member since:
    Nov 2010

    Posted 22 Nov 2011 Link to this post

    How do I change the background behind the indicators in the new gauge controls?  Here's my control so far:

    <telerik:RadHorizontalLinearGauge Width="300" Height="100">
        <telerik:LinearScale Min="0" Max="14" LabelTemplate="{StaticResource LabelEmpty}"/>
        <telerik:LinearScale Min="0" Max="14" LabelLocation="Inside" MajorTickLocation="Inside" MiddleTickLocation="Inside" MinorTickLocation="Inside">
            <telerik:LinearScale.Indicators>
                <telerik:BarIndicator x:Name="lbVoltage" Value="0" StrokeThickness="0" StartWidth="0.1" Background="{StaticResource AccentBrush}"/>
            </telerik:LinearScale.Indicators>
        </telerik:LinearScale>
    </telerik:RadHorizontalLinearGauge>

    It looks pretty good, but the background for the indicators is set to stark white.  I'd rather make it transparent, but I don't know where to change it.

  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 25 Nov 2011 Link to this post

    Hello Joel,

    This is what we call "scale bar". You can change its background using the "Fill" property of the scale object. For example:

    <telerik:RadHorizontalLinearGauge Width="300" Height="100">
        <telerik:LinearScale Min="0" Max="14"
                 Fill="Transparent"
                 LabelTemplate="{StaticResource LabelEmpty}"/>
        <telerik:LinearScale Min="0" Max="14"
                 Fill="Transparent"
                 LabelLocation="Inside"
                 MajorTickLocation="Inside"
                 MiddleTickLocation="Inside"
                 MinorTickLocation="Inside">
            <telerik:LinearScale.Indicators>
                <telerik:BarIndicator x:Name="lbVoltage"
                          Value="3"
                          StrokeThickness="0"
                          StartWidth="0.1"
                          Background="{StaticResource AccentBrush}"/>
            </telerik:LinearScale.Indicators>
        </telerik:LinearScale>
    </telerik:RadHorizontalLinearGauge>


    Regards,
    Andrey Murzov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
Back to Top