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

 

 

 


  1.  
  2.  
  3.  
  4.  
  5.  
  6.  
  7. <phone:PhoneApplicationPage   
  8.  
  9.     x:Class="CalendarControl.MainPage" 
  10.  
  11.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  12.  
  13.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  14.  
  15.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
  16.  
  17.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 
  18.  
  19.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  20.  
  21.     xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 
  22.  
  23.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  24.  
  25.     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 
  26.  
  27.     FontFamily="{StaticResource PhoneFontFamilyNormal}" 
  28.  
  29.     FontSize="{StaticResource PhoneFontSizeNormal}" 
  30.  
  31.     Foreground="{StaticResource PhoneForegroundBrush}" 
  32.  
  33.     SupportedOrientations="Portrait" Orientation="Portrait" 
  34.  
  35.     shell:SystemTray.IsVisible="True"> 
  36.  
  37.    
  38.  
  39.     <phone:PhoneApplicationPage.Resources> 
  40.  
  41.         <ResourceDictionary> 
  42.  
  43.             <ResourceDictionary.MergedDictionaries> 
  44.  
  45.                 <ResourceDictionary Source="style.xaml"/> 
  46.  
  47.             </ResourceDictionary.MergedDictionaries> 
  48.  
  49.         </ResourceDictionary> 
  50.  
  51.     </phone:PhoneApplicationPage.Resources> 
  52.  
  53.        
  54.  
  55.     <!--LayoutRoot is the root grid where all page content is placed--> 
  56.  
  57.     <Grid x:Name="LayoutRoot" Background="Firebrick"> 
  58.  
  59.         <Grid.RowDefinitions> 
  60.  
  61.             <RowDefinition Height="Auto"/> 
  62.  
  63.             <RowDefinition Height="*"/> 
  64.  
  65.         </Grid.RowDefinitions> 
  66.  
  67.    
  68.  
  69.         <!--TitlePanel contains the name of the application and page title--> 
  70.  
  71.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
  72.  
  73.             <TextBlock x:Name="PageTitle" Text="日历" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}" Height="90" /> 
  74.  
  75.         </StackPanel> 
  76.  
  77.    
  78.  
  79.         <!--ContentPanel - place additional content here--> 
  80.  
  81.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 
  82.  
  83.             <Grid> 
  84.  
  85.                 <Grid> 
  86.  
  87.                     <Button x:Name="BackBtn" VerticalAlignment="Top" HorizontalAlignment="Left" Style="{StaticResource RoundButton}" Height="72" Width="72" Margin="27,1,0,0" Click="OnChangeMonth" BorderBrush="White"> 
  88.  
  89.                         <Image Source="/CalendarControl;component/Images/appbar.back.png" Height="42" Width="42" VerticalAlignment="Top" HorizontalAlignment="Left" /> 
  90.  
  91.                     </Button> 
  92.  
  93.                     <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"/> 
  94.  
  95.                     <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"> 
  96.  
  97.                         <Image Source="/CalendarControl;component/Images/appbar.next.png" Height="42" Width="42" VerticalAlignment="Top" HorizontalAlignment="Right" /> 
  98.  
  99.                     </Button> 
  100.  
  101.                 </Grid> 
  102.  
  103.                 <ListBox x:Name="CalendarListBox" Margin="1,78,0,70" Height="459"> 
  104.  
  105.                     <ListBoxItem Margin="12,0,0,0"> 
  106.  
  107.                         <toolkit:WrapPanel x:Name="CalendarWrapPanel" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
  108.  
  109.                     </ListBoxItem> 
  110.  
  111.                 </ListBox> 
  112.  
  113.             </Grid> 
  114.  
  115.    
  116.  
  117.         </Grid> 
  118.  
  119.     </Grid> 
  120.  
  121. </phone:PhoneApplicationPage>   
  122.  
  123.  
  124.  
  125.  
  126.  
  127. ?  
  128.  
  129.  
  130.  
  131.  
  132.  
  133. using System;  
  134.  
  135. using System.Collections.Generic;  
  136.  
  137. using System.Linq;  
  138.  
  139. using System.Net;  
  140.  
  141. using System.Windows;  
  142.  
  143. using System.Windows.Controls;  
  144.  
  145. using System.Windows.Documents;  
  146.  
  147. using System.Windows.Input;  
  148.  
  149. using System.Windows.Media;  
  150.  
  151. using System.Windows.Media.Animation;  
  152.  
  153. using System.Windows.Shapes;  
  154.  
  155. using Microsoft.Phone.Controls;  
  156.  
  157. using Microsoft.Phone.Shell;  
  158.  
  159.    
  160.  
  161. namespace CalendarControl  
  162.  
  163. {  
  164.  
  165.     public partial class MainPage : PhoneApplicationPage  
  166.  
  167.     {  
  168.  
  169.         DateTime? _entryDate = DateTime.Now;//"?"加上之后表示可以有空值(null) Nullable<T> 
  170.  
  171.    
  172.  
  173.         public MainPage()  
  174.  
  175.         {  
  176.  
  177.             InitializeComponent();  
  178.  
  179.             InitializeCalendar(_entryDate.Value);//第一次进入日历程序  初始化当前日期的显示  
  180.  
  181.         }  
  182.  
  183.    
  184.  
  185.         /// <summary> 
  186.  
  187.         ///月份前进后退事件    
  188.  
  189.         /// </summary> 
  190.  
  191.         /// <param name="sender"></param> 
  192.  
  193.         /// <param name="e"></param> 
  194.  
  195.         private void OnChangeMonth(object sender, RoutedEventArgs e)  
  196.  
  197.         {  
  198.  
  199.             if (((Button)sender).Name == "NextBtn")//如果是点击下一个月的按钮  
  200.  
  201.                 _entryDate_entryDate = _entryDate.Value.AddMonths(1);  
  202.  
  203.             else  
  204.  
  205.                 _entryDate_entryDate = _entryDate.Value.AddMonths(-1);  
  206.  
  207.    
  208.  
  209.             CalendarListBox.Visibility = Visibility.Collapsed;  
  210.  
  211.    
  212.  
  213.             //初始化该日期的显示  
  214.  
  215.             InitializeCalendar(_entryDate.Value);  
  216.  
  217.         }  
  218.  
  219.    
  220.  
  221.         /// <summary> 
  222.  
  223.         ///  初始化日历不同月份的日期   
  224.  
  225.         /// </summary> 
  226.  
  227.         /// <param name="entryDate"></param> 
  228.  
  229.         protected void InitializeCalendar(DateTime entryDate)  
  230.  
  231.         {  
  232.  
  233.             MonthYear.Text = String.Format("{0:yyyy年 MM月 }", _entryDate.Value);  
  234.  
  235.    
  236.  
  237.             DateTime todaysDate = DateTime.Now;  
  238.  
  239.    
  240.  
  241.             int numDays = DateTime.DaysInMonth(entryDate.Year, entryDate.Month);//获取显示的月份的天数  
  242.  
  243.    
  244.  
  245.             int count = CalendarWrapPanel.Children.Count;//CalendarWrapPanel面板中检查按钮的数量  
  246.  
  247.             if (count > numDays)  
  248.  
  249.             {//从最后减去多余的日期的按钮   日期用的是按钮控件  
  250.  
  251.                 for (int i = 1; i <= count - numDays; i++)  
  252.  
  253.                     CalendarWrapPanel.Children.RemoveAt(count - i);  
  254.  
  255.             }  
  256.  
  257.             else  
  258.  
  259.             {//从最后加上缺少的日期的按钮  
  260.  
  261.                 int start = count + 1;  
  262.  
  263.                 for (int i = start; i <= numDays; i++)  
  264.  
  265.                 {  
  266.  
  267.                     Border border = new Border();  
  268.  
  269.                     border.Background = new SolidColorBrush(Color.FromArgb(255, 103, 183, 212));  
  270.  
  271.                     border.Margin = new Thickness(0, 0, 5, 5);  
  272.  
  273.                     border.Width = 80;  
  274.  
  275.                     border.Height = 80;  
  276.  
  277.                     border.CornerRadius = new CornerRadius(20);  
  278.  
  279.    
  280.  
  281.                     Button btn = new Button();  
  282.  
  283.                     btn.Name = "Day" + i;  
  284.  
  285.                     btn.Content = i.ToString();  
  286.  
  287.                     btn.BorderBrush = new SolidColorBrush(Colors.Transparent);  
  288.  
  289.                     btn.Width = 75;  
  290.  
  291.                     btn.Height = 75;  
  292.  
  293.                     btn.FontSize = 25;  
  294.  
  295.                     border.Child = btn;//Button放进Border里面  
  296.  
  297.                     btn.Style = this.Resources["HasDataButtonStyle"] as Style;  
  298.  
  299.    
  300.  
  301.                     CalendarWrapPanel.Children.Add(border);//将按钮添加到面板中  
  302.  
  303.                 }  
  304.  
  305.             }  
  306.  
  307.    
  308.  
  309.             for (int i = 0; i < numDays; i++)  
  310.  
  311.             {  
  312.  
  313.                 Border border = (Border)CalendarWrapPanel.Children[i];  
  314.  
  315.                 if (border != null)  
  316.  
  317.                 {  
  318.  
  319.                     Button btn = (Button)border.Child;  
  320.  
  321.    
  322.  
  323.                     DateTime currDate = new DateTime(entryDate.Year, entryDate.Month, i + 1);  
  324.  
  325.                     //如果是日期是今天则设置日期的按钮为橙色  
  326.  
  327.                     if (currDate.Date.CompareTo(DateTime.Now.Date) == 0)  
  328.  
  329.                     {  
  330.  
  331.                         border.Background = new SolidColorBrush(Color.FromArgb(255, 255, 165, 0));  
  332.  
  333.                         btn.Style = this.Resources["TodayHasDataButtonStyle"] as Style;  
  334.  
  335.                        // isToday = true;  
  336.  
  337.                     }  
  338.  
  339.                     else  
  340.  
  341.                     {  
  342.  
  343.                         border.Background = new SolidColorBrush(Color.FromArgb(255, 103, 183, 212));  
  344.  
  345.                     }  
  346.  
  347.                 }  
  348.  
  349.             }  
  350.  
  351.             CalendarWrapPanel.UpdateLayout();//更新CalendarWrapPanel的显示   
  352.  
  353.             CalendarListBox.Visibility = Visibility.Visible;//设置为可见  
  354.  
  355.    
  356.  
  357.         }  
  358.  
  359.     }  
  360.  
  361. }   

样式文件

style.xaml