Wednesday, January 29, 2014

Microsoft soon to rename SkyDrive to OneDrive

Most of us might be aware that Microsoft is going to rename it's one of the cloud storage service SkyDrive soon due to disputes with one of the UK firm named British Sky Broadcasting Group. You can find this official announcement at blog by Ryan Gavin.

Saturday, January 25, 2014

Safest way to use EventHandlers in multi-threaded environment

Nowadays MVVM is one of the most common architectural structure and hope most of us working on WPF, Silverlight, Windows Phone or Windows Store apps might have come across this. When talking about MVVM, the first thing which strikes in mind is INotifyPropertyChanged interface. The usual and most common practice of implementing INotifyPropertyChanged is:

public class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected void RaisePropertyChanged(string prop)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(prop));
            }
        }
    }

What do you think about the above code? In first sight, it looks correct, but is it really perfect or thread safe? Well, here answer is NO. One very minor thing is missing in above code which can lead your application to crash in multi-threaded environment.

If you will inspect the above snippet closely, you will notice that the way event is handled here is the culprit. In multi-threaded scenarios, above code can create lot of chaos. Well, enough of suspense. To figure out this hidden culprit, let's take an easy and small snippet.

if (PropertyChanged != null)
     {
         PropertyChanged(this, null);
     }

Now, dig the code line-by-line. In above 2 line snippet:
  • First line executes on thread #1: if(PropertyChanged ! = null) 
  • At this point, PropertyChanged has an event attached to it. So, first line will return true.
  • Meanwhile, on thread #2, the object that has it's event handler attached to PropertyChanged removes it from PropertyChanged.
  • But thread #1 already did it's null check, so it moves on to next statement.
  • On thread #1, next line executes: PropertyChanged(this, null);
  • But the PropertyChanged event no longer has any associated event handlers attached to it, so it throws a NullReferenceException
Hope by this time, you understood the issue with above sort of code. Now question is, how to resolve this issue???

No worries. It's very simple and can be resolved by introducing a temporary variable as shown below:

EventHandler temporaryVariable = PropertyChanged;
if (temporaryVariable != null)
     {
           temporaryVariable(this, null);
     }

After doing the above changes, once the null check is happened, instead of calling PropertyChanged(this, null), thread #1 will call temporaryVariable(this, null); The temporaryVariable is keeping track of all the event handlers that were attached to PropertyChanged, so that statement won't throw a NullReferenceException.

In computer science terms, above problem is called Race condition. Hope you enjoyed this small and useful tip.

Wednesday, January 22, 2014

Dynamically selecting DataTemplate for WPF ListView - Way 2

In continuation to my previous article titled 'Dynamically selecting DataTemplate for WPF ListView', in this article, I am discussing about the alternative way to achieve the same goal. But here, to make the example simple, I am going to display only Employee names as shown below:













Now this to achieve this, I am going to inherit MarkupExtension class provided by Microsoft. This class will give me the DataTemplate. If you will explore further, you will came to know that this MarkupExtension class has only one method named as ProvideValue, which will return me the appropriate template based on the supplied value. 

Before inheriting MarkupExtension, I created a class named MyDataTemplateDictionary, which will inherit Dictionary<object, DataTemplate>. Please note, here key will be my DataTemplate name and value will be the DataTemplate. Below is the code depicting the same:








Next comes is the class inheriting MarkupExtension. As there is nothing much to explain in this code, I'm directly showing it:















And finally the class inheriting DataTemplateSelector, which is exactly the same code as shown in previous post:














And last but not the least, our XAML:















And we are done. Isn't it the cleaner approach???

Tuesday, January 21, 2014

Dynamically selecting DataTemplate for WPF ListView - Way 1

Recently I get a chance to work on a project in which requirement was to select different different types of data templates based on the data. I faced bit difficulty, but afterwards I was manage to get it work.

Let's have a look at the scenario first: Inside a WPF ListView, there are two GridViewColumns for storing Name and Age. Now requirement is to highlight the name of the person based on certain age criteria. If age is below 25, then name should be highlighted as red else it should be in green color, with desired background. I know there are ways to implement this using the concept of triggers, but I personally refrain from using triggers due to performance fall back.

So, what else ???

The option left was dynamically selecting data templates. In this post I am going to write about the simplest approach and later on I'll do the same thing using Dictionary. Well, let's begin with our code.

First of all, I created a class named Employee and added some data which will be displayed on UI. Code to perform this is as:














Next thing, I did is, defined the two DataTemplate in XAML as:







Once the data templates are defined, next task is to figure out the way on how to select the data templates dynamically. So, to perform this task, Microsoft provide us with the class called DataTemplateSelector.  Using this class, one can select the data templates based on the business requirement and here is the code:














Next task is to bind this newly created class named MyTemplateSelector with out XAML. So, in order to perform this task, I created a ResourceDictionary and kept both the data templates inside it as:










Till here we are almost done. The only thing pending is binding our ListView control to collection and setting the cell template, which can be done as:










Once everything is in place, we will get the desired output:











All the above thing can be done by inheriting MarkupExtension class also. I covered that in my next post here.

Sunday, January 12, 2014

Better way to play sound file on WPF button click

Recently I was working on a XAML based application, in which my requirement was to play a sound (.wav file) whenever a given button is clicked. So, to achieve this, I wrote a below snippet:










My above snippet worked but at the same time, I feel a noticeable delay in beep sound and that make me analyze further and write a blog post :)

Now question is, why there is delay between button click and sound ???
Well, there is a simple concept behind it, which I missed while implementing above requirement :(

Reason is, the event hierarchy. 

Most of us might be aware that Click is a bubbling event, which means event will be fired from the control who initiated it. So, in our case, whenever button is clicked, it bubbles from button to window. And that's the reason, click event handler is executing before the window event is triggered, which is ultimately leading to delay.

Now, how to handle this???

Method 1:
Then I thought to write a preview event, which will be fired before my button click and came out with this below code:











In the above snippet, I am using VisualTreeHelper to verify is click event is occurred on button or not. Don't you think, it is bit dreadful? If it seems good, then you can go ahead with this approach else I got one more idea to implement this using ResourceDictionary.

Method 2:
Let's use Styles and EventSetter to achieve the same goal. Here I am going to define my style in a ResourceDictionary, now of course I don't have instance that I could wire my event to. For this, I created a code-behind file for ResourceDictionary, which will appear as a child of my XAML file and will contain the below code:












Now only thing pending is merging the ResourceDictionary with our MainWindow, which can be done as:










For me, this approach looks better. Hope you enjoyed reading!!!

Saturday, January 4, 2014

DataTemplating Overview

DataTemplate is a very powerful concept which allows you to provide a visualization for your objects in your application. DataTemplate objects are very useful specially dealing with collections. If you bind your collection with any of the ItemsControl, say ListBox then by using a DateTemplate one can change the appearance of data objects very easily. Well, now let's create a DataTemplate quickly.

Let's start by creating a class called Employee:








FirstName and Age will be our business objects that will reside in our application. Now we will go ahead and show the value of these objects on screen in a WPF application. For that our XAML will look like:








Now looking at the code-behind:










In code-behind, we have set the values for FirstName and Age with DataContext of main window. So, that XAML can bind to these values via EmployeeDetail property. At this point of time, if you will run the application, you will see:














By above image you can see that the default implementation of DataTemplate in WPF has simply put the string on my window, where TemplatingOverview is my namespace. So, to make it work in order to show proper values, let's go ahead and override ToString on Employee object, something like this:










In above snippet we are saying that please provide us the string with given format. Now, if you will go ahead and run this again you will find that our DataTemplate is changed and now it is using our overriden ToString.















Till here, I showed that what will happen if you will not provide your own DataTemplate. Now instead of writing overriden method, same thing can be performed fully in XAML as:












In above snippet, we have created a DataTemplate on the ContentControl and inside this DataTemplate, one can do any styling and can create any number of visual elements. Later on, these visual elements can be bind to any public property of Employee object. Please note, the Datacontext for this DataTemplate will be EmployeeDetail. Now, if you will run the app, still you can see the value of Employee object.

Sharing DataTemplate
Now in order to share this DataTemplate between multiple ContentControls, one has to make this as a part of resource. Let's have a look at the complete code to get clear idea:













Hope you enjoyed reading. In Next article, I'll be writing about DataTemplateSelector.

Thursday, January 2, 2014

Validating a WPF textbox to accept only negative decimal numbers

Recently working on one of the project, I came across an requirement of validating a TextBox in which Textbox should allow numbers only between range -999 and 0.

If you will surf on internet, you will perhaps find many solutions to this problem in which developers create their own versions of TextBox either by creating a Custom/User controls or by inheriting it. But problem of this approach is - you would need to replace your TextBox definitions with your newly created TextBox. Sometimes this solution can be opted but sometimes it is not feasible to do so.

This article describes on how to enhance existing WPF TextBox to make it happen.So, the approach I am proposing here doesn't require the replacement of existing TextBox control. Whilst it uses the very basic concept of Events. Well, enough of theory. Let's move on to coding part:

XAML code:






Code-Behind code:

Hope you like this clean approach.

Wednesday, January 1, 2014

Troubleshooting data binding

We all know that DataBinding is one of the most powerful concept of WPF. So, today I thought to write something on how to troubleshoot data binding related issues while working with any XAML based application. Here I'll not talk about what and how data binding works, instead I'll jump directly on the relevant part. So, let's start by picking up the troubleshooting methods which can make developer's work bit easy.

Way 1: Using Visual Studio output window
Visual Studio provides high level information about binding which is sufficient to resolve very small problems like name mismatch, etc. Let's understand this along with a code snippet:
 <Grid>
        <TextBlock Text="{Binding  ElementName=label, Path=Hello, Mode=OneWay}"/>
        <Label Content="Welcome" Name="label"/>
  </Grid> 
Now open your output window and press F5, application will launch. In output window, you will notice that the message stating: 

System.Windows.Data Error: 40 : BindingExpression path error: 'Hello' property not found on 'object' ''Label' (Name='label')'. BindingExpression:Path=Hello; DataItem='Label' (Name='label'); target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String') 

After reading the above message, it is very easy to identify and resolve the issue. Isn't it ??? 

Way 2: Using TraceLevel
TraceLevel is an AttachedProperty which was introduced with .Net 3.5. This adds the trace information to the output window of Visual Studio with detail level of None, Medium or High. To use this TraceLevel property, one extra namespace needs to be incorporate in XAML as:   
xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase" 
and add the TraceLevel to the binding as: 
<Grid>
    <TextBlock Text="{Binding  ElementName=label, Path=Hello, Mode=OneWay,diag:PresentationTraceSources.TraceLevel=High}"/>
        <Label Content="Welcome" Name="label"/>
</Grid> 

Way 3: Using Snoop
Snoop is the WPF utility which allows you to browse through the visual tree of a running WPF application. More details about snoop can be found here

Way 4: Debugging data binding using an converter
One can write a converter and put a breakpoint inside the convert method. Once this is done, the converter need to be setup in the binding. Let's have a look at the code: 

 namespace DebuggingDataBinding
{
    /// <summary>
    /// Converter to debug the binding values
    /// </summary>
    public class DebugConvertor : IValueConverter
    {
        #region IValueConverter Members

        /// <summary>
        /// ask the debugger to break
        /// </summary>
        /// <param name="value"></param>
        /// <param name="targetType"></param>
        /// <param name="parameter"></param>
        /// <param name="culture"></param>
        /// <returns></returns>
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Debugger.Break();
            return Binding.DoNothing;
        }

        /// <summary>
        /// ask the debugger to break
        /// </summary>
        /// <param name="value"></param>
        /// <param name="targetType"></param>
        /// <param name="parameter"></param>
        /// <param name="culture"></param>
        /// <returns></returns>
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            Debugger.Break();
            return Binding.DoNothing;
        }

        #endregion
    }

    /// <summary>
    /// Markup extension to debug databinding
    /// </summary>
    public class DebugBindingExtension : MarkupExtension
    {
        /// <summary>
        /// Creates a new instance of the Convertor for debugging
        /// </summary>
        /// <param name="serviceProvider"></param>
        /// <returns>Return a convertor that can be debugged to see the values for the binding</returns>
        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return new DebugConvertor();
        }
    }
} 
In above snippet, provide value will create an instance of converter and return it. Now the XAML binding to sue this extension will be as:
<Window x:Class="DebuggingDataBinding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:DebuggingDataBinding"
    Title="Window1" Height="300" Width="300">
        <Grid Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=Height, Converter={local:DebugBinding}}"/>
 </Window> 

Way 5: Using ExceptionValidationRule
One can associate ValidationRules with binding objects. So, whenever exception is thrown while updating binding source property, ExceptionValidationRule class will take care of it based on how we specify our logic to react with these exceptions. Let's have a look at the code.

I have a class named Person as:
public class Person
    {
        private string firstname;
        public string Firstame
        {
            get { return this.firstname; }
            set
            {
                if (string.IsNullOrEmpty(value))
                {
                    throw new Exception("First name cannot be null or empty");
                }
                this.firstname = value;
            }
        }
    } 
Now we need to associate a rule with the binding and that can be done using in-built class calledExceptionValidationRule and XAML code will be:   
<TextBox Height="30" Width="80">
    <TextBox.Text>
        <Binding Path="FirstName" UpdateSourceTrigger="PropertyChanged">
            <Binding.ValidationRules>
                <ExceptionValidationRule />
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>
</TextBox> 
Please note, once can always come up with their own validation rules. 

Bit on performance
  • Less converters can lead to good performance - If possible, use minimal converters because converters require boxing and unboxing. One alternative is to create a property in a ViewModel, do conversion related activity in getter and bind to it.
  • Binding.DoNothing -  This seems to be useful in the scenario where return value of a converter need not to interfere in the binding process. In such cases, FallbackValue can be used.
  • Data binding cheatsheet can be found here