Matrix reports in Reporting Services 2005

Matrix reports are extremely useful when you have data organized in rows that you want to transpose to columns (similar to creating a Pivot Table in Excel). Here’s an example of how to use a Matrix report and how to hack your way through some additional features you’re likely to need.

The Matrix
Say you have a dataset of user transactions, with {Username, TransactionDate, Amount}. Instead of seeing this information as a long table, you want to see one row per user, with the total amount spent per day in columns. This would let you quickly compare who spent what by day.

Doing this as a Matrix report is easy. Select “Add New Report” from Visual Studio 2005, enter your query or sproc, and pick ‘Matrix’ report type. The next page is where all the magic happens; using our example, put {Username} into ‘Rows’, {TransactionDate} into ‘Columns’, and {Adjustment} into ‘Details’. Click ‘Finish’, and you’ll see that Visual Studio has created the table, assuming you wanted to SUM the Amount for each user. In this case that is exactly what we want, but if we needed a different aggregate operation we’d just edit the details Textbox and change ‘Sum()’ as desired.

The first thing you’ll notice when you preview the report is that this isn’t exactly what we want, since the TransactionDate column is using the full DateTime value, which creates a column for each distinct DateTime. Instead we just want a single column per unique day. So let’s add a calculated field by going to the ‘Data’ tab, clicking the ‘…’ button, and adding a new calculated field TransactionDateFormatted with value =Format(Fields!TransactionDate.Value, "g"). We then have to change the report to use this new field in two places:

1. In In the textbox displaying the date. Right-click on the column header textbox and change the Value from =Fields!TransactionDateFormatted.Value to =Fields!TransactionDateFormatted.Value.
   


2. In the grouping definition. Right-click on the table, select ‘Properties’, go to the ‘Groups’ tab, edit the column grouping definition that was automatically created, and change the expression to =Fields!TransactionDateFormatted.Value.
   

Viola! All is good.

Unplug from the Matrix
Well, almost. And here’s the part you’ve been waiting for, where we take off the gloves, agree that Reporting Services 2005 does do lots of things well, and that for what it is, we like it. Thing is, sometimes to get the job done you have to get a little dirty.

Additional Columns
Let’s say we have the same dataset, but this time we also have UserId, and we want to show both the Username and the UserId in each row. Sounds straightforward enough. But you’ll notice that this isn’t so simple, since you can’t add a ‘Column’, only a ‘ColumnGroup’, which would add a column for each unique UserId (the exact opposite of what we want). You have to tilt your head to the side a bit and think like the Matrix (report). What we want here is actually another ‘RowGroup’, since the UserId value will appear in a row, but we want to group by a constant value so as not to create a second group for each user. So right-click on the table, choose ‘Add Row Group’, and enter =1 as the grouping expression. Then on the report, change the newly created Textbox’s value from =1 to =Fields!UserId.Value. Taking a look in Preview mode, we see that we now have Username and UserId in each row, and we’re happy.

Column Headers
Kind of. What we really need now is a column header for each of these columns, since it’s a bit unclear what’s what. So we return the Layout tab and go to edit the value of the column header Textbox… but alas! There’s only one, merged Textbox for the two columns. You’ll see that if you add additional RowGroups using the same technique there is still just a single, merged Textbox for the entire span of the column header.

Time to bust out the heavy guns. Open the Toolbox and drag a Rectangle into that single, merged Textbox. You’ll see the dots in the background of the report now. Then drag two Textboxes onto the Rectangle, and position them so that one is above the first column (Username) and the other is above the second column (UserId). Adjust the widths of the Textboxes so that they exactly match the widths of the RowGroups, edit the Textboxes’ values to be “Username” and “UserId”, and go back to preview mode. Now we’re cooking.

Enter Chris Hays
Almost. Now what we say is “What’d be really great here is zebra-striping”, so that we can easily see each row. But you’ll notice that the traditional technique of zebra-striping a reporting services report (setting the background color to =iif(RunningValue(Fields!UserId.Value,CountDistinct, Nothing) Mod 2, "WhiteSmoke", "Ivory")) just doesn’t work. This time tilt your head to the other side, and keep tilting. For this hack we turn to Chris Hays and his Reporting Services Sleazy Hacks Weblog, which is far and away the best (only?) source of “How-Do-I”’s on Reporting Services 2005. The blog is from 2004-2006, but it’s relevance hasn’t changed. Read through everything he’s written.

Conveniently, Chris has a Green Bar Matrix posting that will step us through this (yes, it’s going to get real ugly). Following his instructions:

1. Add another RowGroup (at the innermost position, after the UserId RowGroup we added) with a constant (=1) grouping expression. Change the name of the newly created RowGroup’s TextBox to "ColorNameTextbox".
   


2. Put the background color calculation (=iif(RunningValue(Cstr(Fields!UserId.Value), CountDistinct, Nothing) Mod 2, "WhiteSmoke", "Ivory")) into the Value property of ColorNameTextbox.
   


3. Set the BackgroundColor property of this entire new RowGroup to =Value.
   


4. Set the BackgroundColor property of the matrix data cell Textbox (the one that does the Sum()) to =ReportItems!ColorNameTextbox.Value.
   


5. Set the BackgroundColor property of the other RowGroups (for UserId and Username) to the same grouping expression that we used for the Value of ColorNameTextbox (=iif(RunningValue(Cstr(Fields!UserId.Value), CountDistinct, Nothing) Mod 2, "WhiteSmoke", "Ivory")).
   


6. Hide the newly created RowGroup by setting the FontColor to =Value, the FontSize to 1pt, and the Size to Width of 0px. You can also hide the borders as Chris suggests if you mind them.
   

Go Wash Your Hands
Phew! We now have exactly what we wanted, and we only had to feel a little bit dirty about getting it. It’s not deal-with-the-devil kind of stuff, but still, it’s pretty nasty.

But that’s OK. We love Reporting Services. Come back to reality (if you remember what that is) and plug back into the Matrix. Life is good.

Microphone Access in Silverlight App: LIVE

Just a heads up that the technique described earlier (using Flash and Javascript for microphone support in a Silverlight app) is live now in the Tutor.com Classroom!

You'll need to create an account and connect to a tutor to see it in action (click the 'Connect to a Tutor' button in the classroom to get started)--

don't save foreign key relationships for "the end"

consider adding foreign keys part of creating a table; if you haven't set up foreign key relationships, you haven't finished creating your table.

indexes, on the other hand, can be saved for "the end", once you get a better sense of how you're querying the tables and what's most optimal. but even with indexes, if you have a good sense when you're creating the table of how you're most likely to access the data, you're better off taking an educated guess early than never doing it late--

using SQL Profiler to monitor database calls

just in case anyone’s not familiar with SQL Profiler: this is the app that gives you low-level database monitoring so you can trace all database calls. you can customize what you monitor to get a variety of information.

so for example, if you want to set up a trace to see all database calls from your web server, launch Profiler, click the New Trace… button, connect locally, and go to the second tab:

• check checkboxes in the DatabaseName column
• click the Column Filters… button and add filters for:
  o DatabaseName Like => your database
  o NTUserName Like => nt identity you run your webserver as
  o TextData Like => exec

use format codes in report files

the best way to format datetime/number values in an RDL file is with the textbox’s Format property. you use the same format codes that you use in .NET and elsewhere, and you don’t have to worry about null values (null’s appear as empty strings). for example, common date format codes are:


d – 2/26/2009
D – Thursday, February 26, 2009
g – 2/26/2009 11:52am

some number/currency codes:

g – 1234
N – 1,234.00
C – $1234.12

if you forget the codes, you can get the VS2005 to show you them by right-clicking on the textbox and choosing ‘Properties’, going to the ‘Format’ tab, and clicking the ‘…’ button next to ‘Format code’.

report server rdl files in visual studio 2008

hacked my way through this mostly by accident; if you rename a .rdl file to .rdlc, then you can open the file in visual studio 2008 and use the same GUI for report file edits that you have in 2005. you don’t get the data and preview tabs, so you need to make data source edits manually in notepad, but if you find yourself with only vs 2008 and need to make .rdl edits, this is a good way to get some GUI help--

Microphone access in Silverlight via Flash and JavaScript

Silverlight is unquestionably a powerful tool for .NET application developers; using almost of all the same WPF skills,.NET developers can create rich internet applications (RIA) right out of the gate. However, Silverlight has no microphone/webcam support, and if you need this functionality in a cross-browser RIA, the common thinking is cross out Silverlight and pencil in Flash or Java.

While it's true that you'll need to dip into Flash or Java for microphone/webcam support (at least until Silverlight 3, and possibly not even then), there's no reason you can't take advantage of Silverlight as your base application host and selectively use Flash as necessary for Silverlight's missing features. Then, using a JavaScript bridge, you can get these browser technologies communicating with each other fairly painlessly. This integrated solution is what we're considering at Tutor.com when we add voice communication support to the Tutor.com Classroom, and this post will detail how to use Flash for microphone support inside a Silverlight application, where the button controlling the microphone on/off switch is in the Silverlight application.

Flash: Microphone management
First, we'll create a simple Flash movie (I'm using ActionScript 2) that manages and outputs microphone input. Thankfully, there's really very little code you need to write to do this; just note that your Flash movie must be at least 250x150 to allow room for the microphone Allow/Decline dialog, and if you don't want the movie to be visible, you need to set its background color to transparent.

As an aside, note that there's similarly very little code you need to write to connect to a Flash Media Server (FMS) for real-time communication, although the example here omits the FMS part. As another aside, note that the code for Flash webcam support is almost identical, except instead of a Microphone object you're working with a Camera object.

OK, so in the first frame of your Flash movie, write a function to access the microphone and monitor microphone activity:

var mic:Microphone = null;

function toggleVoice(isOn:Boolean)
{
  //setup the mic
  if (mic == null)
  {  
    //call Microphone.get() to access the microphone and prompt user with Allow/Decline dialog
    mic = Microphone.get();

    //Microphone.get() will return null if user declined access
    if (mic == null)
      return;

    //setup onActivity handler to get notification of mic activity
    mic.onActivity = function(active:Boolean)
    {   
      //call out to JavaScript bridge via ExternalInterface
      flash.external.ExternalInterface.call("IsTalking", active);
    };

    //create movie clip and attach mic to clip so we can hear output
    this.createEmptyMovieClip("sound_mc", this.getNextHighestDepth());
    sound_mc.attachAudio(active_mic);
  }

  //set the microphone gain as per the isOn input variable
  mic.setGain(isOn ? 50 : 0);
}

Below the function, add a callback handler that makes the function callable via JavaScript:

  flash.external.ExternalInterface.addCallback("ToggleVoice", this, toggleVoice);

Html: Application host page
When you add a Silverlight application to your solution in Visual Studio, the boilerplate html makes your application full-screen in the browser window (as in the Tutor.com Classroom); this is exactly what we ant. Next, we need to add our Flash html object tag. Silverlight is a bit picky about where you add this html tag since you need to preserve this 100% height style, so slot the Flash object tag immediately before the div tag, and style it with "position:absolute" so that it doesn't interfere in the html layout:

  <form id="form1" runat="server" style="height:100%;">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
            
    <object 
      id="voice" 
      style="position:absolute;"
      classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
      codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" 
      width="250" 
      height="150" 
      align="middle"
      ...
    />

    <div style="height:100%;">
      <asp:Silverlight     
        ID="Xaml1" 
        runat="server"                 
        ...
      />                                
    </div>
  </form>

Javascript: Flash/Silverlight bridge
Next, we'll create the JavaScript function that our Silverlight app will call, which will in turn call into our Flash movie to set the Microphone input status. Since our Flash movie registered the ToggleVoice() callback function using ExternalInterface, Flash added a JavaScript entry point to function when the Flash movie loaded:

<script language="javascript" type="text/javascript">
function toggleVoice(on) 
{
    var flashVoiceObject = thisMovie("voice");
    if (!flashVoiceObject)
        return;

    flashVoiceObject.ToggleVoice(on);
}

function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return document.getElementById(movieName);
    }
    else {
        return document[movieName];
    }
}
</script>

We can also very simply call from JavaScript into Silverlight, and we'll do this to alert our Silverlight application when Flash notifies us of microphone activity:

function IsTalking(active) 
{
    //access the Silverlight application
    var control = document.getElementById("Xaml1");

    control.Content.Page.ToggleIsTalking(active);
}

Silverlight – Microphone toggle button
Finally, in Page.xaml, add a toggle button with Checked and Unchecked handlers, and an indicator that we'll show when the microphone is active:

<ToggleButton Content="Toggle Microphone Input" Checked="ToggleVoice_CheckedToggled" Unchecked="ToggleVoice_CheckedToggled" />

<TextBlock Text="You are talking..." Visibility="Collapsed" x:Name="IsTalkingIndicator" />

Then in Page.xaml.cs, implement the handler and call into the JavaScript function:

private void ToggleVoice_CheckedToggle(object sender, RoutedEventArgs e)
{
    //call js layer to set microphone state
    ScriptObject voiceToggleScriptObject = (ScriptObject)HtmlPage.Window.GetProperty("toggleVoice");

    ToggleButton tb = sender as ToggleButton;
    voiceToggleScriptObject.InvokeSelf(tb.IsChecked.Value);
}

Lastly, implement the ToggleIsTalking() function that we'll call from JavaScript when the Flash movie responds to the microphone's onActivity() event. You just need to decorate this function with the [ScriptableMember] attribute so that Silverlight registers the function with the JavaScript runtime:

[ScriptableMember]
public void ToggleVoiceOn(bool On)
{
    IsTalkingIndicator.Visibility = (On) ? Visibility.Visible : Visibility.Collapsed;
}

And that's it! You now have a relatively straightforward Flash <=>JavaScript <=> Silverlight solution that affords you the best of all worlds.

Tutor.com Classroom How-To #11: Build a Silverlight ToolbarButton user control

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

One of the controls missing out-of-the gate from Silverlight is the Toolbar. There is no magic to the WPF Toolbar (it’s just a control container that auto-docks itself and auto-styles its children), but for free you get the flat button look-and-feel that users expect at the top of an application.

In Silverlight, we have to manually create this look-and-feel. Since our application’s toolbar consists solely of buttons (both normal and toggle buttons), and since the buttons in our toolbar have the “icon followed by a text description” format, we can abstract this to build the ToolbarButton user control.

Begin by creating a new user control. Define the styles for the Hover and Pressed states in your user control’s Xaml resources:

<UserControl.Resources>
  <LinearGradientBrush x:Key="HoverBrush" StartPoint="0,0" EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
      <GradientStop Color="White" />
      <GradientStop Color="#F8D28F" Offset=".3" />
    </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>

  <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
    <LinearGradientBrush.GradientStops>
      <GradientStop Color="#F8D28F"/>
      <GradientStop Color="White" Offset=".3" />
    </LinearGradientBrush.GradientStops>
  </LinearGradientBrush>
</UserControl.Resources>

Then, use a Grid to hold two Border objects; one contains the image and the text label, and the other is a half-opaque, white filled Border that we use when the button is disabled.

<Grid>
  <Border x:Name="MainBorder" BorderThickness="1" CornerRadius="1" MouseEnter="Border_MouseEnter" MouseLeave="Border_MouseLeave" MouseLeftButtonUp="Border_MouseLeftButtonUp" Cursor="Hand" Margin="1">
    <StackPanel Orientation="Horizontal" Margin="5,1,5,1">
      <Image x:Name="BorderImage" Width="16" />
      <TextBlock x:Name="BorderTextBlock" Style="{StaticResource blackText}" Margin="5" />
    </StackPanel>
  </Border>
  <Border Background="#B2FFFFFF" x:Name="DisabledBackground" BorderThickness="1" CornerRadius="2" BorderBrush="#B2FFFFFF" Visibility="Collapsed" />
</Grid>

Next, wire up the IsEnabled, ToolTip, ImageSource, and Caption properties, and implement the hover and click functionality. Note that these properties are backed by dependency properties on the objects we defined in our Xaml.

public partial class ToolbarButton : UserControl
{
  bool m_IsEnabled = true;

  public new bool IsEnabled
  {
     set
     {
       MainBorder.Background = null;
       MainBorder.BorderBrush = null;
       DisabledBackground.Visibility = (value) ? Visibility.Collapsed : Visibility.Visible;
     }
  }  

  public string ToolTip
  {
    get { return ToolTipService.GetToolTip(MainBorder).ToString();}
    set { ToolTipService.SetToolTip(MainBorder, value);}
  }

  public ImageSource ImageSource
  {
    get { return BorderImage.Source;}
    set { BorderImage.Source = value;}
  }

  public string Caption
  {
    get { return BorderTextBlock.Text;}
    set { BorderTextBlock.Text = value;}
  }

  public bool IsToggleButton { get; set; }
  public bool IsToggled { get; set; }

  public event MouseButtonEventHandler Clicked;

  public ToolbarButton()
  {
    InitializeComponent();
  }

  private void Border_MouseEnter(object sender, MouseEventArgs e)
  {
    //if we're a toggle button and we're on...
    if (this.IsToggleButton && this.IsToggled)
      return;

    Border b = sender as Border;

    b.Background = Resources["HoverBrush"] as Brush;
    b.BorderBrush = new SolidColorBrush(ColorHelper.FromHexString("FFCA8103"));
  }

  private void Border_MouseLeave(object sender, MouseEventArgs e)
  {
    //if we're a toggle button and we're on...
    if (this.IsToggleButton && this.IsToggled)
      return;

    Border b = sender as Border;

    b.Background = null;
    b.BorderBrush = null;
  }

  private void Border_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
  {
    if (!m_IsEnabled)
      return;

    if (this.IsToggleButton)
    {
      this.IsToggled = !this.IsToggled;

      //set state
      Border b = sender as Border;
      b.Background = (this.IsToggled) ? Resources["PressedBrush"] as Brush : Resources["HoverBrush"] as Brush;
    }

    if (this.Clicked != null)
      this.Clicked(sender, e);
  }
}

Finally, in your container Xaml, use the ToolbarButton class inside a StackPanel with Orientation set to Horizontal:

<StackPanel Orientation="Horizontal">
  <local:ToolbarButton ImageSource="/Resources/board.png" Caption="Add Whiteboard" Clicked="AddWhiteboard_Click" Margin="1" />
  ...
</StackPanel>

default DateTime parameters to an old date, never NULL

you want to use:

CREATE PROCEDURE …
@StartDate = ‘1/1/2000’

not

CREATE PROCEDURE …
@StartDate = NULL

the reason for this is that if you use NULL, you have to put WHERE (@StartDate IS NULL OR DateValue > @StartDate) in your where clause, which screws your query optimization. if you default to an old date, you can just put WHERE (DateValue > @StartDate) so the optimizer will be happy—

beware API overloads

on business object methods like Consumer.UpdateConsumer() we have several overloads that let you update only a few specific Consumer properties. for example, there’s one overload that takes a CustomerStatusId, another that takes a WhereHeard and a CustomerStatusId, etc. these overloads all call a common, private updateConsumer() function that takes care of the database update, and they pass in the object’s properties for the fields you are not updating, so that the original values are preserved.

however, this means that if you call an overload that takes multiple parameters, any value you pass in as a parameter will be used for the database update. so passing in “null” or empty string will update the database with “null” or empty string for that field, which may not be your intention--

beware maxBufferSize, maxReceivedMessageSize, and maxStringCotentLength when adding service reference in VS2008

when you add a service reference in VS2008, you end up with a entry in your applications app.config file. this element contains binding elements for each service you add.

BEWARE: the default value for three critical attributes, maxBufferSize, maxReceivedMessageSize, and maxStringCotentLength, is set considerably low (64KB). we have hit this problem more than once now with deployed software, and unfortunately the only way to correct it is to adjust these values in app.config and re-distribute the software. so if you think there is even the slightest chance that your service will be returning more than 64KB in data, be sure to adjust these values after you add the service reference.

Tutor.com Classroom How-To #10: manually detecting and installing the Silverlight plug-in

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

Use the isInstalled() function provided by Silverlight.js:

<script language="javascript" type="text/javascript">

Silverlight.InstallAndCreateSilverlight = function(version)
{
  var retryTimeout = 1000; //the interval at which instantiation is attempted(ms)
  if (Silverlight.isInstalled(version))
  {
    ...
  }
  else if (!Silverlight.isInstalled(version))
  {
    TimeoutDelegate = function()
    {
      Silverlight.InstallAndCreateSilverlight(version);
    }

    setTimeout(TimeoutDelegate, retryTimeout);
  }
}

Silverlight.InstallAndCreateSilverlight('2.0.30923.0');

</script> 

Tutor.com Classroom How-To #9: creating a Path object from a Stroke

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

Simply transfer Stroke stylus points to a PolyLineSegment on a Path:

static Path getPathFromStroke(Stroke str)
{
  //make a path from this stroke
  Path path = new Path();
  PathGeometry pg = new PathGeometry();

  //start our figure from the first stylus point in the stroke
  PathFigure fg = new PathFigure();
  fg.Segments = new PathSegmentCollection();
  fg.StartPoint = new Point(str.StylusPoints[0].X, str.StylusPoints[0].Y);

  PolyLineSegment seg = new PolyLineSegment();

  //add each additional stylus point to the line segment
  for (int x = 1; x < str.StylusPoints.Count; x++)
    StylusPoint sp = str.StylusPoints[x];

  seg.Points.Add(new Point(sp.X, sp.Y));

  fg.Segments.Add(seg);

  pg.Figures = new PathFigureCollection();
  pg.Figures.Add(fg);

  path.Data = pg;

  return path;
}

Tutor.com Classroom How-To #8: trapping and processing mouse movement in an InkPresenter

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

In the MouseDown event, instantiate a module-level Stroke object (e.g. m_DrawingStroke) to collect points traversed by the mouse. Fire the StrokeAdded event so that listeners can prepare for the operation as necessary. Most importantly, call CaptureMouse() to notify the mouse input engine to give you high frequency mouse event notifications.

void Whiteboard_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
  //get our current position
  Point p = e.GetPosition(this);

  //create a new styluspoint collection for our new stroke
  StylusPointCollection coll = new StylusPointCollection();
  coll.Add(new StylusPoint() { X = p.X, Y = p.Y });

  m_DrawingStroke = new Stroke(coll);

  //fire notification event
  if (this.StrokeAdded != null)
    this.StrokeAdded(m_DrawingStroke);

  //begin capturing mouse input
  this.CaptureMouse();
}

In MouseMove, add the traversed point to the Stroke’s StylusPoints collection, and fire the StrokeChanging event to alert interested listeners.

void Whiteboard_MouseMove(object sender, MouseEventArgs e)
{
  //get our current position
  Point p = e.GetPosition(this);

  //add the traversed point to our collection
  StylusPoint sp = new StylusPoint() { X = p.X, Y = p.Y };
  m_DrawingStroke.StylusPoints.Add(sp);

  //fire notification event
  if (this.StrokeChanging != null)
    this.StrokeChanging(m_DrawingStroke);
}

In MouseUp, release mouse capture and fire the StrokeComplete event.

void Whiteboard_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
  //release mouse capture
  this.ReleaseMouseCapture();

  //fire notification event
  if (this.StrokeComplete != null)
    this.StrokeComplete(m_DrawingStroke);
}

Tutor.com Classroom How-To #7: screen-scraping an application via Win32 PrintWindow() API

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

In the WPF application, we make calls to the PrintWindow() Win32 API to gather screen contents. We then splice the return bitmap into a 4x4 grid and compare hashes of each of the slices with the previous slices’ hashes. If a slice has changed, we package up its bytes and ship it across the wire.

There are two key components to making this process of screen scrape, comparison, and messaging fast enough to run each second without overburdening the CPU. The first is that the entire process runs on a thread pool thread via a timer, which frees up the GUI. The second is that our Bitmap uses the Format32bppArgb pixel format, which uses more memory but optimizes performance of PrintWindow() calls.

[DllImport("user32.dll", SetLastError = true)]
static extern bool PrintWindow(IntPtr hwnd, IntPtr hDC, uint nFlags);

void processCapture()
{
  using (Graphics g = Graphics.FromImage(captureBitmap))
  {
    //get window content
    IntPtr hdc = g.GetHdc();
    try
    {
      result = PrintWindow(m_Win32HostHandle, hdc);
    }
    finally
    {
      g.ReleaseHdc(hdc);
    }

    //process captureBitmap
    ...
  }
}

Tutor.com Classroom How-To #6: creating a horizontal WrapPanel that is transform-aware and exposes row and column counts

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

Begin by deriving from Panel, which is the base class for container controls, and override the MeasureOverride() and ArrangeOverride() functions. These functions are called iteratively as the layout engine determines how to distribute available visual space. Have them call a custom function that takes either the available size (from the measure pass) or the final size (from the arrange pass), and a ShouldArrange parameter to specify which pass is processing, and returns a Size.

private Size measureAndOptionallyArrangeItems(Size size, bool ShouldArrange)
{
  Point point = new Point(0, 0);
  Size s = new Size(size.Width, 0);

  //consider scale transform that might be affecting us
  double xfactor = 1;
  double yfactor = 1;
  if (this.RenderTransform != null)
  {
    if (this.RenderTransform is ScaleTransform)
    {
      ScaleTransform st = (ScaleTransform)this.RenderTransform;

      xfactor = st.ScaleX;
      yfactor = st.ScaleY;
    }
}

  double largestHeight = 0.0;

  this.Rows = 0;
  this.Cols = 0;

  foreach (UIElement child in Children)
  {
    if (child.DesiredSize.Height > largestHeight)
      largestHeight = child.DesiredSize.Height;

    //first row?
    if (this.Rows == 0)
      this.Rows = 1;

    double desiredWidth = child.DesiredSize.Width;

    //does this child cause us to wrap?
    if (point.X > 0 && point.X + desiredWidth > size.Width * (1 / xfactor))
    {
      this.Rows++;

      s.Height += largestHeight * yfactor;

      //goto the next line
      point.X = 0;
      point.Y += largestHeight;
      largestHeight = child.DesiredSize.Height;

      if (ShouldArrange)
        child.Arrange(new Rect(point, new Point(point.X + desiredWidth, point.Y + child.DesiredSize.Height)));

      //set our current location in this new line
      point.X = desiredWidth;
    }
    else
    {
      if (ShouldArrange)
        child.Arrange(new Rect(point, new Point(point.X + desiredWidth, point.Y + child.DesiredSize.Height)));

      point.X = point.X + desiredWidth;

      //if we're doing first row, set columns
      if (this.Rows == 1)
        this.Cols++;
    }
  }

  s.Height += largestHeight * yfactor;

  return s;
}

Tutor.com Classroom How-To #5: providing automatic reader-to-writer lock upgrade

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

Create a class that contains a module-level System.Threading.ReaderWriterLock (e.g. m_Lock) and wrap the AcquireReaderLock() function. Then create an AcquireWriterLock() function that returns a LockCookie wrapper (SafeLockCookie), checks to see if the read lock is held, and upgrades if necessary, and a ReleaseWriterLock()function that processes the SafeLockCookie and releases the lock or downgrades back to read:

public SafeLockCookie AcquireWriterLock()
{
  //if we have a read lock, upgrade
  if (m_Lock.IsReaderLockHeld)
  {
    return new SafeLockCookie(m_Lock.UpgradeToWriterLock(TIMEOUT_MS));
  }
  else
  {
    m_Lock.AcquireWriterLock(TIMEOUT_MS);
  return null;
  }
}

public void ReleaseWriterLock(SafeLockCookie SafeLockCookie)
{
  //do we need to downgrade?
  if (SafeLockCookie != null)
  {
    m_Lock.DowngradeFromWriterLock(ref SafeLockCookie.LockCookie);
  }
  else
  {
    m_Lock.ReleaseWriterLock();
  }
}

Then have calling functions request write locks by storing a SafeLockCookie when requesting the lock and returning it when releasing:

SafeLockCookie lc = m_Lock.AcquireWriterLock();
try
{
  ...
}
finally
{
  m_Lock.ReleaseWriterLock(lc);
} 

Tutor.com Classroom How-To #4: enforcing an MVC-style architecture

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

The benefits of MVC-style architecture are numerous: testability, modifiability, simplicity of design, etc., and WPF/Silverlight Xaml “binding” provide an ideal structure to effectively detach the front-end from middle-tier business objects.

One simple way to enforce MVC-style architecture is to put classes with distinct responsibilities in separate assemblies, and add the minimal set of references only as required by each assembly. This enforces the principle of separation of concerns, since you’ve actually made it impossible for code in one assembly to be concerned with the business of another if it shouldn’t!

Tutor.com Classroom How-To #3: specifying "End-Of-Message" to a TCP/IP listener

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

Since a TCP/IP Listener is constantly in a listening state, the Listener needs to know when to act on the bytes received. To accomplish this, listen first for 8 ASCII bytes that represent two 32-bit integers specifying the number of bytes the sender is sending, and then continue listening until receiving this number of bytes. This is an easier solution to implement than using a delimiter to specify end-of-message, since you don’t have to worry about delimiter escaping, and since you can specify the exact number of bytes to listen for via the third parameter to SocketAsyncEventArgs.SetBuffer().

Tutor.com Classroom How-To #2: connecting to a TCP/IP Listener

These How-To tips are taken from The Tutor.com Classroom: Architecture and techniques using Silverlight, WPF, and the Microsoft .NET Framework.

You can check out the Silverlight Tutor.com Classroom in "practice" mode, although the real experience is with a live tutor on the other side!

Using the Socket class, we just need to create a SocketAsyncEventArgs and call ConnectAsync(). Notice an example of the “#if WPF” directive for subtle Silverlight/WPF differences (as described in the "Code Sharing" post) when we set the SocketAsyncEventArgs RemoteEndPoint.

public void Connect(string host, int port)
{
  //instantiate socket
  m_Socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);

  //set up endpoint
#if WPF
    m_SocketSendArgs.RemoteEndPoint = new IPEndPoint(Dns.GetHostAddresses(host)[0], port);
#else
    m_SocketSendArgs.RemoteEndPoint = new DnsEndPoint(host, port);
#endif

  //set up args
  SocketAsyncEventArgs args = new SocketAsyncEventArgs();

  args.UserToken = m_Socket;
  args.RemoteEndPoint = m_SocketSendArgs.RemoteEndPoint;
  args.Completed += new EventHandler(OnConnect);

  m_Socket.ConnectAsync(args);
}