Hi. If you look at the Dundas components there guages have a legend. Could you send over some example code of how I could produce a legend. Basically I have a guage that have the value set and then I apply markers to show different values, what I want to produce is a legend that I can assign the text for the main value and then a legend string for each marker and showing a marker graphic next to it; thus
[triangle image] Maximum sales
[round image] Minimum sales
[Range] Current sales
Thanks
P
[triangle image] Maximum sales
[round image] Minimum sales
[Range] Current sales
Thanks
P
1 Answer, 1 is accepted
0
Hi Paul,
You can use Telerik HeaderedItemsControl to create legend. Following code sample uses collection of the custom class GaugeLegendData objects to show legend. There are 3 data templates defined to show Min, Max, and Current value in the legend. Templates are selected by type of the legend data using GaugeTemplateSelector.
Kind regards,
Andrey Murzov
the Telerik team
You can use Telerik HeaderedItemsControl to create legend. Following code sample uses collection of the custom class GaugeLegendData objects to show legend. There are 3 data templates defined to show Min, Max, and Current value in the legend. Templates are selected by type of the legend data using GaugeTemplateSelector.
<
UserControl
x:Class
=
"Telerik.RadGauge.Silverlight.MainPage"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
Width
=
"400"
Height
=
"200"
>
<
UserControl.Resources
>
<
ResourceDictionary
>
<
ResourceDictionary.MergedDictionaries
>
<
ResourceDictionary
Source
=
"/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml"
/>
</
ResourceDictionary.MergedDictionaries
>
<
Style
x:Key
=
"ellipseMarker"
TargetType
=
"telerik:Marker"
>
<
Setter
Property
=
"Location"
Value
=
"Inside"
/>
<
Setter
Property
=
"Offset"
Value
=
"0"
/>
<
Setter
Property
=
"RelativeHeight"
Value
=
"0.1"
/>
<
Setter
Property
=
"RelativeWidth"
Value
=
"0.1"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"1"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"White"
/>
<
Setter
Property
=
"Background"
Value
=
"Red"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerik:Marker"
>
<
Grid
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
>
<
Ellipse
Width
=
"10"
Height
=
"10"
Stretch
=
"Fill"
Fill
=
"{TemplateBinding Background}"
Stroke
=
"{TemplateBinding BorderBrush}"
StrokeThickness
=
"{TemplateBinding BorderThickness}"
/>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
DataTemplate
x:Key
=
"MinLegendTemplate"
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"12"
/>
<
ColumnDefinition
Width
=
"100"
/>
<
ColumnDefinition
Width
=
"50"
/>
</
Grid.ColumnDefinitions
>
<
telerik:Marker
Grid.Column
=
"0"
Width
=
"12"
Height
=
"12"
/>
<
TextBlock
Grid.Column
=
"1"
Text
=
"{Binding Path=Description}"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
/>
<
TextBlock
Grid.Column
=
"2"
Text
=
"{Binding Path=Value}"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
/>
</
Grid
>
</
DataTemplate
>
<
DataTemplate
x:Key
=
"MaxLegendTemplate"
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"12"
/>
<
ColumnDefinition
Width
=
"100"
/>
<
ColumnDefinition
Width
=
"50"
/>
</
Grid.ColumnDefinitions
>
<
telerik:Marker
Grid.Column
=
"0"
Style
=
"{StaticResource ellipseMarker}"
/>
<
TextBlock
Grid.Column
=
"1"
Text
=
"{Binding Path=Description}"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
/>
<
TextBlock
Grid.Column
=
"2"
Text
=
"{Binding Path=Value}"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
/>
</
Grid
>
</
DataTemplate
>
<
DataTemplate
x:Key
=
"CurrentLegendTemplate"
>
<
Grid
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"12"
/>
<
ColumnDefinition
Width
=
"100"
/>
<
ColumnDefinition
Width
=
"50"
/>
</
Grid.ColumnDefinitions
>
<
Rectangle
Height
=
"10"
Width
=
"10"
Fill
=
"Green"
Stroke
=
"Black"
VerticalAlignment
=
"Center"
/>
<
TextBlock
Grid.Column
=
"1"
Text
=
"{Binding Path=Description}"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
/>
<
TextBlock
Grid.Column
=
"2"
Text
=
"{Binding Path=Value}"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Center"
/>
</
Grid
>
</
DataTemplate
>
</
ResourceDictionary
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"*"
/>
</
Grid.ColumnDefinitions
>
<
telerik:RadGauge
Name
=
"radGauge"
>
<
telerik:RadialGauge
>
<
telerik:RadialScale
MajorTicks
=
"10"
MiddleTicks
=
"3"
>
<
telerik:RadialScale.MajorTick
>
<
telerik:MajorTickProperties
TooltipFormat
=
"Tick: {0}"
/>
</
telerik:RadialScale.MajorTick
>
<
telerik:RangeList
>
<
telerik:RadialRange
Min
=
"0"
Max
=
"30"
StartWidth
=
"0.1"
EndWidth
=
"0.1"
Background
=
"Red"
/>
<
telerik:RadialRange
Min
=
"30"
Max
=
"70"
StartWidth
=
"0.1"
EndWidth
=
"0.1"
Background
=
"Yellow"
/>
<
telerik:RadialRange
Min
=
"70"
Max
=
"100"
StartWidth
=
"0.1"
EndWidth
=
"0.1"
Background
=
"Green"
/>
</
telerik:RangeList
>
<
telerik:IndicatorList
>
<
telerik:Marker
Name
=
"markerMin"
Value
=
"10"
/>
<
telerik:Marker
Name
=
"markerMax"
Style
=
"{StaticResource ellipseMarker}"
Value
=
"90"
/>
<
telerik:Needle
Name
=
"needle"
Value
=
"50"
TooltipFormat
=
"Needle: {0}"
/>
</
telerik:IndicatorList
>
</
telerik:RadialScale
>
</
telerik:RadialGauge
>
</
telerik:RadGauge
>
<
telerik:HeaderedItemsControl
x:Name
=
"gaugeLegend"
Grid.Row
=
"0"
Grid.Column
=
"1"
Header
=
"Gauge Legend"
HorizontalAlignment
=
"Center"
VerticalAlignment
=
"Center"
>
</
telerik:HeaderedItemsControl
>
</
Grid
>
</
UserControl
>
using
System;
namespace
Telerik.RadGauge.Silverlight
{
public
enum
MarkerType
{
/// <summary>
/// Minimum sales
/// </summary>
Min,
/// <summary>
/// Maximum sales
/// </summary>
Max,
/// <summary>
/// Current sales
/// </summary>
Current
}
public
class
GaugeLegendData
{
/// <summary>
/// Gets or sets marker type.
/// </summary>
public
MarkerType MarkerType
{
get
;
set
;
}
/// <summary>
/// Gets or sets marker description.
/// </summary>
public
string
Description
{
get
;
set
;
}
/// <summary>
/// Gets or sets marker value.
/// </summary>
public
double
Value
{
get
;
set
;
}
}
}
using
System;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Ink;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
Telerik.Windows.Controls;
namespace
Telerik.RadGauge.Silverlight
{
public
class
GaugeTemplateSelector : DataTemplateSelector
{
private
DataTemplate minTemplate;
private
DataTemplate maxTemplate;
private
DataTemplate currentTemplate;
public
GaugeTemplateSelector(
DataTemplate minTemplate,
DataTemplate maxTemplate,
DataTemplate currentTemplate)
{
this
.minTemplate = minTemplate;
this
.maxTemplate = maxTemplate;
this
.currentTemplate = currentTemplate;
}
public
override
DataTemplate SelectTemplate(
object
item, DependencyObject container)
{
GaugeLegendData legendData = (GaugeLegendData)item;
if
(legendData !=
null
)
{
switch
(legendData.MarkerType)
{
case
MarkerType.Min:
return
this
.minTemplate;
case
MarkerType.Max:
return
this
.maxTemplate;
case
MarkerType.Current:
return
this
.currentTemplate;
}
}
return
base
.SelectTemplate(item, container);
}
}
}
using
System;
using
System.Collections.Generic;
using
System.Collections.ObjectModel;
using
System.Linq;
using
System.Net;
using
System.Windows;
using
System.Windows.Controls;
using
System.Windows.Documents;
using
System.Windows.Input;
using
System.Windows.Media;
using
System.Windows.Media.Animation;
using
System.Windows.Shapes;
using
System.IO;
namespace
Telerik.RadGauge.Silverlight
{
public
partial
class
MainPage : UserControl
{
private
ObservableCollection<GaugeLegendData> legendDataCollection =
new
ObservableCollection<GaugeLegendData>();
public
MainPage()
{
InitializeComponent();
GaugeLegendData min =
new
GaugeLegendData()
{
MarkerType = MarkerType.Min,
Description =
"Minimum sales"
,
Value = 10
};
legendDataCollection.Add(min);
GaugeLegendData max =
new
GaugeLegendData()
{
MarkerType = MarkerType.Max,
Description =
"Maximum sales"
,
Value = 90
};
legendDataCollection.Add(max);
GaugeLegendData current =
new
GaugeLegendData()
{
MarkerType = MarkerType.Current,
Description =
"Current sales"
,
Value = 50
};
legendDataCollection.Add(current);
GaugeTemplateSelector templateSelector =
new
GaugeTemplateSelector(
this
.Resources[
"MinLegendTemplate"
]
as
DataTemplate,
this
.Resources[
"MaxLegendTemplate"
]
as
DataTemplate,
this
.Resources[
"CurrentLegendTemplate"
]
as
DataTemplate);
gaugeLegend.ItemTemplateSelector = templateSelector;
gaugeLegend.ItemsSource = legendDataCollection;
}
}
}
Kind 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