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

[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.

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

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:

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).

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

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

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>

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.

<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:

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:

Now, when we run this, we get:

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:

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

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.

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”.

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

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

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:

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

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.