Every one knows that when different threads write to the same data structure they need to be synced.

Lets assume we have a Service that exposed a single function Add which added the value received to a List.

   1: public class ListWrapper

   2: {

   3:     private readonly List<int> m_list =new List<int>();

   4:

   5:     public void Add(int i)

   6:     {

   7:         m_list.Add(i);

   8:     }

   9: }

In order to make it thread safe we would simply lock the List so if multiple thread try to access this function they will add their values to the list each at a time.

   1: public void Add(int i)

   2: {

   3:     lock (m_list)

   4:     {

   5:         m_list.Add(i);

   6:     }

   7: }

For 99.9% of the applications this is a good solution.

Lets look at the following code:

   1: private static object m_locker = new object();

   2: static void Main(string[] args)

   3: {

   4:     for (int i = 0; i < 50; i++)

   5:     {

   6:         int iLocal = i;

   7:         Task.Factory.StartNew(() =>

   8:                                   {

   9:                                       lock (m_locker)

  10:                                       {

  11:                                           Console.WriteLine(iLocal);

  12:                                       }

  13:                                   });

  14:     }

  15:     Console.ReadLine();

  16: }

What do you think will be printed to the screen? If you though we are going to see the numbers 0-49 in order you are very wrong…

Here is one of the results of running this code:

Chaos!

Look at 3 its almost at the end! while 10-30 are neatly ordered.

This is due to the fact that lock() does not keep order, you never know which thread will get the priority to work.

Now that we know not to count on lock to keep our threads in line there is one more thing to notice here.

This test was with 50 calls. What if this was a web server that handles many calls a second 24/7? Since lock() does not offer any promise of order, there is a chance that some of the threads will stay “stuck” in that lock statement for a long time and possibly forever! In many applications this is not a problem but sometimes it means there is a desperate user on the other side trying to understand what went wrong…

So in conclusion :

1. Don’t count on the lock() statement to keep your threads in order
2. The lock() statement is not good enough for heavily multithreaded critical sections.

Did this ever cause any trouble to you? if so please comment.

Thanks

Amit

Hi

I you worked with the WebBrowser control you probably met the following popup:

I have started to use the WPF WebBrowser control in some of my applications but when I tried to disable the script errors I had a small problem the property WebBrowser.ScriptErrorsSuppressed  was not there, bummer…

After some research I have come up with a new solution. It involves injecting each webpage we display a small piece of JavaScript which catches those errors and ignores them.

Here is how it is done:

This is the java script we are injecting:

   1: function noError() 

   2: {

   3:     return true;

   4: } 

   5: window.onerror = noError;

And now The way to inject the script to the WebBrowser control:

   1: private void InjectDisableErrorScript()

   2: {

   3:     var doc = Browser.Document as HTMLDocument;

   4:     if (doc != null)

   5:     {

   6:         //Create the sctipt element

   7:         var scriptErrorSuppressed = (IHTMLScriptElement)doc.createElement("SCRIPT");

   8:         scriptErrorSuppressed.type = "text/javascript";

   9:         scriptErrorSuppressed.text = m_disableScriptError;

  10:         //Inject it to the head of the page

  11:         IHTMLElementCollection nodes = doc.getElementsByTagName("head");

  12:         foreach (IHTMLElement elem in nodes)

  13:         {

  14:             var head = (HTMLHeadElement)elem;

  15:             head.appendChild((IHTMLDOMNode)scriptErrorSuppressed);

  16:         }

  17:     }

  18: }

Don’t forget to do this every time before you navigate.

That’s it! Now you are script error free.

Enjoy

Amit

IList<double> doubles = new List<double> {22.123, 400.12, 100.22};
foreach (int number in doubles)
{
    Console.WriteLine("The Current Number Is : {0}", number);
}

Can you see the bug in that code? We convert all of the doubles in the list to integers, truncating them. I was very surprised that the compiler didn’t warn me about this issue, especially because the compiler would not let me write this code:

double someDouble = 22.523;
int someInt = someDouble;

An explicit conversion is necessary here:

int someInt = (int)someDouble;

What is the difference between those two cases? Can’t I expect a uniform behavior from the compiler? The reason is probably historic - before C# 2.0 which introduced us with Generics, all of the containers held their items as objects. If the foreach statement didn’t automatically do the conversion, the user would have to explicitly cast every item in the collection from object…

ArrayList array = new ArrayList {"moshe", "levi"};
foreach (object obj in array)
{
    string str = obj as string;
    if (str != null)
       Console.WriteLine("The Current element is {0}", str);
}

In most cases, the collection items are of the same type so in order to reduce the explicit conversion effort, the C# developers decided to do an automatic conversion for us. If we test the MSIL which is generated for the foreach statement, we can clearly notice to the “injected” code which is responsible for the conversion:

Now that we understand what happens, here is a way to avoid those kinds of bugs. Using the var keyword, we can ask the compiler to define the type of the collection item according to its value. Here it is:

IList<double> doubles = new List<double> {22.123, 400.12, 100.22};
foreach (var number in doubles)
{
    Console.WriteLine("The Current Number Is : {0}", number);
}

By changing this code, the compiler is responsible for determining the type of “number”. In most cases, that is exactly what we want…

The nine rectangles use the same RadialGradienBrush but each rectangle is a little darker than previous. You can create these 9 different brushes in your favorite design tool (Expression Blend, etc.). But what if you need to change the base color later or you just need to make the brush user-configurable? Like in these samples:

The better approach would be to define the base brush once and then change it’s brightness in code. Unfortunately there’s no built-in way to change brightness of the Brush or Color in WPF. This is what we are going to address in this article.

Hue, Saturation, Brightness

System.Windows.Media.Color structure represents colors as 4 channels: alpha (opacity) channel and 3 channels for each core color (red, green and blue). aRGB color space is good for representing colors but it’s quite problematic to control such properties as brightness with these 4 channels. We will convert our colors to and from a HSB color space which is good at exactly what we need – controlling such perceptual color characteristics as hue, saturation and brightness. To do this we create a new class called HSBColor defined like this:

   1: public class HSBColor

   2: {

   3:     public double H { get; set; }

   4:     public double S { get; set; }

   5:     public double B { get; set; }

   6:     public byte A { get; set; }

   7: 

   8:     public static HSBColor FromColor(Color rgbColor)

   9:     {

  10:         HSBColor result = new HSBColor();

  11: 

  12:         // preserve alpha

  13:         result.A = rgbColor.A;

  14: 

  15:         // convert R, G, B to numbers from 0 to 1

  16:         double r = rgbColor.R / 255d;

  17:         double g = rgbColor.G / 255d;

  18:         double b = rgbColor.B / 255d;

  19: 

  20:         double max = Math.Max(r, Math.Max(g, b));

  21:         double min = Math.Min(r, Math.Min(g, b));

  22: 

  23:         // hue

  24:         if (max == min)

  25:             result.H = 0;

  26:         else if (max == r)

  27:             result.H = (60 * (g - b) / (max - min) + 360) % 360;

  28:         else if (max == g)

  29:             result.H = 60 * (b - r) / (max - min) + 120;

  30:         else

  31:             result.H = 60 * (r - g) / (max - min) + 240;

  32: 

  33:         // saturation

  34:         if (max == 0)

  35:             result.S = 0;

  36:         else

  37:             result.S = 1 - min / max;

  38: 

  39:         // brightness

  40:         result.B = max;

  41: 

  42:         return result;

  43:     }

  44: 

  45:     public Color ToColor()

  46:     {

  47:         Color result = new Color();

  48: 

  49:         result.A = this.A;

  50: 

  51:         int hi = (int)Math.Floor(this.H / 60) % 6;

  52:         double f = this.H / 60 - Math.Floor(this.H / 60);

  53: 

  54:         double p = this.B * (1 - this.S);

  55:         double q = this.B * (1 - f * this.S);

  56:         double t = this.B * (1 - (1 - f) * this.S);

  57: 

  58:         switch (hi)

  59:         {

  60:             case 0:

  61:                 result.R = (byte)(this.B * 255);

  62:                 result.G = (byte)(t * 255);

  63:                 result.B = (byte)(p * 255);

  64:                 break;

  65:             case 1:

  66:                 result.R = (byte)(q * 255);

  67:                 result.G = (byte)(this.B * 255);

  68:                 result.B = (byte)(p * 255);

  69:                 break;

  70:             case 2:

  71:                 result.R = (byte)(p * 255);

  72:                 result.G = (byte)(this.B * 255);

  73:                 result.B = (byte)(t * 255);

  74:                 break;

  75:             case 3:

  76:                 result.R = (byte)(p * 255);

  77:                 result.G = (byte)(q * 255);

  78:                 result.B = (byte)(this.B * 255);

  79:                 break;

  80:             case 4:

  81:                 result.R = (byte)(t * 255);

  82:                 result.G = (byte)(p * 255);

  83:                 result.B = (byte)(this.B * 255);

  84:                 break;

  85:             case 5:

  86:                 result.R = (byte)(this.B * 255);

  87:                 result.G = (byte)(p * 255);

  88:                 result.B = (byte)(q * 255);

  89:                 break;

  90:         }

  91: 

  92:         return result;

  93:     }

  94: }

The algorithm behind these conversions could be found in this Wikipedia article.

Now all we need to do is modify brightness of every color used in our brushes.

SetBrightness() Extension Method

We will create an extension method for Brush class which creates a new brush based on the original brush but with new brightness applied. Our method will support all Color based brushes such as SolidColorBrush, LinearGradientBrush and RadialGradientBrush. For all other brush types our method will just return the clone of the original brush.

With SolidColorBrush we are going to set brightness on the color set in it’s Color property and for GradientBrush(es) – on Color property of each GradientStop. So, enough talking – here’s the code:

   1: public static Brush SetBrightness(this Brush original, double brightness)

   2: {

   3:     if (brightness < 0 || brightness > 1)

   4:         throw new ArgumentOutOfRangeException("brightness",

              "brightness should be between 0 and 1");

   5: 

   6:     Brush result;

   7: 

   8:     if (original is SolidColorBrush)

   9:     {

  10:         HSBColor hsb = HSBColor.FromColor(((SolidColorBrush)original).Color);

  11:         hsb.B = brightness;

  12:         result = new SolidColorBrush(hsb.ToColor());

  13:     }

  14:     else if (original is GradientBrush)

  15:     {

  16:         result = original.Clone();

  17:         // change brightness of every gradient stop

  18:         foreach (GradientStop gs in ((GradientBrush)result).GradientStops)

  19:         {

  20:             HSBColor hsb = HSBColor.FromColor(gs.Color);

  21:             hsb.B = brightness;

  22:             gs.Color = hsb.ToColor();

  23:         }

  24:     }

  25:     else

  26:     {

  27:         result = original.Clone();

  28:     }

  29: 

  30:     return result;

  31: }

Using the Method

Let’s look at a simple usage scenario. We will create those 9 rectangles pictured above. The window’s XAML looks like this:

   1: <Window x:Class="Brightness.Window2"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     Title="Window2" Height="250" Width="300" Background="#333333"

   5:     Loaded="Window_Loaded">

   6:     <Window.Resources>

   7:         <Style x:Key="RectangleStyle" TargetType="Rectangle">

   8:             <Setter Property="RadiusX" Value="10" />

   9:             <Setter Property="RadiusY" Value="10" />

  10:             <Setter Property="Margin" Value="5" />

  11:         </Style>

  12:     </Window.Resources>

  13:     <UniformGrid x:Name="mainGrid" Margin="30">

  14:         <Rectangle Style="{StaticResource RectangleStyle}">

  15:             <Rectangle.Fill>

  16:                 <RadialGradientBrush GradientOrigin="-0.3 -0.3">

  17:                     <GradientStop Color="#ffffff" Offset="0" />

  18:                     <GradientStop Color="#0000FF" Offset="1" />

  19:                 </RadialGradientBrush>

  20:             </Rectangle.Fill>

  21:         </Rectangle>

  22:         <Rectangle Style="{StaticResource RectangleStyle}" />

  23:         <Rectangle Style="{StaticResource RectangleStyle}" />

  24:         <Rectangle Style="{StaticResource RectangleStyle}" />

  25:         <Rectangle Style="{StaticResource RectangleStyle}" />

  26:         <Rectangle Style="{StaticResource RectangleStyle}" />

  27:         <Rectangle Style="{StaticResource RectangleStyle}" />

  28:         <Rectangle Style="{StaticResource RectangleStyle}" />

  29:         <Rectangle Style="{StaticResource RectangleStyle}" />

  30:     </UniformGrid>

  31: </Window>

The first rectangle has it’s Fill property set to a RadialGradientBrush and all other rectangles have no fill at all. In the Window_Loaded event handler we just take the brush of the first rectangle and apply it to all other rectangles with different brightness.

   1: private void Window_Loaded(object sender, RoutedEventArgs e)

   2: {

   3:     Brush mainBrush = (mainGrid.Children[0] as Rectangle).Fill;

   4:     for (int i = 1; i < 9; i++)

   5:     {

   6:         (mainGrid.Children[i] as Rectangle).Fill = 

               mainBrush.SetBrightness(1 - i / 10d);

   7:     }

   8: }

And that’s it.

Final thoughts

Rather than creating an extension method it would be nice to create a custom Brush that would take another “standard” brush and apply specified brightness to it. This would allow animation of Brightness property resulting in nice fade-in and out effects (for example). Unfortunately Microsoft has implemented abstract Brush class in such a way that no 3rd party can inherit from it. Some of the abstract methods in the Brush class are also declared as internal so there’s no way we can implement them. I hope they had a good reason for doing this. Otherwise it doesn’t make much sense.

Representational state transfer (REST) is a style of software architecture for distributed hypermedia systems such as the World Wide Web. As such, it is not just a method for building "web services." The terms "representational state transfer" and "REST" were introduced in 2000 in the doctoral dissertation of Roy Fielding,[1] one of the principal authors of the Hypertext Transfer Protocol (HTTP) specification.

REST is a method of managing resources over HTTP. There are a number of methods of interacting with resources via REST.

Systems which follow Fielding’s REST principles are often referred to as "RESTful".

Our Basic Service

For the purpose of this post we are going to create a service that returns a product based on the requested product id.

Start by adding a new WCF service to your project. We’ll call it Products.

Change the interface that is generated to look like this:

   1: [ServiceContract]

   2: public interface IProducts 

   3: {

   4:     [OperationContract]

   5:     [WebInvoke(Method = "GET",

   6:      ResponseFormat = WebMessageFormat.Json,

   7:      BodyStyle = WebMessageBodyStyle.Wrapped,

   8:      UriTemplate = "get/{id}")]

   9:     string Get(string id);

  10: }

In the above code we use the ServiceContract attribute to say that this interface is defining a service and makes the interface visible to WCF clients. We then define a method called Get. We mark this method with 2 attributes. First we use OperationContract. This just lets WCF know that this is a method of the service. Next we use WebInvoke. This means that the method is an invoke operation and maps it to an HTTP verb. In this case we have mapped it to the GET verb, specified we want our response to be JSON, and defined what to an URI will look like. The UriTemplate maps our id value to out method parameter.

   1: public class Products : IProducts 

   2: {

   3:     public string Get(string id) 

   4:     {

   5:         return "You requested product " + id;

   6:     }

   7: }

This next part is simple. We are just implementing our interface. Our method is pretty simple for demonstration purposes. We’ll just output the id value that we receive.

This next part that you need in your Web.config is important for your service to work. This maps the incoming requests to your services.

Calling Our API

So, now that our service is finished it is easy to call like http://yourdomain.com/Products.svc/get/123456. This is telling our service we want to use the Get method of the Products service and we are looking for product id 123456.

This will give us a response of:

{"GetResult":""You requested product 123456"}

Wrap Up

This is just a simple example of how to setup a RESTful web service quickly and easily by letting WCF take care of the plumbing and heavy lifting.

Stay tuned for more great posts from Dev102.com by grabbing the RSS feed. You can also see more posts I have written on my blog or grab my RSS feed.

I am sorry for the long absence but I just got married and went on a great honeymoon, so I was not around!

I hope things will start to pick up from now.

Just wanted to let you all know that we are back online, and to tell you that we have updated the Write Articles for Dev102.com page with some new features.

• Payment has gone up to 35$!
• We now have a free submission option where you can share articles and still be able to publish them elsewhere.

So go ahead and check it out!

Talk soon

Amit.

When working with WPF I always found myself thinking how to handle Data formatting when a WPF control was bound to it. Let’s look at the following example of a window with a TextBlock that displays a DateTime:

   1: <Window x:Class="BindingFormat.Window1"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     Title="Window1" Height="300" Width="300">

   5:     <Grid>

   6:         <TextBlock Text="{Binding}"></TextBlock>

   7:     </Grid>

   8: </Window>

And the code behind:

   1: public Window1()

   2: {

   3:     InitializeComponent();

   4:     DateTime d = DateTime.Now;

   5:     this.DataContext = d;

   6: }

Very Simple.

The outcome is this:

But what if we wanted to change the format of the DateTime? Before .NET 3.5 SP1 we had 2 options:

Adding a Property

That was the easiest and fastest way to make the data in the UI formatted in the way you wanted let’s say we wanted the DateTime to display like this: 11:49 2/5/2009, we would have done this:

   1: public Window1()

   2: {

   3:     InitializeComponent();

   4:     this.DataContext = this;

   5: }

   6: 

   7: public string Now

   8: {

   9:     get

  10:     {

  11:         return DateTime.Now.ToString("HH:MM d/M/yyyy");

  12:     }

  13: }

and have the UI bind to the Now property:

   1: <Window x:Class="BindingFormat.Window1"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     Title="Window1" Height="300" Width="300">

   5:     <Grid>

   6:         <TextBlock Text="{Binding Now}"></TextBlock>

   7:     </Grid>

   8: </Window>

The outcome is what we wanted:

I don’t like this way of work for 2 reasons:

1. It ads clutter to the code behind and mixes data and UI elements because the Now property is strictly UI but it resides in the Data of the application.
2. There is no way to reuse it, we would have to duplicate the property anywhere we need to display this particular format.

Using a ValueConverter

This is a much better way of work because it solves the 2 problems I had with the Property method of formatting data. Using a converter keeps UI logic in the UI, removes the clutter from the code behind and is reusable.

Here is how we do it:

First we add the converter:

   1: public class DateTimeConverter : IValueConverter

   2: {

   3:     #region IValueConverter Members

   4: 

   5:     public object Convert(object value, Type targetType, object parameter

   6:                         , System.Globalization.CultureInfo culture)

   7:     {

   8:         if (value is DateTime)

   9:         {

  10:             DateTime d = (DateTime)value;

  11:             return d.ToString("HH:MM d/M/yyyy");

  12:         }

  13:         return string.Empty;

  14:     }

  15: 

  16:     public object ConvertBack(object value, Type targetType, object parameter

  17:                             , System.Globalization.CultureInfo culture)

  18:     {

  19:         throw new NotImplementedException();

  20:     }

  21: 

  22:     #endregion

  23: }

Use it with the binding:

   1: <Window x:Class="BindingFormat.Window1"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:         xmlns:local="clr-namespace:BindingFormat"

   5:     Title="Window1" Height="300" Width="300">

   6:     <Window.Resources>

   7:         <local:DateTimeConverter x:Key="BindingCVR"/>

   8:     </Window.Resources>

   9:     <Grid>

  10:         <TextBlock Text="{Binding Converter={StaticResource BindingCVR}}"/>

  11:     </Grid>

  12: </Window>

And have the DataContext be DateTime.Now:

   1: public Window1()

   2: {

   3:    InitializeComponent();

   4:    DateTime d = DateTime.Now;

   5:    this.DataContext = d;

   6: }

And the outcome? Just as before:

The only drawback to this method is that it is takes more effort.

But we just got lucky..

Using Binding.StringFormat

In .NET 3.5 SP1 we got the StringFormat option in Binding!

This makes things so much easier All we have to do is have the Binding Expression look like this:

   1: <TextBlock Text="{Binding StringFormat='HH:MM d/M/yyyy'}"/>

And that’s it, no extra Properties and ValueConverters.

I could have copied the image again but trust me it gives the same outcome in a much more elegant way.

Do you have a different way of work? let me know.

Enjoy

Amit

This article was written by Alan Mendelevich

The Problem

Creating a shape with bullets on the joints of it’s segments sounds like a really trivial task at a first glance. Just plaster some bullets on top of the shape. And it is really something like this until you decide you want to have transparent outlined bullets or opaque bullets with transparent outline around them. Like the ones in this picture:

In raster scenarios this could be solved by simply deleting the pixels around the joint points but since we are talking about WPF or Silverlight (vector graphics) this is not an option.

If you have a simplistic figure like the first rectangle in the above picture you may think about just creating shorter lines for it’s sides. This is not a very complicated task. However in the second (triangle) example calculating the end points for the lines gets a little more complicated. And try doing this without a masters degree in mathematics for the third and fourth (bottom) examples utilizing arcs and Bezier curves.

The second option is to cheat a little. You can use background color for bullet’s fill or outline. This would work well on a solid color background. But what if you have a gradient background (like in our sample picture), image background or if your bullet falls on the edge of some object or the shape itself?

I have faced this issue when working on a line chart portion of amCharts for WPF and here’s how I solved it.

The Solution

The magic word for my solution is OpacityMask. To quote MSDN documentation what it does is:

Gets or sets an opacity mask, as a Brush implementation that is applied to any alpha-channel masking for the rendered content of this element.

In other words it lets you apply different levels of opacity to different portions of your element.

So, the general idea is to create an opacity mask which has zero opacity spots in place where we want to put our bullets and 100% opacity everywhere else. Below are the main parts of the implementation along with some small but very important details.

• We derive our BulletedPath class from the abstract Shape class. Path could’ve been a better base class candidate, but unfortunately it’s sealed.
• We add several bullet related dependency properties for controlling bullet shape, fill and outline.
• We add a Data property which will store PathGeometry defining our shape.

With all this done (you can see the implementation by downloading the source code for the control linked at the end of the article) we override OnRender method of our shape.

Here’s the method in it’s entirety and we’ll examine what it does below:

   1: protected override void OnRender(DrawingContext drawingContext)

   2: {

   3:     Pen shapePen = new Pen(this.Stroke, this.StrokeThickness);

   4:     shapePen.StartLineCap = this.StrokeStartLineCap;

   5:     shapePen.EndLineCap = this.StrokeEndLineCap;

   6:     shapePen.DashCap = this.StrokeDashCap;

   7:     shapePen.LineJoin = this.StrokeLineJoin;

   8:     shapePen.MiterLimit = this.StrokeMiterLimit;

   9:     shapePen.DashStyle = 

  10:         new DashStyle(this.StrokeDashArray, this.StrokeDashOffset);

  11:     // a create temporary drawing to find out 

  12:     // real bounds of our shape using specified pen

  13:     GeometryDrawing maskBoundsDrawing = 

  14:         new GeometryDrawing(Brushes.Black, shapePen, this.Data);

  15:     Rect bounds = maskBoundsDrawing.Bounds;

  16:     // create opacity mask for bullet holes

  17:     GeometryGroup holes = this.GetHoles();

  18:     RectangleGeometry maskRect = new RectangleGeometry(bounds);

  19:     Geometry maskGeometry = 

  20:         Geometry.Combine(maskRect, holes, GeometryCombineMode.Exclude, null);

  21:     GeometryDrawing maskDrawing = 

  22:         new GeometryDrawing(Brushes.Black, null, maskGeometry);

  23:     DrawingBrush maskBrush = new DrawingBrush(maskDrawing);

  24:     maskBrush.Stretch = Stretch.None;

  25:     // apply opacity mask

  26:     drawingContext.PushOpacityMask(maskBrush);

  27:     // draw main shape

  28:     drawingContext.DrawGeometry(this.Fill, shapePen, this.Data);

  29:     drawingContext.Pop();

  30:     // draw bullets

  31:     RenderBullets(drawingContext);

  32: }

  33:  

First we construct a pen to use for drawing the outline of our shape. Oddly enough Shape class doesn’t provide one property for setting the Pen. This is justified by the fact that it’s easier to set (and animate) individual properties of the pen on the whole shape object in XAML rather than creating a dedicated object for the outline pen.

This is understandable, however it would be really nice of Microsoft to provide a method to get a real Pen out of all these individual properties. This is a good candidate for an extension method, but that’s another story and for now we just construct the pen manually.

   1: Pen shapePen = new Pen(this.Stroke, this.StrokeThickness);

   2: shapePen.StartLineCap = this.StrokeStartLineCap;

   3: shapePen.EndLineCap = this.StrokeEndLineCap;

   4: shapePen.DashCap = this.StrokeDashCap;

   5: shapePen.LineJoin = this.StrokeLineJoin;

   6: shapePen.MiterLimit = this.StrokeMiterLimit;

   7: shapePen.DashStyle = 

   8:         new DashStyle(this.StrokeDashArray, this.StrokeDashOffset);

Now comes a tricky part.

We need to construct our opacity mask. Opacity mask is a Brush and it gets applied to the whole drawing area of the element. The size of that area depends not only on the geometry of our shape but on the size of it’s stroke, it’s miter, etc. For example if you have a line from point (0, 0) to (0, 100) and the StrokeThickness is set to 100 you’d get a line that (at the very least) occupies space from -50 to 50 on the Y-axis and it could be more dependent on the caps of that line and other settings. So, in order to get the final bounds of our shape before we actually draw it we create a temporary drawing using our actual pen settings and use it’s bounds as a rectangle area for our mask:

   1: GeometryDrawing maskBoundsDrawing = 

   2:     new GeometryDrawing(Brushes.Black, shapePen, this.Data);

   3: Rect bounds = maskBoundsDrawing.Bounds;

Then we get the geometries for our bullet holes (see the source code for details) and exclude them from our rectangular area. This way we get a geometry which is a rectangle with a holes in it.

   1: RectangleGeometry maskRect = new RectangleGeometry(bounds);

   2: Geometry maskGeometry = 

   3:     Geometry.Combine(maskRect, holes, GeometryCombineMode.Exclude, null);

Now we need to create a brush for our opacity mask from this geometry.

We create a GeometryDrawing using any opaque brush for it’s fill (Brushes.Black for example) and create a DrawingBrush from this drawing. It’s important to set brush’s Stretch property to None so it’s not distorted in any way.

   1: GeometryDrawing maskDrawing = 

   2:     new GeometryDrawing(Brushes.Black, null, maskGeometry);

   3: DrawingBrush maskBrush = new DrawingBrush(maskDrawing);

   4: maskBrush.Stretch = Stretch.None;

And now all that’s left is to push our opacity mask on a DrawingContext, draw our shape (opacity mask will make sure that there are holes on the junction points), pop the mask and draw the bullets:

   1: // apply opacity mask

   2: drawingContext.PushOpacityMask(maskBrush);

   3: // draw main shape

   4: drawingContext.DrawGeometry(this.Fill, shapePen, this.Data);

   5: drawingContext.Pop();

   6: // draw bullets

   7: RenderBullets(drawingContext);

And that’s it.

I’ve omitted implementations of the other reasonably trivial tasks like drawing the bullets from the article but you can always take a look at the implementation by downloading the source code of BulletedPath control.

You can download the binary control, C# source code and class reference from download section of my blog. It’s released under the BSD license so feel free to use and improve it.

About the author: Alan Mendelevich is a software developer from Vilnius, Lithuania. He has more than 10 years of professional software development experience for both Web and Windows. Currently he works as a lead developer on amCharts for WPF project – a charting control suite for WPF platform and SPAW Editor – open source web based WYSIWYG HTML editor control.

The error description was: “Parameters count mismatch“. Well, it didn’t help me a lot, but I thought that looking at the stack trace might be a good idea. So, here it is:

As you can see, there is nothing helpful here because the stack trace is full of .Net Framework methods, none of those methods are mine. Well after a whole day, trying to understand what happened, I figured out what was wrong. Take a look at the very simplified version of my code:

delegate void ChangeColorEventHandler(object sender, Color color);

private void ChangeColor(object sender, Color newColor)
{
    if(InvokeRequired)
    {
        BeginInvoke(new ChangeColorEventHandler(ChangeColor), newColor);
        return;
    }
    BackColor = newColor;
}

The ChangeColor method is changing the form back color on the UI thread. This method was called due to a server request, not because of a user action. Do you see what is wrong here? I didn’t set the sender as a parameter to the BeginInvoke method. That is it! It turns out that if you get this strange error, you probably called a BeginInvoke or Invoke methods with a wrong set of parameters. After changing my code to:

private void ChangeColor(object sender, Color newColor)
{
    if(InvokeRequired)
    {
        BeginInvoke(new ChangeColorEventHandler(ChangeColor), sender, newColor);
        return;
    }
    BackColor = newColor;
}

Everything was fine. Hope it would be helpful for some of you one day…

Hi

Recently I’ve been working on a set of custom WPF controls.

There are numerous good books and articles about WPF in general and some basic information on custom control development but I have yet to find a good article (or book) with in-depth coverage of custom control development in general and design-time related issues in particular.

I’ve done my share of custom ASP.NET control development (see ASP.NET Controls for amCharts http://www.amcharts.com/aspnet, or SPAW Editor ASP.NET Edition http://spaweditor.com), and actually the basic principles are not that different. However some things should be implemented in a totally different manner and it wasn’t really obvious to me where those differences start and what to do about them. I’ve spent quite some time figuring these things out, so I decided to share my findings here hoping that it would save someone some time which could be better spent implementing new features.

This article covers several areas related to WPF Designer related features/issues which are implemented using different means than you would use while building ASP.NET/WinForms controls.

Metadata Store and Separate Metadata Assembly

Some design-time related attributes like CategoryAttribute (which specifies grouping category in property grid) could be set on a property the “old-fashioned” way, but general approach has switched toward the Metadata Store. Metadata store is a mechanism used by WPF Designer to decouple design-time metadata from implementation.

Design-time metadata is deployed in separate specialized assemblies which should follow specific naming conventions in order for design tools to find and use them. You create an assembly with “.Design” appended to the main assembly name for general design-time metadata.

For example if you have an implementation assembly called MyLibrary.dll then design-time metadata should reside in MyLibrary.Design.dll. Specialized Visual Studio or Expression Blend metadata could be placed in additional MyLibrary.VisualStudio.Design.dll and MyLibrary.Expression.Design.dll.

In addition to general good design principles, separation of design-time metadata into specialized assemblies has one very practical implication, most of the new attribute classes are defined in the Microsoft.Windows.Design.dll. If you add a reference to this DLL to your implementation project users of your control will most likely get an exception like “Unable to install or run the application. The application requires that the assembly Microsoft.Windows.Design Version 3.5.0.0 be installed in the Global Assembly Cache (GAC) first. Since it’s not a part of normal .NET deployment runtime.

To create a metadata store, you create a new project, add a reference to Microsoft.Windows.Design.dll to it and create a class that implements IRegisterMetadata interface like this:

   1: namespaceMyLibrary.Design

   2: {

   3:     internal classMyLibraryMetadata : IRegisterMetadata

   4:     {

   5:         public void Register()

   6:         {

   7:AttributeTableBuilder builder = newAttributeTableBuilder();

   8:builder.AddCustomAttributes(typeof(MyClass)

   9:                                       ,newToolboxBrowsableAttribute(false));

  10:MetadataStore.AddAttributeTable(builder.CreateTable());

  11:         }

  12:     }

  13: }

The IRegisterMetadata interface requires you to implement only one method – Register(). In this method you create an instance of AttributeTableBuilder and add attributes to your classes, properties, methods, etc. one-by-one using AddCustomAttributes() method. Then you add this table to the MetadataStore.

Toolbox visibility

When you create a control library you will most likely create some classes deriving from Control class (or one of it’s derivatives), you don’t want then to show up in the Visual Studio toolbox along your main controls. In ASP.NET/WinForms you would use the ToolboxItem(false) attribute to achieve that. However the WPF designer pays no attention to this attribute. For the WPF designer you should use ToolboxBrowsableAttributefrom the Microsoft.Windows.Design namespace. You attach it to your classes like this:

   1:builder.AddCustomAttributes(typeof(MyClass)

   2:         , newToolboxBrowsableAttribute(false));

Toolbox icon

You can add toolbox icon for your controls using ThumbnailAttribute class. However this attribute was only added in .NET 3.5 Service Pack 1. So, you have to make a choice here, supporting .NET 3.5 without SP1 and earlier versions of the .NET Framework, or specifying different thumbnails for Visual Studio and Expression Blend.

A simple and version agnostic method is to add images named according to the specific naming convention of your project. The convention is to name an image in a form of ClassName.Icon.ext. So, if you have a class named MyControl, then your icon should be named MyControl.Icon.png (for example).

Collection editors

In previous .NET designer technologies you had to create a class derived from System.ComponentModel.Design.CollectionEditor if you wanted to allow users to add objects of more than one type to collections through the collection editor in Visual Studio. The approach is demonstrated in this CodeProject article.

In WPF this no longer works.

But fortunately you can achieve the same result just by setting NewItemTypesAttribute on your property. This is how it’s done. Suppose you have a property defined as a collection of brushes like this:

   1:List<Brush> MyBrushes;

And you want users to be able to add SolidColorBrush and LinearGradientBrush objects to this collection via collection editor in Visual Studio. You do this by attaching NewItemTypesAttribute attribute in Register method of your metadata class like this:

   1:builder.AddCustomAttributes(typeof(MyClass), "MyBrushes",

   2:     newNewItemTypesAttribute(typeof(System.Windows.Media.SolidColorBrush),

   3:     typeof(System.Windows.Media.LinearGradientBrush)));

   4: 

Conclusion

This article touched only some of the issues which developers new to WPF control development may encounter. As WPF gains more and more popularity eventually someone will write a good book and/or tutorial on the subject. Maybe someone already did and I just wasn’t lucky to find it. If so, please, let me know by commenting.

However there’s pretty detailed coverage of WPF designer extensibility in this MSDN library section  even though it’s is not written in a very narrative tutorial-like style.

Alan.

As a bonus to this article Alan has included a 50% discount coupon for the WPF charting controls (http://wpf.amcharts.com) he has been working on lately. All you have to do is enter “dev102” (without quotes) when ordering it.