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"/>