C# WPF 時鐘影片(2/2)

內容目錄

實作效果
業務場景
編碼實作
本文參考
原始碼下載

1.實作效果

時鐘實時展示系統本機時間
C# WPF時鐘

2.業務場景

模擬時鐘

3.編碼實作

使用 .Net Core 3.1 創建名為 “Clock” 的WPF解決方案，解決方案中需要添加時鐘背景圖片，圖片如下：https://github.com/Abel13/Clock/blob/master/Clock/Assets/clock.png

3.1 主表單 MainWindow.xaml

使用3個Border布局時鐘的時針、分針、秒針，并給3個指標添加影片，影片說明如下：

時針每12個小時回圈一圈(360°)，每個小時旋轉30°（30°*12=360°）；
分針每60分鐘回圈一圈(360°)，每分鐘旋轉6°（6°*60=360°）；
秒針每60秒回圈一圈（360°），每秒鐘旋轉6°（6°*60=360°），并且秒針旋轉6°有個輕微的擺動影片，

<Window x:Class="Clock.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Clock"
        mc:Ignorable="d"
        AllowsTransparency="True" WindowStyle="None" ResizeMode="NoResize"
        Height="520" Width="520" WindowStartupLocation="CenterScreen" Background="{x:Null}">
    <Window.Resources>
        <Storyboard x:Key="sbseconds" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="second" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <EasingDoubleKeyFrame KeyTime="0" Value=https://www.cnblogs.com/Dotnet9-com/p/"-90">

3.2 MainWindow.xaml.cs

后臺代碼開啟三個指標影片，并設定各指標影片起始位置

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Animation;

namespace Clock
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            int now_hours = DateTime.Now.Hour > 12 ? (DateTime.Now.Hour - 12) : DateTime.Now.Hour;
            int now_minutes = DateTime.Now.Minute;
            int now_seconds = DateTime.Now.Second;

            Storyboard seconds = (Storyboard)second.FindResource("sbseconds");
            seconds.Begin();
            seconds.Seek(new TimeSpan(0, 0, 0, now_seconds, 0));

            Storyboard minutes = (Storyboard)minute.FindResource("sbminutes");
            minutes.Begin();
            minutes.Seek(new TimeSpan(0, 0, now_minutes, now_seconds, 0));

            Storyboard hours = (Storyboard)hour.FindResource("sbhours");
            hours.Begin();
            hours.Seek(new TimeSpan(0, now_hours, now_minutes, now_seconds, 0));
        }

        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            DragMove();
        }
    }
}

4.本文參考

Design com WPF 大神的學習視頻：

1/2 - Creating a clock with Animations

2/2 - Creating a clock with Animations

5.代碼下載

原始碼中實作了全部效果，大伙可以直接下載編譯運行；建議看大神視頻手敲一遍，加深學習印象；視頻中使用Blend布局時鐘、設定影片，類似PS(PhotoShop)，設計界面很是方便的，

Github原始碼下載：Clock

除非注明，文章均由 Dotnet9 整理發布，歡迎轉載，

轉載請注明本文地址：https://dotnet9.com/6858.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號，本站會及時推送最新技術文章

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/12392.html

標籤：WPF

上一篇：C# WPF 時鐘影片(1/2)

下一篇：WPF 給Button按鈕加小圖示圖片Image