Question

I have a analog clock and a digital clock display. However, I would like to use the MVVM pattern. I don’t know where to begin. How to accomplish this? Converting what I have into a pattern shouldn’t be so difficult, should it? Would I need a model class and a view class?

I want to keep this as simple as possible. I am sure that once I get the pattern in I won’t need two timers?

This is what I have so far. I currently have 2 timers one for digital and one for analog. This I know is bad and with the pattern I won’t need it.

public partial class MainWindow : Window
{
    System.Timers.Timer timer = new System.Timers.Timer(1000); //analog clock
    DispatcherTimer timerdigital;                              // digital clock

    public MainWindow() {
        this.InitializeComponent();

        //analog clock
        timer.Elapsed += new System.Timers.ElapsedEventHandler(timer_Elapsed);
        timer.Enabled = true;

        //digital clock
        timerdigital = new DispatcherTimer();
        timerdigital.Interval = TimeSpan.FromSeconds(1.0);
        timerdigital.Start();
        timerdigital.Tick += new EventHandler(delegate(object s, EventArgs a)
        {
            tbDigital.Text = DateTime.Now.ToString("hh:mm:ss tt");
        });
    }

    //analog clock
    void timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e) {
        this.Dispatcher.Invoke(DispatcherPriority.Normal, (Action)(() =>
        {
            secondHand.Angle = DateTime.Now.Second * 6;
            minuteHand.Angle = DateTime.Now.Minute * 6; 
            hourHand.Angle = (DateTime.Now.Hour * 30) + (DateTime.Now.Minute * 0.5); 
        }));
    }

For the xaml code, I drew the hands like this

<Rectangle Fill="#FFF21313" Margin="85,28,86,0" Name="rectangleSecond" Opacity="0.8" RadiusX="1" RadiusY="1" RenderTransformOrigin="0.5,1" Stroke="#FFDCDCDC" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="1" Height="64" VerticalAlignment="Top" Width="5">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1" />
            <SkewTransform AngleX="0" AngleY="0" />
            <RotateTransform x:Name="secondHand" Angle="0" />
            <TranslateTransform X="0" Y="0" />
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="#FF181818" Margin="85,27,85,88" Name="rectangleMinute" Opacity="0.8" RadiusX="1" RadiusY="1" RenderTransformOrigin="0.5,1" Stroke="#FFDCDCDC" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="1">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1" />
            <SkewTransform AngleX="0" AngleY="0" />
            <RotateTransform x:Name="minuteHand" Angle="0" />
            <TranslateTransform X="0" Y="0" />
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="#FF070707" HorizontalAlignment="Left" Margin="86,46,0,89" Name="rectangleHour" Opacity="0.8" RadiusX="1" RadiusY="1" RenderTransformOrigin="0.5,1" Stroke="#FFDCDCDC" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="1" Width="5">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1" />
            <SkewTransform AngleX="0" AngleY="0" />
            <RotateTransform x:Name="hourHand" Angle="0" />
            <TranslateTransform X="0" Y="0" />
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>

I am willing to do this different if I have to.

Answer 1

I’m not sure why you’re using two different timers, it could be done with the same one.

All you have to do is put your code in a ViewModel, and bind your view to the properties of the ViewModel.

ViewModel

public class ClockViewModel : INotifyPropertyChanged
{
    private readonly System.Timers.Timer _timer;

    public ClockViewModel()
    {
        _timer = new System.Timers.Timer(1000);
        _timer.Elapsed += _timer_Elapsed;
        _timer.Start();
    }

    private void _timer_Elapsed(object sender, EventArgs e)
    {
        DateTime now = DateTime.Now;
        DigitalTime = now.ToString("hh:mm:ss tt");
        SecondAngle = now.Second * 6;
        MinuteAngle = now.Minute * 6; 
        HourAngle = (now.Hour * 30) + (now.Minute * 0.5);
    }

    private string _digitalTime;
    public string DigitalTime
    {
        get { return _digitalTime;}
        set
        {
            _digitalTime = value;
            OnPropertyChanged("DigitalTime");
        }
    }


    private double _hourAngle;
    public double HourAngle
    {
        get { return _hourAngle;}
        set
        {
            _hourAngle = value;
            OnPropertyChanged("HourAngle");
        }
    }


    private double _minuteAngle;
    public double MinuteAngle
    {
        get { return _minuteAngle;}
        set
        {
            _minuteAngle = value;
            OnPropertyChanged("MinuteAngle");
        }
    }

    private double _secondAngle;
    public double SecondAngle
    {
        get { return _secondAngle;}
        set
        {
            _secondAngle = value;
            OnPropertyChanged("SecondAngle");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

XAML

<Rectangle Fill="#FFF21313" Margin="85,28,86,0" Name="rectangleSecond" Opacity="0.8" RadiusX="1" RadiusY="1" RenderTransformOrigin="0.5,1" Stroke="#FFDCDCDC" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="1" Height="64" VerticalAlignment="Top" Width="5">
    <Rectangle.RenderTransform>
        <RotateTransform Angle="{Binding SecondAngle}" />
    </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="#FF181818" Margin="85,27,85,88" Name="rectangleMinute" Opacity="0.8" RadiusX="1" RadiusY="1" RenderTransformOrigin="0.5,1" Stroke="#FFDCDCDC" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="1">
    <Rectangle.RenderTransform>
        <RotateTransform Angle="{Binding MinuteAngle}" />
    </Rectangle.RenderTransform>
</Rectangle>
<Rectangle Fill="#FF070707" HorizontalAlignment="Left" Margin="86,46,0,89" Name="rectangleHour" Opacity="0.8" RadiusX="1" RadiusY="1" RenderTransformOrigin="0.5,1" Stroke="#FFDCDCDC" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeThickness="1" Width="5">
    <Rectangle.RenderTransform>
        <RotateTransform Angle="{Binding HourAngle}" />
    </Rectangle.RenderTransform>
</Rectangle>

(I removed the TransformGroups since only the RotateTransforms were used)

In the code-behind, just assign an instance of ClockViewModel to the DataContext.