This is a migrated thread and some comments may be shown as answers.

[Solved] Sliverlight 3 RadialBar

1 Answer 84 Views

Gauge

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

1 Answer, 1 is accepted

answered on 06 Oct 2010, 12:46 PM

Hi Michael Wasmer,

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

<UserControl x:Class="Telerik.RadGauge.Silverlight.MainPage"

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"

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