Blend for VS2013制作WPF精美时钟

最新推荐文章于 2022-10-22 14:32:56 发布

原创

最新推荐文章于 2022-10-22 14:32:56 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#WPF #Blend #精美时钟

本文介绍了如何利用Blend for VS2013制作一款美观的WPF桌面时钟。前台代码中设置了Window的透明属性，并通过Grid.Clip裁剪出时钟界面。后台通过定时器每秒更新时针、分针和秒针的角度，实现动态显示时间。

Blend for VS2013制作WPF精美桌面时钟

WPF；Blend2013；时钟

一、前台MainWindow.xaml
首先新建WPF应用程序项目，代码如下：
注意：为了界面美观，设置Window属性AllowsTransparency=“True” ，AllowsTransparency=“True”，通过**<Grid.Clip>**裁剪出时钟大小界面。

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="clock.MainWindow"
        Title="MainWindow" Background="Transparent" Height="480" Width="640" WindowStyle="None" AllowsTransparency="True" MouseLeftButtonDown="Window_MouseLeftButtonDown_1">
	<Grid x:Name="LayoutRoot"  Loaded="UserControl_Loaded">
		<Grid.Clip>
			<EllipseGeometry Center="320 240" RadiusX="214.5" RadiusY="214.5" />
		</Grid.Clip>
		<Ellipse Margin="106,26,105,25" RenderTransformOrigin="0.5,0.5" Grid.Row="0">
			<Ellipse.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform Angle="34.545"/>
					<TranslateTransform/>
				</TransformGroup>
			</Ellipse.RenderTransform>
			<Ellipse.Effect>
				<DropShadowEffect BlurRadius="18" Direction="374" ShadowDepth="6"/>
			</Ellipse.Effect>
			
			<Ellipse.Fill>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FF353434" Offset="0"/>
					<GradientStop Color="White" Offset="0.518"/>
					<GradientStop Color="#FF999696" Offset="1"/>
					<GradientStop Color="#FFF7F0F0" Offset="0.576"/>
				</LinearGradientBrush>
			</Ellipse.Fill>
		</Ellipse>
		<Ellipse Margin="141,61" RenderTransformOrigin="0.5,0.5" Grid.Row="0">
			<Ellipse.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransf