WPF前端：时间控件（2）时分秒

时间（时分秒） ConDateClock.xaml

<UserControl x:Class="CableMonitor.UserControls.ConDateClock" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="50" d:DesignWidth="100" Loaded="UserControl_Loaded"> <UserControl.Resources> <Color x:Key="ColorClock">#FF7BBDE0</Color> </UserControl.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!--50*50--> <Grid Name="gridClock" Grid.Column="0" Visibility="Collapsed"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--盘面--> <Ellipse HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" Margin="0" Grid.RowSpan="2" Grid.ColumnSpan="2" > <Ellipse.Fill> <RadialGradientBrush> <GradientStop Color="#FFD3E0EF" Offset="1"/> <GradientStop Color="#FF7BBDE0"/> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <!--刻度--> <Rectangle Fill="Black" Grid.Column="1" Width="2" Height="3" Margin="-1,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left"/> <Rectangle Fill="Black" Grid.Column="1" Width="3" Height="2" Margin="0,0,0,-1" VerticalAlignment="Bottom" HorizontalAlignment="Right"/> <Rectangle Fill="Black" Grid.Column="0" Width="3" Height="2" Margin="0,0,0,-1" VerticalAlignment="Bottom" HorizontalAlignment="Left"/> <Rectangle Fill="Black" Grid.Row="1" Width="2" Height="3" Margin="0,0,-1,0" VerticalAlignment="Bottom" HorizontalAlignment="Right"/> <!--边框--> <Ellipse HorizontalAlignment="Left" Visibility="Collapsed" VerticalAlignment="Bottom" Width="50" Height="50" Margin="0" Grid.RowSpan="2" Grid.ColumnSpan="2" Stroke="{DynamicResource ButtonBackgroundColor}" /> <!--时针--> <Rectangle x:Name="rectHour" Grid.Column="1" Width="2" Height="12" Margin="1, 0, 0, 0" HorizontalAlignment="Left" VerticalAlignment="Bottom"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" Offset="0.85"/> <GradientStop Color="{StaticResource ColorClock}" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.RenderTransform> <RotateTransform x:Name="hourPointer" CenterX="0" CenterY="{Binding ElementName=rectHour, Path=Height}" Angle="180" /> </Rectangle.RenderTransform> </Rectangle> <!--分针--> <Rectangle x:Name="rectMin" Grid.Column="1" Width="2" Height="17" Margin="1, 0, 0, -1" HorizontalAlignment="Left" VerticalAlignment="Bottom" > <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FF3A3939" Offset="0.85"/> <GradientStop Color="{StaticResource ColorClock}" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.RenderTransform> <RotateTransform x:Name="minPointer" CenterX="0" CenterY="{Binding ElementName=rectMin, Path=Height}" Angle="270" /> </Rectangle.RenderTransform> </Rectangle> <!--秒针--> <Rectangle x:Name="rectSec" Grid.Column="1" Width="1" Height="22" Margin="-1,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom"> <Rectangle.Fill> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="{StaticResource ColorClock}" Offset="1"/> <GradientStop Color="#FFCD4242" Offset="0.85"/> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.RenderTransform> <RotateTransform x:Name="secondPointer" CenterX="0" CenterY="{Binding ElementName=rectSec, Path=Height}" Angle="20" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid Name="gridDate" Grid.Column="1" VerticalAlignment="Center"> <Label TextBlock.Foreground="White" x:Name="lbTimeShow" Content="11:25:45" FontSize="20" VerticalAlignment="Center" Height="Auto" Width="Auto" Padding="0" HorizontalContentAlignment="Center" /> </Grid> </Grid> </UserControl>

ConDateClock.xaml.cs

using System; using System.Windows; using System.Windows.Controls; using System.Windows.Threading; namespace CableMonitor.UserControls { /// <summary> /// ConDateClock.xaml 的交互逻辑 /// </summary> public partial class ConDateClock : UserControl { private System.Timers.Timer timer; string[] Day = new string[] { "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" }; private DateTime timeBegin; public ConDateClock() { InitializeComponent(); } private void UserControl_Loaded(object sender, RoutedEventArgs e) { if (false == System.ComponentModel.DesignerProperties.GetIsInDesignMode(this)) { timeBegin = DateTime.Now; UpdateClock(); timer = new System.Timers.Timer(1000); timer.Elapsed += new System.Timers.ElapsedEventHandler(timer_Elapsed); timer.Start(); } } private void timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e) { //UI异步更新 this.Dispatcher.Invoke(DispatcherPriority.Normal, (Action)(() => { UpdateClock(); })); } private void UpdateClock() { DateTime destDt = DateTime.Now; lbTimeShow.Content = destDt.ToString("HH:mm:ss"); //lbDateShow.Content = destDt.ToString("yyyy/MM/dd"); #region 更新界面的钟表指针（已屏蔽） //hourPointer.Angle = (destDt.Hour * 30) + (destDt.Minute * 0.5);//1时转动30度。 //minPointer.Angle = destDt.Minute * 6 + destDt.Second * 0.1;//1分转动6度 //secondPointer.Angle = destDt.Second * 6;//1秒转动6度 //rectHour.Margin = GetMarginByAngle(hourPointer.Angle); //rectMin.Margin = GetMarginByAngle(minPointer.Angle); //rectSec.Margin = GetMarginByAngle(secondPointer.Angle); 更新时间值 //TimeSpan ts = destDt.Subtract(timeBegin); //string strOpenedTime = "已运行 "; //if (ts.Days > 0) // strOpenedTime += ts.Days.ToString() + " 天 "; //if (ts.Hours > 0) // strOpenedTime += ts.Hours.ToString() + " 小时 "; //if(ts.Minutes > 0) // strOpenedTime += ts.Minutes.ToString() + " 分 "; //strOpenedTime += ts.Seconds.ToString() + " 秒"; //this.ToolTip = lbDateShow.Content + " " + Day[(int)destDt.DayOfWeek] + "\r\n\r\n" + strOpenedTime; #endregion } private Thickness GetMarginByAngle(double angle) { if (angle > 360) { angle -= 360; } Thickness destThick = new Thickness(0, 0, 0, 0); if (angle >= 0 && angle < 45) { return new Thickness(-1, 0, 0, 0); } else if (angle >= 45 && angle < 90) { return new Thickness(-1, 0, 0, 1); } else if (angle >= 90 && angle < 135) { return new Thickness(0, 0, 0, 1); } else if (angle >= 135 && angle < 180) { return new Thickness(1, 0, 0, 1); } else if (angle >= 180 && angle < 225) { return new Thickness(1, 0, 0, 0); } else if (angle >= 225 && angle < 270) { return new Thickness(1, 0, 0, -1); } else if (angle >= 270 && angle < 315) { return new Thickness(0, 0, 0, -1); } else { return new Thickness(-1, 0, 0, -1); } } } }

主界面

<localCon:ConDateClock x:Name="cdcClock" Width="79" HorizontalAlignment="Left" VerticalAlignment="Top" FontSize="20" Grid.Column="1" Margin="90,8,0,7" Height="25"/>