Windows Phone開發(fā)中時(shí)鐘案例解析
本文和大家重點(diǎn)討論一下Windows Phone開發(fā)中一個(gè)時(shí)鐘的例子,Expressblend工具是開發(fā)silverlightUi的重要工具,在這里有一個(gè)從silverlight移植過來的時(shí)鐘小例子可以看出在Phone7上這個(gè)工具一樣也很重要并且可以提高開發(fā)效率。
Windows Phone開發(fā)中一個(gè)時(shí)鐘的例子
Expressblend工具是開發(fā)silverlightUi的重要工具,在這里有一個(gè)從silverlight移植過來的時(shí)鐘小例子可以看出Windows Phone開發(fā)中在Phone7上這個(gè)工具一樣也很重要并且可以提高開發(fā)效率。
一.在blend工具中,可以用Ellipse繪制表盤,通過在property中使用漸變色來產(chǎn)生立體效果。還可以能過gradient工具來調(diào)整漸變色。
二.用Ellipse工具繪制表針軸,并設(shè)置圓的strokethickness來改變線的粗細(xì)。
三.用Rectangle工具來繪制三個(gè)表針,并放好位置。
四.增加動(dòng)畫效果
- <Storyboardx:NameStoryboardx:Name="clockStoryboard">
- <!--Thisanimationtargetsthehourhandtransform-->
- <DoubleAnimationx:NameDoubleAnimationx:Name="hourAnimation"
- Storyboard.TargetName="HourHandTransform"
- Storyboard.TargetProperty="Angle"
- Duration="12:0:0"RepeatBehavior="Forever"To="360"/>
- <!--Thisanimationtargetstheminutehandtransform-->
- <DoubleAnimationx:NameDoubleAnimationx:Name="minuteAnimation"
- Storyboard.TargetName="MinuteHandTransform"
- Storyboard.TargetProperty="Angle"
- Duration="1:0:0"RepeatBehavior="Forever"To="360"/>
- <!--Thisanimationtargetsthesecondhandtransform-->
- <DoubleAnimationx:NameDoubleAnimationx:Name="secondAnimation"
- Storyboard.TargetName="SecondHandTransform"
- Storyboard.TargetProperty="Angle"
- Duration="0:1:0"RepeatBehavior="Forever"To="360"/>
- </Storyboard>
Windows Phone開發(fā)中這時(shí)運(yùn)行一下此程序,已經(jīng)可以看到時(shí)鐘的表針在走了。
五.控制表針行為語句
- voidMainPage_Loaded(objectsender,RoutedEventArgse)
- {
- //Thecurrentdateandtime.
- System.DateTimecurrentDate=DateTime.Now;
- //Findtheappropriateangle(indegrees)forthehourhand
- //basedonthecurrenttime.
- doublehourangle=(((float)currentDate.Hour)/12)*360+currentDate.Minute/2;
- //Thesameasfortheminuteangle.
- doubleminangle=(((float)currentDate.Minute)/60)*360;
- //Thesameforthesecondangle.
- doublesecangle=(((float)currentDate.Second)/60)*360;
- //Setthebeginningoftheanimation(Fromproperty)totheangle
- //correspongingtothecurrenttime.
- hourAnimation.From=hourangle;
- //Settheendoftheanimation(Toproperty)totheangle
- //correspondingtothecurrenttimePLUS360degrees.Thus,the
- //animationwillendaftertheclockhandmovesaroundtheclock
- //once.Note:TheRepeatBehaviorpropertyoftheanimationisset
- //to"orever"sotheanimationwillbeginagainassoonasitcompletes.
- hourAnimation.To=hourangle+360;
- //Sameaswiththehouranimation.
- minuteAnimation.From=minangle;
- minuteAnimation.To=minangle+360;
- //Sameaswiththehouranimation.
- secondAnimation.From=secangle;
- secondAnimation.To=secangle+360;
- this.clockStoryboard.Begin();
- }
源代碼:
/Files/randylee/MyClock.rar