我有一个模拟时钟和一个数字时钟显示器。但是，我想使用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>
如果必须的话，我愿意这样做。
答案 0 :(得分：6)
我不确定你为什么使用两个不同的计时器，可以使用同一个计时器。
您只需将代码放在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。