Category Archives: Visual Studio 2010

Silverlight 5 Animations on the Composition Thread

Being a passionate front-end developer, I am constantly on the quest for creating the smoothest and most intuitive user experience possible. That’s why I was really excited when I heard about some of the performance features and enhancements coming in Silverlight 5. One of the most exciting was the concept of a Composition thread; an idea borrowed from Windows Phone 7 that allows certain elements and animations to be offloaded to the GPU and thus independent of the main UI thread.

Anybody who has ever had to pack the visual tree chock-full of elements in Silverlight knows that performance starts to suffer. A major pet peeve of mine is when the loading indicator stops animating when the UI thread is tied up with other processing (such as adding elements to a DataGrid, and rendering the individual rows). With the Silverlight 5 beta ready to go, I figured I’d try my hand at putting that composition thread to work.

Setting Everything Up

Firstly, I’d like to briefly outline what it takes to get up and running with the Silverlight 5 beta, and then what changes are necessary to be eligible to take advantage of the composition thread.

Step 1. Download Silverlight 5 beta SDK and tools for Visual Studio 2010. Make sure you have Service Pack 1 installed first.

Step 2. If you are working with an existing solution, target Silverlight 5 in all of your Silverlight projects:

Step 3. Now that your projects are targeting Silverlight 5, it’s now time to turn on GPU Acceleration. In the html (or aspx) page that hosts your Silverlight object, make sure the enableGpuAcceleration param is set to true:

[xml]<param name="enableGpuAcceleration" value="true" />[/xml]

At this point, your project is eligible to use the composition thread, but no 2d elements or animations will take advantage of it by default; there is still work to be done, and there are currently some very tricky gotchas that can occur along the way. I will talk about these quirks using a custom BusyIndicator control as an example.

Configure BusyIndicator for GPU Acceleration

Let’s start by showing the xaml for a stripped down version of the Silverlight Control Toolkit’s BusyIndicator:

[xml]
<Style TargetType="local:BusyIndicator">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="OverlayStyle">
<Setter.Value>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="Black"/>
<Setter Property="Opacity" Value="0.5"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ProgressBarStyle">
<Setter.Value>
<Style TargetType="ProgressBar">
<Setter Property="IsIndeterminate" Value="True"/>
<Setter Property="Height" Value="15"/>
<Setter Property="Margin" Value="8,0,8,8"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="DisplayAfter" Value="00:00:00.1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:BusyIndicator">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3">
<VisualTransition.GeneratedEasingFunction>
<ExponentialEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="overlay" />
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="busycontent" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="overlay">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="busycontent">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Visible">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="busycontent" />
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="overlay" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="overlay">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BusyStatusStates">
<VisualState x:Name="Idle">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Busy">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1.5" From="-180" To="180"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
Storyboard.TargetName="LoadingIcon"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}" />
<ContentPresenter x:Name="busycontent">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="4"/>
</Grid.Effect>
<Image x:Name="LoadingIcon"
Source="/MyProject;component/Assets/Images/refresh-yellow.png" Stretch="None"
RenderTransformOrigin="0.5,0.5" Margin="0,2,10,0" HorizontalAlignment="Right"
VerticalAlignment="Center">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Grid>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/xml]

The goal here is to have the LoadingIcon image spin around while the VisualState is set to Busy, and we want that animation to be processed on the composition thread. The first step to this goal is to add set the CacheMode property on the desired element to “BitmapCache”. This tells the framework that the element (and it’s subtree of elements, if any) should be cached on the GPU. The first thing I tried was setting the CacheMode on the LoadingIcon element, since that was the animation that I wanted to be as consistent and smooth as possible. To verify whether or not it worked, I used a very archaic approach: Set IsBusy on the control to true, and then immediately invoke Thread.Sleep. In theory, if the animation is running on the composition thread, then a Thread.Sleep on the primary UI thread would not freeze the animation. Much to my dismay, the animation froze as soon as Thread.Sleep was executed. It turns out that the current Silverlight 5 beta has a bug in which an Image element will fail to properly cache as expected on the GPU. I received this answer by posting on the Silverlight 5 beta forum, which you can read about here.

Along with this bug, there are some rules about CacheMode that must be followed for your animations to be eligible for GPU caching, and thus the composition thread. I had a quick correspondence with Gerhard Schneider from Microsoft today, and this is what he had to say:

BitmapCache is not [currently] working on Image elements. It’s a bug that we will still try to fix for the release. Other than that, here are roughly the rules for BitmapCache and independent animations (animations on the composition thread).

You can set BitmapCache on any UIElement (ignoring the bug on image element – and I believe media element). This will render that element’s subtree into a video memory off-screen surface that we can then compose with independent animations (independent animations = animations on composition thread). To make sure things are fast we also cache the tree behind and in front of the element that has BitmapCache set.
Note that BitmapCache has no additional benefit when being nested. Only the BitmapCache flag closest to the root is respected.

Regarding independent animations, we currently support transform, perspective, and opacity animations. However, under certain tree configurations, we sometimes have to disable them. For example if used under a complex clip (complex being non-rectangular), we disable independent animations and BitmapCache. The exact rules will be published when we release SL5 since some of this is still changing.

So I followed his advice, and made a few changes:

  • Moved the CacheMode property up to the parent ContentPresenter element.
  • Removed the DropShadow effect, because it is not eligible for caching.

Unfortunately, I still encountered a freezing animation on Thread.Sleep. After another email to Gerhard, he had the answer:

If the animation is targeting a property under the cached element, it has to invalidate the cache and you will not get an independent animation. You need to move the animation to the Grid element. This assume that you are animating the CompositeTransform in the example below.

So the solution was to move the animation to the ContentPresenter, and point the VisualState animations to the ContentPresenter as well. Finally, the animation continued to spin on Thread.Sleep! And this makes sense, because the entire element and subtree will be cached as a bitmap, so any animations or unsupported settings on children will invalidate the bitmap. I think this is a key point that other Silverlight 5 articles failed to mention, and can be a real gotcha if just starting out with this stuff.

So here are the modified parts of BusyIndicator style that will run successfully on the Composite thread. Notice the DoubleAnimation points to busycontent:

[xml]
<ControlTemplate TargetType="local:BusyIndicator">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="BusyStatusStates">
<!– … –>
<VisualState x:Name="Busy">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1.5" From="-180" To="180"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
Storyboard.TargetName="busycontent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}" />
<ContentPresenter x:Name="busycontent" CacheMode="BitmapCache" RenderTransformOrigin="0.5,0.5">
<Grid Height="25" Width="25"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Image x:Name="LoadingIcon"
Source="/MyProject;component/assets/images/refresh-yellow.png"
Stretch="None" HorizontalAlignment="Right"
VerticalAlignment="Center">
</Image>
</Grid>
<ContentPresenter.RenderTransform>
<CompositeTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
[/xml]

Taking full advantage of GPU Acceleration

Even though I was able to improve performance by moving some common animations to the composite thread, I am still weary of the work involved in order to take advantage of this feature in a large application. I really think that there should be an easier way to detect whether an element and it’s subtree are eligible for GPU caching, because there are quite a few limitations (not to mention bugs) that get in the way of implementation. Hopefully by the time Silverlight 5 goes RTW, the bugs will be ironed out and all limitations will be fully documented.

Further Reading

There were quite a few articles and blog posts that helped me get started with GPU acceleration in Silverlight 5. I strongly recommend reading through them if you are interested in this topic:

Silverlight 5: The Undisputed Champion for LOB Applications

In a previous post, I blogged about the struggles we’ve had with Silverlight that led me to consider WPF as an alternative for line of business applications. With the announcements made at today’s Silverlight Firestarter event about all the Silverlight 5 features, it seems like any incentive to make that switch to WPF has been eradicated. This post aims to take a look at some of those new features, and show how the gap is quickly closing between Silverlight 5 and WPF. Additionally, I’ll briefly dive into Silverlight’s exclusive features that ease development for LOB applications, yet are not present in WPF.

Performance!

Based on the Firestarter event, SL5 is cooking up even more improvements to the rendering pipeline that should alleviate scenarios where the visual tree gets overloaded. While exact details have yet to emerge, it seems that Silverlight will support an immediate graphics mode that will run rendering through the GPU. This was one of our largest blockers with Silverlight going forward, and it is a relief to hear that they have brought this WPF capability into the Silverlight realm.

DataBinding

If you’ve been working with Silverlight for awhile, you probably know that certain databinding scenarios can be a real pain. You probably also know that WPF has databinding facilities that solve these problems with ease. Well, the pain ends soon because Silverlight 5 now supports nearly all the features of it’s dying father, WPF.

One of my favorites is the Ancestor RelativeSource addition. As John Papa demonstrated in Firestarter today, there is a common scenario when performing bindings inside of a DataTemplate that don’t match your current DataContext. More often than not, you are forced to replicate properties/commands/collections on your child view models in order to satisfy your binding requirements, and often this can lead to redundant and confusing code. With Ancestor RelativeSource, you can find the DataContext of a parent element that is higher up in the visual tree hierarchy, and bind directly to it.

Another great feature is being able to bind to style setters. Often times there is a requirement to change visual properties of controls. But if you are trying to bind a style setter within Silverlight, it wasn’t possible without a heaping portion of hacky magic.

Finally, implicit data templates will make your annoying-converters-library much smaller. Often times when binding to a collection of dissimilar items, you are forced to use converters to get your data templates to render the intended layout. Of course, the more dissimilar your bound collection is, the more your library of one-off converters will grow. With implicit date templates, you have the option to bind to a list of different types, and let WPF dynamically determine which data template to use. This way your presentation logic can stay in xaml, and not in converter code.

Windows Integration

Another selling point for WPF is it’s ability to interactive with the windows environment from within your application, such as calling unmanaged libraries and Win32 APIs. A typical scenario is the process of exporting data to excel. In Silverlight right now, this workflow consists of the following steps:

  1. Prepare the xlsx filestream
  2. Offer the user SaveFileDialog to persist it to the local file system.
  3. The user types out an entire filename (since there is no way to specify a default in SL4)
  4. The user manually opens the file either from explorer/desktop or through excel

With Silverlight 5, you can skip the last three steps and open the file directly into Excel automatically! This is a huge time saver when your users constantly want to view their data in excel. And of course, there are so many more possibilities; in the Firestarter keynote, they demonstrated a Silverlight app that connected to a windows program to automatically import data off of a USB device. Rich OS integration used to be a major selling point for WPF, but with the advent of SL5, it has evaporated.

So far I’ve only touched on features that serve to even the playing field between Silverlight and WPF, but what puts SL5 over the top are the exclusive technologies and support that are actively being built around it:

  • WCF RIA Services – As I mentioned previously, there is no support in WPF for this great technology, and it isn’t coming anytime soon (if ever)
  • Fluid UI – Silverlight continues to build on the ability to easily create more natural applications. We see the beginnings of this with SL4′s ListBox support for Fluid UI, where you can effortlessly create transitions when adding and removing items. SL5 goes deeper and adds LoadTransitions. From the Firestarter event, this looks like the capabilities of the SL Toolkit’s TransitioningContentControl have been integrated into the VSM and animation system.
  • SL Toolkit – The state of WPF’s toolkit is a sad sad thing. With no release for the last 10 months (not even for the .NET 4 release), it looks to be nearly abandoned. Comparitively, there has been a .NET 4 release of the Silverlight toolkit, and it is much more feature complete and stable than it’s WPF counterpart.
  • Theming – This goes hand in hand with the previous bullet point, but there are a whole bunch of great themes continuing to be pumped out of Redmond. The WPF community has had to rely on rogue developers gracious enough to port the themes over.

Summary

There are many other improvements scheduled for Silverlight 5 that can help with LOB applications (Out of Browser, Testing tools, Text, Printing), but I’ll let the big dawgs like Scott Gu cover those details. For now, I think it’s safe to say that WPF is dead. But don’t fret; this just means that all of it’s most advantageous features are being reincarnated into future versions of Silverlight.

After last months scare that Microsoft might abandon Silverlight, I think it is safe to say that speculation could not be further from the truth; Silverlight is here to stay. It continues to get faster, leaner, stronger — and there is no better technology in the present or foreseable future that can be used to develop amazing line of business applications. With Silverlight 5′s release next summer and the beta still a few months out, there are going to be a swarm of developers clamoring to get their paws on these features (myself included). Until then, happy coding :)

Using Google Closure Templates with ASP.NET MVC in Visual Studio 2010

Client-side templates have become a vital component of AJAX-driven websites. The web is undoubtedly trending towards sites that load content dynamically after the page loads, rather than all at once in the initial page request. This pattern allows web pages to become lighter and more responsive, which translates to a better experience for the user. However, the conventional server side templating and databinding techniques that web developers typically use aren’t as effective anymore. That is why there are so many JavaScript template solutions that have popped up in recent years:

Google’s Closure Templates is the new kid on the block, and the subject of this article. One might wonder: Why do we need yet another JavaScript templating solution? The main advantage that sets Closure Templates apart from the other libraries is the included compiler. Other templating solutions either parse a string of special template syntax, or traverse through actual html elements with special markup or extra classes. When making light use of client-side templates, these solutions can work very well. But, as you start to build applications with extremely large datasets and complex templating, then performance starts to become an issue. These scenarios are where Closure templates begin to shine. Instead of directly using the template that you write, you run it through the compiler to output JavaScript functions that you can use in your code. This process is advantageous on two levels; the first is that the JavaScript functions outputted from the compiler are going to be optimized and extremely fast. Secondly, the compiler can also create server side compatible templates as well, so that you can write your templates once and be able to use them either in JavaScript or in server-side code. Unfortunately, the current version of the compiler can only generate Java code, and there is no option for .NET languages such as C#. This is a bummer for .NET developers, but even without C# templates, there is still great value in lightning-fast, compiled JavaScript templates.

Creating your first Closure Template in Visual Studio 2010

Let’s start with a new ASP.NET MVC Project:

vs2010-new-mvc-project

You can create a Web Application project if you are more comfortable with that type of project structure. Because we will be dealing with just JavaScript, it shouldn’t matter.

After creating a project, download the compiler and JavaScript utility library. Extract the zip file, and copy both SoyToJsSrcCompiler.jar and soyutils.js to your templates directory:

soy-compiler

You will see in the screenshot above that I have changed the Build Action of SoyToJsSrcCompiler.jar to “None”, and Copy to Output Directory is set to “Do not copy”. This ensures that the compiler is not compiled into the dll, and the file is not copied to the output folder. The latter is especially useful when using Visual Studio’s publish feature, because the compiler is not necessary when deploying your website.

Now that we have the required files in place, let’s go ahead and create a soy template file, example.soy. This is the file that will contain one or more templates using Closure’s template syntax. After creating a template in this file, we will then use the compiler to generate a JavaScript representation of the template that we will reference in our html page. Every soy file should have the three following components, in the following order:

  • A namespace declaration.
  • One or more template definitions.
  • A newline at the end of the file.

Go ahead and enter the following example template in your example.soy file:

{namespace closure.examples}

/**
* Says hello to a person.
* @param name The name of the person to say hello to.
*/
{template .helloName}
Hello {$name}!
{/template}

Make sure that your soy file is encoded as ANSI, rather than UTF-8. Even though Google says UTF-8 should be supported, in Windows 7 x64 (and maybe other Windows operating systems and versions) this is currently not the case. And if you create a file within Visual Studio, it will encode the file as UTF-8 and you will get the following exception when compiling a template:

Exception in thread "main" com.google.template.soy.base.SoySyntaxException: In file example.soy: Tag 'namespace' not at start of line.

closure-compiler-encoding-exception

If you are unsure that your file is saved with the proper encoding, just open it up in notepad, and select File > Save As to see or change the encoding.

After we’ve included the necessary files in our project, it’s time to make compiling templates a little more user-friendly. The jar file is pretty annoying to call from the command line and manually change the parameters for each of your different soy files. Visual Studio has a perfect solution for this, and it’s called External Tools. This feature allows you to set up a VS menu item and seamlessly run commands from the IDE with just the press of a button. To do this, first click on Tools > External Tools from the menu:

external-tools

From here, you can create a new menu item with the following parameters:
Title: Compile Closure Template
Command: C:Program Files (x86)Javajre6binjava.exe
Arguments: -jar "$(ItemDir)SoyToJsSrcCompiler.jar" --outputPathFormat $(ItemFileName).js $(ItemFileName)$(ItemExt)
Initial Directory: $(ItemDir)

(Thanks to Tj Stewart for this tip)

Note that your Command entry may differ, depending on where your java installation resides on your computer. Here is what it looks like:

closure-template-tool

Once you have this setup, compiling your soy templates is as simple as selecting the soy file in solution explorer and pressing the “Compile Closure Template” button in the Tools menu:

invoke-closure-template-tool

When you attempt to compile a template, make sure to have your output window open. If there are any exceptions that occur during the compilation, this is where they will be displayed. If the compilation was successful, you should now have a new example.js file in the Templates directory. Note that it won’t be added to the project automatically, so you’ll have to add it yourself. Subsequent compiles for the same soy file will only require this step once.

Now let’s create a page to utilize the new template, and call it example.html. We could create an MVC view, but it really isn’t necessary since we are only dealing with JavaScript:

[sourcecode language="xml"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/Templates/soyutils.js"></script>
<script type="text/javascript" src="Scripts/Templates/example.js"></script>
<script type="text/javascript">
$(function () {
$(‘#wrapper’).html(closure.examples.helloName({ name: ‘Sam’ }));
});
</script>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>

[/sourcecode]

I’m using a little jQuery to make my life easier here, and notice that I am passing JSON with the Closure template parameters as the properties of the object. Your result should look something like this:

closure-result

In summary, Google Closure Templates provide a scalable solution to client side templating by providing an understandable syntax in the form of soy files, with the ability to compile those templates into fast and efficient JavaScript functions that you can use in your pages. Even though there is no current support for reusing Closure templates in C#, there is still value in utilizing this solution in a Visual Studio project, especially when the External Tools feature makes compilations so easy and convenient.

I hope this article serves as a starting point to getting up and running in Visual Studio 2010. In future articles, I will be delving into more complex examples and explanations of Closure Templates in real-world scenarios.

Working with Projections and DTOs in WCF Data Services

For those of you who haven’t been following “Project Astoria”, you’ve been missing out on some pretty exciting technology. WCF Data Services (formerly known as ADO.NET Data Services) is a stack on top of WCF that enables the creation and consumption of REST-based data services for the web. There are several intriguing features in the upcoming release that coincides with .NET Framework 4, including:

  • Projections: Since CTP2, the Data Services URI API supports the ability to work with a subset of properties on an Entity.
  • Data Binding: The client library now supports two-way data binding for applications built with Silverlight or WPF technologies.
  • Row Count: You can now retrieve the total number of entities in a set, without having to fetch all of the entities within that set.

The ability to create projections and shape your data directly on the URL can be quite useful. Oftentimes, only a few properties of an entity are necessary, and WCF Data Services makes it easy to achieve an efficient query that returns precisely the data you need. For an example, take the following Entity Framework data model:

Example Entity Model

Let’s say you only wanted to return a list of Employee Names, along with the City they live in. If exposed via a WCF Data Service, you could could get exactly this data by using the $select parameter in your querystring:

http://domain/data.svc/Employees?$select=Id,FirstName,LastName,Address/Id,Address/City&$expand=Address

This request will only return the Employee’s Id, FirstName, and LastName and the Address’s Id, and City. The $expand query parameter with the Address value is telling the service to eager load the Address object, which is necessary be able to return the projected properties that we need from it. Any developer who has been creating AJAX-intensive websites will tell you that ability to achieve this granularity without any extra work is extremely useful.

More Complex Scenarios

The projections and expansion features are extremely useful, but at some point you will undoubtedly run into a scenario that isn’t supported via the querystring API. WCF Data Services allows you to expose custom operations on your service to facilitate these scenarios. Using example data model above, let’s say we would want the Employee’s Id, Name, and the Count of the OptionsApprovals from the StockOptionApproval relationship. Since there is currently no way to project the count of a child relationship in the querytstring API (don’t misunderstand the $count parameter as I first did; it will not help here), you would need to expose a custom service operation. Intuitively, you might code something like this:
[csharp]
[WebGet]
public IEnumerable<EmployeeOptionApprovalCountDTO> EmployeesWithOptionApprovalCount()
{
var employees = CurrentDataSource.Employees
.Select(x => new EmployeeOptionApprovalCountDTO {
x.ID,
x.Name,
OptionsApprovalCount = x.Children.Count()
})
.ToList();

return employees;
}
[/csharp]

Unfortunately, this will not work. At least not when your WCFService inherits from an Entity Framework ObjectContext:
[csharp]
public class EmployeeService : DataService<EntityContext>
{
public static void InitializeService(DataServiceConfiguration config)
{
config.UseVerboseErrors = true;
// more config options here…
}
}
[/csharp]

When your service inherits from an ObjectContext, WCF Data Services will use the ObjectContextDataProvider. A current limitation is that you can only return entities from the custom service operations that you expose. In other words, if you try to return a data transfer object (regular CLR class), your service will fault with:

'Unable to load metadata for return type 'System.Collections.Generic.IEnumerable`1[EmployeeOptionApprovalCountDTO]' of method 'System.Collections.Generic.IEnumerable`1[EmployeeOptionApprovalCountDTO] GetEntityWithCount(Int32)'

Disappointingly, you can’t even use the config’s RegisterKnownType method during InitializeService, because it isn’t used when ObjectContextDataProvider is chosen as the Provider for your service. So what other options do you have for this seemingly straightforward use case?

The next thing I tried was to create an Entity in the model that isn’t mapped to a table in the database. This was a dead end, because when using the unmapped entity in the entity data model as the DTO to return from the service, I received this exception:

The server encountered an error processing the request. The exception message is 'Service operation 'UnmappedEntityDTO' produces instances of type 'UnmappedEntityDTO', but there are no visible entity sets for that type. The service operation should be hidden or a resource set for type 'UnmappedEntityDTO' should be made visible.'.

So what are we left with to try? Fortunately, the entity framework has the concept of complex types, which technically are to be used as properties of entities. However, the ObjectContextDataProvider will allow you to return a complex type in the EntityDataModel from your service operation. You can create them in the Model Browser:

example-ef-complex-type

As if jumping through all those hoops weren’t enough, there is one more gotcha to consider. When building a Linq to Entities query, you cannot use a complex type as part of your where clause! You will receive the following exception:

The entity or complex type 'ComplexTypeAsDTO' cannot be constructed in a LINQ to Entities query.

So instead, you must first use an anonymous type, invoke ToList() to ensure your query gets executed, and then finally transform your anonymous type to your complex type so that your service is able to return your objects:
[csharp]
return CurrentDataSource.Employees
.Select(x => new{
Id = x.Id,
Name = x.Name,
OptionsApprovalCount = x.OptionsApprovals.Count
})
.ToList()
.Select(x => new EmployeeWithOptionsApprovalCount {
Id = x.Id,
Name = x.Name,
OptionsApprovalCount = x.OptionsApprovalCount
});
[/csharp]

Summary

WCF Data Services enables rapid development and the ability to easily expose your entity model. And when combined with the entity framework in conjunction with it’s new POCO support, you don’t have to sacrifice your n-tier architecture and proper separation of concerns. However, there are still some counterintuitive practices that must be used in order to handle seemingly-basic scenarios. Hopefully, by the time the final product is delivered, there will be better support for these situations. But for now, I’m happy that I found a decent workaround!