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

Creating a legend for a Guage

1 Answer 73 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
madladuk
Top achievements
Rank 2
madladuk asked on 13 Jul 2010, 12:51 PM
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

1 Answer, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 14 Jul 2010, 04:31 PM
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.

<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
Tags
Gauge
Asked by
madladuk
Top achievements
Rank 2
Answers by
Andrey
Telerik team
Share this question
or