Adding A DataGrid With Connect The Dots DataBinding in VS 2010 (Article 3 of 7)

  Title Of Each Article Video Included With Each Post
Part 1 Introduction To RIA Services In Silverlight (This Article) 7 Minutes
Part 2 Basic RIA Services And DataGrid With  VS 2010 Tooling 14 Minutes
Part 3 Adding A DataGrid With Connect The Dots DataBinding in VS 2010 13 Minutes
Part 4 Adding a Navigation Page to a Silverlight Business Application Template 11 Minutes
Part 5 Adding Speakers Page Template With Converters In Visual Studio 2010 Beta2 11 Minutes
Part 6 Adding A Sessions Page That Includes a Query Parameter In Silverlight VS2010 Beta2 10 Minutes
Part 7 Basic Authentication and Authorization In RIA Services 5 Minutes

[media id=4]

In this article, we will use the the Visual Studio 2010 Beta2 Tooling to create a Sessions DataGrid.  We will add a Pager to it as well as a Silverlight busy indicator which will show while the data is loading.  In Article 1, we build a simple DataGrid with code behind, in this article, it will all be declarative in XAML built with the Visual Studio 2010 designer.

First thing we need to do is add a new Silverlight Navigation Page to the Silverlight project (not the web project) in the Views folder.

 image

Then, copy the code from the Home Page to get the top two default sections that appear on every page as follows:

 image

And the actual code:

<StackPanel x:Name="ContentStackPanel"
            Style="{StaticResource ContentStackPanelStyle}">
    <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
               Text="{Binding Path=ApplicationStrings.HomePageTitle,
               Source={StaticResource ResourceWrapper}}"/>
    <TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
               Text="Home page content"/>
    <Image Height="393" Name="image1" Stretch="Uniform" Width="467"
               Source="/Presentation1;component/Images/IMG_1504.JPG" />
</StackPanel>

Change text to “Speaker page content” and change the resource string to ApplicationString.SpeakerPageTitle and update the ApplicationStrings.resx file as follows:

 image

Then, drag a DataGrid to the Speaker.xaml design surface (after removing the image tag which was the picture on the home page we copied over).

image

Now, we do what Microsoft calls “Connect the Dots DataBinding”.  That is, we go to the Data Sources Tab

 image

Drag the SpeakersShort2009 box (shown in yellow below) to the DataGrid showing on the design surface.

image

That automatically creates a bunch of xaml including the RIA Domain DataSource, which includes a reference to the correct query method and the correct Domain Context.  Very nice!

<riaControls:DomainDataSource AutoLoad="True" Height="0"
                                      LoadedData="speakersShort2009DomainDataSource_LoadedData"
                                      Name="speakersShort2009DomainDataSource"
                                      QueryName="GetSpeakersShort2009Query" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:DomainServiceSVCC />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

image

Now, we do the same thing with the DataPager (which may have to add to the toolbox with “Choose Items” That gives us some xaml that looks like the following.

image

 

image

<data:DataPager Height="26"
                HorizontalAlignment="Left" Margin="720,325,0,0"
                Name="dataPager1" VerticalAlignment="Top"
                Width="200"
                PageSize="10"/>
 

Notice that I put PageSize in.  That does not happen by default, and in my presentation, I forgot this and for a while could not figure out why the paging was not working.  Try and not make the same mistake!

Then, drag the same DataSource as we dragged to the DataGrid and drop it on the Paging control as follows:

 image

That automatically binds the DataPager to the same DomainDataSource as the DataGrid’s DomainDataSource.  Here is the XAML created.

 <data:DataPager Height="26" Name="dataPager1" Width="200"
   Source="{Binding ElementName=speakersShort2009DomainDataSource, Path=Data}" />

The next thing is to use the new “Reset-All” for styling.  It’s very simple.  Right click on the design surface and simply click “Layout/Reset” as follows:

image

Now, when we run this, we get:

image

Finally, to put a “Busy Indicator” control on the page, we simply drag out the busy Indicator onto the design surface. It likely will not be in your toolbox, so like the DataPager, you will need to add it to the toolbar as follows:

image

Then, drag it from the toolbox right onto the DataGrid as follows:

image

Then, once it’s on the DataGrid (and in the XAML), you need to right click on it and change some of it’s properties.

First, set the “IsBusy” property by checking the checkbox, then resize the control itself so it shows the text and is a pleasant size.

image

The next step is a little more tricky.  You need to find the property in the BusyIndicator called DataContext. Right click on that as follows and press “Apply Data Binding”.

image

Now, you are setting the Source so first select “ElementName”, then chose speakersShort2009DomainDataSource as follows:

image

Then, go to the “Path:” and set the property “DomainContext” and the method to “IsLoading” as follows:

image

What this has done is created a binding expression using a very nice Visual Studio 2010 Tool.  It’s assigned that binding expression to the DataContext of the DomainDataSource.

<riaControls:DomainDataSource AutoLoad="True" Height="0"
         LoadedData="speakersShort2009DomainDataSource_LoadedData_2"
                              Name="speakersShort2009DomainDataSource"
                              QueryName="GetSpeakersShort2009Query" Width="0"
   DataContext="{Binding ElementName=speakersShort2009DomainDataSource, Path=DomainContext.IsLoading}">
    <riaControls:DomainDataSource.DomainContext>
        <my:DomainServiceSVCC />
    </riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>

Now, when we finally run our program, we first get the busy indicator as the data is being asynchrously loaded which looks like this:

image

Then, when the data finally loads, looks like the following:

image

Notice the paging control at the bottom, and notice the BusyIndicator has gone away.

That’s it for this article.  In the next article, we will style this page as well as add Converts to show the Speakers picture and add a hyperlink to the sessions associated with each speaker.

About Peter Kellner

Peter is a software professional specializing in mobile and web technologies. He has also been a Microsoft MVP since 2007. In addition, he's a multi-course video author at Pluralsight. To read more about Peter Kellner and his experience click here. For information about how Peter Kellner might be able to help you with your project click here.

Follow me:


Comments

  1. very nice, i agree you 😀

    The best blog!

  2. Do you have a spam problem on this blog; I also am a blogger, and I was wondering your situation; we have created some nice methods and we are looking to trade methods with others, please shoot me an e-mail if interested.

  3. Props for these kinds of a good article, keep up your excellent function.

  4. I couldn’t agree more, thanks for the wonderful article

  5. Hi Tim,
    Thanks for sharing and the insight we will experiment with it.

  6. I do read often the blog of Tim Heuer, but this is also one of my favourites!

  7. Wow, i didn’t know much about silverlight, but i assure you that i’m going to experiment with it, thanks for the great article.

  8. musical instrument triangle says:

    Thank you for taking the time to discuss this, I sense strongly about it and love learning a lot more on this subject. If possible, as you gain expertise, would you mind updating your blog with far more information? It’s really helpful for me.

Follow

Get every new post delivered to your Inbox

Join other followers: