Telerik blogs

Windows Phone 7 MVVM # 5 - RadDate & Time Pickers

by Evan Hutnick
June 14, 2011 Mobile 0 Comments


Of course the first thing on my mind after returning from a nice long summer vacation is continuing the RadControls for Windows Phone 7 MVVM series of blog posts and adding more examples to our working project of how you can quickly and easily start using our WP7 controls with the MVVM pattern.  While I’m working on something pretty cool for later in the week (hint: it may involve something like this), I wanted to show you how you can pretty quickly get both RadDatePicker and RadTimePicker working with MVVM.

(( Heads up!  I’ve upgraded this project to utilize the Q2 2011 Beta version of the RadControls for Windows Phone, so be sure you’re using that too if you download the sample and test it out! ))

Step 1 – A Quick ViewModel

Since we have two controls that are pretty straightforward, we don’t need to take advantage of any RelayCommands or anything more complex from the MVVM pattern or the MVVM Light framework.  RadDatePicker and RadTimePicker will both allow us to bind to a DateTime value that sends change notifications back (as well as allowing for constraints, preventing people from selecting really off-base or out-of-range DateTime values) to work with the binding system we all know and love in Silverlight.

This means our ViewModel is a lot of the same that you are used to from either just knowing the MVVM pattern or following this series:

public class RadDateTimeViewModel : ViewModelBase
{
    private DateTime _selectedTime;
    public DateTime SelectedTime
    {
        get { return _selectedTime; }
        set
        {
            if (value != _selectedTime)
            {
                _selectedTime = value;
                RaisePropertyChanged("SelectedTime");
            }
        }
    }
    private DateTime _selectedDate;
    public DateTime SelectedDate
    {
        get { return _selectedDate; }
        set
        {
            if (value != _selectedDate)
            {
                _selectedDate = value;
                RaisePropertyChanged("SelectedDate");
            }
        }
    }
    public RadDateTimeViewModel()
    {
        SelectedDate = new DateTime(2011, 6, 15);
        SelectedTime = new DateTime(2011, 6, 15, 11, 30, 00);
    }
}

Makes sense, right?  So now we can move onto our Xaml…

Step 2 – Writing Up Some Xaml

Like I mentioned earlier, these controls make it quite easy and are pretty straightforward in their implementations, so there is not anything terribly complex about using them within your application, even when utilizing the MVVM pattern.  Be sure to thank the Telerik WP7 development team for this, as they are the masterminds behind making this such a rich and high performance suite for the platform, all the while adhering to Metro principles of design to make sure our controls will fit effortlessly into any application you are making!

Back on track, our Xaml also doesn’t require much explaining.  We’re setting the Value property on both controls to perform TwoWay binding to their respective values on the ViewModel and doing the usual resource/datacontext setup, so here is what the final markup looks like:

<Grid x:Name="ContentPanel"
      Grid.Row="1"
      Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="75" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="75" />
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <TextBlock Text="Select a date to see it reflected below, MVVM style!" />
    <telerikInput:RadDatePicker x:Name="xRadDatePicker" Value="{Binding SelectedDate, Mode=TwoWay}"
                                Grid.Row="1" />
    <StackPanel Style="{StaticResource xMidStackPanel}"
                Grid.Row="2">
        <TextBlock Text="Selected Date: " />
        <TextBlock Text="{Binding SelectedDate}" />
    </StackPanel>
    <TextBlock Text="Select a time to see if below, via MVVM and the magic of binding!"
               TextWrapping="Wrap"
               Grid.Row="3" />
    <telerikInput:RadTimePicker x:Name="xRadTimePicker"
                                Value="{Binding SelectedTime, Mode=TwoWay}"
                                Grid.Row="4" />
    <StackPanel Style="{StaticResource xMidStackPanel}"
                Grid.Row="5">
        <TextBlock Text="Selected Time: " />
        <TextBlock Text="{Binding SelectedTime}" />
    </StackPanel>

You’ll be able to see the resource I use for the stackpanels in the code download below, so don’t worry about that not being up above!

Step 3 – Finishing Touches

There are two more things we need to do in order to get this working properly.  First up, we want to ensure that both RadDatePicker and RadTimePicker have their application icons set instead of the “images aren’t available” X’s that would display.  Our dev team thought of this ahead of time, providing us the images and instructions on how to setup both the default and custom implementations on this help page:

http://www.telerik.com/help/windows-phone/raddatepicker-features-application-bar-buttons.html

Once that is set, the final step is to go back into our MainPageViewModel and change our MyMVVMItem setup to include our two actual pages now instead of the fake testers:

public ObservableCollection<MyMVVMItem> LoadData()
{
    ObservableCollection<MyMVVMItem> tempCollection = new ObservableCollection<MyMVVMItem>();
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Primitives"));
    tempCollection.Add(new MyMVVMItem(2, "RadDate/TimePicker", "/Pages/RadDatePickerMVVM.xaml", "Input"));
    return tempCollection;
}

Don’t worry, while there are only two items there now we’ll soon be filling this out with a number of nice visualizations that play nicely with MVVM.  So as you can see, this MVVM stuff may not be so scary after all!

Be sure to download the source code for the current project and stay tuned for some more rich visual goodness later this week!

DatePicker, MVVM, Windows Phone
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.