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°位置如圖,調了好久,我還以為寫錯了,原來是坐標系搞錯了,哎