Telerik blogs

When allowing users to select a date value in your applications, one of the obvious issues is ensuring that they aren’t allowed to pick a value like December 24th, 563.  Thankfully, the developers for our Windows Phone team have incorporated some properties to help prevent this. 

Step 1 – Min and Max Value Properties

The easy way to make this happen is to simply set a MinValue and MaxValue.  In our scenario, we will say that we are scheduling appointments for some event in the future, therefore we can easily set out MinValue and MaxValue either via Xaml:

<telerikInput:RadDatePicker x:Name="xRadDatePicker"
                            Grid.Row="1"
                            VerticalAlignment="Center"
                            MinValue="5-6-2011"
                            MaxValue="11-6-2011"/>

 

Or since we can’t hard-code a specific value into our Xaml and expect it to work the same next week, we can instead handle this via code like so:

xRadDatePicker.MinValue = DateTime.Today;
xRadDatePicker.MaxValue = DateTime.Today.AddMonths(6);

 

 Once this is set, we can test our RadDatePicker to check and see that we indeed cannot select a date before the MinValue or after the MaxValue – so mission accomplished, right?

Not quite!  This is only one piece of the puzzle that the control solves for us, but what if we wanted to ensure that we could not schedule an appointment on certain dates?  Until Mango shows up, we do not have data validation in the Windows Phone platform like you would have in Silverlight 4 today, so we need to get creative.  Thankfully we have RadWindow as part of the RadControls for Windows Phone control suite.

Step 2 – RadWindow, It’s Not Just for Windows Anymore

Some people have asked why we incorporated a RadWindow control into a suite for a mobile phone.  After all, aren’t Windows generally reserved for desktop/browser based applications and not really applicable on the mobile format?  In the traditional sense, a “window” like we know them in Winforms and WPF would not be applicable, but here at Telerik we pride ourselves on being a little more creative than that and in thinking outside of the box.  After all, shouldn’t development be fun? : )

Our RadWindow control is very useful for his validation example due to a few properties.  The first is WindowSizeMode, which allows us to use two values – AutoSize and FitToPlacementTarget.  We want to use FitToPlacementTarget since our RadWindow is going to be used as a validation message over our RadDatePicker.  That brings us to our second property – PlacementTarget.  This will determine where we want the RadWindow to actually display.  Thanks to the ability to use Element Binding in our Windows Phone applications, we can easily point this at our RadDatePicker and let the RadWindow do the rest.  Inside of RadWindow, we’re placing a simple border and textblock designed to look kind of like a default Silverlight validation message:

<telerikPrimitives:RadWindow x:Name="xValidationWindow"
                                WindowSizeMode="FitToPlacementTarget"
                                PlacementTarget="{Binding ElementName=xRadDatePicker}">
    <Border Background="Red">
        <TextBlock Text="Invalid Date!"
                    FontSize="24"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White" />
    </Border>
</telerikPrimitives:RadWindow>

 

Now we have a RadWindow that is ready to display our “Invalid Date!” message over the RadDatePicker instance named xRadDatePicker… but we still need some way to check for invalid dates and actually display this window.  That brings us to the value change events on RadDatePicker and a bit of code to tie this all together.

Step 3 – Value Change Events, for Validation

Courtesy of the event structure that the WP7 team here put in place, we have two events that we can use when someone is selecting a date.  ValueChanged fires off after the value has been committed, meaning we can run through some course of events (i.e., appointment date set, block it off for other selections, etc.), but the event that we care about is ValueChanging.  With ValueChanging, we get to step in before the new value is committed in order to ensure we really want to use that value. 

In our scenario, we have a few values that we wish to block off.  To set this up, we are going to set up a list of datetimes and a dispatchertimer (you’ll see why!):

public List<DateTime> dateList = new List<DateTime>();
public DispatcherTimer dTimer = new DispatcherTimer();

 

We initialize our timer to have a 3 second span, which should work nicely for a quick message, while in our dateList we add two dates.  Since today is 5/6/2011 (May 6, 2011), we added May 11th and May 15th, just for two specific dates we can check against.  Now, all we have to do is add code for the timer tick event as well as value changing:

void xRadDatePicker_ValueChanging(object sender, Telerik.Windows.Controls.ValueChangingEventArgs<DateTime?> e)
{
    DateTime compareDate = new DateTime(e.NewValue.Value.Year, e.NewValue.Value.Month, e.NewValue.Value.Day);
    foreach (DateTime dt in dateList)
    {
        if (compareDate.CompareTo(dt) == 0)
        {
            e.Cancel = true;
            xValidationWindow.IsOpen = true;
            dTimer.Start();
            break;
        }
    }
}
void dTimer_Tick(object sender, EventArgs e)
{
    xValidationWindow.IsOpen = false;
    dTimer.Stop();
}

 

As you can see, in ValueChanging we are doing a few things-

  • Create a comparison date (to eliminate the time portion) based on our e.NewValue datetime
  • Loop through our dateList and compare the given date to our newly selected date
  • If there is a match, cancel the event, set the RadWindow.IsOpen property to true (displaying the window), and starting our timer

Then in the timer tick event, we simple set IsOpen to false (closing the window) and stop the timer, creating the effect of a quick popup letting the user know that an invalid date was selected.  Of course we can get more creative and verbose in our error message, but for the sake of this demo I wanted something quick and informative in regards to invalid dates.

The end result?  Validation message effect in WP7, pre-Mango, using RadDatePicker and RadWindow:

Validation display image

Pretty cool, right?  Be sure to download the full source code for this sample right here, and if you are more the watch-some-cool-stuff-happen type, head on over to Telerik TV to view this example presented from scratch in a new Windows Phone 7 project:

http://tv.telerik.com/watch/windows-phone/creating-validation-with-raddatepicker-radwindow-for-wp7


About the Author

Evan Hutnick

works as a Developer Evangelist for Telerik specializing in Silverlight and WPF in addition to being a Microsoft MVP for Silverlight. After years as a development enthusiast in .Net technologies, he has been able to excel in XAML development helping to provide samples and expertise in these cutting edge technologies. You can find him on Twitter @EvanHutnick.

Comments

Comments are disabled in preview mode.