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).
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();
}
}
}
<Window x:Class="ScalesLayoutSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"
xmlns:dxsch="http://schemas.devexpress.com/winfx/2008/xaml/scheduler"
Title="MainWindow" Height="600" Width="600">
<Grid>
<dxga:CircularGaugeControl Height="500" Width="500">
<dxga:CircularGaugeControl.ScalePanelTemplate>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</dxga:CircularGaugeControl.ScalePanelTemplate>
<dxga:CircularGaugeControl.Model>
<dxga:CircularClassicModel />
</dxga:CircularGaugeControl.Model>
<dxga:CircularGaugeControl.Scales>
<!--Day-of-week scale's start-->
<dxga:ArcScale Grid.Row="0" Grid.Column="1"
Margin="-20, 140, 20, 0" Height="120" Width="120"
StartValue="0" EndValue="7"
StartAngle="-90" EndAngle="270"
MajorIntervalCount="7" ShowMinorTickmarks="False" >
<dxga:ArcScale.Needles>
<dxga:ArcScaleNeedle Value="{Binding DayOfWeek}">
<dxga:ArcScaleNeedle.Options>
<dxga:ArcScaleNeedleOptions EndOffset="10" />
</dxga:ArcScaleNeedle.Options>
</dxga:ArcScaleNeedle>
</dxga:ArcScale.Needles>
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions ShowFirst="False" Offset="0" />
</dxga:ArcScale.LabelOptions>
<dxga:ArcScale.TickmarksPresentation>
<dxga:YellowSubmarineTickmarksPresentation MajorTickBrush="GhostWhite" />
</dxga:ArcScale.TickmarksPresentation>
<dxga:ArcScale.MajorTickmarkOptions>
<dxga:MajorTickmarkOptions Offset="-10" />
</dxga:ArcScale.MajorTickmarkOptions>
</dxga:ArcScale>
<!--Day-of-week scale's end-->
<!--Day-of-month scale's start-->
<dxga:ArcScale Grid.Row="0" Grid.Column="2"
Margin="20, 140, -20, 0" Height="120" Width="120"
EndValue="31" StartAngle="-90" EndAngle="270"
MajorIntervalCount="14" ShowMinorTickmarks="False" >
<dxga:ArcScale.Needles>
<dxga:ArcScaleNeedle Value="{Binding DayOfMonth}">
<dxga:ArcScaleNeedle.Options>
<dxga:ArcScaleNeedleOptions EndOffset="10" />
</dxga:ArcScaleNeedle.Options>
</dxga:ArcScaleNeedle>
</dxga:ArcScale.Needles>
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions ShowFirst="False" Offset="0" />
</dxga:ArcScale.LabelOptions>
<dxga:ArcScale.MajorTickmarkOptions>
<dxga:MajorTickmarkOptions Offset="-10"/>
</dxga:ArcScale.MajorTickmarkOptions>
<dxga:ArcScale.TickmarksPresentation>
<dxga:YellowSubmarineTickmarksPresentation MajorTickBrush="WhiteSmoke" />
</dxga:ArcScale.TickmarksPresentation>
</dxga:ArcScale>
<!--Day-of-month scale's end-->
<!--Month-of-year scale's start-->
<dxga:ArcScale Grid.Row="1" Grid.Column="2"
Margin="-30,-90, 95, -45" Width="230" Height="230"
EndValue="12" StartAngle="-90" EndAngle="270"
MajorIntervalCount="12" MinorIntervalCount="1" ShowMinorTickmarks="False">
<dxga:ArcScale.Needles>
<dxga:ArcScaleNeedle Value="{Binding MonthOfYear}">
<dxga:ArcScaleNeedle.Options>
<dxga:ArcScaleNeedleOptions EndOffset="70" StartOffset="0" />
</dxga:ArcScaleNeedle.Options>
</dxga:ArcScaleNeedle>
</dxga:ArcScale.Needles>
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions ShowFirst="False" />
</dxga:ArcScale.LabelOptions>
<dxga:ArcScale.TickmarksPresentation>
<dxga:YellowSubmarineTickmarksPresentation MajorTickBrush="White" />
</dxga:ArcScale.TickmarksPresentation>
<dxga:ArcScale.MajorTickmarkOptions>
<dxga:MajorTickmarkOptions Offset="-64" />
</dxga:ArcScale.MajorTickmarkOptions>
</dxga:ArcScale>
<!--Month-of-year scale's end-->
<!--Main scale's start-->
<dxga:ArcScale Grid.RowSpan="2" Grid.ColumnSpan="4"
StartAngle="-90" EndAngle="270"
EndValue="12" MajorIntervalCount="12" >
<dxga:ArcScale.Needles>
<dxga:ArcScaleNeedle Value="{Binding Hour}">
<dxga:ArcScaleNeedle.Options>
<dxga:ArcScaleNeedleOptions EndOffset="120" />
</dxga:ArcScaleNeedle.Options>
</dxga:ArcScaleNeedle>
<dxga:ArcScaleNeedle Value= "{Binding Minute}">
<dxga:ArcScaleNeedle.Options>
<dxga:ArcScaleNeedleOptions EndOffset="80" />
</dxga:ArcScaleNeedle.Options>
</dxga:ArcScaleNeedle>
<dxga:ArcScaleNeedle Value="{Binding Second}"/>
</dxga:ArcScale.Needles>
<dxga:ArcScale.Layers>
<dxga:ArcScaleLayer />
</dxga:ArcScale.Layers>
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions ShowFirst="False" Offset="-57"/>
</dxga:ArcScale.LabelOptions>
</dxga:ArcScale>
<!--Main scale's end-->
</dxga:CircularGaugeControl.Scales>
</dxga:CircularGaugeControl>
</Grid>
</Window>
Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Threading
Namespace ScalesLayoutSample
Partial Public Class MainWindow
Inherits Window
Public Sub New()
InitializeComponent()
DataContext = New ClockViewModel()
End Sub
End Class
Public Class ClockViewModel
Inherits DependencyObject
Public Shared ReadOnly HourProperty As DependencyProperty = DependencyProperty.Register("Hour", GetType(Double), GetType(ClockViewModel))
Public Shared ReadOnly MinuteProperty As DependencyProperty = DependencyProperty.Register("Minute", GetType(Double), GetType(ClockViewModel))
Public Shared ReadOnly SecondProperty As DependencyProperty = DependencyProperty.Register("Second", GetType(Double), GetType(ClockViewModel))
Public Shared ReadOnly DayOfWeekProperty As DependencyProperty = DependencyProperty.Register("DayOfWeek", GetType(Double), GetType(ClockViewModel))
Public Shared ReadOnly DayOfMonthProperty As DependencyProperty = DependencyProperty.Register("DayOfMonth", GetType(Double), GetType(ClockViewModel))
Public Shared ReadOnly MonthOfYearProperty As DependencyProperty = DependencyProperty.Register("MonthOfYear", GetType(Double), GetType(ClockViewModel))
Public Property Hour() As Double
Get
Return CDbl(GetValue(HourProperty))
End Get
Set(ByVal value As Double)
SetValue(HourProperty, value)
End Set
End Property
Public Property Minute() As Double
Get
Return CDbl(GetValue(MinuteProperty))
End Get
Set(ByVal value As Double)
SetValue(MinuteProperty, value)
End Set
End Property
Public Property Second() As Double
Get
Return CDbl(GetValue(SecondProperty))
End Get
Set(ByVal value As Double)
SetValue(SecondProperty, value)
End Set
End Property
Public Property DayOfWeek() As Double
Get
Return CDbl(GetValue(DayOfWeekProperty))
End Get
Set(ByVal value As Double)
SetValue(DayOfWeekProperty, value)
End Set
End Property
Public Property DayOfMonth() As Double
Get
Return CInt(Fix(GetValue(DayOfMonthProperty)))
End Get
Set(ByVal value As Double)
SetValue(DayOfMonthProperty, value)
End Set
End Property
Public Property MonthOfYear() As Double
Get
Return CDbl(GetValue(MonthOfYearProperty))
End Get
Set(ByVal value As Double)
SetValue(MonthOfYearProperty, value)
End Set
End Property
Private ReadOnly timer As New DispatcherTimer()
Public Sub New()
AddHandler timer.Tick, AddressOf OnTimedEvent
timer.Start()
Update()
End Sub
Private Sub Update()
Dim currentDate As DateTime = DateTime.Now
Second = (currentDate.Second / 60.0) * 12
Minute = ((currentDate.Minute + currentDate.Second / 60.0) / 60.0) * 12
Hour = (currentDate.Hour Mod 12) + currentDate.Minute / 60.0
DayOfMonth = currentDate.Day
DayOfWeek = CInt(Fix(currentDate.DayOfWeek))
MonthOfYear = currentDate.Month
End Sub
Private Sub OnTimedEvent(ByVal source As Object, ByVal e As EventArgs)
Update()
End Sub
End Class
End Namespace