自学WP7第一个例子：时钟

自学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); 

        } 

    } 

} 

 

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

 

程序截图：

 

 

示例源码： http://www.2cto.com/uploadfile/2011/1010/20111010023323141.rar

摘自：porschev的专栏