Telerik blogs

Using the RadTransitionControl in Task-It

April 05, 2010 Web 0 Comments


Download Source Code

Task-It Series

This post is part of a series of blog posts and videos about the Task-It (task management) application that I have been building with Silverlight 4 and Telerik's RadControls for Silverlight 4. For a full index of these resources, please go here. One of the posts listed in the index provides a full source download for the application.

Intro to the RadTransitionControl

In a recent Ask the Experts webinar I showed a simple solution that had similarities to one that I had used in my recent MVVM post, but had a few extra twists on it. I have since been asked if I could post the source code for this demo, so here it is (I am using similar techniques in my Task-It application).

The Demo

In the MVVM post I had set it up so that clicking a row in the RadGridView would put you into form view, where you could edit the selected record, and clicking Save would put you back into the page with the RadGridView (with any changes to the record saved via to the database via WCF RIA Services). In this example, rather than simply clicking on a RadGridView record to put it into 'edit' mode, there are actually two different ways to do this.

1. Double-click on the desired record in the RadGridView.

2 Right-click on the record, then click the Edit item in the RadContext menu:

Edit Context Menu

Another thing that is different about this solution is that when I switch over from the RadGridView to the form I no longer change the Content of a ContentControl, I now change the Content of a RadTransitionControl. This allows you to have a smooth transition from one screen to another.

In the upper-right part of the screen I also provide the ability to choose between two of the out-of-the-box TransitionTypes that comes with the RadTransitionControl. I would not normally include this in a user interface...it is just there for demo purposes:

Select Transition Type

Selecting the TransitionType

Naturally I'm using a RadComboBox as the control that allows you to choose between the two types.

The Slide and Zoom transition may look familiar, as that is what has been used in our Silverlight demos for quite a while. I remember first seeing this a while back (before I was a Telerik employee) and wanting to use it in my app but not knowing how to do it. Well, with our Q1 release, now you have it!

The code

If you haven't read my MVVM post yet, I highly recommend that you check it out, as I will be using the MVVM pattern in this post, and probably every one that I write in the future.

Notice in Tasks.xaml we have a RadComboBox whose ItemsSource is bound to a Transitions property in our view model (TasksViewModel), and its SelectedItem is bound to a SelectedTransition property in the view model:

<telerikInput:RadComboBox ItemsSource="{Binding Transitions}" SelectedItem="{Binding SelectedTransition, Mode=TwoWay}"/>

The RadTransitionControl's Transition property is bound to the TransitionType of the SelectedTransition in our TasksViewModel (I'll explain this a bit more later):

<telerik:RadTransitionControl x:Name="TransitionControl" Transition="{Binding SelectedTransition.TransitionType}"/>

 

In TasksViewModel you'll see that, in the constructor, we do several things:

  • Instantiate a DataContext object - This is a WCF RIA Services object, and will be used to retrieve the tasks for our RadGridView, as well as saving any changes to the database.
  • Instantiate two DelegateCommands - I won't go deeper into these, as I will be covering commands in an upcoming post, but these are what tell the UI to go into Edit mode (display the form) and to Save changes made to the selected record.
  • LoadTransitions - We'll look at this in a minute.
  • LoadTasks - We'll also look at this in a minute.
public TasksViewModel()
{
    DataContext = new DataContext();
    EditCommand = new DelegateCommand(OnEdit);
    SaveCommand = new DelegateCommand(OnSave);
    LoadTransitions();
    LoadTasks();
}

 

Loading Transitions

We already saw how the RadComboBox displays two transitions, so let's see where that comes from...

public void LoadTransitions()
{
    Transitions = Transition.GetTransitions();
    SelectedTransition = Transitions.First();
}

 

The first line loads the transitions (we'll look at that next) and the second line sets the first of the records returned as the SelectedTransition via LINQ (using its First method).

The transition records come from a hard-coded list that I've created in the Transitions class (under the Models directory):

public class Transition
{
    public string Name { get; set; }
    public TransitionProvider TransitionType { get; set; }
 
    public override string ToString()
    {
        return Name;
    }
 
    public static ObservableCollection<Transition> GetTransitions()
    {
        return new ObservableCollection<Transition>
          {
              new Transition {Name = Strings.ValueTransitionFade, TransitionType = new FadeTransition() },
              new Transition {Name = Strings.ValueTransitionSlideAndZoom, TransitionType = new SlideAndZoomTransition() }
          };
    }
}

The first property, Name, is what will display in the RadComboBox. I get these string from my Strings.resx file, in case I want to display them in another language at some point in the future.

The second property, TransitionType, is what the RadTransitionControl needs in order to know which effect to use. Notice that I instantiate a FadeTransition and a SlideAndZoomTransition.

Back to our RadComboBox, remember how we bound the Transition property to SelectedTransition.TransitionType? Now you can see that when a selection is made it is selecting one of these two Transition objects, but the RadTransitionControl needs to grab that object's TransitionType value.

By the way, you may be wondering why I did an override of the ToString method on this class and return the value of the Name property. I prefer to use this technique so that when I bind the objects to something like a RadComboBox I don't have to set DisplayMemberPath=Name.

If you do not set DisplayMemberPath on a control like a RadComboBox it will display whatever the object's ToString method returns, which by default is the full name of the object. In this case it would be MVVMProject.Models.Transition. I like to keep my XAML as clean as possible, so I prefer doing this over setting the DisplayMemberPath property (which is not strongly-typed).

Silverlight, TaskIt, Telerik UI for Silverlight, XAML

Comments

Comments are disabled in preview mode.