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>   
 
view sourceprint?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 = _entryDate.Value.AddMonths(1);    
 
            else   
 
                _entryDate_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;//设置为可见    
 
     
 
        }    
 
    }    
 
}  

通过以上的代码，你将实现下图所示的日历应用。

【编辑推荐】

1. 绑定在Windows Phone 7的静态类
2. 不编程也开发 无代码开发Windows Phone 7应用工具
3. 使用IronRuby开发Windows Phone 7应用程序
4. Windows Phone 7应用程序统计 65%是付费下载
5. Windows Phone 7设计评测报告