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

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

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:

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.

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

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

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:

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.

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

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

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

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:

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

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:

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:

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:

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.