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
    Admin
    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"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 Width="1000" Height="800">
        <UserControl.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" />
                </ResourceDictionary.MergedDictionaries>
                  
                <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">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerik:CustomTickMark">
                                <Grid>
                                    <Rectangle Stretch="Fill"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Stretch"
                                       Fill="{TemplateBinding Background}" 
                                       Stroke="{TemplateBinding BorderBrush}" 
                                       StrokeThickness="{TemplateBinding BorderThickness}" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="ItemTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock />
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
      
            </ResourceDictionary>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadGauge Width="500" Height="270">
                <telerik:RadialGauge Style="{StaticResource RadialGaugeHalfCircleNStyle}">
                    <telerik:RadialScale Style="{StaticResource RadialScaleHalfCircleNStyle}">
                        <telerik:RangeList>
                            <telerik:RadialRange Min="0" Max="90" 
                                 StartWidth="0" 
                                 EndWidth="0" 
                                 IndicatorBackground="Red"
                                 Background="Red" />
                            <telerik:RadialRange Min="90" Max="95" 
                                 StartWidth="0" 
                                 EndWidth="0" 
                                 IndicatorBackground="Green"
                                 Background="Green" />
                            <telerik:RadialRange Min="95" Max="100" 
                                 StartWidth="0" 
                                 EndWidth="0" 
                                 IndicatorBackground="Blue"
                                 Background="Blue" />
                        </telerik:RangeList>
                        <telerik:IndicatorList>
                            <telerik:RadialBar UseRangeColor="True" 
                                RangeColorMode="ProportionalBrush" 
                                Value="100" />
                        </telerik:IndicatorList>
                        <telerik:TickList>
                            <telerik:CustomTickMark Value="90" 
                                Style="{StaticResource RectangleTick}" />
                            <telerik:CustomTickMark Value="95" 
                                Style="{StaticResource RectangleTick}" />
                        </telerik:TickList>
                    </telerik:RadialScale>
                </telerik:RadialGauge>
            </telerik:RadGauge>
        </Grid>
    </UserControl>


    Regards,
    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 banner
Back to Top