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

Friday, December 20, 2013

Automatic Numbering for the Primary Key Column

Many of you might have come across an issue of Auto incrementing while working with database products. Truly speaking, recently I also came across one silly problem and thought of sharing it here.
Imagine that at some point of time, you might want to send your new data to a back-end database. If your application supplies the auto-increment values, then
  • what will the database do?
  • what if application receives duplicate values from different client applications?
The answer is that these auto-increment values are never sent to the database because the auto-increment column in the database table will provide a value whenever a new row is added. After each new row is added, the back-end database table generates a new-increment number and then your application will query the database to get the newly created number. Your application will then update its primary key number to the values that came from the database. This means that all the foreign key references will need to be updated as well.

Another problem, what happens if you add new rows in your application to generate auto-increment values of 1 to 100 and then send these rows back to the database table, and the table already has 10 rows???

When the first row is sent from your application, it has an auto-increment value of 1. The new auto-increment number created in the database will be 11. Your application queries for the 11 and tries to change the 1 to 11. Guess, what will happen here? Of course, an EXCEPTION will be thrown because 11 is already in your table.

The solution to this problem is, set AutoIncrementSeed to -1 and set AutoIncrementStep to -1. This will cause negative numbers to be generated; they won't conflict with the values coming from the database because the database doesn't generate negative numbers.

Hope the above small tip will save your lot of time in debugging the code to find the root cause. Enjoy learning !!! 

Saturday, December 14, 2013

Formatting strings in binding

Recently I get a chance for a code walk through of an WPF application in order to achieve better performance. So, during my review process, I came across this below code snippet:

  <WrapPanel>
        <TextBlock Text="{Binding Path=FirstName,Mode=OneWay}"/>
        <TextBlock Text=" "/>
        <TextBlock Text="{Binding Path=LastName,Mode=OneWay}"/>
    </WrapPanel>

If you will closely analyze this given snippet, you will definitely get a way to optimize it. Well, I am talking  about formatting the string as well as binding part.

As most of you are aware that we have a property named StringFormat since .Net 3.5 SP1. So, why can't we use this StringFormat for our binding too. If you want to change the above code to incorporate StringFormat, then it will something look like:

<WrapPanel>
        <TextBlock>
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}{0} {1}">
                        <Binding Path="FirstName" Mode="OneWay"/>
                        <Binding Path="LastName" Mode="OneWay"/>
                    </MultiBinding>
                </TextBlock.Text>
        </TextBlock>
    </WrapPanel>

Now here one can clearly see the double benefit of writing such code. First benefit is, instead of using two bindings, one can be used and another benefit is instead of using three TextBlocks only one TextBlock can be used.

This may help in achieving performance especially when used as a DataTemplate of an ItemsControl with huge number of items.

Please note that {} part at the beginning is an escape sequence, otherwise XAML parser would consider { to be the beginning of markup extension.

Tuesday, December 10, 2013

Resizing TextBlock with resizing of window

When dealing with XAML, many of you might have came across resizing issues in which your control is getting resize but the text/image inside the control is not getting resize as per the window size(it can be other user control). So, to deal with this Microsoft provide us with a Viewbox control, in which user can set the resizing aspects as per the need and requirement. So, this article focuses mainly on the properties provided by Viewbox control with proper sample code and output. MORE...

Thursday, November 14, 2013

Safest way to use RaisePropertyChanged method - MVVM series 3 of n

Background

In my previous post on Simplest MVVM Ever, I gave the simplest overview of implementing MVVM. Now moving forward, I thought to extend my previous post by picking individual areas. And this time, I selected RaisePropertyChanged. All the developers working on XAML related apps are very well aware about the use of this RaisePropertyChanged. I am sure, most of us are also aware on where to use this. But does everyone aware about what is the proper way or let's say generic way to use it ??? Well, even if you are not aware, no problem. At the end of this post, you will surely take home a useful tip on using RaisePropertyChanged.

Introduction

As we know that MVVM provides a loose coupling methodology. At lot many places it is very useful to get benefit of such architecture, but at the cost of your alertness. Because when we are talking about MVVM, we usually says that ViewModel has no knowledge about View and properties are the way, who binds View and ViewModel to show the data on the UI. Here is the gotcha !!!
ViewModels implement INotifyPropertyChanged interface, so that the property changes in ViewModel can be passed onto View. Let's take a sample property, to understand in better way:
public string SelectedName
{
    get { return _selectedName; }
    set
    {
        if (_selectedName != value)
        {
            _selectedName = value;
            RaisePropertyChanged("SelectedName");
        }
    }
}
Point to note here is the hard coded name of the property "SelectedName" within the RaisePropertyChangedmethod. Now due to requirement change, one of the developer came and change the name of a property fromSelectedName to FirstName, and at the same time, he forgot to change the parameter of  RaisePropertyChanged method.  Now what will happen ???
This silly oversight will neither cause any compilation or run time errors, but our feature will simply not work. And such things are very difficult to detect until and unless there is a major break in functionality. So, now, how to get rid of such sort of issues???  

Tip comes here  

Instead of hard coding the property name, can't we go ahead and fetch the property name dynamically using Reflection APIs. Well, of course we can. 
Reflection.MethodBase.GetCurrentMethod().Name 
To implement it in better way, let's go ahead and create an extension method to read this property name as:
 public static string GetPropertyName(this System.Reflection.MethodBase methodBase)
{
    return methodBase.Name.Substring(4);
}
Here Substring method is required to get rid of 'get_' and 'set_' at the start depending upon where it is called. 
So, by using this extension method, one will be able to raise property changed events without concern that in future your property name might change.  MORE

Saturday, November 9, 2013

Simplest MVVM Ever - MVVM series 2 of n

Continuation to my previous article on WHY and WHEN of MVVM, this time, I am going to tell something on how we can create a simple MVVM application with minimal complexities. I am writing this article for those, who just want to see quickly how MVVM works. It doesn't do anything fancy and uses some basic databindings and commanding stuff. This article will be helpful for all those who are looking for a quick example of how to hook the View to the ViewModel and how commands plays a role. 
Today if you will surf internet, you will came across 1000s of articles discussing on what is MVVM and what are the major building blocks of it. So, I am going to repeat the same crazy thing again. But definitely, I'll brief you about major building blocks in layman, in order to make it easier to understand for beginners. Excited, eh ??? 
Layman introduction of building blocks  
So, let's quickly start with three main layers of MVVM.
  • Model - Model contains the classes which are similar to real world entities like Product, Customer, Student, Invoice, etc. It encapsulates business logic and data. Please note, Model classes do not directly reference view or in other way, Model classes have no dependency on view as how they are implemented. Technically speaking, Model classes are used in conjunction with a service or a repository that encapsulate data access.
  • ViewModel - Main purpose of ViewModel classes is to expose data to the view. It includes presentation logic and can be tested indepedently of Model. Similar to Model, ViewModel never reference View but it exposes properties and commands to bind the View data. In essence, ViewModel acts as a coordinator between View and Model.
  • View -  View deals only and only with appearance which one sees on screen. As a best practice, there should be no logic code in View classes, which need to be tested by unit test. In simple words, View's are meant only for UI visual behavior. 
I hope, till now, you might have got an idea of what is the responsibility of View, ViewModel and Model. Well, now before jumping onto coding part, I would like to brief you about some other points also, which needs to be handle for better and cleaner implementation of MVVM. 

Important components of any MVVM app

There are two main components which plays very vital role in implementing any application with MVVM. The first one is base class for ViewModel and second one is ICommand interface.
Base Class - There is some common stuff which is required for each and every ViewModel. So, in order to follow the good design, those common things should be placed in a base class and further this class can be derived by various ViewModels. Now question is, what this base class should contain?
This base class contains the implementation of INotifyPropertyChanged interface. As I mentioned earlier that, ViewModel cannot reference View directly. So, this interface bridges the gap between two and allows the messages to be passed to the View. The sample implementation of INotifyPropertyChanged is: 
public class ViewModelBase:INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void RaisePropertyChanged(string prop)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(prop));
        }
    }
} 
Please note, the above snippet is the basic one. So, if required, it can be expanded in various ways like addition of various validations like property name check, etc.
Well, let's move to ICommand interface.

ICommand interface - This interface provides very useful methods like Execute and CanExecute, which gives full control on commanding part. Commands are used by View to interact with ViewModel. Sample code is:
public class DelegateCommand : ICommand
{
     private Action<object> _action;
     public DelegateCommand(Action<object> action)
     {
         _action = action;
     }

    #region ICommand Members
    public event EventHandler CanExecuteChanged;
    public bool CanExecute(object parameter)
    {
        return true;
    }

    public void Execute(object parameter)
    {
        _action(parameter);
    }

    #endregion
}
I hope, this much knowledge is enough to proceed with simple MVVM example. 

Example scenario  

This is the example of Student entity and to keep it simple, I am taking only FirstName of a student. The list of students will be displayed on the screen. If user will select student name from the list and clicks on given button, then the selected name will be displayed in the textbox shown below. Isn't it simple???  

Model 

As I told, my model class is very simple here with 2 lines of code: 
public class Student
{
    public string FirstName { get; set; }
}

ViewModel

This class is bit complex than our Model. First let's have a look at the below snippet, then I'll talk more on it: 
public class StudentsViewModel:ViewModelBase
{
    public Student Student { get; set; }
    public ObservableCollection<Student> StudentList { get; set; }
    public string SelectedStudent { get; set; }

    private ICommand _updateStudentNameCommand;
    public ICommand UpdateStudentNameCommand
    {
        get { return _updateStudentNameCommand; }
        set { _updateStudentNameCommand= value; }
    }       

    public string FirstName
    {
        get { return Student.FirstName; }
        set
        {
            if (Student.FirstName != value)
            {
                Student.FirstName = value;
                RaisePropertyChanged("FirstName");
            }
        }
    }

    private string _selectedName;
    public string SelectedName 
    {
        get { return _selectedName; }
        set
        {
            if (_selectedName != value)
            {
                _selectedName = value;
                RaisePropertyChanged("SelectedName");
            }
        }
    }
    
    public StudentViewModel()
    {
        UpdateStudentNameCommand = new DelegateCommand(new Action<object>(SelectedStudentDetails));
        StudentList = new ObservableCollection<Model.Student> 
        { 
                new Student { FirstName = "Bruce" },
                new Student { FirstName = "Harry" },
                new Student { FirstName = "Stuart" },
                new Student { FirstName = "Robert" }
        };           
      }


    public void SelectedStudentDetails(object parameter)
    {
        if (parameter != null)
            SelectedName = (parameter as SimplestMVVM.Model.Student).FirstName;
    }
}
You might have notice that, we are inheriting ViewModelBase class, which provides the implementation ofINotifyPropertyChanged. Here I am exposing properties like FirstNameStudentList, andUpdateDetailsCommand which view can bind to. 
Well, let's take this one-by-one.
  • FirstName - This property is used to bind individual items of my ListView
  • StudentList - This property contains the list of first names and is set as a ItemSource of my ListView  
  • UpdateDetailsCommand - This property returns an ICommand using DelegateCommand class. This can be bind to anything like button press or key press. I hooked this command to my methodUpdateStudentDetails on button press, in order to update the text. 
That's all of the viewmodel. Now we can proceed for UI drawing. 

View 

Coming to view, by code behind is totally empty except for setting of DataContext as: 
public MainWindow()
{
    InitializeComponent();
}
And most of the UI related stuff is placed in XAML file itself 
<Window x:Class="SimplestMVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SimplestMVVM.ViewModel"
Title="MVVM" Height="300" Width="300">
<Window.DataContext>
        <local:StudentsViewModel x:Name="ViewModel"/>
 </Window.DataContext>
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.878*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
         </Grid.ColumnDefinitions>
                <StackPanel Grid.RowSpan="2">
        <ListView Name="ListViewStudentDetails" 
               Grid.Row="2" ItemsSource="{Binding StudentList}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" 
                         DisplayMemberBinding="{Binding FirstName}"/>
                </GridView>
            </ListView.View> 
         </ListView>
        <Button Command="{Binding UpdateDetailsCommand}" 
          CommandParameter="{Binding ElementName=ListViewStudentDetails,Path=SelectedItem}"  
          Content="Update Text"/>
        <TextBlock FontWeight="Bold" Text="Selected student is: ">
          <Run Text="{Binding SelectedName, Mode=TwoWay}"/></TextBlock>
        </StackPanel>
    </Grid>
</Window>
MORE