这适用于 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 的属性。

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）

在代码隐藏中，只需分配DataContext 的 ClockViewModel 实例。