How to: Place One Circular Scale into Another

  • 5 minutes to read

In some cases you may need to place several circular scales within the main scale. The following example demonstrates how to create a typical watch with several scales (the main scale will show the current time, while the minor scales will show the current day, week and month).

To place several scales inside the main scale, it's necessary to create the appropriate ItemsPanelTemplate object and assign it to the AnalogGaugeControl.ScalePanelTemplate property. This template defines a Grid panel with 2 rows and 4 columns.

After that, the ColumnSpan and RowSpan attached properties are set to 2 and 4 for the main scale, so that it occupies the entire grid area. For other circular scales, Column and Row properties define their positions inside the grid area (and therefore inside the main scale).

View Example

using System;
using System.Windows;
using System.Windows.Threading;


namespace ScalesLayoutSample {

    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            DataContext = new ClockViewModel();
        }
    }

    public class ClockViewModel : DependencyObject {
        public static readonly DependencyProperty HourProperty = 
            DependencyProperty.Register("Hour", typeof(double), typeof(ClockViewModel));
        public static readonly DependencyProperty MinuteProperty = 
            DependencyProperty.Register("Minute", typeof(double), typeof(ClockViewModel));
        public static readonly DependencyProperty SecondProperty = 
            DependencyProperty.Register("Second", typeof(double), typeof(ClockViewModel));
        public static readonly DependencyProperty DayOfWeekProperty = 
            DependencyProperty.Register("DayOfWeek", typeof(double), typeof(ClockViewModel));
        public static readonly DependencyProperty DayOfMonthProperty = 
            DependencyProperty.Register("DayOfMonth", typeof(double), typeof(ClockViewModel));
        public static readonly DependencyProperty MonthOfYearProperty = 
            DependencyProperty.Register("MonthOfYear", typeof(double), typeof(ClockViewModel));

        public double Hour {
            get { return (double)GetValue(HourProperty); }
            set { SetValue(HourProperty, value); }
        }

        public double Minute {
            get { return (double)GetValue(MinuteProperty); }
            set { SetValue(MinuteProperty, value); }
        }

        public double Second {
            get { return (double)GetValue(SecondProperty); }
            set { SetValue(SecondProperty, value); }
        }

        public double DayOfWeek {
            get { return (double)GetValue(DayOfWeekProperty); }
            set { SetValue(DayOfWeekProperty, value); }
        }

        public double DayOfMonth {
            get { return (int)GetValue(DayOfMonthProperty); }
            set { SetValue(DayOfMonthProperty, value); }
        }

        public double MonthOfYear {
            get { return (double)GetValue(MonthOfYearProperty); }
            set { SetValue(MonthOfYearProperty, value); }
        }

        readonly DispatcherTimer timer = new DispatcherTimer();

        public ClockViewModel() {
            timer.Tick += new EventHandler(OnTimedEvent);
            timer.Start();
            Update();
        }

        void Update() {
            DateTime currentDate = DateTime.Now;

            Second = (currentDate.Second / 60.0) * 12;
            Minute = ((currentDate.Minute + currentDate.Second / 60.0) / 60.0) * 12;
            Hour = (currentDate.Hour % 12) + currentDate.Minute / 60.0;

            DayOfMonth = currentDate.Day;
            DayOfWeek = (int)currentDate.DayOfWeek;
            MonthOfYear = currentDate.Month;
        }

        void OnTimedEvent(object source, EventArgs e) {
            Update();
        }
    }
}