Server Side, Data Driven Image Rendering in ASP.NET MVC and XAML for Web Apps

• Download source code

Background

I just want to introduce XamlAsyncController implementation I've on top of ASP.NET MVC, that’ll let you do server side image rendering using XAML. This allows you to generate data bound images dynamically. So, this will enable you to take a snapshot of your XAML user controls that are bound to the view data or view model, that is passed from your controller so that your images will be generated based on the view data/model.

How to do this? The related source code (find the link above) contains a XamlAsyncController implementation and a related ViewEngine to make the whole task easier in ASP.NET MVC.

Let us go through an example that explains this better.

How to Render an XAML with Data Binding as an Image, from the Controller?

Now, let us see how you can use XamlAsyncController to implement XAML image rendering with data binding in your own ASP.NET application.

Let us take a simple scenario. Let us pass some data from the controller, bind a TextBlock to that, and then and render it as an image. So, from the client HTML, when you have a URL like <image src="/Home/ShowMessage" />, the TextBlock image should be there. This is what you need to do.

1 – Inherit your Controller from XamlAsyncController, and add an Async action for serving the image

You need to create a reference from your ASP.NET MVC to the MvcXamlController.Lib.dll (see in the download above).

If you look at the HomeController, you can see that the HomeController is inherited from XamlAsyncController, a custom abstract controller I implemented, inheriting from AsyncController, that’s already there in ASP.NET MVC 2 (Read about using Asynchronous Controller if you are not familiar with Asynchronous controllers). You just call StartRendering() method in your ShowMessageAsync, and return XamlView() in your ShowMessageCompleted.

[HandleError]
public class HomeController : XamlAsyncController
{
    public void ShowMessageAsync()
    {
        ViewData["Message"] = "Welcome from Xaml in MVC";
        StartRendering();
    }

    public ActionResult ShowMessageCompleted()
    {
        return XamlView();
    }
}    

2 – Add your XAML file to the path /Visualizations/{Controller}/{Action}.xaml

Once you have your controller’s action to serve an image as above, the next step is to add an XAML file. Before that, it should be in the path /Visualizations/{Controller}/{Action}.xaml (This is synonymous to adding a View in the path /Views/{Controller}/{Action}.aspx.

Side Note: This is going to be a bit tricky. First thing is, you need to add references to WindowsBase, PresentationUI, PresentationCore DLLs to your ASP.NET MVC project, which is already done in the demo project. Then you need to manually copy an XAML file from somewhere else to the required path, as Visual Studio ‘Add New Item’ dialog box won’t display XAML files when you try to add a new item inside your ASP.NET MVC Project.

See how I’m placing the ShowMessage.xaml, under the Visualizations\Home folder.

And you are done. XamlAsyncController is smart enough to fetch the XAML file from the location /Visualizations/{Controller}/{Action}.xaml by convention, and render it as an image. And of course, in your XAML, you can bind to the ViewData. Let us have a look into our ShowMessage.xaml:

<UserControl x:Class="MvcXamlController.Demo.Visualizations.Home.ShowMessage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Margin="1" Padding="2" Width="300" Height="60"
        mc:Ignorable="d">
    <Grid>
        <Border BorderBrush="Gray" BorderThickness="2"
                Background="WhiteSmoke" CornerRadius="5" Padding="4">
            <StackPanel>
            <TextBlock Text="I am a WPF control rendered as image"/>
            <TextBlock Text="{Binding Message}"/>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

See that we are binding the TextBlock’s Text property to the Message in the ViewData we have (Alright, we’ve some plumbing in between. The library will set a dynamic wrapper for the ViewData as the data context of the view, so you can bind like that). So, from the client HTML, when you have a URL like <image src="/Home/ShowMessage" />, you’ll actually see the TextBlock’s rendered image there, with the data you passed from the controller as text.

Going Further

So, to recap, for server side image rendering using XAML, you need to:

1. Inherit your Controller from XamlAsyncController, and add an Async action for serving the image 
2. Add your XAML file to the path /Visualizations/{Controller}/{Action}.xaml

The library also supports you to render WPF controls directly, without keeping a separate XAML view as we did above. Now, let us see how to render normal WPF controls directly – a button control and a gauge control, based on a given user value you’ll pass from the controller.

The Gauge control XAML I’ve used in this example is the Xaml guage control developed by Evelyn from Codeproject – Credits to Evelyn.

Have a look at the Controller that renders the Button image and the Gauge image, in the shown HTML page.

public class VisualsController : XamlAsyncController
    {
        //Pass view data to Xaml for Guage Control
        public void GuageAsync()
        {
            ViewData["Score"]=200d;
            ViewData["Title"] = "Hello";
            StartRendering();
        }

        public ActionResult GuageCompleted()
        {
            return XamlView();
        }

        //Pass view data to Xaml for Button control
        public void ButtonAsync()
        {
            StartRendering(()=>new Button() { Content="Hello",Height=30, Width=100 });
        }

        public ActionResult ButtonCompleted()
        {
            return XamlView();
        }
     }

The values we pass there (like Score, Title, etc.) can very easily be the data you get from an Get/Post request to your controller's action. However, for now, let us keep it simple. So, this is the code in the HTML page:

<h2>Xaml in ASP.NET MVC Demos</h2>
    <h3>Simple Button</h3>
     <image src="/Visuals/Button" />
    <h3>Gauge</h3>
     <image src="/Visuals/Guage" />

This is the XAML definition for our Guage control. Note the data binding syntax we have, which binds the DialText and CurrentValue to the viewdata we passed from the controller.

<UserControl x:Class="MvcXamlController.Demo.Visualizations.Dashboard.Guage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:controls="clr-namespace:MvcXamlController.Controls;
		assembly=MvcXamlController.Controls"
        Width="300" Height="300"
        mc:Ignorable="d">
    <Grid>
        <controls:CircularGaugeControl x:Name="myGauge1"
                                        Radius="150"
                                        ScaleRadius="110"
                                        ScaleStartAngle="120"
                                        ScaleSweepAngle="300"
                                        PointerLength="85"
                                        PointerCapRadius="35"
                                        MinValue="0"
                                        MaxValue="1000"
                                        MajorDivisionsCount="10"
                                        MinorDivisionsCount="5"
                                        CurrentValue="{Binding Score}"
                                        ResetPointerOnStartUp="True"
                                        ImageSize="40,50"
                                        RangeIndicatorThickness="8"
                                        RangeIndicatorRadius="120"
                                        RangeIndicatorLightRadius="10"
                                        RangeIndicatorLightOffset="80"
                                        ScaleLabelRadius="90"
                                        ScaleLabelSize="40,20"
                                        ScaleLabelFontSize="10"
                                        ScaleLabelForeground="LightGray"
                                        MajorTickSize="10,3"
                                        MinorTickSize="3,1"
                                        MajorTickColor="LightGray"
                                        MinorTickColor="LightGray"
                                        ImageOffset="-50"
                                        GaugeBackgroundColor="Black"
                                        PointerThickness ="16"
                                        OptimalRangeStartValue="300"
                                        OptimalRangeEndValue="700"
                                        DialTextOffset="40"
                                        DialText="{Binding Title}"
                                        DialTextColor="Black"
                                        >

        </controls:CircularGaugeControl>
    </Grid>
</UserControl>	

So, that is it for now. We explored:

1. How to render image using a custom XAML view
2. How to render image directly from a WPF control

Explore the related code (contains both the demo and the XamlAsyncController library), and if you need it, I’ll explain how XamlAsyncController is actually implemented, and also the related ViewEngine, in a later post.  

Happy Serverside Image rendering with XAML. Finally, don't forget to check my .NET blog, here are a few interesting links from there: 

• 7 Freely Available Ebooks For .NET developers
• 3 Gems from Mono to spice up your .NET Apps
• Top 5 Common Mistakes .NET Developers Must Avoid
• 6 Cool VS2010 Tips you may find interesting
• 4 .NET 4.0 Libraries you *should* know about