Clock 範例教學

一個簡單的時鐘顯示作品，大部分都在於設計時鐘的介面，程式碼部分主要在於控制讀取電腦內的計

時。

1. 開啟 Expression Blend，然後選擇新增專案(N)…。

2. 選擇 Silverlight 應用程式+網站，設定專案名稱和儲存位置後，按下確定按鈕。

3. 開啟設計畫面後，在背景新增或設計自己想要的背景。這裡，我們使用匯入 Photoshop 的檔案

作為背景，選擇檔案>匯入 Adobe Photoshop 檔案(M)…。

在開啟的畫面，選擇要匯入的 psd 檔後，點選開啟舊檔(O)。

接這會跳出匯入 Adobe Photoshop 檔案的視窗，勾選要匯入的圖案/圖層後，點選確定。

完成後就會在畫面看到匯入的圖片，並且在物件與時間軸的 LayoutRoot 下看到新增一個

Canvas。

4. 背景設定完後，先在物件與時間軸(B)的版面選擇 LayoutRoot，然後按下滑鼠右鍵，選擇變更

版面配置類型>Canvas。

※這裡換成 Canvas 的類型是因為，Canvas不會因為縮放而改變內容物件的大小或位置。

5. 變更完後，就可以開始依自己喜好來設計整個介面了。這邊我們在整個版面的下半部增加 Logo

文字，從左邊的工具箱加入 TextBllock 的元件到 LayoutRoot 的元件內，然後調整文字大小

及顏色等。

6. Logo完成之後，進到本範例的重點──時間部分，這邊我們要先新增一個 Canvas到 LayoutRoot

的元件內。

7. 接下來一樣對此 Canvas 做設計，這邊做一個 Path 線條，並同時新增一個用於放時間數字的

Canvas 的元件。

Path 程式碼如下：

<Path Stretch="Fill" Stroke="#FF040404" StrokeThickness="0" Width="352" Height="16"

Data="M96,1.5497208E-06 L104,1.5497208E-06 104,16.000002 96,16.000002 z M84,1.5497208E-06

L92,1.5497208E-06 92,16.000002 84,16.000002 z M72,1.5497208E-06 L80,1.5497208E-06

80,16.000002 72,16.000002 z M60,1.5497208E-06 L68,1.5497208E-06 68,16.000002 60,16.000002 z

M48,1.5497208E-06 L56,1.5497208E-06 56,16.000002 48,16.000002 z M36,0 L44,0 44,16.000002

36,16.000002 z M24,0 L32,0 32,16.000002 24,16.000002 z M11.999999,0 L20,0 20,16.000002

11.999999,16.000002 z M0,0 L7.9999995,0 7.9999995,16.000002 0,16.000002 z" Canvas.Top="112"

UseLayoutRounding="False">

<Path.Fill>

<LinearGradientBrush EndPoint="0.019,0.614" StartPoint="0.841,0.507">

<GradientStop Color="Red" Offset="0"/>

<GradientStop Color="#FFFFFFFF" Offset="1"/>

</LinearGradientBrush>

</Path.Fill>

</Path>

8. 在剛才新建的 Canvas內，加入 5個 TextBlock

並依序修改每一個 TextBlock 的命名(左上：tbDate，左下：tbWeek，中 1：tbHour 中 2：tbDot，

右：tbMinute)，修改完後順便調整每一個 TextBlock 的字型和顏色。

9. 這樣就完成版面配置了，接下來要使用程式碼使時鐘顯示目前的時間。從專案的面版找到

MainPage.xaml.cs，在此檔案按滑鼠右鍵，選擇在 Visual Studio 進行編輯。

10. 開啟 Visual Studio 後，首先在 public MainPage()內的 InitializeComponent();下一行輸入：

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

※這邊可依提示按 Tab鍵建立相關程式碼。

在產生的 MainPage_Loaded 片段內建立以下程式碼：

//建立DispatcherTimer物件

System.Windows.Threading.DispatcherTimer _timer = new

System.Windows.Threading.DispatcherTimer();

//設定觸發時間為1秒

_timer.Interval = new TimeSpan(0, 0, 1);

_timer.Tick += new EventHandler(_timer_Tick);

_timer.Start();

※在輸入_timer.Tick+=時，一樣可以按 Tab 鍵建立相關程式碼。

在產生的_timer_Tick 片段前一行輸入：

bool showDot = false;

然後在_timer_Tick 片段內建立以下程式碼：

showDot = !showDot;

tbDate.Text = DateTime.Today.ToShortDateString();

tbWeek.Text = DateTime.Today.DayOfWeek.ToString();

tbHour.Text = DateTime.Now.Hour.ToString();

tbMinute.Text = DateTime.Now.Minute.ToString();

//檢查tbHour的內容是否佔有2位數

if (tbHour.Text.Length < 2)

{

tbHour.Text = "0" + tbHour.Text.Trim();

}

if (tbMinute.Text.Length < 2)

{

tbMinute.Text = "0" + tbMinute.Text.Trim();

}

//讓":"閃爍

if (showDot)

{

tbDot.Visibility = Visibility.Visible;

}

else

{

tbDot.Visibility = Visibility.Collapsed;

}

11. 整個完整的程式碼如下：

using System;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

namespace Clock

{

public partial class MainPage : UserControl

{

public MainPage()

{

// 必須將變數初始化

InitializeComponent();

this.Loaded += new RoutedEventHandler(MainPage_Loaded);

}

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

//建立DispatcherTimer物件

System.Windows.Threading.DispatcherTimer _timer = new

System.Windows.Threading.DispatcherTimer();

//設定觸發時間為1秒

_timer.Interval = new TimeSpan(0, 0, 1);

_timer.Tick += new EventHandler(_timer_Tick);

_timer.Start();

}

bool showDot = false;

void _timer_Tick(object sender, EventArgs e)

{

showDot = !showDot;

tbDate.Text = DateTime.Today.ToShortDateString();

tbWeek.Text = DateTime.Today.DayOfWeek.ToString();

tbHour.Text = DateTime.Now.Hour.ToString();

tbMinute.Text = DateTime.Now.Minute.ToString();

//檢查tbHour的內容是否佔有2位數

if (tbHour.Text.Length < 2)

{

tbHour.Text = "0" + tbHour.Text.Trim();

}

if (tbMinute.Text.Length < 2)

{

tbMinute.Text = "0" + tbMinute.Text.Trim();

}

//讓":"閃爍

if (showDot)

{

tbDot.Visibility = Visibility.Visible;

}

else

{

tbDot.Visibility = Visibility.Collapsed;

}

}

}

}

12. 這樣就完成了這個範例，這時可以按 F5 執行並偵測錯誤來檢視我們的作品。

Clock 範例教學

Design

Transcript of Clock 範例教學