Creating a legend for a Guage

2 posts, 0 answers
  1. madladuk
    madladuk avatar
    126 posts
    Member since:
    Dec 2009

    Posted 13 Jul 2010 Link to this post

    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
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 14 Jul 2010 Link to this post

    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
  3. DevCraft banner
Back to Top