Expression Blend 2 中的模拟时钟

• 下载源代码 (EB2 SP1) - 150.69 KB 
• 下载演示 - 67.96 KB

引言

这是一个简单的 WPF 应用程序，在 Expression Blend 2 SP1 中展示了如何创建一个模拟时钟，并添加一些效果，如阴影和模糊。
本项目中没有使用任何图片，你所看到的一切都使用 XAML 代码创建。

背景

几天前，我在 Visual Studio 2008 中创建了另一个非常简单的模拟时钟。如果你觉得这个项目有点困难，可以先 查看那个。
这些 培训视频也可以帮助你使用 Expression Blend。我用过它们。

Using the Code

在 Expression Blend 中，我们通常不需要手动编辑 XAML 代码，但我认为如果我们了解 XAML 代码的工作原理，它将帮助我们创建一个更好的 WPF 应用程序。

好吧，这个项目的难点是为我们的时钟创建三个带有旋转功能的指针。为此，我使用了这段 XAML 代码

  <Rectangle Fill="#FFDCDCDC" Margin="86.169,8,85.904,88.555" 
  Stroke="#FFDCDCDC" StrokeDashCap="Round" 
  StrokeEndLineCap="Round" StrokeLineJoin="Round" 
  StrokeStartLineCap="Round" StrokeThickness="1" 
  RadiusX="1" RadiusY="1" Opacity="0.8" 
  x:Name="rectangleSecond" RenderTransformOrigin="0.5,1" 
  d:IsHidden="True"> 
		<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>

现在我们可以使用这段 C# 代码轻松旋转这个指针

secondHand.Angle = DateTime.Now.Second * 6;

这很简单，不是吗？

现在我们使用一个简单的方法来旋转我们的三个指针

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

要进一步了解上述方法，你可以查看 这里。
就是这样。

历史

• 2008 年 11 月 20 日：首次发布