будет ли работать шаблон MVVM?

Question

У меня есть аналоговые часы и дисплей с цифровыми часами. Тем не менее, я хотел бы использовать шаблон MVVM. Я не знаю с чего начать. Как это сделать? Преобразование того, что у меня есть в шаблон, не должно быть таким сложным, не так ли? Нужен ли класс модели и класс представления?

Я хочу сделать это как можно проще. Я уверен, что как только я получу шаблон, мне не понадобятся два таймера?

Это то, что я имею до сих пор. В настоящее время у меня есть 2 таймера, один для цифровых и один для аналоговых. Я знаю, что это плохо, и по шаблону оно мне не понадобится.

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); 
        }));
    }

Для кода 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>
        <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>

Я готов сделать это по-другому, если придется.

Answer 1

Я не уверен, почему вы используете два разных таймера, это может быть сделано с одним и тем же.

Все, что вам нужно сделать, это поместить свой код в модель представления и привязать ваш вид ксвойства 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>

(я удалил TransformGroups поскольку использовались только RotateTransforms)

В выделенном коде просто назначьте экземпляр ClockViewModel для DataContext.