您的位置:首页 > 其它

WindowsPhone8模拟时钟

2014-03-27 17:50 260 查看

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

效果截图如下:



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息