Telerik blogs

After finishing the previous post, I realize something important – I would rather use RadJumpList than RadDataBoundListBox for my navigation in this application, simply because the “People Hub” type of experience is much cooler than a plain old listbox, regardless of how impressive the performance is.  We are also going to reconsider our MyItem and turn it into something a little more exciting – MyMVVMItem!  This will allow us to do add every new demo as an individual item, complete with a field for grouping, a friendly name, and a backing field for the name of the page that we need to navigate to for the specific demo.  Our new class looks a bit like this:

public class MyMVVMItem
{
    public int ID { get; set; }
    public string FriendlyName { get; set; }
    public string NavigationName { get; set; }
    public string Category { get; set; }
    public MyMVVMItem()
    {
    }
    public MyMVVMItem(int id, string fname, string nname, string cat)
    {
        this.ID = id;
        this.FriendlyName = fname;
        this.NavigationName = nname;
        this.Category = cat;
    }
}

 

I dropped everything into a brand new project called RadControls.WP7.MVVM, which is a much friendlier name and something we can expand on as we add more functionality.  I also slightly restructured the project as so:

MVVM Project Setup

I’ve added all of the previous assemblies, the two remaining Telerik assemblies (since we’ll be using them eventually), as well as one added bonus for some things we need to do today, System.Windows.Interactivity.  In total, we have added the following assemblies (and probably won’t need any more… yet ;) ):

  • GalaSoft.MvvmLight.Extras.WP7
  • GalaSoft.MvvmLight.WP7
  • System.Windows.Interactivity
  • Telerik.Windows.Controls.Data
  • Telerik.Windows.Controls.DataVisualization
  • Telerik.Windows.Controls.Input
  • Telerik.Windows.Controls.Primitives
  • Telerik.Windows.Core
  • Telerik.Windows.Data

I also took the liberty of moving our previous code, since it was some might fine code, into the respective Pages and ViewModels folders, so now that we’re getting ready to redo our start page we already have one example under our belt!  How’s that for progress?  But now, on to why we made the switch to RadJumpList.

Step 0 – Why use RadJumpList?

As mentioned above, the ‘People Hub’ application on Windows Phone is definitely one of the neatest built-in experiences that we have on the device.  RadJumpList allows you to emulate that for sure, but additionally you can go even further as far as what different customizations you can apply to the control, not to mention the added data operations that make displaying items a treat in RadJumpList.

One of the huge advantages that we instantly get with RadJumpList is the ability to add different grouping and sorting descriptors.  This means we can put items into logical groups instead of just relying on something simple like alphabetizing or ordering based on item id, plus we get some awesome UI (for free!) that contains added functionality to allow us to quickly move through our collection based on those grouped categories. 

Also, in case you were not already away, RadJumpList is built on top of RadDataBoundListBox.  So not only do we have the grouping, sorting, and group header functionality, we’ve got our amazingly quick and high-performance listbox implementation under the hood, ensuring that not only does your UI look great, it also performs without a hitch.

Step 1 – New MainPage.Xaml


Since we did our reset on the project and now have a different type of experience on what is now our main navigation page, we have some dramatically different Xaml to create.  Since the RadDataBoundListBox example that we’ll have access to in this series is all wrapped up into its own example page, we can get rid of the buttons and extra SelectedItem display that wrapped around the control, leaving more room for RadJumpList.  The new namespaces that we’ll be using here (with explanations to follow) are:

xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:data="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
xmlns:viewmodels="clr-namespace:RadControls.WP7.MVVM.ViewModels"

 

This allows us to take advantage of more screen real estate for our RadJumpList.

Step 2 – RadJumpList and the new ViewModel


Adding a new RadJumpList isn’t that much more complicated than adding a RadDataBoundListBox, so our initial Xaml is going to look something like this:

<phone:PhoneApplicationPage.Resources>
    <viewmodels:MainPageViewModel x:Key="xMainPageViewModel" />
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot"
      DataContext="{StaticResource xMainPageViewModel}"
      Background="Transparent">
    <Grid.RowDefinitions .../>
    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" .../>
    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0">
        <telerikData:RadJumpList x:Name="xRadJumpList"
                                 Margin="0,10"
                                 ItemsSource="{Binding MyMVVMItems}">                
        </telerikData:RadJumpList>
    </Grid>
</Grid>

I omitted some code (row definitions, title panel) to make things a little cleaner, but those are still present in the downloadable code.  What we can see in the remaining code should look familiar:

  • MainPageViewModel defined as a resource
  • Utilizing that resource as the DataContext of our LayoutRoot grid
  • Binding the ItemsSource of RadJumpList to a collection on the viewmodel, specifically MyMVVMItems

Since we are using a different collection, you can see the code for it as well as how we’re loading some temporary data here:

private ObservableCollection<MyMVVMItem> myMVVMItems;
public ObservableCollection<MyMVVMItem> MyMVVMItems
{
    get
    {
        if (myMVVMItems == null)
            myMVVMItems = LoadData();
        return myMVVMItems;
    }
    set
    {
        if (myMVVMItems != value)
        {
            myMVVMItems = value;
            RaisePropertyChanged("MyMVVMItems");
        }
    }
}
public ObservableCollection<MyMVVMItem> LoadData()
{
    ObservableCollection<MyMVVMItem> tempCollection = new ObservableCollection<MyMVVMItem>();
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Primitives"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Groupon"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Visual"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Primitives"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Groupon"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Primitives"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Visual"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Data"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Primitives"));
    tempCollection.Add(new MyMVVMItem(1, "RadDataBoundListBox", "/Pages/RadDataBoundListBoxMVVM.xaml", "Primitives"));
    tempCollection.Add(new MyMVVMItem(2, "RadJumpList", "/Pages/RadJumpListMVVM.xaml", "Data"));
    return tempCollection;
}

 

The end result when we run the application right now is as follows (don’t worry, it should look like this!):

 

RadJumpList - The Beginning

Stay tuned to part 2 of RadJumpList tomorrow when we add some style and show off how the built-in features of RadJumpList are intuitive, capture the Windows Phone experience, and are very MVVM friendly!


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.