Help with JumpList control

6 posts, 1 answers
  1. Justin
    Justin avatar
    15 posts
    Member since:
    Jan 2012

    Posted 27 Jan 2012 Link to this post

    Is it possible to load the names for the JumpList from a XML file, and then when there are clicked, have them navigate to separate pages. For example, if you clicked on Item 1 it would navigate to the Item1.xaml page. If you clicked on Item2 it would navigate to Item2.xaml. If so, how could I possibly do this.
    I find the documentation for the JumpList rather poor with few examples :/.
  2. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 30 Jan 2012 Link to this post

    Hi Justin,

    Thanks for writing and for your question.

    The scenario that you would like to implement is easily achievable, however, it includes writing some code to parse the XML file and create a source to bind the RadJumpList to it. You should also handle the ItemTap event of RadJumpList and use the NavigationService of the phone framework to navigate to the corresponding page.

    Here is a Getting Started article regarding RadJumpList in our online help:

    http://www.telerik.com/help/windows-phone/radjumplist-getting-started.html

    It guides you through the process of putting the control on the page and binding it to a source.

    I hope this helps.

    Regards,
    Deyan
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Justin
    Justin avatar
    15 posts
    Member since:
    Jan 2012

    Posted 30 Jan 2012 Link to this post

    I'm not sure how to accomplish binding the RadJumpList control to my XML file. I'm also not sure to set up the code for ItemTap. Still new to C#.
  5. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 31 Jan 2012 Link to this post

    Hello Justin,

    RadJumpList does not directly support binding to a XML file since this is out of the scope of the functionality that the control covers. The idea is to use the XML API of the .NET framework to parse the XML file, build a collection out of it and provide these collections as a source for RadJumpList.

    Take a look at our Demos project where all of our examples are shipped with source code available. There, we have this scenario covered with the first look example of RadDataBoundListBox (note that RadJumpList is based on this control). We have a XML file defining a set of movies. It looks something like this:

    <?xml version="1.0" encoding="utf-16"?>
    <ArrayOfMovieViewModel >
      <MovieViewModel>
        <Duration>N/A</Duration>
        <Year>2009</Year>
        <Title>For Liberty: Ron Paul</Title>
        <Rating>5</Rating>
        <AudienceRating>NR</AudienceRating>
        <Genre>Documentary</Genre>
        <Cast>Ron Paul, Thomas Woods</Cast>
        <Director>Corey Kealiher</Director>
        <Base64Image>/9j/4AAQSkZJRgABAQEBBgE
      </MovieViewModel>
    ...
    ...
    ...
    </ArrayOfMovieViewModel>

    We also have a class definition that maps all movie properties from the XML files to Csharp properties. Than, we use the XmlReader and XmlDeserializer classes defined by the .NET Framework to read the XML file and create .NET objects out of it which we than can use to popuplate RadJumpList:

    List<MovieViewModel> allMovies = new List<MovieViewModel>(100);
    // add the movies twice to have 100 items
    int ranking = 1;
    for (int i = 0; i < 2; i++)
    {
        using (XmlReader xmlReader = XmlReader.Create("Data/NetFlixTop50.xml"))
        {
            XmlSerializer deserializer = new XmlSerializer(typeof(List<MovieViewModel>));
            List<MovieViewModel> movies = deserializer.Deserialize(xmlReader) as List<MovieViewModel>;
     
            foreach (MovieViewModel movie in movies)
            {
                movie.Ranking = ranking++;
            }
            allMovies.AddRange(movies);
        }
     
        this.radJumpList.ItemsSource = allMovies;
    }

    You can take a look at the source code of the example for further details. You can find the example code in the ExampleCS_WP solution, in the Examples_WP\DataBoundListBox\ folder. You can find the XML related code in the Examples_WP\Data\MovieViewModel.cs file.

    I hope this helps.

    Greetings,
    Deyan
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Justin
    Justin avatar
    15 posts
    Member since:
    Jan 2012

    Posted 07 Feb 2012 Link to this post

    I have no clue why the RadJumpList control is not working for me. I've converted all the code from the example to fit my application, and I don't know where to declare the radjumplist1.ItemSource property at. 

    using System;
    using Microsoft.Phone.Controls;
    using System.Collections;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.IO;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Media.Imaging;
    using System.Windows.Resources;
    using System.Windows.Shapes;
    using System.Windows.Threading;
    using System.Xml;
    using System.Xml.Serialization;
    using Telerik.Windows.Controls;
    using Telerik.Windows.Controls.Primitives;
    using Telerik.Windows.Data;
    using WP7_Tracker.ViewModel.Data;
     
    namespace WP7_Tracker.ViewModel
    {
        public partial class All : PhoneApplicationPage
        {
            private Button getMoreButton;
            private List<DeviceViewModel> items;
            private ObservableCollection<DeviceViewModel> source = new ObservableCollection<DeviceViewModel>();
            private int lastLoadedIndex = 0;
            private DispatcherTimer timer;
     
            public All()
            {
                InitializeComponent();
                RadPhoneApplicationFrame frame = App.Current.RootVisual as RadPhoneApplicationFrame;
     
                GenericGroupDescriptor<DeviceViewModel, string> groupbyName = new GenericGroupDescriptor<DeviceViewModel, string>(device => device.Name);
                this.radJumpList1.GroupDescriptors.Add(groupbyName);
                this.radJumpList1.GroupHeaderItemTap += this.OnGroupHeader_ItemTap;
     
                this.timer = new DispatcherTimer();
                this.timer.Interval = TimeSpan.FromSeconds(2);
                this.timer.Tick += (object sender, EventArgs args) =>
                {
                    this.LoadData();
                    if (this.getMoreButton != null)
                    {
                        this.getMoreButton.Content = "load more";
                        this.getMoreButton.IsEnabled = true;
                    }
     
                };
     
                //this.radJumpList1.GroupHeaderItemTap += this.radJumpList1_GroupHeaderItemTap;
                //this.radJumpList1.DataRequested += this.radJumpList1_DataRequested;
                this.items = this.GetItems();
                this.LoadData();
            }
     
            private void OnGroupHeader_ItemTap(object sender, GroupHeaderItemTapEventArgs e)
            {
                Image navImage = e.OriginalSource as Image;
                if (navImage != null)
                {
                    IDataSourceGroup dataGroup = this.radJumpList1.GetDataSourceItemForDataItem(e.Item.Content) as IDataSourceGroup;
     
                    if (navImage.Tag != null && navImage.Tag.ToString().Equals("up"))
                    {
                        int indexOfGroup = Array.IndexOf(this.radJumpList1.Groups, dataGroup.Value);
                        if (indexOfGroup > 0)
                        {
                            this.radJumpList1.BringIntoView(this.radJumpList1.Groups[indexOfGroup - 1]);
                            e.ShowGroupPicker = false;
                        }
                    }
                    else if (navImage.Tag != null && navImage.Tag.ToString().Equals("down"))
                    {
                        int indexOfGroup = Array.IndexOf(this.radJumpList1.Groups, dataGroup.Value);
                        if (indexOfGroup < this.radJumpList1.Groups.Length - 1)
                        {
                            this.radJumpList1.BringIntoView(this.radJumpList1.Groups[indexOfGroup + 1]);
                            e.ShowGroupPicker = false;
                        }
                    }
                }
            }
     
     
            private void DisableVirtualization()
            {
                this.radJumpList1.DataVirtualizationMode = DataVirtualizationMode.Automatic;
                //this.ListBox.ListFooterTemplate = this.LayoutRoot.Resources["ListFooterDataTemplate"] as DataTemplate;
            }
     
            private void LoadData()
            {
                this.timer.Stop();
                for (int i = 0; i < 10; i++)
                {
                    this.source.Add(this.items[lastLoadedIndex++]);
     
                    if (lastLoadedIndex == this.items.Count)
                    {
                        this.DisableVirtualization();
                        break;
                    }
                }
            }
     
            private void jumpList_DataRequested(object sender, EventArgs e)
            {
                if (!this.timer.IsEnabled)
                {
                    this.timer.Start();
                }
            }
     
            private List<DeviceViewModel> GetItems()
            {
                using (XmlReader xmlReader = XmlReader.Create("ViewModel/devices.xml"))
                {
                    XmlSerializer deserializer = new XmlSerializer(typeof(List<DeviceViewModel>));
                    List<DeviceViewModel> devices = deserializer.Deserialize(xmlReader) as List<DeviceViewModel>;
     
                    foreach (DeviceViewModel device in devices)
                    {
                        device.Name = Name;
                    }
     
                    devices.Sort(
                        new Comparison<DeviceViewModel>((DeviceViewModel d1, DeviceViewModel d2) =>
                        {
                            return d1.Name.CompareTo(d2.Name);
                        }));
     
                    return devices;
                }
            }
     
            private void jumpList_GroupHeaderItemTap(object sender, GroupHeaderItemTapEventArgs e)
            {
                Image image = e.ManipulationContainer as Image;
                if (image == null)
                {
                    return;
                }
     
                if ((string)image.Tag == "up")
                {
                    this.MoveUp(e);
                }
                else if ((string)image.Tag == "down")
                {
                    this.MoveDown(e);
                }
            }
     
            private void MoveDown(GroupHeaderItemTapEventArgs e)
            {
                DataGroup[] groups = this.radJumpList1.Groups;
                int index = this.IndexOfGroup(groups, e.Item);
                index++;
                index = Math.Min(groups.Length - 1, index);
                this.radJumpList1.BringIntoView(groups[index]);
     
                e.ShowGroupPicker = false;
            }
     
            private void MoveUp(GroupHeaderItemTapEventArgs e)
            {
                DataGroup[] groups = this.radJumpList1.Groups;
                int index = this.IndexOfGroup(groups, e.Item);
     
                // find the first non-visible group on top of the tapped one
                while (true)
                {
                    index--;
                    if (index < 0)
                    {
                        break;
                    }
     
                    if (!this.radJumpList1.IsItemInViewport(groups[index]))
                    {
                        break;
                    }
                }
     
                if (index >= 0)
                {
                    this.radJumpList1.BringIntoView(groups[index]);
                }
     
                e.ShowGroupPicker = false;
            }
     
            private int IndexOfGroup(DataGroup[] groups, RadDataBoundListBoxItem item)
            {
                DataGroup hitGroup = item.Content as DataGroup;
     
                for (int i = 0; i < groups.Length; i++)
                {
                    if (groups[i] == hitGroup)
                    {
                        return i;
                    }
                }
     
                return -1;
            }
     
            #region Old
            private void button1_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Acer/Allegro.xaml", UriKind.Relative));
            }
     
            private void button2_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Dell/Venue.xaml", UriKind.Relative));
            }
     
            private void button4_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/HTC/Pro.xaml", UriKind.Relative));
            }
     
            private void button5_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/HTC/Trophy.xaml", UriKind.Relative));
            }
     
            private void button6_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/HTC/Mozart.xaml", UriKind.Relative));
            }
     
            private void button7_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/HTC/HD7.xaml", UriKind.Relative));
            }
     
            private void button8_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/HTC/HD7S.xaml", UriKind.Relative));
            }
     
            private void button9_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/HTC/Titan.xaml", UriKind.Relative));
            }
     
            private void button10_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/HTC/Radar.xaml", UriKind.Relative));
            }
     
            private void button3_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Fujitsu/IS12T.xaml", UriKind.Relative));
            }
     
            private void button11_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/LG/Optimus.xaml", UriKind.Relative));
            }
     
            private void button12_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/LG/Quantum.xaml", UriKind.Relative));
            }
     
            private void button13_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Nokia/Lumia710.xaml", UriKind.Relative));
            }
     
            private void button14_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Nokia/Lumia800.xaml", UriKind.Relative));
            }
     
            private void button15_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Samsung/Focus.xaml", UriKind.Relative));
            }
     
            private void button16_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Samsung/FocusS.xaml", UriKind.Relative));
            }
     
            private void button17_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Samsung/FocusFlash.xaml", UriKind.Relative));
            }
     
            private void button18_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Samsung/Omina7.xaml", UriKind.Relative));
            }
     
            private void button19_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/Samsung/OminaW.xaml", UriKind.Relative));
            }
     
            private void button20_Click(object sender, RoutedEventArgs e)
            {
                NavigationService.Navigate(new Uri("/ViewModel/Devices/ZTE/Tania.xaml", UriKind.Relative));
            }
     
            private void radJumpList1_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
     
            }
     
            #endregion
        }
    }
  7. Answer
    Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 10 Feb 2012 Link to this post

    Hello Justin,

    In the last ticket that you have sent us I have noticed that you've managed to bind RadJumpList to a source. I have handled that ticket and will consider this one closed

    Let us know if you need further assistance or have any questions.

    Kind regards,
    Deyan
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
DevCraft banner