Windows Phone 7 日历应用的实现

在Windows Phone 7上实现一个日历的程序有很多种的方式，下面将用一种很简单的方法来实现一个日历的应用程序。日历主体是用一个WrapPanel面板加上多了Button控件来实现的，每个日期用一个Button来表示。WrapPanel根据其中Button元素的尺寸和其自身可能的大小自动地把其中的Button元素排列到下一行或下一列。该日历程序实现的功能包括显示当前的日期，可以通过上下按钮来查看不同月份的日期。

<phone:PhoneApplicationPage

x:Class="CalendarControl.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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

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">

<phone:PhoneApplicationPage.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="style.xaml"/>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</phone:PhoneApplicationPage.Resources>

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

<Grid x:Name="LayoutRoot" Background="Firebrick">

<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="PageTitle" Text="日历" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="90" />

</StackPanel>

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

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<Grid>

<Grid>

<Button x:Name="BackBtn" VerticalAlignment="Top" HorizontalAlignment="Left" Style="{StaticResource RoundButton}" Height="72" Width="72" Margin="27,1,0,0" Click="OnChangeMonth" BorderBrush="White">

<Image Source="/CalendarControl;component/Images/appbar.back.png" Height="42" Width="42" VerticalAlignment="Top" HorizontalAlignment="Left" />

</Button>

<TextBlock x:Name="MonthYear" Text="November 2010" Style="{StaticResource PhoneTextLargeStyle}" Margin="101,14,124,0" HorizontalAlignment="Center" VerticalAlignment="Top" Width="231" TextAlignment="Center" Foreground="White"/>

<Button x:Name="NextBtn" VerticalAlignment="Top" HorizontalAlignment="Right" Style="{StaticResource RoundButton}" Height="72" Width="74" Margin="0,0,45,0" Click="OnChangeMonth" Foreground="White" BorderBrush="White">

<Image Source="/CalendarControl;component/Images/appbar.next.png" Height="42" Width="42" VerticalAlignment="Top" HorizontalAlignment="Right" />

</Button>

</Grid>

<ListBox x:Name="CalendarListBox" Margin="1,78,0,70" Height="459">

<ListBoxItem Margin="12,0,0,0">

<toolkit:WrapPanel x:Name="CalendarWrapPanel" HorizontalAlignment="Left" VerticalAlignment="Top"/>

</ListBoxItem>

</ListBox>

</Grid>

</Grid>

</Grid>

</phone:PhoneApplicationPage>

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 Microsoft.Phone.Shell;

namespace CalendarControl

{

public partial class MainPage : PhoneApplicationPage

{

DateTime? _entryDate = DateTime.Now;//"?"加上之后表示可以有空值（null） Nullable<T>

public MainPage()

{

InitializeComponent();

InitializeCalendar(_entryDate.Value);//第一次进入日历程序 初始化当前日期的显示

}

/// <summary>

///月份前进后退事件

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void OnChangeMonth(object sender, RoutedEventArgs e)

{

if (((Button)sender).Name == "NextBtn")//如果是点击下一个月的按钮

_entryDate = _entryDate.Value.AddMonths(1);

else

_entryDate = _entryDate.Value.AddMonths(-1);

CalendarListBox.Visibility = Visibility.Collapsed;

//初始化该日期的显示

InitializeCalendar(_entryDate.Value);

}

/// <summary>

/// 初始化日历不同月份的日期

/// </summary>

/// <param name="entryDate"></param>

protected void InitializeCalendar(DateTime entryDate)

{

MonthYear.Text = String.Format("{0:yyyy年 MM月 }", _entryDate.Value);

DateTime todaysDate = DateTime.Now;

int numDays = DateTime.DaysInMonth(entryDate.Year, entryDate.Month);//获取显示的月份的天数

int count = CalendarWrapPanel.Children.Count;//CalendarWrapPanel面板中检查按钮的数量

if (count > numDays)

{//从最后减去多余的日期的按钮 日期用的是按钮控件

for (int i = 1; i <= count - numDays; i++)

CalendarWrapPanel.Children.RemoveAt(count - i);

}

else

{//从最后加上缺少的日期的按钮

int start = count + 1;

for (int i = start; i <= numDays; i++)

{

Border border = new Border();

border.Background = new SolidColorBrush(Color.FromArgb(255, 103, 183, 212));

border.Margin = new Thickness(0, 0, 5, 5);

border.Width = 80;

border.Height = 80;

border.CornerRadius = new CornerRadius(20);

Button btn = new Button();

btn.Name = "Day" + i;

btn.Content = i.ToString();

btn.BorderBrush = new SolidColorBrush(Colors.Transparent);

btn.Width = 75;

btn.Height = 75;

btn.FontSize = 25;

border.Child = btn;//Button放进Border里面

btn.Style = this.Resources["HasDataButtonStyle"] as Style;

CalendarWrapPanel.Children.Add(border);//将按钮添加到面板中

}

}

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

{

Border border = (Border)CalendarWrapPanel.Children[i];

if (border != null)

{

Button btn = (Button)border.Child;

DateTime currDate = new DateTime(entryDate.Year, entryDate.Month, i + 1);

//如果是日期是今天则设置日期的按钮为橙色

if (currDate.Date.CompareTo(DateTime.Now.Date) == 0)

{

border.Background = new SolidColorBrush(Color.FromArgb(255, 255, 165, 0));

btn.Style = this.Resources["TodayHasDataButtonStyle"] as Style;

// isToday = true;

}

else

{

border.Background = new SolidColorBrush(Color.FromArgb(255, 103, 183, 212));

}

}

}

CalendarWrapPanel.UpdateLayout();//更新CalendarWrapPanel的显示

CalendarListBox.Visibility = Visibility.Visible;//设置为可见

}

}

}

样式文件

style.xaml

< ResourceDictionary xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"
>
< Style x:Key= "ButtonStyle1" TargetType= "Button">
< Setter Property= "Background" Value= "Transparent" />
< Setter Property= "BorderBrush" Value= "{StaticResource PhoneForegroundBrush}" />
< Setter Property= "BorderThickness" Value= "{StaticResource PhoneBorderThickness}" />
< Setter Property= "FontFamily" Value= "{StaticResource PhoneFontFamilySemiBold}" />
< Setter Property= "FontSize" Value= "{StaticResource PhoneFontSizeMediumLarge}" />
< Setter Property= "Padding" Value= "10,3,10,5" />
< Setter Property= "Template">
< Setter.Value>
< ControlTemplate TargetType= "Button">
< Grid Background= "Transparent">
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name= "CommonStates">
< VisualState x:Name= "Normal">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "#FFFFFF" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< VisualState x:Name= "MouseOver" />
< VisualState x:Name= "Pressed">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneBackgroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Background" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneForegroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "BorderBrush" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneForegroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< VisualState x:Name= "Disabled">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneDisabledBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "BorderBrush" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "Transparent" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Background" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "Transparent" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< /VisualStateGroup>
< /VisualStateManager.VisualStateGroups>
< Border x:Name= "ButtonBackground" BorderBrush= "{TemplateBinding BorderBrush}" BorderThickness= "{TemplateBinding BorderThickness}" Background= "{TemplateBinding Background}" CornerRadius= "0" Margin= "{StaticResource PhoneTouchTargetOverhang}">
< ContentControl x:Name= "ContentContainer" ContentTemplate= "{TemplateBinding ContentTemplate}" Content= "{TemplateBinding Content}" Foreground= "{TemplateBinding Foreground}" HorizontalContentAlignment= "{TemplateBinding HorizontalContentAlignment}" Padding= "{TemplateBinding Padding}" VerticalContentAlignment= "{TemplateBinding VerticalContentAlignment}" />
< /Border>
< /Grid>
< /ControlTemplate>
< /Setter.Value>
< /Setter>
< /Style>

< Style x:Key= "HasDataButtonStyle" TargetType= "Button">
< Setter Property= "Background" Value= "Transparent" />
< Setter Property= "BorderBrush" Value= "{StaticResource PhoneForegroundBrush}" />
< Setter Property= "BorderThickness" Value= "{StaticResource PhoneBorderThickness}" />
< Setter Property= "FontFamily" Value= "{StaticResource PhoneFontFamilySemiBold}" />
< Setter Property= "FontSize" Value= "{StaticResource PhoneFontSizeMediumLarge}" />
< Setter Property= "Padding" Value= "10,3,10,5" />
< Setter Property= "Template">
< Setter.Value>
< ControlTemplate TargetType= "Button">
< Grid Background= "Transparent">
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name= "CommonStates">
< VisualState x:Name= "Normal">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "#FFF200" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< VisualState x:Name= "MouseOver" />
< VisualState x:Name= "Pressed">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "#FFF200" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Background" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneForegroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "BorderBrush" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneForegroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< VisualState x:Name= "Disabled">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneDisabledBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "BorderBrush" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "Transparent" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Background" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "Transparent" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< /VisualStateGroup>
< /VisualStateManager.VisualStateGroups>
< Border x:Name= "ButtonBackground" BorderBrush= "{TemplateBinding BorderBrush}" BorderThickness= "{TemplateBinding BorderThickness}" Background= "{TemplateBinding Background}" CornerRadius= "0" Margin= "{StaticResource PhoneTouchTargetOverhang}">
< ContentControl x:Name= "ContentContainer" ContentTemplate= "{TemplateBinding ContentTemplate}" Content= "{TemplateBinding Content}" Foreground= "{TemplateBinding Foreground}" HorizontalContentAlignment= "{TemplateBinding HorizontalContentAlignment}" Padding= "{TemplateBinding Padding}" VerticalContentAlignment= "{TemplateBinding VerticalContentAlignment}" />
< /Border>
< /Grid>
< /ControlTemplate>
< /Setter.Value>
< /Setter>
< /Style>

< Style x:Key= "TodayHasDataButtonStyle" TargetType= "Button">
< Setter Property= "Background" Value= "Transparent" />
< Setter Property= "BorderBrush" Value= "{StaticResource PhoneForegroundBrush}" />
< Setter Property= "BorderThickness" Value= "{StaticResource PhoneBorderThickness}" />
< Setter Property= "FontFamily" Value= "{StaticResource PhoneFontFamilySemiBold}" />
< Setter Property= "FontSize" Value= "{StaticResource PhoneFontSizeMediumLarge}" />
< Setter Property= "Padding" Value= "10,3,10,5" />
< Setter Property= "Template">
< Setter.Value>
< ControlTemplate TargetType= "Button">
< Grid Background= "Transparent">
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name= "CommonStates">
< VisualState x:Name= "Normal">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "#FFF200" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< VisualState x:Name= "MouseOver" />
< VisualState x:Name= "Pressed">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "#FFF200" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Background" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneForegroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "BorderBrush" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneForegroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< VisualState x:Name= "Disabled">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneDisabledBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "BorderBrush" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "Transparent" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Background" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "Transparent" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< /VisualStateGroup>
< /VisualStateManager.VisualStateGroups>
< Border x:Name= "ButtonBackground" BorderBrush= "{TemplateBinding BorderBrush}" BorderThickness= "{TemplateBinding BorderThickness}" Background= "{TemplateBinding Background}" CornerRadius= "0" Margin= "{StaticResource PhoneTouchTargetOverhang}">
< ContentControl x:Name= "ContentContainer" ContentTemplate= "{TemplateBinding ContentTemplate}" Content= "{TemplateBinding Content}" Foreground= "{TemplateBinding Foreground}" HorizontalContentAlignment= "{TemplateBinding HorizontalContentAlignment}" Padding= "{TemplateBinding Padding}" VerticalContentAlignment= "{TemplateBinding VerticalContentAlignment}" />
< /Border>
< /Grid>
< /ControlTemplate>
< /Setter.Value>
< /Setter>
< /Style>

< Style x:Key= "RoundButton" TargetType= "Button">
< Setter Property= "Background" Value= "Transparent" />
< Setter Property= "BorderBrush" Value= "{StaticResource PhoneForegroundBrush}" />
< Setter Property= "Foreground" Value= "{StaticResource PhoneForegroundBrush}" />
< Setter Property= "BorderThickness" Value= "{StaticResource PhoneBorderThickness}" />
< Setter Property= "FontFamily" Value= "{StaticResource PhoneFontFamilySemiBold}" />
< Setter Property= "FontSize" Value= "{StaticResource PhoneFontSizeMediumLarge}" />
< Setter Property= "Padding" Value= "10,3,10,5" />
< Setter Property= "Template">
< Setter.Value>
< ControlTemplate TargetType= "Button">
< Grid Background= "Transparent">
< VisualStateManager.VisualStateGroups>
< VisualStateGroup x:Name= "CommonStates">
< VisualState x:Name= "Normal" />
< VisualState x:Name= "MouseOver" />
< VisualState x:Name= "Pressed">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneBackgroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Background" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneForegroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "BorderBrush" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneForegroundBrush}" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< VisualState x:Name= "Disabled">
< Storyboard>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Foreground" Storyboard.TargetName= "ContentContainer">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneDisabledBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "BorderBrush" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "{StaticResource PhoneDisabledBrush}" />
< /ObjectAnimationUsingKeyFrames>
< ObjectAnimationUsingKeyFrames Storyboard.TargetProperty= "Background" Storyboard.TargetName= "ButtonBackground">
< DiscreteObjectKeyFrame KeyTime= "0" Value= "Transparent" />
< /ObjectAnimationUsingKeyFrames>
< /Storyboard>
< /VisualState>
< /VisualStateGroup>
< /VisualStateManager.VisualStateGroups>
< Border x:Name= "ButtonBackground" BorderBrush= "{TemplateBinding BorderBrush}" BorderThickness= "{TemplateBinding BorderThickness}" Background= "{TemplateBinding Background}" CornerRadius= "33" Margin= "{StaticResource PhoneTouchTargetOverhang}">
< ContentControl x:Name= "ContentContainer" Content= "{TemplateBinding Content}" RenderTransformOrigin= "0.5,0.5">
< ContentControl.RenderTransform>
< ScaleTransform x:Name= "buttonScale" />
< /ContentControl.RenderTransform>
< /ContentControl>
< /Border>
< /Grid>
< /ControlTemplate>
< /Setter.Value>
< /Setter>
< /Style>
< /ResourceDictionary>