自学WP7第一个例子：时钟

 

自学wp7做的第一个程序：时钟

做的很山寨，没用素材

 

用textblock做的表盘和指针，放在一个canvas上

 

rotatetransform类来控制偏移角度

 

mainpage.xaml

 

<phone:phoneapplicationpage  

    x:class="clock.mainpage" 

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    xmlns:phone="clr-namespace:microsoft.phone.controls;assembly=microsoft.phone" 

    xmlns:shell="clr-namespace:microsoft.phone.shell;assembly=microsoft.phone" 

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

    mc:ignorable="d" d:designwidth="480" d:designheight="768" 

    fontfamily="{staticresource phonefontfamilynormal}" 

    fontsize="{staticresource phonefontsizenormal}" 

    foreground="{staticresource phoneforegroundbrush}" 

    supportedorientations="portrait" orientation="portrait" 

    shell:systemtray.isvisible="true"> 

 

    <!--layoutroot is the root grid where all page content is placed--> 

    <grid x:name="layoutroot" background="transparent"> 

        <grid.rowdefinitions> 

            <rowdefinition height="auto"/> 

            <rowdefinition height="*"/> 

        </grid.rowdefinitions> 

 

        <!--titlepanel contains the name of the application and page title--> 

        <stackpanel x:name="titlepanel" grid.row="0" margin="12,17,0,28"> 

            <textblock x:name="applicationtitle" text="wilson" style="{staticresource phonetextnormalstyle}"/> 

            <textblock x:name="pagetitle" text="clock" margin="9,-7,0,0" style="{staticresource phonetexttitle1style}"/> 

        </stackpanel> 

 

        <!--contentpanel - place additional content here--> 

        <grid x:name="contentpanel" grid.row="1" margin="12,0,12,0"> 

            <canvas width="444" height="444" x:name="cvclock"  /> 

        </grid> 

    </grid> 

  

    <!--sample code showing usage of applicationbar--> 

    <!--<phone:phoneapplicationpage.applicationbar> 

        <shell:applicationbar isvisible="true" ismenuenabled="true"> 

            <shell:applicationbariconbutton iconuri="/images/appbar_button1.png" text="button 1"/> 

            <shell:applicationbariconbutton iconuri="/images/appbar_button2.png" text="button 2"/> 

            <shell:applicationbar.menuitems> 

                <shell:applicationbarmenuitem text="menuitem 1"/> 

                <shell:applicationbarmenuitem text="menuitem 2"/> 

            </shell:applicationbar.menuitems> 

        </shell:applicationbar> 

    </phone:phoneapplicationpage.applicationbar>--> 

 

</phone:phoneapplicationpage> 

 

mainpage.xaml.cs

 

using system; 

using system.collections.generic; 

using system.linq; 

using system.net; 

using system.windows; 

using system.windows.controls;  

using system.windows.documents; 

using system.windows.input; 

using system.windows.media; 

using system.windows.media.animation; 

using system.windows.shapes; 

using microsoft.phone.controls; 

using system.windows.threading; 

 

namespace clock 

{ 

    public partial class mainpage : phoneapplicationpage 

    { 

        // constructor 

        public mainpage() 

        { 

            initializecomponent();            

            setclock();   //设置时钟 

 

        } 

 

        private void setclock() 

        { 

            dispatchertimer dtr = new dispatchertimer(); 

            dtr.interval = timespan.fromseconds(1); 

            dtr.tick += new eventhandler(mydial); 

            dtr.start(); 

        } 

 

        private void mydial(object sender, eventargs e) 

        { 

            int count = 60; 

            cvclock.children.clear(); 

 

            textblock tbsec = new textblock();   //秒针 

            textblock tbmin = new textblock();   //分针 

            textblock tbhour = new textblock();  //时间 

 

            datetime dt = datetime.now; 

             

            double secangle = dt.second * (360 / 60);   //秒针偏移角度 

            double minangle = dt.minute * (360 / 60) + secangle / 60;   //分针偏移角度 

            double hourangle = (dt.hour % 12) * (360 / 12) + minangle / 12;   //时针偏移角度 

 

            addclockhands(tbsec, "-------------------->", secangle); 

            addclockhands(tbmin, "------------------>", minangle); 

            addclockhands(tbhour, "--------------->", hourangle); 

 

             

            string dialtext = string.empty; 

            double dialangle; 

 

            for (int i = 0; i < count; i++) 

            { 

                dialangle = i * (360 / count); 

                 

                textblock tb = new textblock();                 

                tb.textalignment = textalignment.right;                

 

                if (i % 5 == 0) 

                { 

                    dialtext = "—";                    

                    tb.foreground = new solidcolorbrush(colors.green); 

                } 

                else 

                {                    

                    dialtext = "-"; 

                }                 

 

                addclockhands(tb, dialtext, dialangle); 

            } 

        } 

 

        /// <summary> 

        /// 添加表盘、秒针、分针、时针 

        /// </summary> 

        /// <param name="tb"></param> 

        /// <param name="text"></param> 

        /// <param name="angle"></param> 

        public void addclockhands(textblock tb, string text, double angle) 

        { 

            tb.text = text; 

            tb.width = 180; 

            canvas.setleft(tb, 222); 

            canvas.settop(tb, 222); 

            tb.rendertransformorigin = new point(0, 0); 

            rotatetransform rt = new rotatetransform(); 

            rt.centerx = (tb.actualheight) / 2; 

            rt.centery = (tb.actualheight) / 2; 

 

            rt.angle = angle - 90; 

            tb.rendertransform = rt; 

 

            cvclock.children.add(tb); 

        } 

    } 

} 

 

没做过什么优化，只是实现，让大家贱笑了

 

程序截图：

 

 

示例：

摘自：porschev的专栏