天天看點

好玩的WPF第一彈:視窗抖動+邊框陰影效果+倒計時顯示文字

好玩的WPF第一彈:視窗抖動+邊框陰影效果+倒計時顯示文字

大家一進到部落格就應該看到這張gif了吧……好吧,今天不是星期一……

那麼就來一起做做這個效果啦!看完記得點贊哦~

如果建立wpf項目應該不用我說了吧,在c#下面找找就好了。

在初始的window下添加如下屬性:

分别是什麼意思呢?

1、給視窗命名,以後後面會用到的。

2、設定視窗的出現位置,這裡設定為螢幕中心,你可以設定其他位置。

3、視窗的大小,我設定為正常,你也可以設定為全屏(maximized)。

4、視窗的樣式,此處設為無标題。

5、視窗的邊框,true表示無邊框。

6、視窗的加載事件,稍後會補充的。

7、背景顔色,你可以再修改。

8、不可改變視窗尺寸。

然後被預設好的grid添加一個名字:

那麼界面部分就設好咯。

你首先需要一個計時器:

還需要一個前面提到的window_loaded事件:

我們現在應該來寫timer_tick事件了,不過在此之前我們應該決定将要顯示什麼内容。就以“今天星期一”好了,我們可以建立一個數組,用一個整型變量作為計數器。

我接下來可能比較啰嗦,但隻是因為想必看我部落格的大多是學生,希望能稍微教教大家思考的方式。

在mainwindow函數前定義全局變量如下:

計時器方法如下:

如果計數器已經為0了,說明數組内的内容已經全部都顯示了一遍,那麼将其重置後再次開啟計數器。

如果不為0,先執行個體化一個textwindow視窗,至于這個視窗是做什麼的,我們稍後再看。

再随後我們将數組内的字元串指派給textwindow類的執行個體的屬性,并設定它的顯示位置。

然後将textwindow視窗添加到maingrid中,最後将計數器減一。

建立一個xaml頁面大家也會的吧?當然,也可以直接建立usercontrol頁面。

添加如下代碼(我會逐個說明的):

1、rendertransformorigin的作用,通俗的講,就是文字即将從哪個角度出來。此處是視窗的中心。

<1,0>是左下角;<0,1>是右上角

<1,1>是左上角;<0.0>是右下角

2、loaded同樣和前面是一樣是加載事件

3、transformgroup,我們稍後會見到

4、textblock用來顯示文本

在類textwindow中設定以下變量,我們前面也看到了,會從mainwindow中傳入相關參數:

因為視窗會有抖動效果,是以呢,就需要兩個參數來定位它:

storyboard以前我都是用blend寫的,這裡直接刷代碼有點難度。

記得設定一個屬性來傳遞文本參數。

如前所述,是時候傳遞這兩個參數了:

接下來就是這個項目裡最重大的過程了,難度也很大,每一個參數都得多次嘗試才好。

先寫方法:

方法内定義動畫:

文字的縮放過程:

試想一下,如果文字堂而皇之的冒了出來不太美觀吧?如果有一個由大到小的縮放過程,那不是很贊麼?

代碼我覺得應該都能看懂,settargetproperty屬性是在背景代碼中設定屬性的一個非常好的方式,大家如果會用“資源”,可以類比來思考一下。如果沒用過資源也沒關系,後面我們會見到。

前面是寫的縮放部分,我們還可以添加一個透明度的過渡過程如下:

最終切記将這三個執行個體添加到storyboard中。

視窗抖動效果如下:

和上面的縮放和透明度一樣,添加這些屬性到storyboard中。

最後就是注冊事件咯:

至此該方法就完成了,然後就開始新的storyboard_completed方法了。

這個方法所做的事情簡單的說,就是在完成一個storyboard動畫後接觸所有綁定,重新整理畫面(不然上一次的文字不消失回和下一次顯示的文字重疊),然後将視窗歸位。

那麼至此就來調試一下吧~

好玩的WPF第一彈:視窗抖動+邊框陰影效果+倒計時顯示文字

呀,文字的出現順序反了哦……

想想問題出在這裡呢:

我們首先将數組最後一個列印出來了,然後依次第四個、第三個……

要麼将列印順序改變,要麼定義數組的時候反向定義,但這兩種方式都不人性化。比如說我們可能要讓使用者輸入數組内容,總不好讓使用者反向輸入吧?

是以我們中間插入一個方法,來講數組逆序輸出。

然後在mainwindow函數中執行該方法:

調試一下果然奏效~

不過還有一種更加簡單的方式,c#的自帶方法:

還可能你會遇到這個問題:不就是“今天星期一”五個字嘛,至于讓每個字弄成一個字元串然後組成數組嘛,直接上字元串不行?

當然可以:

那麼逆序的問題怎麼解決?

字元串本身也是數組,隻不過是由字元組成的。

如果讀者是初學者的話,我也來證明一下吧。

還記得這個麼?

最後無論是字元還是字元串我都調用了tostring()方法來轉換成字元,但如果txt是字元串,而把.tostring()去掉的話就會報錯了,因為它不是字元串。

好了,下面來給大家看看另一種取出字元串中字元的方法:

這個真的非常好用。

so……到此為止了,和開篇中的gif效果一模一樣了。

那麼給大家留一個小練習,如果txt是一個字元串數組呢?

需要每次都列印出來一句話,而非一個字,該怎麼做?

文章結尾我會給出思路,大家不妨在看下文前先試試。

好了,标題中的視窗抖動和倒計時顯示文字都有了。那麼邊框呢?現在雖然是無邊框了,但總感覺不那麼精緻,怎樣讓它有陰影效果呢?

那麼,打開app.xaml,添加如下資源樣式就好了。

最後在mainwindow.xaml下的window中添加該資源:

那麼最終的效果如下:

好玩的WPF第一彈:視窗抖動+邊框陰影效果+倒計時顯示文字

那麼關于前面的小練習呢,其實解決的障礙在于,一個字元串的字數太多,原本的

textblock的200寬度已經不能滿足了,于是乎,幹脆删了它:

當然了,字型也要調小一點。

可是這樣并不完美,因為有這麼多字,一秒鐘的時間并不能看完吧。是以還得修改一下比較好,我将我修改過的地方貼出來……

好了,部落格結束啦,我也寫了好久。要源碼的話就在評論裡留郵箱吧……我一個一個發了……

好玩的WPF第一彈:視窗抖動+邊框陰影效果+倒計時顯示文字

感謝您的通路,希望對您有所幫助。 歡迎大家關注、收藏以及評論。

為使本文得到斧正和提問,轉載請注明出處:

http://blog.csdn.net/nomasp