Clock 範例教學
Transcript of 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 執行並偵測錯誤 來檢視我們的作品。