这会工作MVVM模式吗？

Question

我有一个模拟时钟和一个数字时钟显示器.但是,我想使用MVVM模式.我不知道从哪里开始.怎么做到这一点？将我所拥有的内容转换为模式不应该那么困难,不是吗？我需要一个模型类和一个视图类吗？

我想尽量保持这个简单.我相信一旦我得到了这个模式,我就不需要两个定时器了？

这就是我到目前为止所拥有的.我目前有两个定时器,一个用于数字,一个用于模拟.我知道这很糟糕,我不需要它.

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.