My first impression so far has been "Oh my Metro".  I am not sure if I like it yet.


The menus are in all CAPS.  WHY IS THE IDE YELLING AT ME?


The color scheme is a bit washed out.  I am still trying to get used to this but it does telegraph to the code and designer as they are where your eyes go.  I could get in to this high contrast look if it were to splash color at the portion of the UI I were currently using.

WPF Control / Element selection works well and very fast.


The UI is very responsive.  If you remember Visual Studio 2008 (Ugh I still have to work in VS2008) clicking on a UI element in the designer renders properties in about a minute if you are lucky (and have ReSharper disabled).  Visual Studio 2012’s new IDE is very responsive.  Thank you!


Visual Studio 2012 adds List as an option for your DataSources if you are a drag and drop binding kinda guy.


The XAML Designer has some Blend functionality built right in now.  From the left: Zoom Level, Toggle Effects, Show Snap Grid,  Snap to Grid Lines, Snap to Snaplines, Show Annotations.

Toggle Effects

This allows you to turn off the special effects bound to controls.  This helps speed up the designer a great deal.


Allows you to view annotations about your WPF application (presumably from a sketchflow annotation).


The Solution Explorer looks Metrofied and adds a really useful Collapse All command and a Pending Changes filter command.

I am working on a project where I need to resize a bunch of raster images from miscellaneous sizes to fit within a certain frame.  More specifically, I need a bunch of icons for an iPhone application and I need them to fit within a 64px by 64px frame.  I found a bunch of Photo Shop scripts, some console apps, and a few spamware solutions.  I figured half an hour and I would have one that works well.  I was right.


So here is how the app works:

Drag and drop the graphics files you wish to resize into the application.  The files will show in the list view area.  Next, enter the Max Height and Max Width values and then click the Resize button.

The application will write the resized file next to your original with _MaxHeightxMaxWidth appended to the filename.  Original files are not modified in any way during this process. 

So if you found this blog post in hopes that you would find a quick and simple image resizer for free, here is the link to the binaries: 

A little about the application source code.  The application is a .NET 4.0 WPF application that follows the M-V-VM (MVVM) design pattern.  Since there is drag and drop support in the application there is a little code behind to support this.  The rest of the application follow the MVVM pattern.

There is a tiny image resizer class in the project that you are free to use.  This is located in the DevSQL.Imaging assembly. 

The source code can be found below.

Business Problem

Remote warehouses are not directly connected to the central office and thus are not connected to the ERP System (Microsoft Dynamics Ax 2009).  Employees at remote warehouses need to perform inventory transactions on iTouch devices and some of these transactions require a label to be printed on a Zebra label printer.  Label printing typically involves a centralized print server that formats and streams the print job to a Windows Print Queue.  Remote printing using a Microsoft Print Queue is not feasible across the internet.


The solution to this problem was to build  a simple Windows Service which self hosts a WCF service.  The Windows Service has the ability to function as both a server and a client.  The service can poll other services for print jobs, if the print job is local the job is sent to a local label printer, if the job is remote it is queued for a remote server to poll (via WCF Services).  Print jobs are archived which allows a user to load the Status Monitor application and reprint a label.

Users can reprint labels using the above status screen.

User’s can configure the print server, start and stop the service, and update the application using the configuration screen.

This software is written in .NET 4.0 using WPF/XAML as the UI.  The application implements the Model-View-ViewModel MVVM pattern.  The Windows Service is written in .NET 4.0 and self hosts a WCF Service.  Remote printing is implemented using WCF with client/server X.509 certificates for security.

Business Problem

Large companies have lots of facilities which need spare part inventory on hand.  Facility operators may not reorder parts in a timely fashion which can lead to a local shortage of equipment.  Some facilities may hoard equipment creating a local surplus of equipment.  Both extremes are costly to a company.


Provide a simple to use touch screen computer that detects when a part is leaving or entering the spare parts room.  Upon detection of the part the touch screen computer displays a ‘tag’ with information about the part.  The facility user can touch the tag on the screen and note the use of the part.  When parts come in for replenishment the facility user can notate the put away location of the part.  When are part is used inventory levels at MDSi are updated.  If the minimum stocking level is reached a reorder is automatically generated and shipped to the facility to keep the stocking level true.


RFID Client (Touch screen workstation)
This is the device with which the facility users interact.


The client is built with Microsoft .NET Framework 4.0 and uses Windows Presentation Foundation (WPF) to present the UX.  The client leverages the Model-View-ViewModel (MVVM) architectural pattern and is written in C#.  Communication to the home office is provided via WCF services.


RFID Tags are read via a Motorola XR-450 tag reader.  This reader was selected because it has a built in Windows CE operating system that allows us to write Mobile Embedded .NET applications to interact with the reader and with our WCF Services.  The RFID Client Workstation has a Windows Service written in C# and .NET 4.0 which continually polls the XR-450 reader for new tags.  The service exposes a .NET Remoting service which is consumed locally by the client UI.  Multicast events are thrown and the client system can respond to new tags accordingly.

RFID WCF Services
All RFID Clients communicate to a set of centralized web servers in an NLB farm.  The WCF Services provide a data exchange layer which provides caching by leveraging the AppFabric Cache feature of Windows Server 2008 R2.  Data is stored in a SQL 2008 R2 Cluster and the data is organized through Microsoft Dynamics AX 2009.  X++ and Business Connector code was created to interface through the ERP system and pass through all of the business rules configured in the Dyanmics Ax system.  In addition to using the .NET Business Connector and custom Dynamics Ax projects to manage the data, ADO.NET, Linq and C# is used in the creation of these services.

RFID Management Display
A Network Operation Center (NOC) application was created to provide real-time node (RFID Touch Screen Client) availability data.  This data is organized on a map and allows an operator to drill in to a workstation and remotely manage the system.


RFID Warehouse Printing
Tools were created to interface with the Microsoft Dynamics Ax 2009 ERP system which allow a warehouse employee to print RFID labels for items being shipped out for replenishment.  This system interfaces with the Zebra RZ 400 RFID Printer.  This application was created using WPF, WCF, MVVM.


RFID On-Site Inventory and Auditing Tool
This application allows a warehouse specialist to audit a sparing facility.  This application is written using WPF and .NET 4.0.  The application consumes the same WCF services provided for the RFID Client to connect to the ERP system.  The application allows a specialist to print labels via a wireless Zebra RP4T RFID Label printer.  Using this application a project coordinator can determine what inventory is needed on site and what can be returned for general usage to the Distribution Center (DC).  This allows for a quick and efficient auditing process.  The warehouse specialist does not need to know anything about the product, just scan the serial number and the application tells the specialist the disposition of the part based on the Min/Max settings in the ERP system.


RFID Node Creation Tool
The Node Creation Tool allows a support engineer to provision a remote RFID Touch Screen Client from a central location.  A support engineer can provision all of the standard configuration settings for Development, Test, and Production from the single tool.  This application was created with WPF, C#, WCF, MVVM.


RFID Online Spares Management Web Application
A Silverlight application was created to provide scaled down functionality for locations that do not have the RFID Touch Screen client installed.  Some locations need the ability to consume, count and audit their inventory without an RFID client.  In this case a laser barcode scanner is used to scan the RFID barcode.  This application was written in Silverlight 4.0, uses WCF Services, and employs the MVVM architectural pattern.


I had to build a small configuration screen for an over-the-internet printing solution for Microsoft Dynamics Ax.  The application has an image that I want the user to click with either the left or right mouse button to open the context menu.  This menu allows the user to start or stop the print engine service.


Left or right clicking opens the context menu.


Here is the XAML for the Image with Context Menu.

Note: MVVM Commanding is not used here for simplicity of this post.

In this XAML snippet I named the Image and consumed the MouseLeftButtonUp event on the Image.  I also added the context menu to the Image control and named the ContextMenu.

The code behind looks like this:

In this code, PlacementTarget indicates the UIElement that the context menu will pop out from.  In this case we just use the Image element itself as passed in to the event handler via the sender argument.

Next, you simply set IsOpen to true and the context menu will be displayed over the PlacementTarget.

So I needed to create a hover button.  The idea is that when the mouse rolls over the button the image will flip between a normal and ‘over’ version of the button image.  This is the same thing as old school image rollover code we have all used before.  There is an image that you use for a button in the ‘normal’ or ‘off’ state and when the mouse rolls over the image the picture changes to the ‘over’ or ‘on’ state.

It is pretty easy to do this statically.  Edit the button style, slap a couple of images in the ControlTemplate and tie that to the Normal and MouseOver visual states and you are done.

But what if you want to be able to use that same style for all your buttons and you want to be able to databind the Normal and MouseOver images?

This was pretty easy with a trick here or there.

First, we need to create a HoverButton class that inherits from the standard Button.  We need to do this because we need 2 new properties for our Normal and Over image url’s.

This is the button you will place on your design surface instead of the regular button.  This one gives us NormalImageUrl and the MouseOverImageUrl.  These properties we will set to the URL for the images we want to use for our normal state and mouse over state.

Next is the Style (see the zip file at the bottom of this post for the actual code).  Since the Style is so big, I will describe the important pieces to you.

First, your XAML that contains this style code needs to have a namespace reference to the HoverButton’s namespace.  I named mine local so you will see my TargetType set to local:HoverButton.

So the style starts out like this:

Note the TargetType in both instances is pointed to the local namespace and the HoverButton class name.  The real magic occurs in the ControlTemplate portion of the code.  Here there are several Visual States defined.  We are concered with two of them (feel free to extend this to the others also): Normal and MouseOver.

You will notice in each of the two Visual States we are concerned with there is a storyboard.  The StroryBoard executes when the visual state is entered.  So for example, when the button starts out it is in the Normal state.  When the control is rendered the Normal visual state causes the storyboard defined here to execute:


What happens here is that the StoryBoard sets the OverImage’s Visibility property to Collapsed and the NormalImage’s Visibility property to Visible. 

Before confusion sets in, scroll down to the bottom of the style.  You will see the two images we just discussed.

The two images defined inside the button’s visual surface are the actual images you will see at runtime.  Notice that we had to set the DataContext of the Image control to the property NormalImageUrl and MouseOverImageUrl and THEN set the Source property to {Binding}.  You need this little trick in order to allow databinding to convert the string based URL to an ImageSource.

So now we are good to go.  We can use our HoverButton like this:

So now you can specify the Normal and MouseOver images for your button.  The same style can be used for all these hover buttons, just specify the 2 images and you are set. 


Download File – HoverButtonSource







I was using Blend 4 to do some simple animations then copy and pasting the storyboard for use on other objects in my application.  When I executed the Begin() method on the storyboard I would get the following:

Cannot resolve TargetProperty (UIElement.RenderTransform).(CompositeTransform.TranslateY) on specified object.

My XAML was pretty basic.  I finally noticed that Blend had populated the RenderTransform property for me on the working objects.  When I cut and pasted and updated the target object I failed to add the render transform.  Doing so fixes the problem:


Not working:

So if you get this message it is basically telling you that you are missing the RenderTransform property on the target object.

This how-to will show you a few simple steps to making a clipping path in Blend 4.  Below is a mockup of my basic canvas (this is a PNG imported into Blend).  I want to make the green area visible and I want to clip the while rectangles out of the image.  Eventually, I will place some animated elements where the white rectangles are.

The first thing you want to do is to draw rectangles where you want the image to be visible.


Now that I have all of my purple rectangles drawn out I am ready to convert them to a clipping path.

Remember, the rectangles are the areas that will be visible on the clipped object.


Choose the direct select tool: image and select all of your rectangles.  Hold down the CTRL key and you can multi-select.  You can also select the rectangles from the Objects and Timeline window.


Choose Object | Path | Convert to Path from the Blend menu.  This converts all your rectangles to a path which we will in turn convert to a clipping path.


Next, go back to Object | Path on the menu and choose Make Compound Path.  This will make one complex path from your individual paths.


Now that you have one compound path select the Path object from the Objects and Timelines window.  Now you can go back to Object | Path and you have the option to Make Clipping Path.


Now you choose the object to clip and you will now have a clipped object (an image in my case). 


Here is the end result in the Blend designer:


And here is the nice clean XAML you generated (please note, for space constraints I truncated the path data in the Clip property):

So I went in and took 5 of the 6 new beta exams (the 6th one was the TS Exam for Web, that one was full and could not take it for free) and I am happy to say I passed 5 of the 5 I took.  I just need to take the Web TS and I should add Web Developer 4 and Enterprise Developer 4 to the MCPD.

Now my Microsoft Certifications look like this:

Pro: Designing and Developing Web Applications Using Microsoft .NET Framework 4.0
Apr 09, 2010

Pro: Designing and Developing Windows Applications Using Microsoft .NET Framework 4.0
Apr 08, 2010

TS: Microsoft .NET Framework 4, Accessing Data with ADO.NET
Apr 07, 2010

TS: Microsoft .NET Framework 4, Windows Communication Foundation Development
Apr 06, 2010

TS: Microsoft .NET Framework 4, Windows Applications Development
Apr 05, 2010