Silverlight – Navigating Data

color-07 Last week I demonstrated how to access data from a web service in Silverlight and display it on the page.  Today we are going to continue on with that demo and look at how to navigate through our data.

As I’ve stated in previous posts, Silverlight doesn’t work quite the same way as we are used to in ASP.NET or in Windows Forms.  But if you’ve been following along, you’ve seen that much for yourself.

Since the goal of this post is to navigate our content, we’ll want to add a “Previous” and a “Next” button to our form.  Add this XAML to your Page.xaml file right before the closing StackPanel in the code from last week.

        <StackPanel Height="Auto" 
                    Width="Auto" 
                    Orientation="Horizontal">
            <Button Height="Auto" 
                    Width="Auto" 
                    Content="&lt;&lt; Prev" 
                    x:Name="m_buttonPrevious"/>
            <Button Height="Auto" 
                    Width="Auto" 
                    Content="Next&gt;&gt;" 
                    x:Name="m_buttonNext"/>
        </StackPanel>

Note that we are embedding another StackPanel inside the existing one.  This one is oriented horizontally so that it renders like this:

image

The next change we’ll want to make is to add a member variable in our Page class to keep track of which element in our List that we’ve retrieved we are currently displaying.  We’ll also want to make a common function for binding the current element to our XAML and another member variable to hold the List we’ve retrieved.  In the end your code should resemble this.

public partial class Page : UserControl
{
    private int m_position = 0;
    private List<PersonService.Person> m_people;
    public Page()
    {
        PersonService.ServiceClient service = 
            new SilverlightWithWebService.
                PersonService.ServiceClient();
        service.GetDataCompleted += 
            new EventHandler<SilverlightWithWebService.
                PersonService.GetDataCompletedEventArgs>
                (service_GetDataCompleted);
        service.GetDataAsync();
        service.CloseAsync();
    }

    private void Bind()
    {
        DataContext = m_people[m_position];
    }

    void service_GetDataCompleted(object sender, 
        SilverlightWithWebService.PersonService.
        GetDataCompletedEventArgs e)
    {
        m_people = e.Result.ToList
            <PersonService.Person>();
        Bind();
        InitializeComponent();
    }
}

The rest is elementary.  We need an event handler for the “Next” button and another event handler for the “Previous” button.

You can add this easily in the XAML mark-up inside visual studio.  Go to the end of the Button tag for your “Previous” button, type in “Click=” and you should get a small window that pops up with “<New Event Hander>” as a choice.  Should be the only choice.  Click it and it will create a new event handler in your Page.cs file.  You’ll want to do a similar operation for your “Next” button.

In your next handler, you want to increment m_Position if you aren’t at the end of the list.  In your previous handler, you want do decrement if you aren’t at the beginning of the list.  Code most of us have written several times before.  Then after we’ve incremented or decremented the counter, we want to call the Bind function we wrote to rebind the object at the current position to our controls in the page.

private void m_buttonPrevious_Click
    (object sender, RoutedEventArgs e)
{
    if (m_position > 0)
        m_position--;
    Bind();
}

private void m_buttonNext_Click
    (object sender, RoutedEventArgs e)
{
    if (m_position < m_people.Count - 1)
        m_position++;
    Bind();
}

You might want to embellish the code to disable the “Previous” and “Next” buttons when they can no longer skip to the previous or next record.

Related Post

  • Installing Silverlight2 Tools for Visual StudioInstalling Silverlight2 Tools for Visual Studio I was talking with a friend of mine a couple of days ago about the future of web development and XAML specifically when he made the comment about the tools not being available for the average deve...
  • More on SilverLight Developer InstallationMore on SilverLight Developer Installation If you followed along with the install instructions last week and then went to do some development, you probably noticed that the Visual Studio environment does not allow for WYSIWYG/Drag and Drop...
  • Silverlight – Databinding to a Web ServiceSilverlight – Databinding to a Web Service In the last several posts, I’ve demonstrated various ways of getting data onto the screen.  What I’ve purposely omitted up until this point is how to update this information. So let’s start ...
  • Silverlight – Wire up your form for programmingSilverlight – Wire up your form for programming As I mentioned a couple of weeks ago, learning Silverlight is a lot more about relearning some basic assumptions than it is about learning a new language.  We've already looked at the basic layout ...
  • Silverlight – Binding ResourceDictionariesSilverlight – Binding ResourceDictionaries In the last two Silverlight posts I've introduced databinding in Silverlight.  We've seen that databinding, while similar to what we've experienced in Windows Forms and ASP.NET applications, is ma...