UWP實現時鍾


UWP現在的開發確實很方便,不過資料真的好少啊。。。

前些天看到同學有實實現自定義的時鍾,這東東挺簡單的,就自己也寫個,沒成想,遇到個坑,費了好長時間,記下來一下。

效果圖:

畫個圓,三條線就好。XAML代碼如下:

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Ellipse x:Name="ellipse" Stroke="Black"/>
            <Line x:Name="line_Second" Stroke="Red" StrokeThickness="3"/>
            <Line x:Name="line_Minute" Stroke="Blue" StrokeThickness="2"/>
            <Line x:Name="line_Hour" Stroke="Black" StrokeThickness="1"/>
</Grid>

C#代碼:

 public sealed partial class MainPage : Page
    {
        DispatcherTimer timer;//定義定時器
        double ScreenHeight;
        double ScreenWidth;
        double ellipseWidth;
        const double PI = 3.1415926;
        const double lineLength_Second=250;
        const double lineLenght_Minute = 200;
        const double lineLenght_Hour = 150;
        static int second;
        static int minute;
        static int hour;

        public MainPage()
        {
            this.InitializeComponent();
            timer = new DispatcherTimer();
            timer.Interval = new TimeSpan(0, 0, 1);
            timer.Tick += Timer_Tick;//每秒觸發這個事件,以刷新指針
            timer.Start();
        }

        private void Timer_Tick(object sender, object e)
        {
            line_Second.X1 = Window.Current.Bounds.Width / 2;
            line_Second.Y1 = Window.Current.Bounds.Height / 2;

            line_Minute.X1= Window.Current.Bounds.Width / 2;
            line_Minute.Y1=Window.Current.Bounds.Height / 2;

            line_Hour.X1= Window.Current.Bounds.Width / 2;
            line_Hour.Y1= Window.Current.Bounds.Height / 2;

            //秒針
            second = DateTime.Now.Second;
            double radius_second =  PI * second / 30;
            line_Second.X2 = lineLength_Second * Math.Sin(radius_second)+ line_Second.X1;
            line_Second.Y2 = line_Second.Y1- lineLength_Second * Math.Cos(radius_second);

            //分針
            minute = DateTime.Now.Minute;
            double radius_minute=  PI * minute / 30;
            line_Minute.X2 = lineLenght_Minute * Math.Sin(radius_minute) + line_Minute.X1;
            line_Minute.Y2 = line_Minute.Y1-lineLenght_Minute * Math.Cos(radius_minute);

            //時針
            hour = DateTime.Now.Hour;
            double radius_hour = hour*PI/6+radius_minute/12;
            line_Hour.X2 = lineLenght_Hour * Math.Sin(radius_hour) + line_Hour.X1;
            line_Hour.Y2 = line_Hour.Y1 - lineLenght_Hour * Math.Cos(radius_hour);
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            //獲取窗口實際長寬,以下就是為了適用不同窗體,
            //圓甚至直線的長度也要隨窗體變化
            ScreenHeight = Window.Current.Bounds.Height;
            ScreenWidth = Window.Current.Bounds.Width;

            ellipseWidth = ScreenWidth > ScreenHeight ? ScreenHeight - 20 : ScreenWidth - 20;
            ellipse.Height = ellipseWidth;
            ellipse.Width = ellipseWidth;
        }
    }

基礎不太好,結果好久才把指針搞對,原因是我對UWP的角度的0°位置不清楚:

窗體左上角為坐標原點,而角度的0°位置如圖,調了好久,我還以為寫錯了,原來是坐標系搞錯了,哎


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM