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.

What Will Our Plugin Do?

For this post I want to pick something that is fairly simple yet demonstrates the power of plugins. For this post I am going to show you how to create a plug-in that will highlight keywords in a given block of text. Many websites use something similar when performing searches.

The Anatomy Of A Plugin

A good guideline to follow when creating the file for your plug-in is use the following convention: jquery.pluginName.js. Keeping this in mind lets create a file called jquery.hightlight.js. Now in our main HTML file we should have something like the following.

   1: <html>

   2: <head>

   3:     <title>My jQuery Plugin</title>

   4: </head>

   5: <body>

   6:     <div class="mytext">

   7:         This is some text that contains some words that I want to

   8:         highlight using my jQuery plug-in. This plug-in will highlight

   9:         all instances of the one or more words it is

  10:         given.

  11:     </div>

  12:     <script type="text/javascript" src="jquery-1.3.2.js"></script>
   3:     <script type="text/javascript" src="jquery.plugin.js"></script>

   3:     <script type="text/javascript"></script>

  13: </body>

  14: </html>

In jquery.highlight.js we will create the shell of our plug-in.

   1: (function($)

   2: {

   3:     $.fn.highlight = function(words, options)

   4:     {

   5:         var defaults = { };

   6:         var options = $.extend(defaults, options);

   7:         if(typeof words == 'string')

   8:         {

   9:             words = [ words ];

  10:         }

  11:         return this.each(function() { });

  12:     };

  13: })(jQuery);

In the above code we are passing the jQuery object into our plug-in so we can extend it. It is recommend that you use jQuery instead of $ to avoid conflicts with other libraries.

Plugins always extend the fn object of jQuery as you can see where we created $.fn.highlight. Next we created a defaults object which we will fill out later on and then merge the defaults with the passed in options. On the next line we check to see of the words object is a string. If it is we turn it into an array. This way the plug-in will accept a single word as a string or an array of words to be highlighted. Finally, we return the this object which contains all the elements that jQuery found that met the selector we used. Before the plug-in returns it loops over each of the found elements so we can do our highlighting on them.

Completing Our Plugin

Using the shell we created above we can create the code that does the highlighting. First lets define our default values in case there aren’t any options passed into the plug-in.

   1: var defaults = { backcolor: 'yellow', forecolor: 'black' };

Now let’s highlight our words.

   1: return this.each(function()

   2: {

   3:     for(var i=0;i<words.length;i++)

   4:     {

   5:         var span = '' + words[i] + '';

   6:         this.innerHTML = this.innerHTML.replace(

   7:             new RegExp(words[i], 'gi'), span);

   8:     }

   9: });

This is pretty simple. We are looping through each of our words. We are wrapping the words in a span tag that uses CSS to define a background and foreground color. Then we simply do a find and replace on the elements innerHTML. It is that easy. You can see a demo of this plug-in our freebies page. 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.

a while back we had 2 great posts and one page about visual studio shortcuts. The first one had a list of 10 Visual Studio Shortcuts and the second one had 11 Visual Studio Shortcuts. We also have a Visual Studio CheatSheet with all the Keyboard shortcuts Visual Studio has.

Here is another list of 5 Shortcuts I have picked up along the way.

1. CTRL + SHIFT + 8/7: In case you haven’t knew there is a “Go to Definitions Stack” and every time you click F12 it stores where you went inside that stack. Hitting CTRL +  SHIFT + 8 goes “Back” in the stack and CTRL +  SHIFT + 7 goes forward.
2. F8: I hope all of you are using the CTRL + “-“ to go back to the location you were (after hitting F12 for example). F8 is the opposite to that action it will take you forward. It is the same as CTRL + SHIFT + “-“.
3. SHIFT + F12: Having the marker on top of anything and clicking SHIFT + F12 will search the entire solution for that object and open up the find symbol window:
   
4. CTRL + ALT + Down Arrow: This is my favorite. You all know the  CTRL + TAB feature of Visual studio:
   
   We have all used it to switch between open files, the problem is that there is no order in the files, although sometime it looks alphabetical it isn’t Clicking CTRL + ALT + Down Arrow is like clicking the little arrow on the upper right corner of the text editor so the result is this:
    
   And the best this is that it is ordered the same as the tabs on top of the text editor.
5. CTRL + K + X: This is also a useful one, Hitting CTRL + K + X will open up the insert snippet window and allow you to select the snippets you want to use:
    

That’s all for now, on my next post I will show some CodeRush Express Shortcuts.

Amit

Nothing new for this month so apart from reminding you that if you want to make a quick 30$ all you have to do is to drop us a good unique article (you can get more information on our Make Money Writing Articles Page). I will move on to the stats.

Here are March’s Stats:

Traffic Stats

• Visits: 37,663 (31,456)
• Page Views: 49,908 (43,187)
• Rss Readers: 1025 (994)
• Twiter Followers: 55 (35)
• Alexa Rank: 200,253 (225,471)
  1. 12,627 Israel
  2. 28,631 Sweden
  3. 47,156 Bulgaria
  4. 61,470 India
  5. 90,953 Turkey
  6. 120,277 United Kingdom
  7. 120,797 Italy
  8. 152,304 United States
  9. 156,169 Canada
  10. 157,090 China
  11. 168,691 Poland
  12. 189,156 Russia
  13. 282,951 Spain
  14. 368,151 Germany 

Top 5 Traffic Sources

1. Google : 28,402 (23,550) Visits.
2. Direct : 3,184 (2,705) Visits.
3. DotNetKicks : 1,612 (1,052) Visits.
4. StumbleUpon : 656 (550) Visits.
5. Yahoo: 523 (558) Visits.

Top 10 KeyWords 

1. linq to xml : 402 (321) Visits.
2. visual studio shortcuts : 289 (340) Visits.
3. nunit visual studio 2008  : 217 (135) Visits.
4. wpf context menu : 175 (148) Visits.
5. wpf contextmenu :142 (119) Visits.
6. nunit visual studio : 125 (125) Visits.
7. quake online : 119 (175) Visits.
8. sortedlist : 98 (77) Visits.
9. visual studio 2008 shortcuts : 96 (81) Visits.
10. wpf binding converter : 87 (79) Visits.

Top 10 Articles

1. 10 Visual Studio Shortcuts You Must Know : 2,099 (2,048) Visits.
2. 3 Ways to Run NUnit From Visual Studio :  1,451 (1,263) Visits.
3. Creating an Ajax Login Form With jQuery : 1,366 (New) Visits.
4. How To Create a WPF Custom Context Menu : 1,333 (1133) Visits.
5. LINQ to XML in 3 Easy Steps :  1289 (1,040) Visits.
6. 11 More Visual Studio Shortcuts You Should Know : 1,093 (976) Visits.
7. Measure String Size In Pixels (C#) : 1061 (831) Visits.
8. When a Company Logo Doesn’t Come Out So Good : 970 (758) Visits.
9. How to Create Interactive Form Validation Using Ajax : 913 (743) Visits.
10. How to reset Identity Increment value in MS SQL : 911 (834) Visits.

That’s it.

If you are interested in Knowing anything else, Just ask

Amit

At work we use RadControls for Telerik and they have a pretty nice tab menu control that is easy to use and looks good too. The only problem with these controls is that they only work in WebForms like even the default ASP.NET controls. So when I started playing with MVC I quickly realized I would need to spend some time building some of these controls myself.

Based on that realization, the idea for this post was formed and I set to work creating a fair simple control. This control is not meant to be compared with the control from Telerik. Mine is very basic and has very few features.

Again, I will be using the default MVC template project as my starting point. I did make a few minor changes to the MasterPage but I will include the finished Visual Studio project with this post so you can take a look for yourself.

The first step is to create the HtmlHelper extension method that will generate our control. This method will do most of the work we need.

   1: public static class MyHtmlHelper

   2: {

   3:     public static string TabbedMenu(this HtmlHelper helper, IEnumerable<MenuTab> tabs)

   4:     {

   5:         var route = helper.ViewContext.RequestContext.RouteData;

   6:         var controller = route.GetRequiredString("controller");

   7:         var action = route.GetRequiredString("action");

   8:         var menu = "\n\n<ul id=\"menu\">";

   9: 

  10:         foreach (var tab in tabs)

  11:         {

  12:             if (controller == tab.Controller && action == tab.Action)

  13:                 menu += "\n\t<li>" + helper.ActionLink(tab.Text, tab.Action,

  14:                 tab.Controller, new { @class = "selected" }) + "</li>";

  15:             else

  16:                 menu += "\n\t<li>" + helper.ActionLink(tab.Text,

  17:                 tab.Action, tab.Controller) + "</li>";

  18:         }

  19:         menu += "\n</ul>\n\n";

  20:         return menu;

  21:     }

  22: }

So what this method does is it accepts an IEnumberable collection of MenuTab. We’ll look at the MenuTab class in just a bit. Next the method gets the names of both the current controller and action. These will be used to determine which tab is currently selected. Then the method uses a foreach to loop through the collection and build out the HTML unordered list. Notice that during the loop we are checking to see if the MenuTab instance’s controller and action match the current controller and action. If they make we apply the selected CSS class to the anchor. Pretty simple stuff.

Note: All this method does is produce the required HTML markup. CSS is used to achieve the tab look.

Now let’s look at the MenuTab class.

   1: public class MenuTab

   2: {

   3:     private MenuTab(string text, string action, string controller)

   4:     {

   5:         Text = text;

   6:         Action = action;

   7:         Controller = controller;

   8:     }

   9: 

  10:     public static MenuTab Create(string text, string action, string controller)

  11:     {

  12:         return new MenuTab(text, action, controller);

  13:     }

  14: 

  15:     public string Text { get; private set; }

  16:     public string Action { get; private set; }

  17:     public string Controller { get; private set; }

  18: }

This class is very simple. It just stores the information we will need to build the links in our menu.

That covers off the extension method and any related code. As you can see I wasn’t kidding when I said it doesn’t have many features. This only meant to should how to get started.

In order to make the menu look like tabs a made a few minor tweaks to the existing Site.css file and added the below class definition to indicate which tab is selected.

   1: ul#menu li a.selected {

   2: background-color: #fff;

   3: color: #000;

   4: }

Now all that is left is to insert our menu into the Site.Master file of our application.

   1: <%= Html.TabbedMenu(new List<MenuTab> {

   2: MenuTab.Create("Home", "Index", "Home"),

   3: MenuTab.Create("About", "About", "Home"),

   4: MenuTab.Create("Services", "Services", "Home"),

   5: MenuTab.Create("Pricing", "Pricing", "Home"),

   6: MenuTab.Create("Contact", "Contact", "Home")

   7: }) %>

I replaced the menu code that was already in the demo with the above code that defines the links in our menu.

So as you can see it was pretty simple to build an extension method to add our own helper method for building a tab like menu. By encapsulating this into a helper method we can now easily reuse it in any application.

You can download a sample project from our Freebies Page

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 wanted to show the usage of these two very useful debugger attributes. If you don’t know them keep on reading, they are very useful.

DebuggerDisplay

This attribute allows you to customize the way an object is displayed. lets look at the following example:

   1: class Program

   2: {

   3:     static void Main(string[] args)

   4:     {

   5:         Client c = new Client() 

   6:         { 

   7:             Name = "John", 

   8:             HomeNumber = "555-0094", 

   9:             AccountBalance = -5000 

  10:         };

  11:     }

  12: }

  13:  

  14: class Client

  15: {

  16:     public string Name { get; set; }

  17:     public string HomeNumber { get; set; }

  18:     public double AccountBalance { get; set; }

  19: }

When we hover above the object c we get the following:

We can make this much more “appealing” by using the DebuggerDisplay attribute. By using the DebuggerDisplay you can create a string that will replace what Visual Studio shows by default. For example you can add the following attribute:

   1: [DebuggerDisplay(" This is a client Named {Name}, His Home Phone Number" +

   2:         "is {HomeNumber} and his Account Balance is {AccountBalance}")]

Now once we hover above the object c we get the following:

Pretty neat no?

You can customize the view in almost any way you want and you can even call method that belong to the class inside the marked {}.

DebuggerBrowsable

Lets add to the client class a list of strings that will represent SubAccounts he might have. Using DebuggerBrowsable we have 3 options to mark that list and one of them is extremely useful:

1. DebuggerBrowsableState.Collapsed: This is the default value and keeps the view exactly the way you know.

   

2. DebuggerBrowsableState.RootHidden: This makes the root of the List hidden and expands the list, so a 3 items list will look like this:

   

   As you can see the list is all expanded and the List Data is under the Raw View. If you ask me I don’t really see a real life use for this.

3. DebuggerBrowsableState.Never: This makes the list go away! you cant see it in debug. I find this useful for people who write infrastructures in their company. Sometimes you don’t want to other users to see that list. This is your way of hiding it:

    
   How about that, No List!

More on other Debugger Attributes soon

Enjoy.

Amit

Here is a problem that one of my colleagues who is just starting to use WPF got himself into. He was working on an application that displays items using an ItemsControl and uses a DataTemplate. Inside the DataTemplate he used an Image. Here is the Xaml code:

   1: <Window.Resources>

   2:         <Image Source="Creek.jpg" x:Key="IMG"></Image>

   3:     </Window.Resources>

   4:     <Grid>

   5:         <ItemsControl ItemsSource="{Binding}">

   6:             <ItemsControl.ItemTemplate>

   7:                 <DataTemplate>

   8:                     <Border BorderThickness="2" BorderBrush="Black" 

   9:                             CornerRadius="3" MinHeight="10">

  10:                         <ContentControl Content="{StaticResource IMG}"/>

  11:                     </Border>

  12:                 </DataTemplate>

  13:             </ItemsControl.ItemTemplate>

  14:         </ItemsControl>

  15:     </Grid>

This is a much simpler example, but the principal is the same.

Can you see what was he doing wrong?

In the code behind I will create a list and use it as the DataContext:

   1: public Window1()

   2: {

   3:    InitializeComponent();

   4:    List<int> data = new List<int> { 1, 2, 3, 4 };

   5:    this.DataContext = data;

   6: }

You will expect to see a window with 4 Images, but this is what you get:

Only one image shows up and all the other templates are empty.

Can you see the problem now?

It took me some time to see it because the code was much more complex, but then I noticed that he used the Image class as a resource for the Image.

Image is a WPF Control and can only have one parent! This is why it only displayed at the last item of the list. This is similar to doing the following:

   1: Image m = new Image();

   2: Border b1 = new Border();

   3: Border b2 = new Border();

   4: b1.Child = m;

   5: b2.Child = m;

What would happen here? The following:

I was actually surprised that my friend did not get an Exception, I will definitely have to check why no exception was thrown.

To correct the problem all you have to do is to use Bitmap Image which is a C# Class and not a WPF Control. You should use an Image in the template and use the BitmapImage as its source:

   1: <Window.Resources>

   2:    <!--<Image Source="Creek.jpg" x:Key="IMG"></Image>-->

   3:    <BitmapImage UriSource="Creek.jpg" x:Key="BMP"></BitmapImage>

   4: </Window.Resources>    

   5: <Grid>

   6:    <ItemsControl ItemsSource="{Binding}">

   7:        <ItemsControl.ItemTemplate>

   8:            <DataTemplate>

   9:                <Border BorderThickness="2" BorderBrush="Black" 

  10:                        CornerRadius="3" MinHeight="10">

  11:                    <!--<ContentControl Content="{StaticResource IMG}"/>-->

  12:                    <Image Source="{StaticResource BMP}"></Image>

  13:                </Border>

  14:            </DataTemplate>

  15:        </ItemsControl.ItemTemplate>

  16:    </ItemsControl>

  17: </Grid>

The result:

Exactly what we wanted.

If any of you have an idea as to why we did not get an exception I will be happy to hear it.

Amit