直接新建UserControl

XML程式碼：

<UserControl x:Class="專案名.使用者控制元件名"
             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"
 
 
             xmlns:local="clr-namespace:專案名"
            
             mc:Ignorable="d" 
             d:DesignHeight="60" d:DesignWidth="60">
    <Grid Margin="0">
        <Label  Name="la1"  Width="60" Height="60"  Content="60" FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"
 
 HorizontalContentAlignment="Center" VerticalContentAlignment="Center"></Label>
        <Border  BorderThickness="4" Width="60" Height="60"  CornerRadius="33,33,33,33" Name="PART_Background">
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" MappingMode
 
="RelativeToBoundingBox" StartPoint="0.5,0">
                    <LinearGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                            <SkewTransform CenterY="0.5" CenterX="0.5"/>
                            <RotateTransform Angle="90" CenterY="0.5" CenterX="0.5"/>

                        </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="blue" Offset="0.016"/>
                    <GradientStop Color="#FF0000" Offset="0.016"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border.Background>
                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                    <LinearGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                            <SkewTransform CenterY="0.5" CenterX="0.5"/>
                            <RotateTransform Angle="20" CenterY="0.5" CenterX="0.5"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Transparent" Offset="0.5"/>
                    <GradientStop Color="Transparent" Offset="0"/>
                </LinearGradientBrush>
            </Border.Background>
            <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
    </Grid>
</UserControl>

cs程式碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace 你的專案
{
    /// <summary>
    /// UserControl1.xaml 的互動邏輯
    /// </summary>
    public partial class UserTimer : UserControl
    {
        //計時器
        private DispatcherTimer t = new DispatcherTimer();
        //你要放入到Grid控制元件
        private Grid xd;
        //宣告一個此物件
        UserTimer user;
        private UserTimer()
        {
            InitializeComponent();
        }
        /// <summary>
        /// 宣告大小位置
        /// </summary>
        /// <param name="x">要放入的Grid容器</param>
        public UserTimer(Grid x)
        {
            xd = x;
            user = new UserTimer();
            user.Width = 60;
            user.Height = 60;
            user.Margin = new Thickness(0, 0, x.Width - 60, x.Height - 60);
            InitializeComponent();
            xd.Children.Add(user);
             
            times();
        }



        /// <summary>
        /// 此方法可中斷計時器
        /// </summary>
        public void Xh()
        {
            xd.Children.Remove(user);
            t.Stop();
        }
        public void times()
        {
            

            //設定兩個GradientStop  第一個是已經變色的，第二個是等待變色的
            GradientStop gd = new GradientStop();
            gd.Color = Color.FromRgb(255, 0, 0);
            GradientStop gd2 = new GradientStop();
            gd2.Color = Color.FromRgb(0, 0, 255);
            //設定兩個漸變的停止點
            gd.Offset = 0.00;
            gd2.Offset = 0.01;
            //設定繪製區域
            LinearGradientBrush lgb = new LinearGradientBrush();
            //設定起始和終止座標
            lgb.StartPoint = new Point(0.5, 0);
            lgb.EndPoint = new Point(0.5, 1);
            //旋轉
            RotateTransform rotate = new RotateTransform(0, 0.5, 0.5);
            //計時器
            t.Tick += new EventHandler((object sender, EventArgs e) =>
            {
                if (360 - rotate.Angle != 0)
                {
                    user.la1.Content = (360 - (int)rotate.Angle) / 6;
                }
                else
                {
                    user.la1.Content = 0;
                }
                //每次加6°
                rotate.Angle += 6;
                //旋轉區域賦值給它
                lgb.RelativeTransform = rotate;
                //每次加0.016
                gd.Offset += 0.01666666;
                gd2.Offset += 0.01666666;
                lgb.GradientStops = new GradientStopCollection() { gd, gd2 };
                user.PART_Background.BorderBrush = lgb;
                //60s end
                if (rotate.Angle == 360)
                {
                    user.la1.Content = 0;
                    t.Stop();
                    xd.Children.Remove(user);
                    MessageBox.Show("結束");
                }
            });
            t.Interval = new TimeSpan(0, 0, 0, 1);
            t.Start();
        }
    }
}