Sliverlight 3 RadialBar

2 posts, 0 answers
  1. Michael Wasmer
    Michael Wasmer avatar
    2 posts
    Member since:
    Mar 2010

    Posted 04 Oct 2010 Link to this post

    Is there a way to put a seperator between radial bars on a radguage. I have attached an mockup of what I am looking to do.
  2. Andrey
    Andrey avatar
    1681 posts

    Posted 06 Oct 2010 Link to this post

    Hi Michael Wasmer,

    You can do it using custom tick marks. For example:

    <UserControl x:Class="Telerik.RadGauge.Silverlight.MainPage"
                 Width="1000" Height="800">
                    <ResourceDictionary Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" />
                <Style x:Key="RectangleTick" TargetType="telerik:CustomTickMark">
                    <Setter Property="Location" Value="OverCenter" />
                    <Setter Property="Offset" Value="0" />
                    <Setter Property="Format" Value="{}{0:F0}" />
                    <Setter Property="Length" Value="0.15" />
                    <Setter Property="TickWidth" Value="0.1" />
                    <Setter Property="FontSize" Value="11" />
                    <Setter Property="Background" Value="Black" />
                    <Setter Property="BorderBrush" Value="Black" />
                    <Setter Property="Template">
                            <ControlTemplate TargetType="telerik:CustomTickMark">
                                    <Rectangle Stretch="Fill"
                                       Fill="{TemplateBinding Background}" 
                                       Stroke="{TemplateBinding BorderBrush}" 
                                       StrokeThickness="{TemplateBinding BorderThickness}" />
                    <Setter Property="ItemTemplate">
                                <TextBlock />
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadGauge Width="500" Height="270">
                <telerik:RadialGauge Style="{StaticResource RadialGaugeHalfCircleNStyle}">
                    <telerik:RadialScale Style="{StaticResource RadialScaleHalfCircleNStyle}">
                            <telerik:RadialRange Min="0" Max="90" 
                                 Background="Red" />
                            <telerik:RadialRange Min="90" Max="95" 
                                 Background="Green" />
                            <telerik:RadialRange Min="95" Max="100" 
                                 Background="Blue" />
                            <telerik:RadialBar UseRangeColor="True" 
                                Value="100" />
                            <telerik:CustomTickMark Value="90" 
                                Style="{StaticResource RectangleTick}" />
                            <telerik:CustomTickMark Value="95" 
                                Style="{StaticResource RectangleTick}" />

    Andrey Murzov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top