Date Diff, named after the T-SQL DATEDIFF function, tells you how many days or weeks apart two dates are. This app requires very little code, thanks to the Silverlight for Windows Phone Toolkit.
The Silverlight for Windows Phone Toolkit, available at http://silverlight.codeplex.com, contains lots of rich controls and functionality leveraged throughout this book. It’s open source, so you can even tweak it relatively easily! This app makes use of its date picker control, which matches the date picker used by the phone’s built-in apps. It starts out looking like a text box, but it presents a rich full-page interface when tapped.
Future releases of the Silverlight for Windows Phone Toolkit may not be compatible with earlier releases!
The goal of the toolkit, besides providing developers with handy functionality, is to rapidly iterate on features that might become a part of the official Windows Phone Developer Tools in the future.Therefore, the team is not shy about making changes that can break code compiled against a previous version. Also, when features from the toolkit are added to the Windows Phone Developer Tools, they will likely be removed from the toolkit.
As long as you continue to use the same version of the toolkit in your apps, future changes should not cause you any trouble.The only thing to be careful about is upgrading the toolkit and recompiling your apps without thoroughly testing them.The apps in this book use the February 2011 release of the toolkit.
The Main Page
Date Diff’s only page (other than the page automatically presented by the date picker) is pictured in Figure 7.1. The user can customize the date in each date picker instance and then see the difference below.
LISTING 7.1 MainPage.xaml—The User Interface for Date Diff’s Main Page
[code]
<phone:PhoneApplicationPage x:Class=”WindowsPhoneApp.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:toolkit=”clr-namespace:Microsoft.Phone.Controls;
➥assembly=Microsoft.Phone.Controls.Toolkit”
xmlns:local=”clr-namespace:WindowsPhoneApp”
FontFamily=”{StaticResource PhoneFontFamilyNormal}”
FontSize=”{StaticResource PhoneFontSizeNormal}”
Foreground=”{StaticResource PhoneForegroundBrush}”
SupportedOrientations=”PortraitOrLandscape”
shell:SystemTray.IsVisible=”True”>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto”/>
<RowDefinition Height=”*”/>
</Grid.RowDefinitions>
<!– The standard header, with some tweaks –>
<StackPanel Margin=”24,16,0,12”>
<TextBlock Text=”DATE DIFF” Margin=”-1,0,0,0”
FontFamily=”{StaticResource PhoneFontFamilySemiBold}”
FontSize=”{StaticResource PhoneFontSizeMedium}”/>
<TextBlock Text=”pick two dates” Margin=”-3,-10,0,0”
FontFamily=”{StaticResource PhoneFontFamilySemiLight}”
FontSize=”{StaticResource PhoneFontSizeExtraExtraLarge}”/>
</StackPanel>
<StackPanel Grid.Row=”1”>
<!– Date #1 –>
<TextBlock Text=”Date #1” Margin=”24,17,24,-5”
Foreground=”{StaticResource PhoneSubtleBrush}”/>
<toolkit:DatePicker x:Name=”DatePicker1” Margin=”12,0”
local:Tilt.IsEnabled=”True” ValueChanged=”DatePicker_ValueChanged”/>
<!– Date #2 –>
<TextBlock Text=”Date #2” Margin=”24,17,24,-5”
Foreground=”{StaticResource PhoneSubtleBrush}”/>
<toolkit:DatePicker x:Name=”DatePicker2” Margin=”12,0”
local:Tilt.IsEnabled=”True” ValueChanged=”DatePicker_ValueChanged”/>
<!– The result –>
<TextBlock x:Name=”ResultTextBlock” Margin=”24,0”
FontSize=”{StaticResource PhoneFontSizeExtraLarge}”/>
</StackPanel>
</Grid>
</phone:PhoneApplicationPage>
[/code]
Notes:
- Although DatePicker is in the same Microsoft.Phone.Controls namespace as other controls, it resides in the Microsoft.Phone.Controls.Toolkit assembly, so this XAML file requires a separate XML namespace declaration. By convention, apps in this book use the toolkit prefix for this namespace/assembly.
- The two date pickers automatically show today’s date by default, and when tapped they invoke the full-screen picker interface shown at the beginning of this chapter. The tilt effect applied to each date picker only affects the inline display; not the fullscreen picker.
The date picker requires two specific images to be included in your project!
The page shown by the date picker uses an application bar with the standard “done” and “cancel” buttons.However, you are responsible for including the two icon images in your project (and marking them with a Build Action of Content) with the proper names and location. If you fail to do this, you’ll see the standard error icons in their place.
The two icons must be named ApplicationBar.Check.png and ApplicationBar.Cancel.png, and they must be placed in a folder called Toolkit.Content in the root of your project.These image files are included with the Silverlight for Windows Phone Toolkit
This requirement is caused by the application bar’s limitation of only working with images marked as content. Listing 7.2 contains the
LISTING 7.2 MainPage.xaml.cs—The Code-Behind for Date Diff’s Main Page
[code]
using System;
using Microsoft.Phone.Controls;
namespace WindowsPhoneApp
{
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}
void DatePicker_ValueChanged(object sender, DateTimeValueChangedEventArgs e)
{
// Do the calculation
TimeSpan span = this.DatePicker2.Value.Value – this.DatePicker1.Value.Value;
// Format the result
int days = span.Days;
int wholeWeeks = days / 7;
int remainder = days % 7;
string result = days + (Math.Abs(days) == 1 ? “ day” : “ days”);
if (Math.Abs(days) > 14)
{
result += “n(“ + wholeWeeks + “ weeks”;
if (remainder != 0)
result += “, “ + remainder
+ (Math.Abs(remainder) == 1 ? “ day” : “ days”);
result += “)”;
}
// Display the result
this.ResultTextBlock.Text = result;
}
}
}
[/code]
Notes:
- Each date picker’s date can be retrieved via its Value property, which is a nullable DateTime that has its own Value property. The nullability is handy because it enables each picker to express the concept of no date being selected. However, it also results in awkward-looking Value.Value property accesses. Because Value can only become null programmatically, this code can safely access each Value subproperty without checking for null.
- Most of the code is concerned with formatting the string, which takes a few different forms depending on how far apart the two dates are.
The Finished Product
