Skip to content

Adding Speakers Page Template With Converters In Visual Studio 2010 Beta2 (Article 5 of 7)

Updated: at 02:12 PM
  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=6]

 

This article will follow the previous article and go through the process of adding Converter’s for changing both the Id column and the Image column.  Basically, what we saw in the previous article was a DataGrid that was created and looked as follows.  (notice the Id column and the PKID columns which are highlighted.  Then, we will add a a DisplayItemTemplate that will format the page and make it look good.

 

image

 

What we are going to want to do is convert the Id column’s data from something that looks like “777” to “/Sessions?SpeakerId=777”.  We also will change the PKID column to change from showing a value like “222f32f83-8811” to http://localhost:52879/DisplayImage.ashx?sizex=60&PKID=222f32f83-8811”.  Then, we will apply a template that will make the page look like the following:

 

image

 

So, let’s get started.

 

First, we need to add two converters to the project.  Both are straight forward and I will not give much explanation besides saying they do exactly what was mentioned in the paragraph below the above picture.

 

Image Converter:

namespace BusinessApplicationSVCodeCamp
{
    public class ImageConverter : IValueConverter
    {
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
 
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string PKID = value.ToString();
 
            var s = Application.Current.Host.Source;
            int horizontalSize = 60;
            string path = String.Format("{0}://{1}:{2}/DisplayImage.ashx?sizex={3}&PKID={4}",
                s.Scheme, s.Host, s.Port, horizontalSize, PKID);
 
            return path;
        }
    }
}

Hyperlink Converter:

 
namespace BusinessApplicationSVCodeCamp
{
    /// <summary>
    /// NavigateUri="/Sessions?SpeakerId=2000" is what we want
    /// </summary>
    public class HyperLinkSessionsFormatter : IValueConverter
    {
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    <span class="kwrd">public</span> <span class="kwrd">object</span> Convert(<span class="kwrd">object</span> <span class="kwrd">value</span>, Type targetType, <span class="kwrd">object</span> parameter, System.Globalization.CultureInfo culture)
    {
        <span class="kwrd">string</span> sessionId = <span class="kwrd">value</span>.ToString();
        <span class="kwrd">string</span> path = String.Format(<span class="str">&quot;/Sessions?SpeakerId={0}&quot;</span>,sessionId);
        <span class="kwrd">return</span> path;
    }

}

}

 

Next, we need to add these converters to our Visual Studio 2010 Beta2 project as resources so we can use them in the DataGrid.  To do this, we use a very cool new feature in VS2010.  It’s a little indirect how we do this, but ultimately, it does make sense.  Just not very discoverable.  What we do is we bring up the properties editor for the DataGrid.  Notice below we are showing an icon next to the word “(Collection)”.  This is the icon you click that brings up the Collection Editors: Columns dialog.

 

image

 

How on the highlighted “Binding” property of the “idColumn”, you click the databinding icon and you will get the following binding dialog.

 

image

 

chose “Apply Data Binding” and you’ll get the following:

 

image

 

Nothing has to be done to the Source property.  This is already set to the the DomainDataSourceView we want.  The Path is already set to Id, which is also correct.  This all happened when we did the “Connect the dots” databinding with RIA Services.  That is, when we dragged the domain data service on top of the DataGrid.  We will need to set the Converter though so click on the currently unexpanded “Converters" control and you will see:

 

image

 

What this is telling us is that in the Presentation1 project, we have the two converters available to us.  We will need to add these to the project.  To do that, we have to do it one at a time.  First, click on HyperLinkSessionFormatter and you will see the following dialog.

 

image

 

When you press “Create New”, you will get a choice of which xaml to put the resource in as follows:

 

image

 

By default, it will put it in your current Navigation Page (Speakers.xaml), however, if you look at the drop down:

 

image

 

you’ll see that you can also put in other xaml files that may make more sense.  In our case, we are putting it in the Speakers.xaml file and when we press “OK”, it creates xaml as follows.

 
<navigation:Page.Resources>
   <my1:HyperLinkSessionsFormatter x:Key="HyperLinkSessionsFormatter1" />
</navigation:Page.Resources>

or

 

image

 

It also dropped in a namespace definition for us at the top of the file that looks like the following to reference the my1 prefix:

 

image

 

It seems like quite a few steps, however in practice, it’s very quick.  I won’t go through the same steps again, but you need to add the ImageFormatter converter the same way (see busy screen shot below for all steps combined into one).

 

image

 

Now, we’ve got xaml with two converters:

 
<navigation:Page.Resources>
        <my1:HyperLinkSessionsFormatter x:Key="HyperLinkSessionsFormatter1" />
        <my1:ImageConverter x:Key="ImageConverter1" />
</navigation:Page.Resources>

And, the columns of the DataGrid are bound to them correctly.  The xaml for that looks as follows:

 

image

 

This is hugely convenient, and not very error prone which as far as I’m concerned is very nice.

 

So, now when we run the page, we get the following:

 

image

 

Ugly, but you can see where we are headed.  Now, we create a DataTemplate (or we get Michael Scherotter to help us create one) that looks like the following:

 
<DataTemplate x:Key="SpeakersItemTemplate">
    <Grid >
        <!--<frameworkElement Margin="left,top,right,bottom  -->
        <StackPanel d:LayoutOverrides="Height" Margin="68,5,5,5">
            <StackPanel Orientation="Horizontal">
                <TextBlock x:Name="FirstName" Text="{Binding UserFirstName}"
                           Margin="0,0,6,0" FontFamily="Trebuchet MS" FontSize="16"
                           FontWeight="Bold"/>
                <TextBlock x:Name="LastName" Text="{Binding UserLastName}"
                           FontFamily="Trebuchet MS" FontSize="16" FontWeight="Bold"/>
            </StackPanel>
            <HyperlinkButton
                NavigateUri="{Binding Id, Converter={StaticResource HyperLinkSessionsFormatter1}}"
                Content="Sessions"/>
            <TextBlock x:Name="Description" Text="{Binding UserBio}"
                       TextWrapping="Wrap" FontFamily="Trebuchet MS" FontSize="12"/>
        </StackPanel>
        <Image  HorizontalAlignment="Left" Width="60" VerticalAlignment="Top"
                Source="{Binding Path=PKID, Converter={StaticResource ImagePathConverter1}}"  >
        </Image>
        <HyperlinkButton  Content="WebSite"  TargetName="_blank"
                          NavigateUri="{Binding UserWebSite}" VerticalAlignment="Top"
                          HorizontalAlignment="Right"/>
    </Grid>
</DataTemplate>

 

Then, when we add a listbox, rather than the DataGrid and bind it the same

 
<ListBox Height="600"
         ItemsSource="{Binding ElementName=speakersShort2009DomainDataSource, Path=Data}"
         ItemTemplate="{StaticResource SpeakersItemTemplate}"
         ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>

We get something that looks pretty nice:

 

image

 

That’s it for this article.  In the next article we will actually talk about what happens when the Session hyperlink is pressed.  We know it will take us to the Sessions page, but how it filters the Sessions is worth reading about.

Check out the ORM (Object Relational Mapper) PRISMA. The database access method I use in all my projects