WindowsPhone8模拟时钟

WindowsPhone8模拟时钟

     前端XAML示例代码：

<phone:PhoneApplicationPage 
    xmlns:MyUserControl="clr-namespace:MyClock.MyUserControl"
    x:Class="MyClock.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:Controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    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="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    Loaded="PhoneApplicationPage_Loaded">

    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="Transparent" Margin="-10,0,-10,0">
        <phone:Pivot Name="PivotClock" Style="{StaticResource PivotClockStyle}"
                     SelectionChanged="PivotClock_SelectionChanged">
            <phone:PivotItem>
                <phone:PivotItem.Header>
                    <TextBlock Name="txtTime" Text="北京时间" Style="{StaticResource PivotItemHeaderStyle}" />
                </phone:PivotItem.Header>

                <!-- 钟表 -->
                <Grid x:Name="MyClock" Style="{StaticResource ClockStyle}" Margin="3,0">
                    <Grid.Background>
                        <ImageBrush x:Name="ClockBG" ImageSource="/Images/Background/bjClock.png" Stretch="Uniform" />
                    </Grid.Background>

                    <!-- 定义一个圆 -->
                    <Ellipse x:Name="ClockFaceEllipse" StrokeThickness="0" Margin="0" />

                    <Canvas x:Name="ClockHandsCanvas">
                        <Canvas.Resources>
                            <!-- 动画时间线容器 -->
                            <Storyboard x:Name="ClockStoryboard">
                                <!-- 使用DoubleAnimation 类 创建时针动画 -->
                                <DoubleAnimation x:Name="HourAnimation"
                                             Storyboard.TargetProperty ="Angle"
                                             Storyboard.TargetName="HourHandTransform"
                                             Duration="12:0:0" RepeatBehavior="Forever" />

                                <!-- 使用DoubleAnimation 类 创建分针动画 -->
                                <DoubleAnimation x:Name="MinuteAnimation"
                                             Storyboard.TargetProperty="Angle"
                                             Storyboard.TargetName="MinuteHandTransform"
                                             Duration="1:0:0" RepeatBehavior="Forever" />

                                <!-- 使用DoubleAnimation 类 创建秒针动画 -->
                                <DoubleAnimation x:Name="SecondAnimation"
                                             Storyboard.TargetProperty="Angle"
                                             Storyboard.TargetName="SecondHandTransform"
                                             Duration="0:1:0" RepeatBehavior="Forever" />
                            </Storyboard>
                        </Canvas.Resources>

                        <!-- 秒针矩形 -->
                        <Rectangle Width="4" Height="200" RadiusX="2" RadiusY="2" Canvas.Left="222" Canvas.Top="50" Fill="Black">
                            <Rectangle.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform CenterX="2" CenterY="175" x:Name="SecondHandTransform" />
                                </TransformGroup>
                            </Rectangle.RenderTransform>
                        </Rectangle>

                        <!-- 分针矩形 -->
                        <Border Width="8" Height="165"  Canvas.Left="220" Canvas.Top="85">
                            <Border.Background>
                                <ImageBrush ImageSource="/Images/Minue.png" Stretch="UniformToFill" />
                            </Border.Background>
                            <Border.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform CenterX="4" CenterY="140" x:Name="MinuteHandTransform" />
                                </TransformGroup>
                            </Border.RenderTransform>
                        </Border>

                        <!-- 时针矩形 -->
                        <Border Width="10" Height="130"  Canvas.Left="219" Canvas.Top="125">
                            <Border.Background>
                                <ImageBrush ImageSource="/Images/Hour.png" Stretch="UniformToFill" />
                            </Border.Background>
                            <Border.RenderTransform>
                                <TransformGroup>
                                    <RotateTransform CenterX="5" CenterY="100" x:Name="HourHandTransform" />
                                </TransformGroup>
                            </Border.RenderTransform>
                        </Border>

                        <!-- 时钟中心 -->
                        <Ellipse Width="15" Height="15" Canvas.Left="217" Canvas.Top="218" Fill="Black" />
                    </Canvas>
                </Grid>
            </phone:PivotItem>
            <phone:PivotItem>
                <phone:PivotItem.Header>
                    <TextBlock Text="世界时间" Style="{StaticResource PivotItemHeaderStyle}" />
                </phone:PivotItem.Header>

                <ListBox Name="lbCountryTime" SelectionChanged="lbCountryTime_SelectionChanged">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <MyUserControl:CountryTimeUserControl />
                        </DataTemplate>
                    </ListBox.ItemTemplate>

                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Controls:WrapPanel />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </phone:PivotItem>
        </phone:Pivot>

        <!-- 时间 -->
        <MyUserControl:TimeUserControl Name="myTime" />
    </Grid>

    <!-- 菜单栏 -->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Minimized" 
                              Opacity="0"
                              BackgroundColor="Transparent" 
                              StateChanged="ApplicationBar_StateChanged" >
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="北京时间" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="伦敦时间" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="巴黎时间" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="东京时间" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="首尔时间" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="柏林时间" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="华盛顿时间" Click="ApplicationBarMenuItem_Click" />
                <shell:ApplicationBarMenuItem Text="莫斯科时间" Click="ApplicationBarMenuItem_Click" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

    后台CS示例代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Navigation;
using System.Windows.Threading;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Model;
using MyClock.Code;
using MyClock.Resources;
using System.Windows.Media.Imaging;

namespace MyClock
{
    public partial class MainPage : PhoneApplicationPage
    {
        #region 全局变量
        /// <summary>
        /// int i
        /// </summary>
        int i = 0;

        /// <summary>
        /// int j
        /// </summary>
        int j = 0;

        /// <summary>
        /// 以北京 东八区为0，相隔时区
        /// </summary>
        double TimeZones = 0;

        /// <summary>
        /// random 随机数
        /// </summary>
        Random random = new Random();

        /// <summary>
        /// 计时器
        /// </summary>
        DispatcherTimer timer = new DispatcherTimer();
        #endregion


        // 构造函数
        public MainPage()
        {
            InitializeComponent();
        }


        /// <summary>
        /// 页面加载
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
        {
            //加载时间
            timer.Interval = TimeSpan.FromSeconds(1);
            timer.Tick += timer_Tick;
            timer.Start();

            //加载时钟
            LoadClockDate();
        }


        /// <summary>
        /// 加载时间
        /// </summary>
        void timer_Tick(object sender, EventArgs e)
        {
            DateTime time = DateTime.Now.AddHours(TimeZones);

            if (this.PivotClock.SelectedIndex == 0)
            {
                //指定国家时间
                DateAndTime myTime = new DateAndTime
                {
                    Year = time.ToString("yyyy").Trim(),
                    Month = time.ToString("MM").Trim(),
                    Day = time.ToString("dd").Trim(),
                    Hour = time.ToString("HH").Trim(),
                    Minute = time.ToString("mm").Trim(),
                    Second = time.ToString("ss").Trim()
                };
                this.myTime.DataContext = myTime;
                this.myTime.Visibility = System.Windows.Visibility.Visible;
            }
            else if (this.PivotClock.SelectedIndex == 1)
            {
                //世界时间
                CountryTime();
                this.myTime.Visibility = System.Windows.Visibility.Collapsed;
            }
        }


        /// <summary>
        /// 时钟开始
        /// </summary>
        public void LoadClockDate()
        {
            //当前时间
            DateTime now = DateTime.Now.AddHours(TimeZones);

            //定义秒针及其角度运算规律
            double seclndAngle = now.Second * 6;
            SecondAnimation.From = seclndAngle;
            SecondAnimation.To = seclndAngle + 360;

            //定义分针及其角度运算规律
            double minuteAngle = now.Minute * 6 + now.Second / 10;
            MinuteAnimation.From = minuteAngle;
            MinuteAnimation.To = minuteAngle + 360;

            //定义时针及其角度运算规律
            double hourAngle = now.Hour * 30 + now.Minute / 2;
            HourAnimation.From = hourAngle;
            HourAnimation.To = hourAngle + 360;

            //启动 Storyboaed 动画
            ClockStoryboard.Begin();
        }


        /// <summary>
        /// 背景样色改变
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ApplicationBar_StateChanged(object sender, ApplicationBarStateChangedEventArgs e)
        {
            ApplicationBar bar = (ApplicationBar)sender;
            if (bar != null)
            {
                if (i % 2 == 0)
                {
                    bar.Opacity = 0.65;
                    bar.BackgroundColor = Colors.Gray;
                }
                else
                {
                    bar.Opacity = 0;
                    bar.BackgroundColor = Colors.Transparent;
                }

                i++;
            }
        }


        /// <summary>
        /// 菜单点击事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ApplicationBarMenuItem_Click(object sender, EventArgs e)
        {
            ApplicationBarMenuItem mitem = (ApplicationBarMenuItem)sender;
            if (mitem != null)
            {
                String url = String.Empty;
                String CityTime = mitem.Text.ToString().Trim();
                switch (CityTime)
                {
                    case "北京时间":
                        TimeZones = CityAndTimezone.BeiJing;
                        url = "/Images/Background/bjClock.png";
                        break;
                    case "伦敦时间":
                        TimeZones = CityAndTimezone.LunDun;
                        url = "/Images/Background/ldClock.png";
                        break;
                    case "巴黎时间":
                        TimeZones = CityAndTimezone.BaLi;
                        url = "/Images/Background/blClock.png";
                        break;
                    case "东京时间":
                        TimeZones = CityAndTimezone.DongJing;
                        url = "/Images/Background/djClock.png";
                        break;
                    case "首尔时间":
                        TimeZones = CityAndTimezone.ShouEr;
                        url = "/Images/Background/srClock.png";
                        break;
                    case "柏林时间":
                        TimeZones = CityAndTimezone.BoLin;
                        url = "/Images/Background/dgClock.png";
                        break;
                    case "华盛顿时间":
                        TimeZones = CityAndTimezone.HuaShengDun;
                        url = "/Images/Background/hsdClock.png";
                        break;
                    case "莫斯科时间":
                        TimeZones = CityAndTimezone.MoSiKe;
                        url = "/Images/Background/mskClock.png";
                        break;
                    default:
                        //默认为北京东八区时间
                        TimeZones = CityAndTimezone.BeiJing;
                        url = "/Images/Background/bjClock.png";
                        break;
                }

                //设置标题
                this.txtTime.Text = CityTime.Trim();

                //设置背景
                this.ClockBG.ImageSource = new BitmapImage(new Uri(url, UriKind.Relative));

                //加载
                PhoneApplicationPage_Loaded(null, null);

                //样色修改
                ChangeColor();

                //切换到第一屏
                if (this.PivotClock.SelectedIndex > 0)
                    this.PivotClock.SelectedIndex = 0;
            }
        }


        /// <summary>
        /// 选项改变事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void PivotClock_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            //样色改变
            ChangeColor();
        }


        /// <summary>
        /// 样色改变事件
        /// </summary>
        public void ChangeColor()
        {
            //定义一个随机颜色
            Color color = Color.FromArgb(255, (byte)random.Next(256), (byte)random.Next(256), (byte)random.Next(256));

            StackPanel sp = (StackPanel)this.myTime.FindName("spFathen");
            if (sp != null)
                sp.Tag = color.ToString();
        }


        /// <summary>
        /// 世界时间
        /// </summary>
        public void CountryTime()
        {
            DateTime time;
            CountryAndTime cat = null;
            List<CountryAndTime> catList = new List<CountryAndTime>();

            if (j % 2 == 0)
            {
                //巴黎
                time = DateTime.Now.AddHours(CityAndTimezone.BaLi);
                cat = new CountryAndTime()
                {
                    Country = "法国",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //柏林
                time = DateTime.Now.AddHours(CityAndTimezone.BoLin);
                cat = new CountryAndTime()
                {
                    Country = "德国",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //日本
                time = DateTime.Now.AddHours(CityAndTimezone.DongJing);
                cat = new CountryAndTime()
                {
                    Country = "日本",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //美国
                time = DateTime.Now.AddHours(CityAndTimezone.HuaShengDun);
                cat = new CountryAndTime()
                {
                    Country = "美国",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //英国
                time = DateTime.Now.AddHours(CityAndTimezone.LunDun);
                cat = new CountryAndTime()
                {
                    Country = "英国",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //韩国
                time = DateTime.Now.AddHours(CityAndTimezone.ShouEr);
                cat = new CountryAndTime()
                {
                    Country = "韩国",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //俄国
                time = DateTime.Now.AddHours(CityAndTimezone.MoSiKe);
                cat = new CountryAndTime()
                {
                    Country = "俄国",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //中国
                time = DateTime.Now.AddHours(CityAndTimezone.BeiJing);
                cat = new CountryAndTime()
                {
                    Country = "中国",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //印度
                time = DateTime.Now.AddHours(CityAndTimezone.XinDeli);
                cat = new CountryAndTime()
                {
                    Country = "印度",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);

                //新加坡
                time = DateTime.Now.AddHours(CityAndTimezone.XinJiaPo);
                cat = new CountryAndTime()
                {
                    Country = "加坡",
                    Time = time.ToString("HH:mm")
                };
                catList.Add(cat);
            }
            else
            {
                //巴黎
                time = DateTime.Now.AddHours(CityAndTimezone.BaLi);
                cat = new CountryAndTime()
                {
                    Country = "法国",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //柏林
                time = DateTime.Now.AddHours(CityAndTimezone.BoLin);
                cat = new CountryAndTime()
                {
                    Country = "德国",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //日本
                time = DateTime.Now.AddHours(CityAndTimezone.DongJing);
                cat = new CountryAndTime()
                {
                    Country = "日本",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //美国
                time = DateTime.Now.AddHours(CityAndTimezone.HuaShengDun);
                cat = new CountryAndTime()
                {
                    Country = "美国",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //英国
                time = DateTime.Now.AddHours(CityAndTimezone.LunDun);
                cat = new CountryAndTime()
                {
                    Country = "英国",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //韩国
                time = DateTime.Now.AddHours(CityAndTimezone.ShouEr);
                cat = new CountryAndTime()
                {
                    Country = "韩国",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //俄国
                time = DateTime.Now.AddHours(CityAndTimezone.MoSiKe);
                cat = new CountryAndTime()
                {
                    Country = "俄国",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //中国
                time = DateTime.Now.AddHours(CityAndTimezone.BeiJing);
                cat = new CountryAndTime()
                {
                    Country = "中国",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //印度
                time = DateTime.Now.AddHours(CityAndTimezone.XinDeli);
                cat = new CountryAndTime()
                {
                    Country = "印度",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);

                //新加坡
                time = DateTime.Now.AddHours(CityAndTimezone.XinJiaPo);
                cat = new CountryAndTime()
                {
                    Country = "加坡",
                    Time = time.ToString("HH mm")
                };
                catList.Add(cat);
            }
            j++;

            //绑定
            this.lbCountryTime.ItemsSource = catList;
        }


        /// <summary>
        /// 具体国家时间表
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void lbCountryTime_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            CountryAndTime cat = (CountryAndTime)this.lbCountryTime.SelectedItem;
            if (cat != null)
            {
                String url = String.Empty;
                String title = String.Empty;

                switch (cat.Country.Trim())
                {
                    case "法国":
                        title = "巴黎时间";
                        TimeZones = CityAndTimezone.BaLi;
                        url = "/Images/Background/blClock.png";
                        break;
                    case "德国":
                        title = "柏林时间";
                        TimeZones = CityAndTimezone.BoLin;
                        url = "/Images/Background/dgClock.png";
                        break;
                    case "日本":
                        title = "东京时间";
                        TimeZones = CityAndTimezone.DongJing;
                        url = "/Images/Background/djClock.png";
                        break;
                    case "美国":
                        title = "华盛顿时间";
                        TimeZones = CityAndTimezone.HuaShengDun;
                        url = "/Images/Background/hsdClock.png";
                        break;
                    case "英国":
                        title = "伦敦时间";
                        TimeZones = CityAndTimezone.LunDun;
                        url = "/Images/Background/ldClock.png";
                        break;
                    case "韩国":
                        title = "首尔时间";
                        TimeZones = CityAndTimezone.ShouEr;
                        url = "/Images/Background/srClock.png";
                        break;
                    case "俄国":
                        title = "莫斯科时间";
                        TimeZones = CityAndTimezone.MoSiKe;
                        url = "/Images/Background/mskClock.png";
                        break;
                    case "中国":
                        title = "北京时间";
                        TimeZones = CityAndTimezone.BeiJing;
                        url = "/Images/Background/bjClock.png";
                        break;
                    case "印度":
                        title = "新德里时间";
                        TimeZones = CityAndTimezone.XinDeli;
                        url = "/Images/Background/bjClock.png";
                        break;
                    case "加坡":
                        title = "新加坡时间";
                        TimeZones = CityAndTimezone.XinJiaPo;
                        url = "/Images/Background/bjClock.png";
                        break;
                }

                //设置标题
                this.txtTime.Text = title.Trim();

                //设置背景
                this.ClockBG.ImageSource = new BitmapImage(new Uri(url, UriKind.Relative));

                //加载
                PhoneApplicationPage_Loaded(null, null);

                //样色修改
                ChangeColor();

                //切换到第一屏
                if (this.PivotClock.SelectedIndex > 0)
                    this.PivotClock.SelectedIndex = 0;
            }
        }
    }
}

 源码下载地址：

  http://pan.baidu.com/s/1hqmVYT2

   

 效果截图如下：