Muhammad Shujaat Siddiqi

Entity Framework 4.2 Code First

2012-01-19T22:19:00.000-06:00

This is a series of post in which we will be discussion about the Entity Framework Code First. In this post we will be discussing how we can create a simple database oriented application using Entity Framework 4.2 released Nov, 2011. This post assumes that you have SQL Server Express installed on your machine with its Database engine and Management Studio.

Let's create a console application, named EFCodeFirstDatabaseCreation. In order to use the features of Entity framework, we need to add EntityFramework Nuget to the project. [Introduction to Nuget]

In this example, we would consider a simple application to maintain data about students. We would seed testing data using initializing code. We would be querying this data using Entity Framework Code First. Let's first define Student entity. As we can see this is a simple POCO (Plain Old CLR Object) based class with a few auto-implemented properties. Most certainly, we don't need to inherit it from any special class.


namespace EFCodeFirstDatabaseCreation.Entities
{
    class Student
    {
        public int StudentId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int GradePointAverage { get; set; }
        public bool IsOutStanding { get; set; }
    }
}

Now we need to define the DbContext for querying the entities from Database. Here Entities are defined in terms of DbSetbased properties. We can query the database using these properties. It also supports insert / update and delete operations on these entities.


namespace EFCodeFirstDatabaseCreation.Entities
{
    using System.Data.Entity;

    class InstituteEntities : DbContext
    {
        public DbSet<Student> Students { get; set; }
    }
}

Now we need to insert seed data to the database. The initializer can inherit from one of the following:

DropCreateDatabaseAlways<T;Context>
DropCreateDatabaseIfModelChanges<T;Context>
CreateDatabaseIfNotExists<T;Context>

All of the above three initializers are basically the implementation of IDatabaseInitializer<T;Context>. Basically Code First supports automatic creation / updates of the Database based on POCO entities. These implementations specify what circumstances should cause creation of a new Database. By default the name of the database would be based on the name of class inheriting from DbContext and its namespace. e.g. for our case it is EFCodeFirstDatabaseCreation.Entities.InstituteEntities. We can specify a different name by causing the relevant constructor of DbContext (base class) to be used. So if we just update the code as following then the name of created database would be InstituteDB.


public InstituteEntities()
    : base("InstituteDB")
{ }

As discussed above, we add InstituteDatabaseInitializer to the project. As you can see we are adding four students to the database. It seems all four of them are outstanding :). Calling base class's seed method would cause data to be pushed to the database saving the changes in the entities.


namespace EFCodeFirstDatabaseCreation
{
    using EFCodeFirstDatabaseCreation.Entities;
    using System.Data.Entity;

    class InstituteDatabaseInitializer : DropCreateDatabaseAlways<InstituteEntities>
    {
        protected override void Seed(InstituteEntities context)
        {

            Student student1 = new Student()
            {
                FirstName = "Muhammad",
                LastName = "Siddiqi",
                IsOutStanding = true,
                GradePointAverage = 3
            };


            Student student2 = new Student()
            {
                FirstName = "Chattan",
                LastName = "Shah",
                IsOutStanding = true,
                GradePointAverage = 4
            };

            Student student3 = new Student()
            {
                FirstName = "Imran",
                LastName = "Ashraf",
                IsOutStanding = true,
                GradePointAverage = 4
            };

            Student student4 = new Student()
            {
                FirstName = "Jawad",
                LastName = "Qureshi",
                IsOutStanding = true,
                GradePointAverage = 4
            };

            context.Students.Add(student1);
            context.Students.Add(student2);
            context.Students.Add(student3);
            context.Students.Add(student4);

            base.Seed(context);
        }
    }

}

Now we just need to query the database after seed data is inserted. We can use this data for our testing. Just first initilze the database using the InstituteDatabaseInitializer defined above. Then we are just printing student's data to the console.


namespace EFCodeFirstDatabaseCreation
{
    using System.Linq;
    using EFCodeFirstDatabaseCreation.Entities;
    using System.Data.Entity;
    using System;

    class Program
    {
        static void Main(string[] args)
        {
            Database.SetInitializer<InstituteEntities>(new InstituteDatabaseInitializer());
 
            InstituteEntities instituteEntites = new InstituteEntities();
            var students = instituteEntites.Students.ToList<Student>();

            foreach (var student in students)
            { 
                Console.WriteLine(
                            string.Format("Name : {0} {1}, GPA : {2}", 
                                       student.FirstName,
                                       student.LastName,
                                       student.GradePointAverage));                                       
            }

            Console.ReadLine();
        }
    }
}

When we run the application, it shows the following output. This shows that the correct seed data is inserted to the database.

The interesting thing to notice is that we are not specifying any connection string anywhere in the application and yet we are able to run the application without any issues. This is only possible if you have local SQL Express installed on the development machine, otherwise, we can specify the connection string in the app.config. We can also access the same database using a query tool. In the following, we are connecting this using SQL Management studio and querying the student's data. Notice the same data as seeded by the application.

Download :

WPF 4.5 - Accessing DataBound Collections on Non-UI Thread

2011-12-23T00:28:00.000-06:00

WPF has ItemsControl to show a collection of items. In MVVM, ItemsControl is data-bound with a collection in the view model. These collections might take a long time to load when the form is being shown. They might be constantly updated throughout the life cycle of the view. If we do it in the main application thread then it might cost the responsiveness of the application. Hence the need for a background thread for these operations. Well, the world has not been so simple.

As we know that the UI elements have affinity to the UI thread in WPF. It also does not allow playing with the elements collection bound as DataSource on any thread other than UI thread. And believe me, this really hurts !!! All we had were a few workarounds but no real solution. With WPF 4.5 Developer's preview, the situation improves a little. It is a step forward in the direction for providing these updates in some other thread. Although I do think that the way it is provided could be a little better than that but whatever makes my collection available to a non-UI thread. I don't really mind.

Let's understand this neat feature by creating a simple example. Let's have a simple view with a ListBox. The ListBox is supposed to display the history of signals received from a central server.

We can design the above view in XAML as follows:


<Window x:Class="MVVMCollectionNonUIThread.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MVVMCollectionNonUIThread"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border Background="Navy" Grid.Row="0">
            <TextBlock Text="WPF 4.5 - Collections Access Across Threads" FontSize="20" 
                       Foreground="White" FontWeight="Bold"
                       TextAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <ListBox Margin="3,5,3,5" Grid.Row="1" ItemsSource="{Binding RandomList}"  />
    </Grid>
</Window>

The above view has MainWindowViewModel set as the DataContext. It expects the DataContext to have a collection, named RandomList. This collection is data-bound to the ListBox so it should have the history of instances when the signal is received from the server. Now let's start defining the view model as per expectation.


namespace MVVMCollectionNonUIThread
{
    using System.Collections.ObjectModel;
    using System.Timers;
    using System.Windows.Data;

    class MainWindowViewModel
    {
        Timer _t1;

        ObservableCollection<string> _randomList;
        public ObservableCollection<string> RandomList
        {
            get
            {
                if (_randomList == null)
                {
                    _randomList = new ObservableCollection<string>();
                }

                return _randomList;
            }
        }

        public MainWindowViewModel()
        {
            _t1 = new Timer(300);
            _t1.Elapsed += new System.Timers.ElapsedEventHandler(_t1_Elapsed);
            _t1.Start();
        }

        void _t1_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
        {
            RandomList.Add(string.Format("Signal Time : {0}", e.SignalTime));
        }

    }
}

In order to simulate the signal reception, we have used System.Timers.Timer. The timer would tick after at least 300 ms. This event is handled by _t1_Elapsed. We are just adding an item to RandomList each time the timer ticks. This event handler is to simulate the signal received from the server. Generally, this client / server communication is handled on a different thread like this handler. Since we are following through this post, if we run the application this results in the EXPECTED exception when the item is being added to RandomList in _t1_Elapsed (non-UI thread) [This is generally UNEXPECTED and comes as a surprise if developer doesn't know about it yet.]

FYI: In Winform, we can cause Elapsed event for System.Timers.Timer to be raised in UI thread by setting the SyncrhnizingObject property. We have discussed about this in our timers discussion [http://shujaatsiddiqi.blogspot.com/2010/10/timers-for-net-applications.html]

WPF 4.5 Developer's preview has provided certain new static methods in BindingOperations class to fix this behavior. The list of new methods I could find is as follows:

AccessCollection
DisableCollectionSynchronization
EnableCollectionSynchronization

This also have some overloads. Let's see how we can fix our little example with these methods. We really can go around by just using EnableCollectionSynchronization. It is to report a collection to be accessible in non-UI threads. In order to provide thread synchronization, we need to provide the synchronization mechanism. Simply we can use the overload which needs lock object. Let's update the view model as follows:


namespace MVVMCollectionNonUIThread
{
    using System.Collections.ObjectModel;
    using System.Timers;
    using System.Windows.Data;

    class MainWindowViewModel
    {
        Timer _t1;
        object _lockObj = new object();

        ObservableCollection<string> _randomList;
        public ObservableCollection<string> RandomList
        {
            get
            {
                if (_randomList == null)
                {
                    _randomList = new ObservableCollection<string>();
                }

                return _randomList;
            }
        }

        public MainWindowViewModel()
        {
             BindingOperations.EnableCollectionSynchronization(RandomList, _lockObj);

            _t1 = new Timer(300);
            _t1.Elapsed += new System.Timers.ElapsedEventHandler(_t1_Elapsed);
            _t1.Start();

            
        }

        void _t1_Elapsed(object sender, System.Timers.ElapsedEventArgs e)
        {
            RandomList.Add(string.Format("Signal Time : {0}", e.SignalTime));
        }

    }
}

Here we just have added BindingOperations.EnableCollectionSynchronization to the view model's contructor for the RandomList collection. We have used the instance member _lockObj as the lock object. That's it! Let's run this now!

Download:

WPF 4.5 Developer's Preview - Delay Binding

2011-12-21T19:51:00.000-06:00

In this post, let's discuss one great feature of Binding as in WPF 4.5 Developer's preview. This feature is called Delayed Binding. As a XAML technologies developers we are specially concerned about the timing when the values are copied between SOURCE and TARGET of binding.

From the very early stages, human has tried finding answer of this question. Who am I? Even famous eastern poet Bulleh Shah explained in one of his master piece.

Not a believer inside the mosque, am I
Nor a pagan disciple of false rites
Not the pure amongst the impure
Neither Moses, nor the Pharoh
Bulleh! to me, I am not known

Since WPF / Silverlight has very sophisticated Binding, the difference between Source and Target is blurred. Now the main question is what should be called Source and what should be considered as Binding Target. Although the question is not a philosophical one but we clearly need a way to identify the source and target of Binding. Charles Petzold makes it easier by calling Binding Target to be the one where the Binding is actually defined. Now the other party becomes the Binding Source. So if TextBox.Text is bound to FirstName property of the DataContext then TextBox.Text becomes the Binding target and hence DataContext.FirstName might be taken as Binding source.

From Target to Source, we control the timing by using UpdateSourceTrigger property of Binding. As we know that it has three possible modes. PropertyChanged, LostFocus and Explicit.

From Source to Target, this flow of update happens based on the nature of Source property. Generally, the view models implement INotifyPropertyChanged interface. Now setting the property causes PropertyChanged event to be raised. Binding Target listens to this event and update itself. The event has the details which property of the DataContext is updated which makes it easier for the runtime to update the view. The source property might be a DependencyProperty. As we know one of the feature of DependencyProperty is change notification. As WPF runtime receives such notifications, it propagates these changes to the Binding system, which causes updating the target's value.

The direction of flow of these updates are controlled by Binding mode. Different XAML technologies can have different default mode of binding. There are three different Binding modes in WPF / Silverlight. These Binding modes are as follows:

TwoWay
OneWay
OneTime
OneWayToSource
Default

Except possibly Default option, the modes which support flowing the value updates from Target to Source are OneWayToSource and TwoWay. It must be noted that the feature we are discussing in this post only applies to this case when the updates are propagated from Target property to Source property.

Now the main question is why we need this delay? Basically it is to provide a compromise between two selections for UpdateSourceTrigger. These selections are PropertyChanged and LostFocus. With LostFocus, the binding system waits until focus is lost from the target control. So all these intermediate updates are lost. If this is a TextBox, the user might expect immediate response from the system. Since updates are not flowing from Target to source, no converters are applied. Similarly none of the validation rules are used. This might be frustrating for the application's user. On the other hand, if we change this to be using PropertyChanged, all the updates are propagated from Target to Source which might involve value conversion and validation. These operations might cause expensive logic to run. When we are using the control, we don't want to wait until we change focus to the other control. But we, definitely, don't want to run all of this with every key stroke or any other way in which user interaction is causing Target value to be updated. We need a mechanism similar to throttling which helps us in this regard. Binding Delay is just for the same purpose.

Let's create a simple WPF project MVVMDelayedBinding as follows:

Let's add a simple view model. The view model implements INotifyPropertyChanged interface. The view model just has one property FirstName. We will be binding this property to a TextBox in the view. Since we would just be binding this to support the flow of value update from Target to Source, it wouldn't really matter if this supports change notification or not. As a Binding Source, the only requirement is that the source should be a property, change notification support is just to update target from the property updates in the source.


namespace MVVMDelayedBinding
{
    using System.ComponentModel;

    class MainWindowViewModel : INotifyPropertyChanged
    {
        private string _firstName;
        public string FirstName
        {
            get { return _firstName; }
            set
            {
                _firstName = value;
                OnPropertyChanged("FirstName");
            }
        }

        #region INotifyPropertyChanged implementation

        public event PropertyChangedEventHandler PropertyChanged = delegate { };
        private void OnPropertyChanged(string propertyName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion
        
    }
}

Since this is a WPF 4.5 Developer's Preview feature, we need .net framework 4.5 installed on the machine. We also need Visual Studio 11 Developer's Preview. Let's open this in the IDE and update the framework to .net framework 4.5.

Now let's update MainWindow.xaml as follows:


<Window x:Class="MVVMDelayedBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:MVVMDelayedBinding"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="45" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.20*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border Background="Navy" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
            <TextBlock Text="Personal Information" Foreground="White" FontSize="20"
                       TextAlignment="Center" FontWeight="Bold" VerticalAlignment="Center"/>
        </Border>
        <Label Content="First Name" Grid.Row="1" Grid.Column="0" Margin="2,3,2,2"/>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="2,3,2,2" >
            <TextBox.Text>
                <Binding Path="FirstName" 
                         Mode="OneWayToSource" 
                         UpdateSourceTrigger="PropertyChanged"
                         Delay="200" />
            </TextBox.Text>
        </TextBox>
        <Border BorderBrush="Silver" BorderThickness="1" 
                Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="2">
            <TextBlock Text="Other Details" TextAlignment="Center"
                       VerticalAlignment="Center"
                       FontSize="20"/>
        </Border>
    </Grid>
</Window>

This is simple example of MVVM based view. We are using the new MainWindowViewModel instance as the DataContext of the view. The most interesting thing is the TextBox Binding. We are binding the TextBox with FirstName property from the DataContext. The mode is set as OneWayToSource supporting the flow of value updates only from Target to Source. The UpdateSourceTrigger is set as PropertyChanged, resulting in the updates in the Target properties to be copied to the Source without waiting for losing the focus. Now look at the Delay. We are setting the delay as 200. This is in milliseconds. It means the runtime should wait for 200 ms to copy a property update to the Source. This would throttle fast changes to the view and wait for the interaction to get settled before the view state gets updated. Let's run this and use the First Name as Muhammad. Instead of the regular behavior of PropertyChanged. It throttled my input, waited for 200ms and updated the view model's property. This is perfect!

Download:

Silverlight 5 Beta - Relative Source Binding

2011-08-14T16:52:00.003-05:00

In this post we will be discussing another new feature of Silverlight 5 Beta. It is Relative Source binding. RelativeSource has long been missing from Silverlight. It has always been there in WPF. Silverlight 5 is currently available in Beta and can be downloaded from here:

http://www.microsoft.com/download/en/details.aspx?id=23887

Let's create a MVVM Light Silverlight application AppSilverlightRelativeSourceBinding. It would have a list of students on display. The user should be allowed to remove any student on the list. In order to see the application of Relative Source binding, we would see how we can bind the Command on the child element to a parent element. Actually, the Remove button on child view should be bound to a Command in the DataContext of a parent element in the hierarchy [UserControl].

Just make sure that you have Silverlight 5 version selected in the project's properties.

This view model is the Main view model of the application. It has a collection of students (StudentViewModel). Since the collection is an ObservableCollection, all the addition / removal of elements in the collection would directly reflected in the view. It also has a Command which removes the student from the collection. This is the Command which would be bound by child elements.

namespace AppSilverlightRelativeSourceBinding.ViewModel

{

    using GalaSoft.MvvmLight;

    using System.Collections.ObjectModel;

    using GalaSoft.MvvmLight.Command;



    public class MainViewModel : ViewModelBase

    {

        #region Properties



        public string Welcome

        {

            get

            {

                return "Silverlight 5 Beta - Relative Source Binding";

            }

        }



        ObservableCollection<StudentViewModel> _students;

        public ObservableCollection<StudentViewModel> Students

        {

            get

            {

                if (_students == null)

                {

                    _students = new ObservableCollection<StudentViewModel>();



                    _students.Add(new StudentViewModel() { StudentFirstName = "Kamran", StudentLastName = "Khan" });

                    _students.Add(new StudentViewModel() { StudentFirstName = "Asad", StudentLastName = "Hussain" });

                    _students.Add(new StudentViewModel() { StudentFirstName = "Faisal", StudentLastName = "Lashari" });

                    _students.Add(new StudentViewModel() { StudentFirstName = "Hyder", StudentLastName = "Baloch" });

                    _students.Add(new StudentViewModel() { StudentFirstName = "Baber", StudentLastName = "Chaudhari" });

                }

                return _students;

            }

        }



        #endregion



        #region Commands



        RelayCommand<StudentViewModel> _removeStudentCommand;

        public RelayCommand<StudentViewModel> RemoveStudentCommand

        {

            get

            {

                return _removeStudentCommand ??

                        new RelayCommand<StudentViewModel>((student) =>

                        {

                            if (this.Students.Contains(student))

                            {

                                this.Students.Remove(student);

                            }

                        });

            }

        }



        #endregion        

    }

}

The definition of StudentViewModel used above is as follows:

namespace AppSilverlightRelativeSourceBinding.ViewModel

{   

    using GalaSoft.MvvmLight;



    public class StudentViewModel : ViewModelBase

    {

        #region Notifiable Properties



        string _studentLastName;

        public string StudentLastName

        {

            get { return _studentLastName; }

            set

            {

                _studentLastName = value;

                RaisePropertyChanged("StudentLastName");

            }

        }



        string _studentFirstName;

        public string StudentFirstName

        {

            get { return _studentFirstName; }

            set

            {

                _studentFirstName = value;

                RaisePropertyChanged("StudentFirstName");

            }

        }



        #endregion



    }

}

It simply has two properties for first and last names of a student. The view model inherits from ViewModelBase which is provided by MVVM Light toolkit. Now let's see how we can display this view model. It is an implicit DataTemplate to show the student. The first and last names are displayed in a TextBlock. It also has a Remove button. Clicking the button would delete the student from the collection. Since StudentViewModel has no idea about which collection it has been part of and it has to be handled by something which holds this collection. So the button's Command needs to be bound to MainViewModel. This is why Relative Source binding makes most sense to be used here. Let's define this DataTemplate in MainSkin.xaml resource dictionary provided by MVVM Light.

<DataTemplate DataType="vm:StudentViewModel" >

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="auto" />

            <ColumnDefinition Width="30" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Button Content="Remove" Grid.Column="0"                       

                CommandParameter="{Binding}" >                

            <Button.Command>

                <Binding RelativeSource="{RelativeSource AncestorType=UserControl}" 

                         Path="DataContext.RemoveStudentCommand" />

            </Button.Command>

        </Button>

        <Border Grid.Column="1" />

        <Grid Grid.Column="2" >

            <TextBlock>  

                <Run Text="{Binding StudentLastName}" FontWeight="Bold" />

                <Run>

                    <Run.Text>

                        <Binding Path="StudentFirstName" StringFormat=",{0}" />

                    </Run.Text>

                    </Run>

            </TextBlock>

        </Grid>

    </Grid>

</DataTemplate>

We need to include this namespace in the above resource dictionary.

xmlns:vm="clr-namespace:AppSilverlightRelativeSourceBinding.ViewModel"

Now the design of MainPage is simple enough. Mainly it has a ListBox to display the collection of StudentViewModel. Since MainSkin.xaml resource dictionary is merged here, the implicit DataTemplate is automatically applied.

<UserControl x:Class="AppSilverlightRelativeSourceBinding.MainPage"

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

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

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             mc:Ignorable="d"            

             DataContext="{Binding Main, Source={StaticResource Locator}}">

    <UserControl.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="Skins/MainSkin.xaml" />

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="auto" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

        <TextBlock FontSize="36" Grid.Row="0"

                   FontWeight="Bold"

                   Foreground="Purple"

                   Text="{Binding Welcome}"

                   VerticalAlignment="Center"

                   HorizontalAlignment="Center"

                   TextWrapping="Wrap" />

        <ListBox ItemsSource="{Binding Students}"

                 Grid.Row="1" />

    </Grid>

</UserControl>

When we run the application, the application is loaded as follows:

Download Code:

Silverlight 5 Beta - Binding Style's Setter.Value

2011-08-12T07:44:00.001-05:00

In this post we will be discussing a binding enhancements in Silverlight 5. Now Style's Setters also support binding for their Value property. Silverlight 5 is currently available in Beta and can be downloaded from here:

http://www.microsoft.com/download/en/details.aspx?id=23887

Let's consider a simple example in which we need to define an application banner in a TextBlock. The application banner will provided by the view model so it needs to be bound to the TextBlock's Text property using Binding extension.

Let's consider a simple example in which we need to define an application banner in a TextBlock. The application banner will provided by the view model so it needs to be bound to the TextBlock's Text property using Binding extension. Let's update the MainPage as follows:

<UserControl x:Class="AppSilverlightBindingInStyle.MainPage"

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

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

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:AppSilverlightBindingInStyle"

        mc:Ignorable="d"

        d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.DataContext>

        <local:MainViewModel BannerText ="Application Banner" />

    </UserControl.DataContext>

    <UserControl.Resources>

        <Style TargetType="TextBlock" >            

            <Setter Property="Text" Value="{Binding BannerText}" />

            <Setter Property="FontSize" Value="30" />           

        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">

        <TextBlock Name="bannerBox" TextAlignment="Center" />

    </Grid>

</UserControl>

It has a simple TextBlock in the view. The DataContext is specified as MainViewModel. It has an inline assignment to its BannerText property. In the Resources we have a Style defined for the TextBlock. This would serve as the default Style of any TextBlock in the page unless overriden. Look at how we are able to bind the Value property of Style's Setter.

The view model just needs to have a property BannerText. The definition of MainViewModel used as DataContext in the above view is as follows:

namespace AppSilverlightBindingInStyle

{

    using System.ComponentModel;



    public class MainViewModel : INotifyPropertyChanged

    {

        #region Properties



        string _bannerText;

        public string BannerText

        {

            get { return _bannerText; }

            set

            {

                _bannerText = value;

                OnPropertyChanged("BannerText");

            }

        }



        #endregion

        

        #region INotifyPropertyChanged implementation



        public event PropertyChangedEventHandler PropertyChanged = delegate { };

        private void OnPropertyChanged(string propertyName)

        {

            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

        }



        #endregion        

    }

}

When we run the application, it is shown as follows:

Download Code:

Implicit DataTempates in Silverlight 5 Beta

2011-08-08T18:03:00.000-05:00

In this post we are going to discuss a new feature expected to be released in Silverlight 5. This feature is implicit DataTemplates. Those who come from WPF background to Silverlight often find it difficult to design without implicit DataTemplates. Well, this limitation has been worked in Silverlight 5 and it is available in the beta release. Silverlight 5 beta tools can be downloaded from here:

http://www.microsoft.com/download/en/details.aspx?id=23887

Let's create a sample Silverlight application and name it AppSilverlightImplicitDataTemplates.

Make sure that you have Silverlight 5 option selected in the following screen displayed right after the previous one.

You would need a reference of System.Windows.Controls.Data.Input assembly for Labels. If you directly drag and drop the Label Control from Toolbox on the designer surface, the assembly is automatically referenced.

Let's suppose we have the following view model. It has a collection of students. We want the user to select a particular student and allow that to be edited.

namespace AppSilverlightImplicitDataTemplates

{

    using System.Collections.ObjectModel;

    using System.Collections.Generic;



    public class MainViewModel : ViewModelBase

    {

        ObservableCollection<StudentViewModel> _students;

        public  ObservableCollection<StudentViewModel> Students

        {

            get

            {

                if (_students == null)

                {

                    _students = new ObservableCollection<StudentViewModel>();

                    _students.Add(new StudentViewModel() { StudentFirstName = "Muhammad", StudentLastName = "Siddiqi" });

                    _students.Add(new StudentViewModel() { StudentFirstName = "Jayson", StudentLastName = "Abante" });

                    _students.Add(new StudentViewModel() { StudentFirstName = "Meena", StudentLastName = "Gulla" });                                        

                }

                return _students;

            }

        }

    }

}

The view model is inheriting from ViewModelBase class. It is basically for providing general functionality to all view models specially implementation of INotifyPropertyChanged interface. As you might have guessed, like this view model, all others view models in the application would also be inheriting from this.

namespace AppSilverlightImplicitDataTemplates

{

    using System.ComponentModel;



    public class ViewModelBase : INotifyPropertyChanged

    {

        #region INotifyPropertyChanged Implementation



        public event PropertyChangedEventHandler PropertyChanged = delegate { };

        protected void OnPropertyChanged(string propertyName)

        {

            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

        }



        #endregion



    }

}

In MainViewModel we have used StudentViewModel collection. It basically has two properties StudentFirstName and StudentLastName. Its definition can be as follows:

namespace AppSilverlightImplicitDataTemplates

{

    using System.ComponentModel;



    public class StudentViewModel : ViewModelBase

    {

        #region Notifiable Properties



        string _studentLastName;

        public string StudentLastName

        {

            get { return _studentLastName; }

            set

            {

                _studentLastName = value;

                OnPropertyChanged("StudentLastName");

            }

        }



        string _studentFirstName;

        public string StudentFirstName

        {

            get { return _studentFirstName; }

            set

            {

                _studentFirstName = value;

                OnPropertyChanged("StudentFirstName");

            }

        }



        #endregion



    }

}

As you can see above, it also inherits from ViewModelBase. The two properties support change notification by calling OnPropertyChanged method. In turn this would raise PropertyChanged event. As we have discussed already that we would be needing to use this view model in two different types of views. One is just for display for selection based control used to display the collection of students. We also need a different view to allow a student to be edited.

For displaying in collection based control:

<UserControl x:Class="AppSilverlightImplicitDataTemplates.StudentDisplayView"

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

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

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d" >    

    <TextBlock>

        <Run Text="{Binding StudentLastName}" FontWeight="Bold" />

        <Run Text="," />

        <Run Text="{Binding StudentFirstName}" />

    </TextBlock>

</UserControl>

For editing StudentViewModel:

<UserControl x:Class="AppSilverlightImplicitDataTemplates.StudentEditView"

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

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

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    

        mc:Ignorable="d"

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

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="93" />

            <ColumnDefinition Width="307" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>           

            <RowDefinition Height="35" />

            <RowDefinition Height="*" />            

        </Grid.RowDefinitions>     

        <sdk:Label Height="23" HorizontalAlignment="Left"

                   Margin="12,12,0,0"  VerticalAlignment="Top"                    

                   Content="First Name" Width="83" Grid.ColumnSpan="2" />

        <TextBox Height="23" HorizontalAlignment="Left" Margin="8,8,0,0" 

                 VerticalAlignment="Top" Width="287" Text="{Binding StudentFirstName}" Grid.Column="1" />

        <sdk:Label Content="Last Name" Height="23" HorizontalAlignment="Left" 

                   Margin="12,7,0,0" VerticalAlignment="Top" Width="83" Grid.Row="1" Grid.ColumnSpan="2" />

        <TextBox Height="23" HorizontalAlignment="Left" Margin="8,3,0,0" 

                 VerticalAlignment="Top" Width="287" Grid.Row="1" 

                 Text="{Binding StudentLastName}" Grid.Column="1" />

    </Grid>

</UserControl>

Using UserControls in DataTemplate
By default we need the StudentViewModel type of objects to be using the display one. So we can define it as application resource. Just updated App.xaml as follows:

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

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

             x:Class="AppSilverlightImplicitDataTemplates.App"

             xmlns:local="clr-namespace:AppSilverlightImplicitDataTemplates"

             >

    <Application.Resources>

        <DataTemplate DataType="local:StudentViewModel">

            <local:StudentDisplayView />

        </DataTemplate>

    </Application.Resources>

</Application>

Now we define the Main application view. As we have discussed, we need to provide a collection of Students and allow the user to select any one of them and edit that.

<UserControl x:Class="AppSilverlightImplicitDataTemplates.MainPage"

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

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

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:AppSilverlightImplicitDataTemplates"

        mc:Ignorable="d"

        d:DesignHeight="300" d:DesignWidth="400"

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

    <UserControl.DataContext>

        <local:MainViewModel />

    </UserControl.DataContext>    

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="97*" />

            <ColumnDefinition Width="303*" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="43*" />

            <RowDefinition Height="257*" />

        </Grid.RowDefinitions>

        <sdk:Label Height="22" HorizontalAlignment="Left" Margin="11,18,0,0"

                   Name="label1" VerticalAlignment="Top" Width="86"

                   Content="Select Student" DataContext="{Binding Path=Students}" />

        <ComboBox Height="24" HorizontalAlignment="Left" Margin="6,14,0,0"

                  Name="cmbStudents" VerticalAlignment="Top" Width="285"

                  ItemsSource="{Binding Students}" Grid.Column="1" />

        <ContentControl 

            DataContext="{Binding ElementName=cmbStudents, Path=SelectedItem}" 

            Content="{Binding}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 

            Margin="11,18,0,0"/>

    </Grid>

</UserControl>

Now lets run the application. It appears as follows:

Now select a student from the combo box. The same student is loaded in the ContentControl as follows:

Now we need the ContentControl to be using the editing type of UserControl for StudentViewModel so that it could be edited. Let's override it as follows in the main view:

<UserControl x:Class="AppSilverlightImplicitDataTemplates.MainPage"

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

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

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:AppSilverlightImplicitDataTemplates"

        mc:Ignorable="d"

        d:DesignHeight="300" d:DesignWidth="400"

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

    <UserControl.DataContext>

        <local:MainViewModel />

    </UserControl.DataContext>    

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="97*" />

            <ColumnDefinition Width="303*" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="43*" />

            <RowDefinition Height="257*" />

        </Grid.RowDefinitions>

        <sdk:Label Height="22" HorizontalAlignment="Left" Margin="11,18,0,0"

                   Name="label1" VerticalAlignment="Top" Width="86"

                   Content="Select Student" DataContext="{Binding Path=Students}" />

        <ComboBox Height="24" HorizontalAlignment="Left" Margin="6,14,0,0"

                  Name="cmbStudents" VerticalAlignment="Top" Width="285"

                  ItemsSource="{Binding Students}" Grid.Column="1" />

        <StackPanel Margin="11,18,0,0" Grid.Row="1" 

                    Grid.Column="0" Grid.ColumnSpan="2" >

            <StackPanel.Resources>

                <DataTemplate DataType="local:StudentViewModel" >

                    <local:StudentEditView />

                </DataTemplate>

            </StackPanel.Resources>

            <ContentControl 

            DataContext="{Binding ElementName=cmbStudents, Path=SelectedItem}" 

            Content="{Binding}" 

            />

        </StackPanel>

    </Grid>

</UserControl>

Here we have thrown the ContentControl inside a StackPanel. In the Resources section of the StackPanel, we have overridden the DataTemplate for StudentViewModel. Since local resource have preference over application level resources so this DataTemplate is applied for the StudentViewModel in ContentControl. When we run the application and select a student, the instance is loaded in the ContentControl with correct DataTemplate applied.

Download:

Binding Debugging in Silverlight 5

2011-08-07T18:18:00.000-05:00

In this post we will be discussing a long desired feature in XAML based applications. This feature is Binding Debugging specified in XAML. This feature is introduced in Silverlight 5.

Let's create a sample Silverlight application AppSilverlightDebuggingDemo.

Definitely an installation of Silverlight 5 is required for this example. Silverlight 5 beta tools can be downloaded from here:

http://www.microsoft.com/download/en/details.aspx?id=23887

If you have it installed already, the second step would allow you to select Silverlight 5 as the Silverlight version.

Here in order to test our example we are selecting the option to create a new website to host the silvelight application specified in previous step. When you hit OK the two projects should be available in Solution Explorer as follows:

Now we add a view model to the Silverlight project MainPageViewModel. It is a simple view model implementing INotifyPropertyChanged interface for supporting change notification for its properties. The view model has two properties StudentId and StudentName, setting both would cause PropertyChanged event to be triggered.

namespace AppSilverlightDebuggingDemo
{
    using System.ComponentModel;

    public class MainPageViewModel : INotifyPropertyChanged
    {
        #region Notifiable Properties

        string _studentId;
        public string StudentId
        {
            get { return _studentId; }
            set
            {
                _studentId = value;
                OnPropertyChanged("StudentId");
            }
        }

        string _studentName;
        public string StudentName
        {
            get { return _studentName; }
            set
            {
                _studentName = value;
                OnPropertyChanged("StudentName");
            }
        }

        #endregion

        #region INotifyPropertyChanged Implementation

        public event PropertyChangedEventHandler PropertyChanged = delegate { };
        private void OnPropertyChanged(string propertyName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion        
    }
}

Let us update the definition of MainPage.xaml as follows:

<UserControl x:Class="AppSilverlightDebuggingDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:AppSilverlightDebuggingDemo"             
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" 
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <UserControl.DataContext>
        <local:MainPageViewModel StudentId="1" StudentName="Muhammad" />
    </UserControl.DataContext>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="48*" />
            <RowDefinition Height="35*" />
            <RowDefinition Height="36*" />
            <RowDefinition Height="181*" />
        </Grid.RowDefinitions>
        <sdk:Label Height="24" HorizontalAlignment="Center" 
                   VerticalAlignment="Center" Width="189" FontWeight="Bold" FontSize="16"
                   Content="Student Information" Margin="106,24,106,0" />
        <sdk:Label Height="23" HorizontalAlignment="Left"
                   Margin="12,12,0,0" Name="lblStudentId" VerticalAlignment="Top"                    
                   Content="Student Id" Width="83" Grid.Row="1" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="101,8,0,0" 
                 VerticalAlignment="Top" Width="287" Grid.Row="1"
                 Text="{Binding StudentId}" />
        <sdk:Label Content="Student Name" Height="23" HorizontalAlignment="Left" 
                   Margin="12,8,0,0" VerticalAlignment="Top" Width="83" Grid.Row="2" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="101,4,0,0" 
                 VerticalAlignment="Top" Width="287" Grid.Row="2" 
                 Text="{Binding StudentName}"/>        
    </Grid>
</UserControl>

In the above view we are using the view model defined previously as DataContext. Here we have assigned some default values the two properties so that the view is loaded with some already existing information. We are binding the properties StudentId and StudentName to the two TextBox(es).Now when we run the application, it should display as follows:

Now open the view's XAML and try hitting F9 while putting the cursor on each of the bindings. This would insert a break point in the Binding expression. The execution would break at these bindings like a regular break point but the difference is that now this break point has been inserted in XAML.

Now let us run the application again. The execution would step at the break point as follows:

It not only steps at the breakpoint, it also lets us to use regular debugging tools provided in Visual Studio. You can see that we have the Locals window opened and it is showing the values of the properties of the DataContext. It also lets us find the issues with binding. Let's update the StudentName binding as follows:

How easy do you think your life would be. Easy debugging...no late sittings at work...more time with family :)

Download Code:

Binding ObservableCollection to Text Properties

2011-08-04T23:38:00.004-05:00

In this post we will be discussing the issue when we bind a collection based (ObservableCollection) property to some scalar DependencyProperty e.g. Text property of a TextBlock.

Let's create a sample MVVM Light based WPF application.

Note:
Yes, you would need an installation of MVVM Light in order to follow this example.

Let's update MainWindow's definition as follows:

<Window x:Class="AppBindingScalarPropertiesCollections.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:converters="clr-namespace:AppBindingScalarPropertiesCollections.Converters"
        mc:Ignorable="d"
        Height="386"
        Width="514"
        Title="MVVM Light Application"
        DataContext="{Binding Main, Source={StaticResource Locator}}">
    
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <converters:StudentsListToStringConverter x:Key="studentConverter" />
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="42*" />
            <RowDefinition Height="37*" />
            <RowDefinition Height="189*" />
            <RowDefinition Height="79*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="36"
                   FontWeight="Bold"
                   Foreground="Purple"
                   Text="{Binding Welcome}"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   TextWrapping="Wrap" Margin="246,104,246,71" Grid.Row="2" />
        <Label Content="New Student" Height="23" HorizontalAlignment="Left"
               Margin="6,15,0,0" Name="label1" VerticalAlignment="Top" Width="97" />
        <TextBox Height="25" HorizontalAlignment="Right" Margin="0,13,12,0"  
                 VerticalAlignment="Top" Width="370"
                 Text="{Binding NewStudentName, UpdateSourceTrigger=PropertyChanged}" />
        <GroupBox Header="Students List" Height="179" HorizontalAlignment="Left" Margin="6,2,0,0" 
                  Name="groupBox1" VerticalAlignment="Top" Width="476" Grid.Row="2">
            <Grid>
                <ListBox ItemsSource="{Binding Students}"  />
            </Grid>
        </GroupBox>
        <GroupBox Header="Comma Separated Students List" Height="57" HorizontalAlignment="Left"
                   VerticalAlignment="Top" Width="476" Grid.Row="3" Margin="0,8,0,0">
            <TextBlock 
                Text="{Binding Students, Converter={StaticResource studentConverter}}" 
                Height="21" />
        </GroupBox>
        <Button Content="Add" Grid.Row="1" Height="26" HorizontalAlignment="Left" 
                Margin="382,7,0,0" VerticalAlignment="Top" Width="99"
                Command="{Binding AddNewStudentCommand}" />
    </Grid>
</Window>

The above view has some expectations from view model. Let's update the view model provided by MVVM Light's view model locator as follows:

namespace AppBindingScalarPropertiesCollections.ViewModel
{
    using GalaSoft.MvvmLight;
    using System.Collections.ObjectModel;
    using System.Windows.Input;
    using GalaSoft.MvvmLight.Command;
  
    public class MainViewModel : ViewModelBase
    {
        public string Welcome
        {
            get
            {
                return "Welcome to MVVM Light";
            }
        }

        string _newStudentName;
        public string NewStudentName
        {
            get { return _newStudentName; }
            set 
            {
                _newStudentName = value;
                RaisePropertyChanged("NewStudentName");
            }
        }

        ObservableCollection<string> _students;
        public ObservableCollection<string> Students
        {
            get
            {
                if (_students == null)
                {
                    _students = new ObservableCollection<string>();
                    _students.Add("Muhammad");
                    _students.Add("Ryan");
                    _students.Add("Jim");
                    _students.Add("Brian");
                    _students.Add("Josh");                   
                    _students.Add("Jeremy");
                }
                return _students;
            }
        }

        ICommand _addNewStudentCommand;
        public ICommand AddNewStudentCommand
        {
            get 
            {
                if (_addNewStudentCommand == null)
                {
                    _addNewStudentCommand = new RelayCommand(
                        () =>
                        {
                            if (!Students.Contains(NewStudentName))
                            {
                                Students.Add(NewStudentName);
                            }
                        });
                }
                
                return _addNewStudentCommand;
            }
        }
    }
}

Mainly it has three things. NewStudentName property to be bound to the TextBox to enter the name of a new student. AddNewStudentCommand
for the button's Command property. Clicking this button should add the student's name as entered in the TextBox to Student's collection if it already doesn't exist. The ListBox and TextBlock showing this are automatically expected be updated as a new student is added to the collection. Students collection to be bound to ListBox's ItemSource and TextBlock's Text properties.

We need the Student's list in the TextBlock to be comma separated names of all students. The view is using a converter for this purpose. It is a simple IValueConverter. Let's see the definition of this converter.

namespace AppBindingScalarPropertiesCollections.Converters
{
    using System.Windows.Data;
    using System.Collections.ObjectModel;
    using System.Linq;

    class StudentsListToStringConverter : IValueConverter
    {
        public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string studentCommaSeparatedList = string.Empty;
            ObservableCollection<string> studentList = value as ObservableCollection<string>;

            if (studentList != null)
            {
                studentCommaSeparatedList = string.Join(", ",
                                            (from string studentName
                                                 in studentList
                                             select studentName).ToArray<string>());
            }           

            return studentCommaSeparatedList;
        }

        public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new System.NotImplementedException();
        }
    }
}

In the Convert method of this IValueConverter, we are simple joining the elements of the collection with comma separation and returning it.

Let's run the application now. It appears as follows...

As we enter new student's name and hit Add button, the new student is added to Students collection. Since this collection is bound to the ItemsSource of the ListBox, it appears in the list box. But the same does not appear in the TextBlock's comma separated list. This is weird!!!

Basically, the reason is very simple. When we bind to the Text property of TextBlock, it is just interested in the PropertyChanged events. It handles this event to update its contents. But it seems that it doesn't handle CollectionChanged event of ObservableCollection. That is why it is not able to update itself. Now since we know the problem how we can resolve this. Basically there might be two different solutions to this problem.

Solution # 1: [Raise PropertyChanged Event when collection is updated for items]

This is very simple. Since we are just adding items in the Execute method of the ICommand bound to the Add button, we can simply do it there. Let's update the ICommand definition in the view model as follows:

public ICommand AddNewStudentCommand
{
    get 
    {
        if (_addNewStudentCommand == null)
        {
            _addNewStudentCommand = new RelayCommand(
                () =>
                {
                    if (!Students.Contains(NewStudentName))
                    {
                        Students.Add(NewStudentName);
                        RaisePropertyChanged("Students");
                    }
                });
        }
        
        return _addNewStudentCommand;
    }
}

Here RaisePropertyChanged method raises PropertyChanged event for the name of property provided as argument. This is available due to inheritence of this view model by ViewModelBase from MVVM Light. Let's run the application again.

As we entered Sekhar and hit the button, it appears both in the ListBox and TextBlock. This is exactly what we desired. Zindabad!!!

2nd Solution: [Use MultiBinding, adding binding for ObservableCollection.Count]
In this solution, we can simply add binding for Count property from the same collection. We can change the binding of TextBlock as follows:

<Window x:Class="AppBindingScalarPropertiesCollections.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:converters="clr-namespace:AppBindingScalarPropertiesCollections.Converters"
        mc:Ignorable="d"
        Height="386"
        Width="514"
        Title="MVVM Light Application"
        DataContext="{Binding Main, Source={StaticResource Locator}}">
    
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <converters:StudentListToStringMultiConverter x:Key="studentMultiConverter" />
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="42*" />
            <RowDefinition Height="37*" />
            <RowDefinition Height="189*" />
            <RowDefinition Height="79*" />
        </Grid.RowDefinitions>
        <TextBlock FontSize="36"
                   FontWeight="Bold"
                   Foreground="Purple"
                   Text="{Binding Welcome}"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   TextWrapping="Wrap" Margin="246,104,246,71" Grid.Row="2" />
        <Label Content="New Student" Height="23" HorizontalAlignment="Left"
               Margin="6,15,0,0" Name="label1" VerticalAlignment="Top" Width="97" />
        <TextBox Height="25" HorizontalAlignment="Right" Margin="0,13,12,0"  
                 VerticalAlignment="Top" Width="370"
                 Text="{Binding NewStudentName, UpdateSourceTrigger=PropertyChanged}" />
        <GroupBox Header="Students List" Height="179" HorizontalAlignment="Left" Margin="6,2,0,0" 
                  Name="groupBox1" VerticalAlignment="Top" Width="476" Grid.Row="2">
            <Grid>
                <ListBox ItemsSource="{Binding Students}"  />
            </Grid>
        </GroupBox>
        <GroupBox Header="Comma Separated Students List" Height="57" HorizontalAlignment="Left"
                   VerticalAlignment="Top" Width="476" Grid.Row="3" Margin="0,8,0,0">

            <TextBlock                 
                Height="21" >
                <TextBlock.Text>
                    <MultiBinding  Converter="{StaticResource studentMultiConverter}" >
                        <Binding Path ="Students"/>
                        <Binding Path ="Students.Count" />
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </GroupBox>
        <Button Content="Add" Grid.Row="1" Height="26" HorizontalAlignment="Left" 
                Margin="382,7,0,0" VerticalAlignment="Top" Width="99"
                Command="{Binding AddNewStudentCommand}" />
    </Grid>
</Window>

In addition of Binding update, we also need to update the converter to IMultiValueConverter. Let's see the definition of StudentListToStringMultiConverter used above.

class StudentListToStringMultiConverter : IMultiValueConverter
{

    public object Convert(object[] values, System.Type targetType, object parameter, 
        System.Globalization.CultureInfo culture)
    {
        string studentCommaSeparatedList = string.Empty;
        ObservableCollection<string> studentList = values[0] as ObservableCollection<string>;

        if (studentList != null)
        {
            studentCommaSeparatedList = string.Join(", ",
                                        (from string studentName
                                             in studentList
                                         select studentName).ToArray<string>());
        }

        return studentCommaSeparatedList;
    }

    public object[] ConvertBack(object value, System.Type[] targetTypes, object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new System.NotImplementedException();
    }
}

Running the application should have the same result as the first option.

Any Questions??? Comments...

Download:
The sameple project can be downloaded from SkyDrive here:

INotifyPropertyChanged and Magic Strings

2011-07-25T20:34:00.000-05:00

One of the argument against INotifyPropertyChanged is the magic strings based notification. Although this is not as big an issue as many people think it is but I have seen people finding it difficult to explain to their fellow developers about this. As an alternate they make their View Models a DependencyObject and provide Dependency Properties for all properties that should be supporting change notifications.

In this post we are going to discuss how we can avoid the use of magic strings and still be able to use INotifyPropertyChanged. For those who needs some glimpse of the problem, INotifyPropertyChanged based properties appear something like this in general.

private string _firstName;
public string FirstName
{
    get { return _firstName; }
    set
    {
       _firstName = value;
       OnPropertyChanged("FirstName");
    }
}

And that is what we want to avoid. We don’t want an OnPropertyChanged with a magic string.

Let’s create a simple view with a simple TextBox for entering user information (First Name). In order to prove that the property change notifications are working, we add one TextBlock. This TextBlock is bound to the same property. This is a OneWay binding which is one-way from Source to Target property. We have set the UpdateSourceTrigger on TextBox’s binding to PropertyChanged so that we don’t have to lose focus from the TextBox in order to trigger the copying of text to the view model’s property.

<Window x:Class="WpfApp_INotifyWithoutMagicString.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:WpfApp_INotifyWithoutMagicString"
       Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
       <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
       <Label Content="First Name" Height="28" HorizontalAlignment="Left"
              Margin="22,54,0,0" Name="label1" VerticalAlignment="Top" Width="80" />
       <TextBox Height="28" HorizontalAlignment="Left" Margin="108,54,0,0"
                Name="textBox1" VerticalAlignment="Top" Width="356"
                Text="{Binding FirstName, UpdateSourceTrigger=PropertyChanged}" />
       <TextBlock Height="121" HorizontalAlignment="Left" Margin="108,101,0,0"
                  Name="textBlock1" Text="{Binding FirstName, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
                  Background ="Thistle" VerticalAlignment="Top" Width="356" />        
   </Grid>
</Window>

We are instantiating MainWindowViewModel and using it as DataContext of the Window. The view model is assumed to have a property, named FirstName. You can find the definition of MainWindowViewModel as follows:

&class MainWindowViewModel : BaseViewModel<MainWindowViewModel>
{
    private string _firstName;
    public string FirstName
    {
       get { return _firstName; }
       set
       {
           _firstName = value;
           OnPropertyChanged(viewModel => viewModel.FirstName);
       }
    }
}

As expected, the above view model has a public property FirstName. The difference is how we have called OnPropertyChanged. As we mentioned in the start of this post, there is no magic string. The definition of OnPropertyChanged is inherited from ViewModelBase. But one thing is apparent, the definition of the method should be dealing with the handling of the lambda expression provided as method argument.

class MainWindowViewModel : ViewModelBase<MainWindowViewModel>
{
    private string _firstName;
    public string FirstName
    {
       get { return _firstName; }
       set
       {
           _firstName = value;
           OnPropertyChanged(viewModel => viewModel.FirstName);
       }
    }
}

The definition of ViewModelBase is as follows:

class ViewModelBase<T> : INotifyPropertyChanged where T : class
{
    #region Implementation INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    protected void OnPropertyChanged(Expression<Func<T, object>> expression)
    {
       if (expression == null || !(expression.Body is MemberExpression))
       {
           return;
       }

       PropertyChanged(this, new PropertyChangedEventArgs(((MemberExpression)expression.Body).Member.Name));
    }

    #endregion Implementation INotifyPropertyChanged
}

ViewModelBase is implemented as generic type. This is to allow the user to avoid casting. The other implementation might have been as follows:

class ViewModelBase : INotifyPropertyChanged
{
    #region Implementation INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    protected void OnPropertyChanged(Expression<Func<object, object>> expression)
    {
       if (expression == null || !(expression.Body is MemberExpression))
       {
           return;
       }

       PropertyChanged(this, new PropertyChangedEventArgs(((MemberExpression)expression.Body).Member.Name));
    }

    #endregion Implementation INotifyPropertyChanged
}

But since this is based on object type of argument for lambda expression. In order to access the FirstName property from the argument, the developer need to typecast. Wrong typecasting might result in runtime exceptions if the object being type casted doesn’t have the property with same name.

public string FirstName
{
    get { return _firstName; }
    set
    {
       _firstName = value;
       OnPropertyChanged(viewModel => ((MainWindowViewModel)viewModel).FirstName);
    }
}

The developer might be just using the code similar to the following code. But this must be remembered that we are not passing the current instance of View Model. We are just passing the lambda expression as argument to OnPropertyChanged. Its evaluation would result in raising PropertyChanged event for the same property.

public string FirstName
{
    get { return _firstName; }
    set
    {
       _firstName = value;
       OnPropertyChanged(viewModel => FirstName);
    }
}

Which leads us to third implementation of ViewModelBase without even specifying the type of view model as the argument for lambda. I think this would be the simplest and easiest implementation of the Base View Model.

class ViewModelBase : INotifyPropertyChanged 
{
    #region Implementation INotifyPropertyChanged

    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    protected void OnPropertyChanged(Expression<Func<object>> expression)
    {
       if (expression == null || !(expression.Body is MemberExpression))
       {
           return;
       }

       PropertyChanged(this, new PropertyChangedEventArgs(((MemberExpression)expression.Body).Member.Name));
    }

    #endregion Implementation INotifyPropertyChanged
}

If we implement our ViewModel as above then it might result in simplest OnPropertyChanged as follows:

public string FirstName
{
    get { return _firstName; }
    set
    {
       _firstName = value;
       OnPropertyChanged(() => FirstName);
    }
}

No matter what implementation of ViewModelBase you are using, when you would run the application and enter text in the TextBox, it would update the FirstName property in the DataContext (MainWindowViewModel’s instance). This is proved through the same data being displayed in the TextBlock below.

Clicking away from FrameworkElement when mouse is still captured

2011-04-23T00:26:00.001-05:00

This post is about a very specific problem about mouse capturing. There are certain situations in which we need to be notified when mouse is clicked outside the bounds of an element. As all of you know that this is classical mouse capturing situation used for various tasks including Drag & Drop. When we search around for a solution for this then we find out an attached event Mouse.PreviewMouseDownOutsideCapturedElement. This is documented in msdn as follows:

“Occurs when the primary mouse button is pressed outside the element that is capturing mouse events.”

<Window x:Class="WpfApplication3.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="483" Width="553"      
Mouse.PreviewMouseDownOutsideCapturedElement="Window_PreviewMouseDownOutsideCapturedElement" >
    <StackPanel>
        <StackPanel Height="33">
            <TextBox Name="textBox1" />
        </StackPanel>
        <StackPanel  >           
            <Button Content="Button" Height="32" HorizontalAlignment="Left"
                    Margin="126,209,0,0" Name="button1" VerticalAlignment="Top"
                    Width="297" Click="button1_Click" />
        </StackPanel>
    </StackPanel>
</Window>

This definitely does what it is supposed to do. In order to get this to work we must have a captured element. Let’s capture mouse on textBox1. So, clicking a mouse outside textBox1 (captured element) should result in causing this handler to get called.

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();       
    }

    private void Window_PreviewMouseDownOutsideCapturedElement(object sender, MouseButtonEventArgs e)
    {

    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        Mouse.Capture(this.textBox1);
    }
}

Let’s run this. We have the display as presented in XAML. It has a TextBox and a Button. When we click the button textBox1 captures the mouse using static Capture method on Mouse. We have subscribed PreviewMouseDownOutsideCapturedElement event in XAML. We could have easily done that in code behind as well. Obviously we would need AddHandler… mechanism for registering with an attached event. This is similar to XAML attached properties. When implemented in WPF, they work as Dependency properties. Similarly Attached events from XAML are implemented as routed events in WPF.

Now the issue is that this event gets fired even when we click inside textBox1. This seems awkwardly strange as this is purely not expected behavior when we read the msdn description. Now we know the behavior. How can we fix this? We just need to find out where the mouse was clicked and we should be good to go. You might be wondering we can get around that we can do that either through the sender parameter or Source / OriginalSource from MouseButtonEventArgs. But the strange thing is that sender is always the element on which the event is registered. So if were registering it on textBox1, it would be textBox1. Currently this would always be the Window object no matter where we click on the Window after capturing the mouse by clicking the button. On top of that, Source and OriginalSource are always the captured element. The other properties which could inform us if the mouse is directly over the textBox1 are always true.

The only way to fix it seems to be to do it ourselves. We can find out the position of mouse. If the position of mouse is within the bounds of captured element then we can just ignore this. Otherwise, we can execute the same logic as we were supposed to execute. We might need to register the event again.

private void Window_PreviewMouseDownOutsideCapturedElement(object sender, MouseButtonEventArgs e)
{
    bool isClickedWithin =  IsMouseClickWithin(this.textBox1, e.MouseDevice.GetPosition(this.textBox1));

    if(isClickedWithin)
    {
        //execute some logic
    }
}

private bool IsMouseClickWithin(FrameworkElement element, Point point)
{
    return (element.ActualWidth > point.X && element.ActualHeight > point.Y) || point.X < 0 || point.Y < 0;
}

In the above example, it is checking if the mouse position is within the actual bounds of textBox1. IsMouseClickWithin returns true for this. It returns false otherwise.

Hosting SQL CE based Entity Models in WCF Data Service

2011-04-13T21:42:00.000-05:00

While developing an application in ASP.net for my friend I realized that we can not SQL Compact Edition with ASP.net. When you try to do that you would get this error page.


SQL Compact Edition error when used with ASP.net

The server encountered an error processing the request. The exception message is 'SQL Server Compact is not intended for ASP.NET development.'. See server logs for more details. The exception stack trace is: 

at System.Data.SqlServerCe.SqlCeRestriction.CheckExplicitWebHosting() at System.Data.SqlServerCe.SqlCeConnection..ctor() at System.Data.SqlServerCe.SqlCeProviderFactory.CreateConnection() at System.Data.EntityClient.EntityConnection.GetStoreConnection(DbProviderFactory factory) at System.Data.EntityClient.EntityConnection.ChangeConnectionString(String newConnectionString) at System.Data.EntityClient.EntityConnection..ctor(String connectionString) at System.Data.Objects.ObjectContext.CreateEntityConnection(String connectionString) at System.Data.Objects.ObjectContext..ctor

I got this when I was hosting WCF DataService in the ASP.net application exposing my Entity Model. The entities were based on a SQL CE database. To see this message, we need to set the behavior of service to allow the exception details to be shown to the user by this setting on the WCF Data Service.

[ServiceBehavior(IncludeExceptionDetailInFaults = true)]
public class MyDataService : DataService<App.ModelEntities>
{
    ...
}

Otherwise we see the following message when we run the application:

Although this is more secure message as we are not showing the stack trace to the user but during development this message seems very irritating. In order to avoid this and to get the detailed message set the above specified Service Behavior for the WCF Data Service.

This must be remembered that this limitation seems more like a suggestion by Microsoft so as to discourage the use of SQL Server Compact Edition for public facing systems because of its security limitations. But there might be valid reasons to still use SQL CE for ASP.net applications for demo applications or in-house developed applications. In order to get around that we can use AppDomain slots to set SQLServerCompactEditionUnderWebHosting to true. This results in allowing the use of SQL Server Compact edition by the runtime. We can set that during application startup in Global.asax.

public class Global : System.Web.HttpApplication
{
    void Application_Start(object sender, EventArgs e)
    {
        // Code that runs on application startup
        AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
    }
}

Now when we run the application we can see the service successfully giving XML data. We have discussed about AppDomain slots here:

http://shujaatsiddiqi.blogspot.com/2011/01/in-this-post-we-will-discuss-named-slot.html

WPF: Configuring System.Runtime.Caching.MemoryCache for an MVVM based App

2011-03-25T02:25:00.000-05:00

This is a continuation of our post here:

http://shujaatsiddiqi.blogspot.com/2011/03/wpf-performance-improvement-for-mvvm.html

In the above post we discussed how we can use the new caching feature available in .net framework 4.0 to improve the performance of a WPF application. As an example we used an application implementing MVVM pattern. In this example we would extend the example by discussing how we can use configuration option provided with this caching feature. We would also look at the underlying architecture provided by the framework to support this.

As we discussed in the previous example, the framework has provided MemoryCache. This is an implementation of ObjectCache providing an in-memory caching mechanism. Let us create a simple view showing the fields from this cache.

In order to use this you need to add a reference of System.Runtime.Caching assembly from the framework.

Yes I have Power Tools installed :).

<Window x:Class="WPF_MVVM_Caching.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPF_MVVM_Caching"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <Label Content="PollingInterval" Height="26" HorizontalAlignment="Left" 
               Margin="10,21,0,0" Name="label1" VerticalAlignment="Top" Width="141" />
        <TextBlock Height="26" HorizontalAlignment="Left" Margin="157,21,0,0" Name="txtPollingInterval"
                   Background="LightGoldenrodYellow"
                   Text="{Binding PollingInterval, Mode=OneTime}" VerticalAlignment="Top" Width="302" />
        <Label Content="PhysicalMemoryLimit" Height="26" HorizontalAlignment="Left" 
               Margin="10,53,0,0" Name="label2" VerticalAlignment="Top" Width="141" />
        <TextBlock Background="LightGoldenrodYellow" Height="26" HorizontalAlignment="Left" 
                   Margin="157,53,0,0" Name="txtPhysicalMemoryLimit" Text="{Binding PhysicalMemoryLimit, Mode=OneTime}" 
                   VerticalAlignment="Top" Width="302" />
        <Label Content="Name" Height="26" HorizontalAlignment="Left" 
               Margin="11,85,0,0" Name="label3" VerticalAlignment="Top" Width="140" />
        <TextBlock Background="LightGoldenrodYellow" Height="26" HorizontalAlignment="Left" 
                   Margin="157,85,0,0" Name="txtName" Text="{Binding Name, Mode=OneTime}" 
                   VerticalAlignment="Top" Width="302" />
        <Label Content="CacheMemoryLimit" Height="26" HorizontalAlignment="Left" 
               Margin="10,116,0,0" Name="label4" VerticalAlignment="Top" Width="141" />
        <TextBlock Background="LightGoldenrodYellow" Height="26" HorizontalAlignment="Left" 
                   Margin="157,116,0,0" Name="txtCacheMemoryLimit" Text="{Binding CacheMemoryLimit, Mode=OneTime}" 
                   VerticalAlignment="Top" Width="302" />
    </Grid>
</Window>

The view is expecting certain properties from MainWindowViewModel which is used as its DataContext. They are bound with Text properties of TextBlocks. The definition of MainWindowViewModel is as follows:

namespace WPF_MVVM_Caching
{
    using System.ComponentModel;
    using System.Runtime.Caching;

    class MainWindowViewModel : INotifyPropertyChanged
    {
        public string CacheMemoryLimit
        {
            get { return string.Format("{0}", MemoryCache.Default.CacheMemoryLimit); }
        }

        public string PollingInterval
        {
            get { return string.Format("{0}", MemoryCache.Default.PollingInterval); }
        }

        public string PhysicalMemoryLimit
        {
            get { return string.Format("{0}", MemoryCache.Default.PhysicalMemoryLimit); }
        }

        public string Name
        {
            get { return MemoryCache.Default.Name; }
        }

        #region INotifyPropertyChanged Implementation
        
        public event PropertyChangedEventHandler PropertyChanged = delegate { };
        private void onPropertyChanged(string propertyName)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion INotifyPropertyChanged Implementation
    }
}

Loading Default Memory Cache with Configuration Options:
The configuration of default MemoryCache is easy. We just need to provide the following code in the app.config file and the framework automatically loads the MemoryCache with the specified values as in the configuration file.

<?xml version="1.0"?>
<configuration>
  <system.runtime.caching>
    <memoryCache>
      <namedCaches>
        <add name="Default"
             cacheMemoryLimitMegabytes="52"
             physicalMemoryLimitPercentage="40"
             pollingInterval="00:04:01" />
      </namedCaches>
    </memoryCache>
  </system.runtime.caching>
  <startup>
    <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/>
  </startup>
</configuration>

Now run the application. We can see that the MemoryCache.Default is constructed with the values that we specified in the configuration file. The view would appear as follows:

So in order to provide the definition of the Default MemoryCache configuration, we just need to make sure that we use name Default and provide the values for the properties that we want to change. The properties not specified in configuration would be kept with default values.

Configuring Non-Default Caches:
In the above example we have seen how we can configure the Default MemoryCache. We can use the same technique to configure a non-default cache. We might be needing it when we want to define a local cache. In order to instantiate a non-default cache, whose properties expected to be loaded from a configuration file, MemoryCache provides a constructor. We need to provide the name of cache configuration to use to construct the cache instance as follows:

<?xml version="1.0"?>
<configuration>
  <system.runtime.caching>
    <memoryCache>
      <namedCaches>
        <add name="TestCache"
             cacheMemoryLimitMegabytes="52"
             physicalMemoryLimitPercentage="40"
             pollingInterval="00:04:01" />
      </namedCaches>
    </memoryCache>
  </system.runtime.caching>
  <startup>
    <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/>
  </startup>
</configuration>

We can use this cache as follows:

class MainWindowViewModel : INotifyPropertyChanged
{
    MemoryCache cache;

    public MainWindowViewModel()
    {
        cache = new MemoryCache("TestCache");
        //string s = "";
    }

    public string CacheMemoryLimit
    {
        get { return string.Format("{0}", cache.CacheMemoryLimit); }
    }

    public string PollingInterval
    {
        get { return string.Format("{0}", cache.PollingInterval); }
    }

    public string PhysicalMemoryLimit
    {
        get { return string.Format("{0}", cache.PhysicalMemoryLimit); }
    }

    public string Name
    {
        get { return cache.Name; }
    }

    #region INotifyPropertyChanged Implementation
    
    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void onPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion INotifyPropertyChanged Implementation
}

When we run the application we can see that the properties are successfully loaded from the configuration and the view is shown as follows:

System.Runtime.Caching.Configuration in Details
Now let us look at the underlying architecture used by the above logic. The configuration classes for run-time caching is provided in System.Runtime.Caching.Configuration namespace in System.Runtime.Caching assembly. They are based on the same logic we implement when we want configuration option for some classes i.e. We have to define classes inheriting from the following classes:

- ConfigurationElement
- ConfigurationElementCollection
- ConfigurationSection
- ConfigurationSectionGroup

For System.Runtime.Caching, these classes are as follows:
- MemoryCacheElement
- MemoryCacheSettingsCollection
- MemoryCacheSection
- CachingSectionGroup

They can be shown in the class diagram as follows:

Now in order to go further with this example we need to add a reference of System.Configuration assembly as follows:

Let us update the configuration file as follows:

<?xml version="1.0"?>
<configuration>
  <configSections>
    <section name="MemoryCacheConfiguration"
                  type="System.Runtime.Caching.Configuration.MemoryCacheSection, System.Runtime.Caching, Version= 4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
  </configSections>
  <MemoryCacheConfiguration>
    <namedCaches>
      <add name="MyMemoryCache" physicalMemoryLimitPercentage="23"
            pollingInterval="00:04:43" cacheMemoryLimitMegabytes="123" />
    </namedCaches>
  </MemoryCacheConfiguration>
</configuration>

Here we have defined a section named MemoryCacheConfiguration for System.Runtime.Caching.MemoryCacheSection type. Later we have provided the details about MemoryCacheConfiguration with details about runtime cache.

Now we instantiate a memory cache based on the information provided here in the configuration file. We can update the view model's constructor as follows:

public MainWindowViewModel()
{
    //Get Configuration section info from Configuration
    MemoryCacheSection section = (MemoryCacheSection)ConfigurationManager.GetSection("MemoryCacheConfiguration");

    //Create a name / value pair for properties
    NameValueCollection configurationNameValueCollection = new NameValueCollection();
    configurationNameValueCollection.Add("pollingInterval", 
        string.Format("{0}", section.NamedCaches[0].PollingInterval));
    configurationNameValueCollection.Add("physicalMemoryLimitPercentage", 
        string.Format("{0}", section.NamedCaches[0].PhysicalMemoryLimitPercentage));
    configurationNameValueCollection.Add("cacheMemoryLimitMegabytes", 
        string.Format("{0}", section.NamedCaches[0].CacheMemoryLimitMegabytes));
    
    //instantiate cache
    cache = new MemoryCache(section.NamedCaches[0].Name, configurationNameValueCollection);
}

Now let us run the application. The view should appear as follows:

Download Code:

WPF - Performance Improvement for MVVM Based Applications - Part # 3

2011-03-17T01:17:00.005-05:00

This is third part of our discussion about .net features and techniques to improve the performance of MVVM based applications. The other part of this discussion are:

Part 1: http://shujaatsiddiqi.blogspot.com/2011/01/wpf-performance-improvement-for-mvvm.html

Part 2: http://shujaatsiddiqi.blogspot.com/2011/02/wpf-performance-improvement-for-mvvm.html

In this post we will be discussing how we can use Caching to improve the performance of an application. Support of Caching in desktop application is a new feature of .net framework 4.0.

Assembly and Namespace:
Most of the classes used for caching feature are available in System.Runtime.Caching namespace available in System.Runtime.Caching assembly. We need to add an assembly reference of this assembly in order to use these types.

Extensible Caching Implementation:
The cache system available in .net 4.0 has been implemented from ground up to be an extensible concept. A Cache provider must inherit from ObjectCache available in System.Runtime.Caching namespace. The cache provider available with .net is MemoryCache. It represents an in-memory cache. This is similar to ASP.net cache but you don't need to use System.Web.Caching as it is available in the same System.Runtime.Caching namespace in System.Runtime.Caching assembly. The other benefit is that we can create multiple instances of MemoryCache in the same AppDomain.

Simple Caching Usage for temporal locality of reference:
Let's consider an example of a WPF application using this. In this example we would be utilizing the idea of temporal locality of reference. We would be reading the contents of a File. Since I/O is a time consuming operation, we will be caching the contents of the file. We will be using this cached content from other window, where we would be showing it in a TextBlock. The definition of MainWindow is as follows:

<Window x:Class="WpfApp_MVVM_Caching.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp_MVVM_Caching"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <TextBlock Height="81" HorizontalAlignment="Left" Margin="12,17,0,0" 
                   Name="textBlock1" Text="{Binding FileContents}" VerticalAlignment="Top" Width="468" />
        <Button Content="Open Child Window" Height="26" HorizontalAlignment="Left" Margin="12,273,0,0" Name="btnOpenChildWindow" 
                VerticalAlignment="Top" Width="134" Click="btnOpenChildWindow_Click" />
    </Grid>
</Window>

This window has a TextBlock to display the contents of the file. The Text property of this TextBlock is bound to FileContents property of DataContext. The window also has a button. The definition of click event handler [btnOpenChildWindow_Click] from the code behind is as follows:

private void btnOpenChildWindow_Click(object sender, RoutedEventArgs e)
{
    new ChildWindow().Show();
}

This is just opening the ChildWindow as a modeless window using its Show method. MainWindow is using MainWindowViewModel instance as its DataContext. It is constructing its instance as part of its initialization code. The definition of MainWindowViewModel is as follows:

class MainWindowViewModel : INotifyPropertyChanged
{

    public MainWindowViewModel()
    {
        string localfileContents = File.ReadAllText(@"C:\Users\shujaat\Desktop\s.txt");
        FileContents = localfileContents;

        MemoryCache.Default.Set("filecontents", localfileContents, DateTimeOffset.MaxValue);
    }

    #region Properties
    
    private string _fileContents;
    public string FileContents
    {
        get { return _fileContents; }
        set
        {
            _fileContents = value;
            OnPropertyChanged("FileContents");
        }
    }

    #endregion

    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion INotifyPropertyChanged implementation

}

As expected by the view, It just has a property FileContents. In the constructor, the contents of a file is read and assigned to this property. Since this is based on INotifyPropertyChanged, the changes are propagated to the view using PropertyChanged event. Additionally, we are copying the data read from the file to MemoryCache.Default with Key 'fileconents'.

The definition of ChildWindow is as follows:

<Window x:Class="WpfApp_MVVM_Caching.ChildWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp_MVVM_Caching"
        Title="Child Window" Height="300" Width="300">
    <Window.DataContext>
        <local:ChildWindowViewModel />
    </Window.DataContext>
    <Grid>
        <TextBlock Height="61" HorizontalAlignment="Left" Margin="36,49,0,0" Name="textBlock1" 
                   VerticalAlignment="Top" Width="206" Text="{Binding CacheEntryValue}" />
    </Grid>
</Window>

It has a TextBlock whose Text property is bound to CacheEntryValue property from the DataContext. The DataContext is an instance of ChildWindowViewModel. Its definition is as follows:

class ChildWindowViewModel : INotifyPropertyChanged
{
    private string _cacheEntryValue;
    public string CacheEntryValue
    {
        get { return _cacheEntryValue; }
        set
        {
            _cacheEntryValue = value;
            OnPropertyChanged("CacheEntryValue");
        }
    }

    public ChildWindowViewModel()
    {
        CacheEntryValue = MemoryCache.Default["filecontents"] as string;
    }

    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion INotifyPropertyChanged implementation
}

We are just copying the contents of the cache entry defined in the MainWindow to the Text property of the TextBlock. Using the value is achieved using the idea of temporal locality of Caching technology. Let's run the application and open child window.

As you might already have guessed, the contents of the file are: "Muhammad Shujaat Siddiqi".

Changes in Underlying DataSource:
Cache keeps the data available in an application for faster data access when it is needed. The user of this cache might or might not know about the actual data source. The caching feature available in .net framework 4.0 keeps track of this is through the provision of ChangeMonitor. This is basically kind of implementation of Observer design pattern. So when underlying datasource is changed, the ChangeMonitor notifies the ObjectCache implemenation [MemoryCache] about this change. ObjectCache implementation then takes any action about this change. It might even nullify the Cache entry as it is invalid now [Like the case of MemoryCache].

Let us create a new Window to present an example of a WPF application using ChangeMonitor. The Window below is a similar window as the above example. It just has an extra TextBox and a Button.

<Window x:Class="WpfApp_MVVM_Caching.MainWindowChangeMonitorExample"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp_MVVM_Caching"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowChangeMonitorExampleViewModel />
    </Window.DataContext>
    <Grid>
        <TextBlock Height="81" HorizontalAlignment="Left" Margin="12,17,0,0" 
                   Name="textBlock1" Text="{Binding FileContents}" VerticalAlignment="Top" Width="468" />
        <TextBox Height="138" HorizontalAlignment="Left" Margin="279,125,0,0" Name="textBoxCachedFileContents"
                 VerticalAlignment="Top" Width="212" Text="{Binding Path=MessageToDataSource, UpdateSourceTrigger=PropertyChanged}" />
        <Button Content="Update Data Source" Height="30" HorizontalAlignment="Left" 
                Margin="314,269,0,0" Name="btnUpdateDataSource" VerticalAlignment="Top" 
                Width="177" Command="{Binding UpdateDataSourceCommand}" />
        <Button Content="Open Child Window" Height="26" HorizontalAlignment="Left" Margin="12,273,0,0" Name="btnOpenChildWindow" 
                VerticalAlignment="Top" Width="134" Click="btnOpenChildWindow_Click" />
    </Grid>
</Window>

The above view is using a new instance of MainWindowChangeMonitorExampleViewModel as its DataContext. It is expecting a string property FileContents to bind to the Text property of the TextBlock. Additionally, it is also expecting the DataContext to have MessageToDataSource property to bind to the Text property of the only TextBox. When a user clicks the Update button the contents of TextBox should be updated to the DataSource (File). Since FileContents are invalid now, it should be updated to the latest contents. For that, the view model should use ChangeMonitor. But first look at the code behind of this view.

public partial class MainWindowChangeMonitorExample : Window
{
    public MainWindowChangeMonitorExample()
    {
        InitializeComponent();
    }

    private void btnOpenChildWindow_Click(object sender, RoutedEventArgs e)
    {
        new ChildWindow().Show();
    }
}

This is similar to the view in the previous examples. When user clicks "Open Child Window", a new instance of ChildWindow is shown in a modeless fashion. Now we have a look at the View Model. Get ready to see Change Monitors in action...

class MainWindowChangeMonitorExampleViewModel : INotifyPropertyChanged
{
    #region Fields

    List<string> filePaths = new List<string>();

    #endregion Fields

    #region Constructors

    public MainWindowChangeMonitorExampleViewModel()
    {
        filePaths.Add(@"C:\Users\shujaat\Desktop\s.txt");
        
        string localfileContents = File.ReadAllText(@"C:\Users\shujaat\Desktop\s.txt");
        FileContents = localfileContents;

        var changeMonitor = new HostFileChangeMonitor(filePaths);
        var policy = new CacheItemPolicy();

        MemoryCache.Default.Set("filecontents", localfileContents, policy);
                                 
        policy.ChangeMonitors.Add(changeMonitor);            
        changeMonitor.NotifyOnChanged(OnDataSourceUpdated);

    }

    #endregion Constructors

    #region Change Monitor Callback

    private void OnDataSourceUpdated(Object State)
    {
        //Get file contents
        FileInfo file = new FileInfo(@"C:\Users\shujaat\Desktop\s.txt");
        using (FileStream stream = file.OpenRead())
        {
            using (StreamReader reader = new StreamReader(stream))
            {
                string updatedFileContents = reader.ReadToEnd();
                reader.Close();
                FileContents = updatedFileContents;
            }
        }

        //Update Cache Entry
        MemoryCache.Default["filecontents"] = FileContents;

        //Update change monitor for further changes in file contents
        var policy = new CacheItemPolicy();
        var changeMonitor = new HostFileChangeMonitor(filePaths);
        policy.ChangeMonitors.Add(changeMonitor);
        changeMonitor.NotifyOnChanged(OnDataSourceUpdated);
    }

    #endregion Change Monitor Callback

    #region Properties

    private string _fileContents;
    public string FileContents
    {
        get { return _fileContents; }
        set
        {
            _fileContents = value;
            OnPropertyChanged("FileContents");
        }
    }

    private string _messageToDataSource;
    public string MessageToDataSource
    {
        get { return _messageToDataSource; }
        set
        {
            _messageToDataSource = value;
            OnPropertyChanged("MessageToDataSource");
        }
    }

    #endregion

    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion INotifyPropertyChanged implementation

    #region Commands

    ICommand _updateDataSourceCommand;
    public ICommand UpdateDataSourceCommand
    {
        get
        {
            if (_updateDataSourceCommand == null)
            {
                _updateDataSourceCommand = new RelayCommand(
                    param => this.UpdateDataSource(),
                    param => this.CanUpdateDataSource
                    );
            }
            return _updateDataSourceCommand;
        }
    }

    public void UpdateDataSource()
    {
        FileInfo file = new FileInfo(@"C:\Users\shujaat\Desktop\s.txt");
        using (FileStream stream = file.OpenWrite())
        {
            using (StreamWriter writer = new StreamWriter(stream) { AutoFlush = true })
            {
                writer.Write(MessageToDataSource);
                writer.Close();
            }
        }
    }

    bool CanUpdateDataSource
    {
        get { return true; }
    }

    #endregion Commands
}

In the constructor, like in the previous example, it is reading the contents of a text file and adding it to the cache. Additionally, it is creating a HostFileChangeMonitor and adds it the CacheItemPolicy's list of ChangeMonitors. This policy is being used for keeping a watch on the contents of the files specified by the ChangeMonitors. If there is an update, it executes the callback as specified by the ChangeMonitor. HostFileChangeMonitor is a descendent of ChangeMonitor through FileChangeMonitor. In non ASP.net applications, it uses internally FileSystemWatcher to monitor files. It must be remembered that it does not support relative paths.

As expected by the view, it has two string properties FileContents and MessageToDataSource. It also has a RelayCommand object UpdateDataSourceCommand. This command is executed when user clicks Update Data Source button. In the execute method [UpdateDataSource] of this command, we are just updating the contents of the file using StreamWriter.

The soul of this example is OnDataSourceUpdated method specified as the callback for change notification in the monitored data sources by HostFileChangeMonitor. When the contents of the file are updated, this method gets called. In this method we are updating the Cache Entry and the string property bound to the text block in the view showing the contents of the file.

Now specify the new view as startup view of the project in App.xaml and run the application. The view appears as follows:

Now let us update the contents of the TextBox and click "Update Data Source" button. As the contents of the file are updated, the callback is called by the ChangeMonitor which updates the cache entry and the FileContent property with updated contents of the file. Since this is bound to a TextBlock.TextProperty in the view, the view shows this update.

Now we open the child window using "Open Child Window" button. The child window uses the same cache entry. The child window appears as follows:

Now update the contents of file again by updating the contents of the TextBox and hitting "Update Data Source" button. This should be done when the ChildWindow is still shown. We are updating the contents with one of Jalal Uddin Rumi's great quote.

Cache Entry Change Monitor:

As you can see that clicking Update Source button after updating the contents of the TextBox updates the TextBlock on the main window but it does not appear to update the contents of second window. This is because the ChildWindow does not know that the cache entry value it used for its TextBlock has been updated. If ChildWindow has some means to get notification for this cache entry update then it could update its logic. For this purpose we can use another ChangeMonitor, called CacheEntryChangeMonitor.

Let's update the constructor of ChildWindowViewModel as follows:

public ChildWindowViewModel()
{
    CacheEntryValue = MemoryCache.Default["filecontents"] as string;
    MemoryCache.Default.CreateCacheEntryChangeMonitor(
        new string[] { "filecontents" }.AsEnumerable<string>()).NotifyOnChanged((a) =>
        {
            CacheEntryValue = MemoryCache.Default["filecontents"] as string;
        }
    );
}

Here we have just added an instane CacheEntryChangeMonitor to the code. Again we are using the same cache entry but the only difference we have added a NotifyOnChanged callback for this. As the entry gets updated this callback is called and it updates the property bound to the TextBlock.Text property in the view refreshing this.

Download Code:

WPF - Binding InputBindings to View Model Commands using MVVM

2011-03-05T17:31:00.011-06:00

In this post we will be discussing about how we can bind mouse and key gestures directly with Commands in the view model. Generally when we talk about this type of binding we end up using RoutedCommand directly in the view having Execute and CanExecute methods in the view itself. This is a new feature of WPF 4.

In order to understand this, let's consider a sample application with some input bindings. When the particular key combination are received by WPF runtime, it should update properties in view model. These properties supports change notifications by implementing INotifyPropertyChanged interface.

<Window x:Class="WpfApplication_InputBindings_MVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication_InputBindings_MVVM"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Window.InputBindings>
        <KeyBinding Key="F2" Modifiers="Control" Command="{Binding OperationCommand}" />
    </Window.InputBindings>    
    <Grid>
        <Label Content="Message" Height="26" HorizontalAlignment="Left" Margin="12,47,0,0" 
               Name="label1" VerticalAlignment="Top" Width="67" FontWeight="Bold" />
        <TextBlock Height="27" HorizontalAlignment="Left" Margin="86,53,0,0" 
                   Name="textBlockMessage" Text="{Binding Message}" VerticalAlignment="Top" Width="405" />
    </Grid>
</Window>

In the above view we have added KeyBinding for "Ctrl + F2" key combination. The view model should have a command OperationCommand. When user presses the specified key combination, it should execute the command methods on the view model. The view is using a new instance of MainWindowViewModel as its DataContext. It is also binding Text property of the only TextBlock to a property Message from the DataContext.

Let's look at the definition of MainWindowViewModel. Since it needs to support Property change notification to the view, it is using one of the available change notification system. It is using this mechanism for its Message property. As part of its contract for INotifyPropertyChanged, it provides an event PropertyChanged. We have used RelayCommand for supporting command execution from view model [http://msdn.microsoft.com/en-us/magazine/dd419663.aspx].

class MainWindowViewModel : INotifyPropertyChanged
{
    #region Operation Command
    
    RelayCommand _operationCommand;
    public ICommand OperationCommand
    {
        get
        {
            if (_operationCommand == null)
            {
                _operationCommand = new RelayCommand(param => this.ExecuteCommand(),
                    param => this.CanExecuteCommand);
            }
            return _operationCommand;
        }
    }

    public void ExecuteCommand()
    {
        Message = "Command Executed";
    }

    bool CanExecuteCommand
    {
        get { return true; }
    }
    
    #endregion Operation Command

    #region Properties

    private string _message;
    public string Message
    {
        get { return _message; }
        set
        {
            _message = value;
            OnPropertyChanged("Message");
        }
    }

    #endregion Properties

    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion INotifyPropertyChanged implementation
}

When we run the application and hit the specified key combination, it first checks if the command is eligible for execution from CanExecuteCommand property. If it returns true then it executes ExecuteCommand method. In this method we are setting Message property to "Command Executed". Since this property supports change notification so the same changes are updated on the view.

Let us run this now. The application is displayed as follows:

As expected, When we press Ctrl + F2 key combination the view is updated as follows:

Stealing Key Gestures from Application Commands:
Still we have simple command bound to the Window. What if we have a command with key gestures from default Commands available by the framework including ApplicationCommands? Now let's progress this example into a little complex one. Let's change the input bindings to a key gestures Ctrl + V.

<Window x:Class="WpfApplication_InputBindings_MVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication_InputBindings_MVVM"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Window.InputBindings>
        <KeyBinding Key="V" Modifiers="Control" Command="{Binding OperationCommand}" />
    </Window.InputBindings>    
    <Grid>
        <Label Content="Message" Height="26" HorizontalAlignment="Left" Margin="12,47,0,0" 
               Name="label1" VerticalAlignment="Top" Width="67" FontWeight="Bold" />
        <TextBlock Height="27" HorizontalAlignment="Left" Margin="86,53,0,0" 
                   Name="textBlockMessage" Text="{Binding Message}" VerticalAlignment="Top" Width="405" />
        <TextBox Height="29" HorizontalAlignment="Left" Margin="82,152,0,0" Name="textBox1" 
                 VerticalAlignment="Top" Width="409" />
    </Grid>
</Window>

In the above XAML, we have updated the key gestures to Ctrl + V. We move focus to the new TextBox and hit Ctrl + V [I have text "Muhammad Siddiqi" copied to clip board].

You can see that TextBox has stolen the key gestures. This has resulted in the text on the clip board being pasted to the Text Box. This is because of default paste command using this key gesture for the text box.

Binding Key Gesture of un-wanted command to ApplicationCommands.NotACommand:
The first solution is very simple. We can just assign those key gestures to ApplicationCommands.NotACommand. We can achieve the same using CommandManager available in System.Windows.Input namespace. Let's update the constructor of the view as follows:

public MainWindow()
{
    InitializeComponent();

    CommandManager.RegisterClassInputBinding(typeof(UIElement),
        new InputBinding(ApplicationCommands.NotACommand, 
            new KeyGesture(Key.V, ModifierKeys.Control)));
}

Now let's run the application again. When we hit Ctrl + V the command actually executes and key gestures are not stolen by Paste Command for the text box.

This approach seems to be working but it has a few limitations. First this is application wide i.e. this gesture is stolen for the whole application. The other thing is that we can not un-register this.

Vote: http://connect.microsoft.com/VisualStudio/feedback/details/481627/no-way-to-unregister-a-commandmanager-registerclasscommandbinding

Handling CanExecute Tunneling Event:
The other solution is to handle PreviewCanExecute event of the command causing the key gesture conflict. In the following example we are using CommandBinding to provide tunneling event handler for CanExecute for Paste Command. Since CommandBindings, unlike InputBindings, is a DependencyProperty if this command is handled above in the logical hierarchy this wouldn't be propagating down. Let's update XAML as follows:

<Window x:Class="WpfApplication_InputBindings_MVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication_InputBindings_MVVM"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Window.InputBindings>
        <KeyBinding Key="V" Modifiers="Control" Command="{Binding OperationCommand}" />
    </Window.InputBindings>    
    <Window.CommandBindings>
        <CommandBinding Command="Paste" PreviewCanExecute="CommandBinding_PreviewCanExecute" />
    </Window.CommandBindings>
    <Grid>
        <Label Content="Message" Height="26" HorizontalAlignment="Left" Margin="12,47,0,0" 
               Name="label1" VerticalAlignment="Top" Width="67" FontWeight="Bold" />
        <TextBlock Height="27" HorizontalAlignment="Left" Margin="86,53,0,0" 
                   Name="textBlockMessage" Text="{Binding Message}" VerticalAlignment="Top" Width="405" />
        <TextBox Height="29" HorizontalAlignment="Left" Margin="82,152,0,0" Name="textBox1" 
                 VerticalAlignment="Top" Width="409" />
    </Grid>
</Window>

Let's see the definition of CommandBinding_PreviewCanExecute:

private void CommandBinding_PreviewCanExecute(object sender, CanExecuteRoutedEventArgs e)
{
    e.Handled = true;
}

If we run this now and hit Ctrl + V by setting focus on the text box, this event handler is executed. Since this is handled here this would not be propagated to the text box. The view is updated as follows:

Download Code:

Rx - Executing IObservable in Parallel in a WPF application

2011-03-02T00:57:00.002-06:00

In this post we are going to take the asynchronous code execution using Reactive extension a bit further. We would see how we can have multiple IObservable (s) are executed in parallel. Rx supports this using Observable.ForkJoin. We can have code executed in parallel which doesn't return any data, return same or different data.

It's not blocking rather still asynchronous:
Let's create a simple view with a single message and a button. We need to execute the IObservable in parallel when button is clicked.

<Window x:Class="WpfApp_Reactive_ForkJoin.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp_Reactive_ForkJoin"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <TextBlock Height="47" HorizontalAlignment="Left" Margin="70,63,0,0" 
                   Name="textBlock1" Text="{Binding Message}" VerticalAlignment="Top" Width="384" />
        <Button Content="Start Operations" Height="38" HorizontalAlignment="Left" Margin="68,134,0,0"
                Name="btnStartOperations" VerticalAlignment="Top" Width="143" 
                Command="{Binding OperationCommand}"/>
    </Grid>
</Window>

The view is assigning an instance of MainWindowViewModel as the DataContext of the Window. The view expects Message property from the view model to bind it to the Text property of the TextBlock. It also expects an ICommand OperationCommand in the view model. We are implementing INotifyPropertyChanged so we need to provide PropertyChanged event in this view model. It has Message property which is bound to the Text property of the TextBlock in the view.

class MainWindowViewModel : INotifyPropertyChanged
{
    #region Constructor
    public MainWindowViewModel()
    {

    }
    #endregion Constructor

    #region Public Properties

    string _message = "Operation not started yet...";
    public string Message
    {
        get { return _message; }
        set
        {
            _message = value;
            OnPropertyChanged("Message");
        }
    }

    #endregion Properties

    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion INotifyPropertyChanged implementation

    #region Operation Command

    RelayCommand _operationCommand;
    public ICommand OperationCommand
    {
        get
        {
            if (_operationCommand == null)
            {
                _operationCommand = new RelayCommand(param => this.StartOperation(),
                    param => this.CanStartOperation);
            }
            return _operationCommand;
        }
    }

    bool CanStartOperation
    {
        get
        {
            return true;
        }
    }

    [DebuggerHidden]
    public void StartOperation()
    {
        Message = "Operation running";

        Observable.ForkJoin(
            Observable.Start(() => { 
                                       Message = "In 1st Observable.Start";
                                       Debug.WriteLine("Executing 1st on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                                       Thread.Sleep(2000);
                                   }),
            Observable.Start(() => { 
                                       Message = "In 2nd Observable.Start";
                                       Debug.WriteLine("Executing 2nd on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                                       Thread.Sleep(2000);
                                   }),
            Observable.Start(() => { 
                                       Message = "In 3rd Observable.Start";
                                       Debug.WriteLine("Executing 3rd on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                                       Thread.Sleep(10000);
                                       throw new System.Exception("exception");
                                   })
            )
            .Subscribe(
                        (result) => { 
                                        Message = result.ToString();
                                        Debug.WriteLine("OnNext: Executing 1st on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                                        Thread.Sleep(2000); 
                                    },
                        (ex) => 
                                { 
                                    Message = ex.Message;
                                    Debug.WriteLine("OnError: Executing 1st on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                                    Thread.Sleep(2000); 
                                },
                        () => { 
                                Message = "Completed";
                                Debug.WriteLine("Completed: Executing 1st on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                                Thread.Sleep(2000);
                              });            
    }

    #endregion Operation Command
}

You can see that we have used an instance of RelayCommand for OperationCommand. Yes, this is the same RelayCommand which is from Josh Smith's MVVM article. Since we want the button always to be enabled so CanStartOperation always returns true. We have used StartOperation as Execute method for OperationCommand.

http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

The following marble diagram might be used to represent the behavior of Fork.Join when all asynchronous operations actually return data. All this data is combined to generate a single OnNext with combined data. Since there is no exception so OnCompleted is generated when all data streams are completed.

Can Only Observable.Start be used?
In the above example we have used Observable.Start. We can use any IObservable no matter how it is created. We can even use IObservable (s) resulting from Observable.ToAsync from methods we want to execute asynchronously.

Observable.ForkJoin(
    Observable.Start(() => { 
                               Message = "In 1st Observable.Start";
                               Debug.WriteLine("Executing 1st on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                               Thread.Sleep(2000);
                           }),
    Observable.Start(() => { 
                               Message = "In 2nd Observable.Start";
                               Debug.WriteLine("Executing 2nd on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                               Thread.Sleep(2000);
                           }),
    Observable.ToAsync(myMethod)()
    )
    .Subscribe(
                (result) => { 
                                Message = result.ToString();
                                Debug.WriteLine("OnNext: Executing 1st on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                                Thread.Sleep(2000); 
                            },
                (ex) => 
                        { 
                            Message = ex.Message;
                            Debug.WriteLine("OnError: Executing 1st on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                            Thread.Sleep(2000); 
                        },
                () => { 
                        Message = "Completed";
                        Debug.WriteLine("Completed: Executing 1st on Thread: {0}", Thread.CurrentThread.ManagedThreadId);
                        Thread.Sleep(2000);
                      });

Observable.ForkJoin and Exception Handling:
If any of the IObservable results in an exception the no OnNext message is generated from the resulting IObservable but a single OnError is generated. We can show this on a marble diagram as follows:

Operations returning different Data:
For Observable.ForkJoin, we can combine IObservable(s) which return no data or same / different data. Yes, it is possible that we have IObservable resulting in different data. We can use a different Overload of Observable.ForkJoin for this.

public void StartOperation()
{
    Observable.ForkJoin<int, string, string>(
        Observable.Start<int>(() =>
            {
                Thread.Sleep(2000);
                return 1;
            }),
        Observable.ToAsync<string>(myMethod)(),
        (StudentId, StudentName) => { return string.Format("Student- Id: {0}, Name: {1}", StudentId, StudentName); }
    ).Subscribe(
            (result) => { Message = result; },
            (ex) => { Message = ex.Message; });
}

private string myMethod()
{
    Thread.Sleep(5000);
    return "Muhammad";
}

When we run the application and click StartOperation. After some delay(simulated operational delay in parallel streams using Thread.Sleep) the window is updated. We can also use IObservables directly created using Observable.Create() method

public void StartOperation()
{
    Observable.ForkJoin<int, string, string>(
        Observable.Create<int>(
            (o) =>
            {
                Thread.Sleep(2000);
                o.OnNext(1);
                o.OnCompleted();

                return () => { };
            }),
            Observable.CreateWithDisposable<string>(
            (o) =>
            {
                Thread.Sleep(2000);
                o.OnNext("Muhammad");
                o.OnCompleted();

                return Disposable.Empty;
            }),
            (StudentId, StudentName) => { return string.Format("Student- Id: {0}, Name: {1}", StudentId, StudentName); }
    ).Subscribe(
            (result) => { Message = result; },
            (ex) => { Message = ex.Message; });

}

Let's run this. When we click the button the view updates as follows:

Many OnNext messages on Individual IObservable (s)
Observable.ForkJoin combines the last values of each Observable stream, combines them and generates OnNext message on the resulting IObservable.

public void StartOperation()
{
    Observable.ForkJoin<int, string, string>(
        Observable.Create<int>(
            (o) =>
            {
                Thread.Sleep(2000);
                o.OnNext(1);
                o.OnNext(2);
                o.OnCompleted();

                return () => { };
            }),
            Observable.Create<string>(
            (o) =>
            {
                Thread.Sleep(2000);
                o.OnNext("Muhammad");
                o.OnCompleted();

                return () => { };
            }),
            (StudentId, StudentName) => { return string.Format("Student- Id: {0}, Name: {1}", StudentId, StudentName); }
    ).Subscribe(
            (result) => { Message = result; },
            (ex) => { Message = ex.Message; });

}

When we run this, the first IObservable places two OnNext with data 1 and 2 sequentially. The second IObservable results in data "Muhammad". Let's run this:

It is because the third argument from this overload of Observable.ForkJoin has been used as a selector function. It has combined StudentId (int) and StudentName (string) into a string and placed OnNext on the resulting Observable.ForkJoin IObservable. When OnNext is received from the resulting IObservable, it has updated the Message property with the same message. Since this is bound to the view using WPF Binding System, the view is updated with this message.

Cleanup after Parallel Operations:
If we need to do some cleanup after these parallel operations are completed then we can do that in the Finally block executed after IObservable from Observable.ForkJoin finishes. As we know this gets executed no matter if these parallel operations were successful resulting in OnCompleted or there was some exception from any of the operations. In the latter case this gets executed after OnError is executed.

Observable.ForkJoin and Thread Management:
All the IObservable (s) in ForkJoin would be executing on different ThreadPool threads. The resulting IObservable would also be running on a TheredPool thread. Since ThreadPool threads might be recycled, it is possible that the same thread seems to be used for OnNext and OnCompleted as one of the threads used for executing one of the IObservable code. It must be remembered that OnNext, OnCompleted will always be executing on the same thread.

public void StartOperation()
{
    Message = "Operation running";

    Observable.ForkJoin(
        Observable.Start(() =>
        {
            Message = "In 1st Observable.Start";
            Debug.WriteLine("Executing 1st on Thread: {0}, IsThreadPoolThread: {1} ", 
                Thread.CurrentThread.ManagedThreadId, Thread.CurrentThread.IsThreadPoolThread);
            Thread.Sleep(2000);
        }),
        Observable.Start(() =>
        {
            Message = "In 2nd Observable.Start";
            Debug.WriteLine("Executing 2nd on Thread: {0}, IsThreadPoolThread: {1}",
                Thread.CurrentThread.ManagedThreadId, Thread.CurrentThread.IsThreadPoolThread);
            Thread.Sleep(2000);
        }),                
        Observable.Start(() => 
        { 
            Message = "In 3rd Observable.Start";
            Debug.WriteLine("Executing 3rd on Thread: {0}, IsThreadPoolThread: {1}", 
                Thread.CurrentThread.ManagedThreadId, Thread.CurrentThread.IsThreadPoolThread);
            Thread.Sleep(2000);                                           
        }))
        .Subscribe(
                    (result) =>
                    {
                        Message = result.ToString();
                        Debug.WriteLine("OnNext: Executing on Thread: {0}, IsThreadPoolThread: {1}", 
                            Thread.CurrentThread.ManagedThreadId, Thread.CurrentThread.IsThreadPoolThread);
                        Thread.Sleep(2000);
                    },
                    (ex) =>
                    {
                        Message = ex.Message;
                        Debug.WriteLine("OnError: Executing on Thread: {0}, IsThreadPoolThread: {1}", 
                            Thread.CurrentThread.ManagedThreadId, Thread.CurrentThread.IsThreadPoolThread);
                        Thread.Sleep(2000);
                    },
                    () =>
                    {
                        Message = "Completed";
                        Debug.WriteLine("Completed: Executing on Thread: {0}, IsThreadPoolThread: {1}", 
                            Thread.CurrentThread.ManagedThreadId, Thread.CurrentThread.IsThreadPoolThread);
                        Thread.Sleep(2000);
                    });
}

Executing 1st on Thread: 3, IsThreadPoolThread: True
Executing 2nd on Thread: 12, IsThreadPoolThread: True
Executing 3rd on Thread: 11, IsThreadPoolThread: True
OnNext: Executing on Thread: 11, IsThreadPoolThread: True
Completed: Executing on Thread: 11, IsThreadPoolThread: True

Executing 1st on Thread: 11, IsThreadPoolThread: True
Executing 2nd on Thread: 10, IsThreadPoolThread: True
Executing 3rd on Thread: 12, IsThreadPoolThread: True
OnNext: Executing on Thread: 12, IsThreadPoolThread: True
Completed: Executing on Thread: 12, IsThreadPoolThread: True

Executing 1st on Thread: 11, IsThreadPoolThread: True
Executing 2nd on Thread: 10, IsThreadPoolThread: True
Executing 3rd on Thread: 12, IsThreadPoolThread: True
OnNext: Executing on Thread: 3, IsThreadPoolThread: True
Completed: Executing on Thread: 3, IsThreadPoolThread: True

Download Code:

WPF - Performance Improvement for MVVM Applications - Part # 2

2011-02-25T22:38:00.027-06:00

This is the second part of our discussion about performance improvement of an MVVM based application. You can find the other part of this discussion here:

- Part - 1: http://shujaatsiddiqi.blogspot.com/2011/01/wpf-performance-improvement-for-mvvm.html

- Part - 3: http://shujaatsiddiqi.blogspot.com/2011/03/wpf-performance-improvement-for-mvvm.html

In this example we would see how we can utilize Lazy Initialization to improve the performance of MVVM based application. Lazy initialization is a newly available features of .net framework 4.0. As I remember this is based on Tomas Petricek's suggestion which has been incorporated in .net framework recently. This is a part of effort to incorporate lazy execution in c# code. You might already know that LINQ queries support lazy evaulation already. They are only evaluated when the first time they are enumerated. If they are never enumerated then never such evaluation takes place. With new Lazy initialization feature, the framework now also supports lazy initialization.

http://msdn.microsoft.com/en-us/vcsharp/bb870976

In this example we would base our discussion on a hierarchical view model. The main view is consisted of some collection based controls. Each of these control also needs to define its template to specify how different items in the collection would be displayed on the screen.

Let's consider a view for a Course with just two students. The data of students should be displayed in tab items in a TabControl. The student information should only have two fields, their first and last names. Student's First name should be displayed as header of its TabItem. If the data is not entered yet then it should display "Default" in the header. The XAML definition of the view is as follows:

<Window x:Class="WpfApp_MVVM_LazyInitialize.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp_MVVM_LazyInitialize"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainWindowViewModel />
</Window.DataContext>
<Grid>        
<TabControl Height="288" HorizontalAlignment="Left" Margin="12,12,0,0" Name="tabControl1" VerticalAlignment="Top" Width="480"
ItemsSource="{Binding StudentViewModels}" >
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding StudentFirstName}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>                
<DataTemplate>
<Grid>
<Label Content="First Name" Height="27" HorizontalAlignment="Left" 
Margin="12,29,0,0" Name="label1" VerticalAlignment="Top" Width="105" />
<TextBox Height="30" HorizontalAlignment="Left" Margin="123,29,0,0" 
Name="textBoxFirstName" VerticalAlignment="Top" Width="345" 
Text="{Binding Path=StudentFirstName}" />
<Label Content="Last Name" Height="27" HorizontalAlignment="Left" Margin="12,65,0,0" 
Name="label2" VerticalAlignment="Top" Width="105" />
<TextBox Height="30" HorizontalAlignment="Left" Margin="123,65,0,0" 
Name="textBoxLastName" VerticalAlignment="Top" Width="345" 
Text ="{Binding StudentLastName}" />
</Grid>                    
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Window>

We would be needing two DataTemplates for TabControl. One is for Header i.e. ItemTemplate and the other is for the content of each TabItem i.e. ContentTemplate. The ItemsSource of this TabControl is bound to StudentViewModels collection. Each member of this collection should have atleast two properties StudentFirstName and StudentLastName. The ItemTemplate is just a TextBlock. The Text property of this TextBlock is bound to item's StudentFirstName property. The ContentTemplate has two TextBox(es). One of them is bound to StudentFirstName and the other is StudentLastName properties. We have kept the code behind of the view as default.

The DataContext of the above view is set as a new instance of MainWindowViewModel. It implements INotifyPropertyChanged so it needs to provide definition of PropertyChanged event as part of its contract. As required by the view, it provides a collection StudentViewModels. It is provided as an ObservableCollection. Each member of this generic collection is specified as of the type StudentViewModel.

class MainWindowViewModel : INotifyPropertyChanged
{
ObservableCollection<StudentViewModel> _studentViewModels = 
new ObservableCollection<StudentViewModel>();

public ObservableCollection<StudentViewModel> StudentViewModels
{
get
{
return _studentViewModels;
}
}

public MainWindowViewModel()
{
_studentViewModels.Add(new StudentViewModel());
_studentViewModels.Add(new StudentViewModel());
}

public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}

In the constructor of the above view model we have added two members to the collection. As expected they are of type StudentViewModel. They would be displayed as Tab items in the view. The definition of StudentViewModel is as follows:

class StudentViewModel : INotifyPropertyChanged
{
Lazy<Student> _model = new Lazy<Student>();

string _studentFirstName;
public string StudentFirstName
{
get { return _studentFirstName; }
set
{
if (_studentFirstName != value)
{
_studentFirstName = value;
_model.Value.StudentFirstName = value;
OnPropertyChanged("StudentFirstName");
}
}
}

string _studentLastName;
public string StudentLastName
{
get { return _studentLastName; }
set
{
if (_studentLastName != value)
{
_studentLastName = value;
_model.Value.StudentLastName = value;
OnPropertyChanged("StudentLastName");
}
}
}

public StudentViewModel()
{
_studentFirstName = "Default";
}

public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}

As expected by the view it has two properties StudentFirstName and StudentLastName. It implements INotifyPropertyChanged to support change notification.

The above view model uses Student as model. When the view model receives updates in these properties through WPF Biniding System, it just passes on those updates to the model. The instances initialized with Lazy initialization feature are accessed using Value property of the Lazy object reference. We have accessed StudentName and StudentLastName properties using the same. Let us assume that it were a model which requires a heavy instantiation. We are just displaying a MessageBox in the constructor. This would show a MessageBox from the constructor. In this way we would realize exactly when the constructor is called. This is how are trying to understand Lazy initialization of Student.

class Student
{
public string StudentFirstName { get; set; }
public string StudentLastName { get; set; }

public Student()
{
MessageBox.Show("Student constructor called");
}
}

Now let us run this. The application is shown as follows:

Enter some data in the First Name field of the first Tab Item. As soon as the focus is changed to the other field, the default Binding of Text property of TextBox triggers the source updates on LostFocus.

When you close the message box you can see the header of the TabItem being updated with the FirstName you entered.

Deciding which Constructor to use for initialization:
We can also decide which constructor of the type we want to use for initialization using the constructors of Lazy class. Lazy<T> allows Func<T> delegate as argument in some of its overloads.

In a multithreaded scenario:
In a multithreaded scenario the first thread using the lazy instance causes the initialization causes the initialization procedure and its value would be seen by the other threads. Although the other threads will also cause the initialization but their value will not be used. In a multithreaded scenario, like this, we can use any overload of EnsureInitialized method of Lazyintializer for even better performance. This can also use any of the default constructor or specialized constructor using Func delegate.

http://msdn.microsoft.com/en-us/library/system.threading.lazyinitializer.ensureinitialized.aspx

Download Code:

Rx - Executing anonymous code asynchronously

2011-02-24T22:03:00.016-06:00

In the previous post we discuss about how we can execute a method asynchronously using Reactive Extensions. In this post we will discuss how we can execute anonymous code asynchronously using Reactive Extensions. Rx provides this support using Observable.Start.

Invoking Actions (No data returned):
Let us start with discussing how we can execute code asynchronously with no data to return.

The event handler of Click event of the button is as follows:


private void button2_Click(object sender, RoutedEventArgs e)
{
    Observable.Start(() =>
        {
            Thread.Sleep(2000);

            return;
        }
    )
    .ObserveOnDispatcher()
    .Subscribe(
                (result) => { ;},
                (ex) => this.Background = Brushes.Red,
                () => this.Background = Brushes.Green);
}

This code just executes simple code asynchronously in a ThreadPool thread. It generates OnNext, OnCompleted and OnError messages on the Dispatcher thread as we are observing on Dispatcher. After atleast two seconds the background of window should turn green.

Invoking anonymous code (data returned from lambda) asynchronously:
We can also execute anonymous asynchronous code using Observable.Start which actually return a value. This code is in the form of lambda expressions or lambda statements which explicitly return data through return statement. Let us add a button on the same window. When user clicks the button it should update the operand boxes with any random number.


private void btnFillRandomOperands_Click(object sender, RoutedEventArgs e)
{
    Observable.Start<int>(
        () =>
        {
            Thread.Sleep(2000);
            return new Random().Next(1, 10);
        }).ObserveOnDispatcher<int>()
        .Subscribe(
                       (result) =>
                       {
                           this.textBoxOperand1.Text = result.ToString();
                           this.textBoxOperand2.Text = result.ToString();
                       },
                        (ex) => this.Background = Brushes.Red,
                        () => this.Background = Brushes.Green
                    );

}

The above code uses Random class to generate a random number between 1 and 10. The returned number is provided to OnNext handler by Rx runtime. This handler updates both operand text boxes with this number. After this, the runtime places OnCompleted handler which turns the background of the window to green.

When we run this and click this button, it results in the following window after atleast 2 seconds. Definitely, it might be a different random number generated and filled in the operands text boxes.

Passing Arguments to Code executed by Observable.Start:
It doesn’t seem that we can have any parameters to Observable.Start directly. But we can use our old technique of using Captured Variables. As we know that lambdas can capture variables from the scope they are generated from. The variables used by lambda like this are called Captured variables. Like a regular lambda statement executed asynchronously, these variables also have Closure issues. I have discussed here how to avoid closure issues by assigning the value of captured variables to local variables inside lambdas.

http://shujaatsiddiqi.blogspot.com/2010/12/wpf-dispatcherbegininvoke-and-closures.html


private void button1_Click(object sender, RoutedEventArgs e)
{
    decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
    decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

    Observable.Start(() =>
                         {
                             Thread.Sleep(2000);

                             return operand1 + operand2;
                         })
                         .ObserveOnDispatcher()
                         .Subscribe(
                                (result) => { this.textBoxResult.Text = result.ToString(); });

    operand1 = 3;
    operand2 = 4;
}

In the above case what do you guess would be shown in the result textbox if we enter 2.1 and 3.5 in the two operand text boxes. If you guess 5.6 then you would be surprised to see this result.

This is the result of modified captured variables as the modified value of those captured variables are used which are 3 and 4. The result of addition of 3 and 4 is 7, which is displayed in the Result text box. In order to fix this, we can define two new local variables localOperand1 and localOperand2 and initialize them with the values of captured variables.


private void button1_Click(object sender, RoutedEventArgs e)
{
    decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
    decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

    Observable.Start(() =>
                         {
                             decimal localOperand1 = operand1;
                             decimal localOperand2 = operand2;

                             Thread.Sleep(2000);
 
                             return localOperand1 + localOperand2;
                         })
                         .ObserveOnDispatcher()
                         .Subscribe(
                                (result) => { this.textBoxResult.Text = result.ToString(); });

    Thread.Sleep(2);

    operand1 = 3;
    operand2 = 4;
}

When we run the application and enter data 2.1 and 3.5 then the correct result is displayed in the Result text box.

Although Resharper still shows warning but it is just fine as we have seen the correct result being calculated.

Observable.Start and Exceptions in the code executed:
As a result of an exception Observable.Start behaves same way as Observable.ToAsync. We can represent the behavior in marble diagram as follows:

Let us update the code executed asynchronously using Observable.Start so that if the sum of number entered is either zero or lesser, it should throw an Exception.


[DebuggerStepThrough]
private void button1_Click(object sender, RoutedEventArgs e)
{
    decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
    decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

    Observable.Start(() =>
    {
        decimal localOperand1 = operand1;
        decimal localOperand2 = operand2;
        decimal sum = localOperand1 + localOperand2;

        Thread.Sleep(2000);

        if (sum <= 0)
        {
            throw new System.Exception("Error in computation");
        }

        return sum;
    })
    .ObserveOnDispatcher()
    .Subscribe(
        (result) => { this.textBoxResult.Text = result.ToString(); },
        (ex) => this.Background = Brushes.Red,
        () => this.Background = Brushes.Green);

}

You can notice that we are still subscribing on Dispatcher. In addition to OnNext, we have provided the code for OnCompleted and OrError. The window should turn green when the operation completed successfully resulting in OnCompleted. In case of exception, OnError is executed.

Using IScheduler to run Asynchronous code:
Like Observable.ToAsync, Observable.Start also provides overloads to run the asynchronous code using different IScheduler. We can run code which returns or does not return any data in the form of lambda and we can run it using the IScheduler of our choice. You can see that just by providing Scheduler.Dispatcher info to Start we can turn this method to run on UI thread:


Observable.Start(() =>
    {
        Thread.Sleep(2000);

        return;
    }, Scheduler.Dispatcher
)

Note:
There is one more overload of Observable.Start which returns ListObservable<TSource>. Since it is not about executing anonymous asynchronous code, we are discussing it here.

Download Code:

WPF - ASynchronous Function using Observable.ToASync [Rx ASynchronous Delegate] - Part # 2

2011-02-23T22:45:00.011-06:00

This is the second part of our discussion about how we can execute the similar functionality as provided by asynchronous anonymous delegates in .net. In previous post we discuss how we can mimic the functionality provided by Func<...> delegate.

http://shujaatsiddiqi.blogspot.com/2011/02/wpf-asynchronous-function-using.html

In this post we will discuss about Action<...> delegate. As we know that we can not return any value from this compared to Func<...> delegate. As we know that .net provides 16 different generic overloads of Action<...> delegates in order to accommodate delegates for methods having up to 16 parameters. Similarly, 16 different overloads of Observable.ToAsync have been provided.

Let us add this method to our class:


[DebuggerStepThrough]
private void ProcessOperandsFireAndForget(decimal operand1, decimal operand2)
{
    Thread.Sleep(5000);
    if (operand1 <= 0 || operand2 <= 0)
    {
        throw new System.Exception("Exception generated");
    }
}

Since it returns void, we can use Action delegate for this. In Reactive Extension we can use Observable.ToAsync for this method. It just producing a delay of 5 seconds. If any of the operands are zero or negative, it is resulting in an exception with message "Exception generated".

In order to run this we add another button on the window. The handler for Click event for the button can be as follows:


private void btnFireAndForget_Click(object sender, RoutedEventArgs e)
{
    decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
    decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

    Observable.ToAsynclt;decimal, decimal>(ProcessOperandsFireAndForget, Scheduler.TaskPool)(operand1, operand2)
       .ObserveOnDispatcher()
       .Subscribe<Unit>(
                  (result) => { ; },
                  (ex) => this.Background = Brushes.Red,
                  () => this.Background = Brushes.Green);

}

Before running this code, let me explain the expected behavior. Basically you should be expecting the same behavior as of a method which actually returns a value. We can see that from marble diagram:

Graceful method execution:

Exception in method execution:

Now one thing is of interest which you might have already noticed. It is about OnNext message. Since OnNext passes some data in its argument, what data runtime would be passing in this as this method has void return type. Just to clarify this, I have used a generic overload of Subscribe method. See Unit type there? Basically is a new IEquatable struct provided in .net framework. Basically the message is generated. For methods with no return types, OnNext messages are generated with this type.

IScheduler support for Observable.ToAsync:
As I have told you that various overloads have been provided for Observable.ToAsync have been provided to accommodate all different overloads of Func and Action delegates. Make it at least double. Basically with each overload provided to support a particular number of arguments, one overload is provided to support an IScheduler so that we could decide which IScheduler to use to run this asynchronous code. Using these overloads we can specify which Scheduler we want to use to execute the method. Whatever thread is used to execute the method, would be the same thread on which OnNext, OnCompleted and OnError messages are generated.

Note:
We can also execute methods without any parameters with / without any return type using Observable.ToAsync. It would be following the same marble diagrams as presented in this post.

Download Code:

WPF - ASynchronous Function using Observable.ToASync [Rx ASynchronous Delegate] - Part # 1

2011-02-22T22:35:00.022-06:00

This is the first part of our discussion about asynchronous method execution using Reactive Extension. The second part of this discussion can be found here:

http://shujaatsiddiqi.blogspot.com/2011/02/wpf-asynchronous-function-using_23.html

In this post we discuss how we can execute a method asynchronously using the features provided in Reactive Extensions Rx. We discussed the usage of asynchronous delegate in a WPF application in the following post:

http://shujaatsiddiqi.blogspot.com/2010/12/asynchronous-delegate-exception-
model.html
This is basically the similar concept in Rx.


<Window x:Class="WpfApp_AsynchObserver.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox Height="27" HorizontalAlignment="Left" Margin="138,22,0,0"      
                 Name="textBoxOperand1" VerticalAlignment="Top" Width="311" />
        <TextBox Height="27" HorizontalAlignment="Left" Margin="138,55,0,0"      
                 Name="textBoxOperand2" VerticalAlignment="Top" Width="311" />
        <TextBox Height="27" HorizontalAlignment="Left" Margin="138,143,0,0"     
                 Name="textBoxResult" VerticalAlignment="Top" Width="311" />
        <Button Content="Sum" Height="28" HorizontalAlignment="Left" Margin="139,88,0,0"              
                Name="button1" VerticalAlignment="Top" Width="143" Click="button1_Click" />
        <Label Content="Operand 1" Height="27" HorizontalAlignment="Left" Margin="12,22,0,0"             
               Name="label1" VerticalAlignment="Top" Width="120" />
        <Label Content="Operand 2" Height="27" HorizontalAlignment="Left" Margin="12,55,0,0"         
               Name="label2" VerticalAlignment="Top" Width="120" />
        <Label Content="Result" Height="27" HorizontalAlignment="Left" Margin="12,143,0,0"          
               Name="label3" VerticalAlignment="Top" Width="120" />
    </Grid>
</Window>

The code behind is as follows:


public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private decimal ProcessOperands(decimal operand1, decimal operand2)
    {
        decimal sum;
        sum = operand1 + operand2;

        return sum;
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
        decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

        this.textBoxResult.Text = ProcessOperands(operand1, operand2).ToString();
    }
}

Lets run the application now. Everything is working great. We enter numeric digits in the two operands fields. When we click Enter, the result appears in the Result text box. Now let us change the method call (ProcessOperands) to be an asynchronous call using Observable.ToAsync. We need to update the button’s click handler as follows:


private void button1_Click(object sender, RoutedEventArgs e)
{
    decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
    decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

    Observable.ToAsync<decimal, decimal, decimal>(ProcessOperands)(operand1, operand2)
        .Subscribe(
                     (result) => { this.textBoxResult.Text = result.ToString(); }
                  );
}

The code clearly shows that we have used an overload of ToAsync which takes two decimal values as arguments and returns a decimal value. We have used this as our ProcessOperand method is defined like that. You can see that we have used the value provided in the onNext parameter to populate the textBoxResult. Basically onNext is placed when the async code is finished execution and result is available. If we compare it to the code we have written for Asynchronous delegates, we realize that Rx has internally executed code for BeginInvoke and also called EndInvoke for us getting the result using IAsyncResult. If we look at the marble diagram, it should be like this.

In the marble diagram, this has shown to be placing an OnCompleted message afterwards. Let us verify that this event is generated. In the following code, we are updating the Background color to green when OnCompleted message is received from the Observable generated for the method.


private void button1_Click(object sender, RoutedEventArgs e)
{
    decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
    decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

    Observable.ToAsync<decimal, decimal, decimal>(ProcessOperands)(operand1, operand2)
        .Subscribe(
                     (result) => { this.textBoxResult.Text = result.ToString(); },
                     () => this.Background = Brushes.Green
                  );
}

Now we run the application and enter values in the operands text boxes. When we click the button, the textBoxResult is updated with the sum of two operands. The window also turns green. This is due to the code we have written in OnCompleted handler.

Long running methods and Rx Thread Management for generating asynchronous block:
Now you might be thinking that this is a very simple example. What if the method is a long running method taking a few seconds. Would it still be the same code. Let’s mimic that this method is taking a few seconds by putting Thread.Sleep in method code as follows:


private decimal ProcessOperands(decimal operand1, decimal operand2)
{
    decimal sum;
    sum = operand1 + operand2;

    Thread.Sleep(5000);
}

If you run this and enter data in the input text boxes and click Sum. You get the following exception:

Why is this exception generated by just delaying in the asynchronous method? Basically we have caused the subscription to be on a ThreadPool thread. Since we are delaying for 5 seconds, all Rx messages (OnNext, OnCompleted and OnError) seem to be dispatched on the calling thread of subscriber.

It seems if there is a delay of more than 3 milliseconds then the OnNext messages are dispatched on a ThreadPool thread otherwise they are dispatched on the thread of the subscriber. In this case it is UI thread. If the delay is 3 milliseconds or lesser these messages are always dispatched on UI thread. This is true even though we know that ToAsync is causing the method to be executed on a ThreadPool thread.

Fig: When OnNext is received in more than 3 milliseconds:

Fig: When OnNext is received in 3 milliseconds or less:

How exceptions are handled?

As we have discussed [http://shujaatsiddiqi.blogspot.com/2010/12/asynchronous-delegate-exception-model.html] the runtime is silent about exceptions for Async delegates if we don’t call EndInvoke. It is not the case with Observable.ToAsync. It always generate exception message OnError when there is an exception in the method executed asynchronously. Let us change the code of ProcessOperands so that it throws an exception.


[DebuggerStepThrough]
private decimal ProcessOperands(decimal operand1, decimal operand2)
{
    decimal sum;
    sum = operand1 + operand2;

    if (sum < 0)
    {
        throw new System.Exception("Exception in processing data!");
    }

    return sum;
}

The above code is resulting an exception if the sum of these two operands is negative. We also need to update the code so that IObservable generated from Observable.ToAsync has a non-default OnError handler. I have decorated the method with DebuggerStepThrough attribute so that Debugger doesn’t bother me as I have FCEs turned on. Let’s update button1_Click as follows:


private void button1_Click(object sender, RoutedEventArgs e)
{
    decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
    decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

    Observable.ToAsync<decimal, decimal, decimal>(ProcessOperands)(operand1, operand2)
        .Subscribe(
            (result) => { this.textBoxResult.Text = result.ToString(); },
            (ex) => this.Background = Brushes.Red,
            () => this.Background = Brushes.Green
        );
}

It just changes the background of the window to Red if there is an OnError message from the method. Let’s run the application and enter data 2 and -5 in the operand fields. As we know that their sum is -3, the background of the window should turn Red.

We can show this in marble diagram as follows:

Observing on Non-UI thread using different IScheduler:

Now we suppose that the method would always take more than 3 milliseconds. Can we still use ToAsync feature of Observable? Yes we can!

We just need to Observe on the Dispatcher. This can be done by using ObserveOn feature of IObservable. There are two methods provided for this purpose. One method allows us to generate the messages on any IScheduler (including built-in schedulers like Dispatcher, ThreadPool, TaskPool, Immediate, CurrentThread, NewThread). We can use any of the four overloads of this method. We can also directly use ObserveOnDispatcher method from IObservable. We have used the same as below.


private void button1_Click(object sender, RoutedEventArgs e)
{
    decimal operand1 = Decimal.Parse(this.textBoxOperand1.Text);
    decimal operand2 = Decimal.Parse(this.textBoxOperand2.Text);

    Observable.ToAsync<decimal, decimal, decimal>(ProcessOperands)(operand1, operand2)
        .ObserveOnDispatcher<decimal>()
        .Subscribe(
            (result) => { this.textBoxResult.Text = result.ToString(); },
            (ex) => this.Background = Brushes.Red,
            () => this.Background = Brushes.Green
        );
}

Now we run the application. Although the method is being executed on a separate ThreadPool thread but the OnNext, OnError and OnCompleted messages are dispatched on UI thread.

Fig: Method executed on a ThreadPool thread

Fig: OnNext message generated on Main UI Thread

Fig: OnCompleted placed on Main UI thread

Fig: OnError placed on Main UI thread

Limitations:
Since this is a way to implement Anonymous asynchronous delegates using Reactive Extensions so it seems to have has the same limitation as anonymous asynchronous delegate (Func) has. We can not have out or ref parameters in the method that we want to execute asynchronously. In non-reactive model, we might easily implement named asynchronous delegate as a work around but in the reactive extension world there doesn't seem to be any alternative.

Download Code:

IObservable.Throttle causes OnNext on ThreadPool thread

2011-02-17T22:45:00.013-06:00

This is a continuation of our following post:

http://shujaatsiddiqi.blogspot.com/2011/02/mvvm-observable-inotifypropertychangedp.html

In the above post we discussed about using PropertyChanged event of INotifyPropertyChanged by observing EventStream support of Reactive Extensions Rx. In this post we change the view model a bit. We remove the implementation of INotifyPropertyChanged. We rather define it as a DependencyObject to support a different change notification mechanism from view model. This is to demonstrate the following:

IObservable.Throttle causes OnNext to be generated on a ThreadPool thread instead.

We will see what problems might be caused by this and how we can work around this.


public class StudentViewModel : DependencyObject
{
    #region Model
    private Student _model;
    #endregion Model

    #region Constructor

    public StudentViewModel(Student student)
    {
        _model = student;

        Observable.FromEvent<PropertyChangedEventArgs>(_model, "PropertyChanged")
            .Where(et => et.EventArgs.PropertyName == "StudentName")
            .Subscribe((arg) =>
                           {
                               this.StudentId = _model.StudentId;
                               this.StudentName = _model.StudentName;
                           });
    }

    #endregion Constructor

    #region Dependency Properties

    public static DependencyProperty StudentIdProperty =
        DependencyProperty.Register("StudentId", typeof(int), typeof(StudentViewModel));
    public int StudentId
    {
        get { return (int)GetValue(StudentIdProperty); }
        set { SetValue(StudentIdProperty, value); }
    }

    public static DependencyProperty StudentNameProperty =
        DependencyProperty.Register("StudentName", typeof(string), typeof(StudentViewModel));
    public string StudentName
    {
        get { return (string)GetValue(StudentNameProperty); }
        set { SetValue(StudentNameProperty, value); }
    }

    #endregion Dependency Properties

    #region Overriden methods of DependencyObject
    protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
    {
        base.OnPropertyChanged(e);
        switch (e.Property.Name)
        {
            case "StudentId":
                _model.StudentId = (int)e.NewValue;
                break;
            case "StudentName":
                _model.StudentName = (string)e.NewValue;
                break;
        }
    }
    #endregion Overriden methods of DependencyObject
}

We have update the properties StudentId and StudentName to be Dependency properties. To synchronize the model's corresponding properties we have overridden OnPropertyChanged method of DependencyObject. The argument DependencyPropertyChangedEventArgs , not only, provides us the details about the property being updated but it also provides the old and new values of this property. As you can see we are just using the new values of these properties to update the corresponding model's properties.

We have kept the handling of model's PropertyChanged event observation using Reactive extension's Observable event stream support available in CoreEx assembly. Let's run the application now and open two child windows.

When we enter StudentName in one child window, the same changes are reflected in the other child window.

Now we add throttling support in order to avoid frequent updates to the other child windows due to updates in model's properties. Let's update the constructor of StudentViewModel as follows:


public StudentViewModel(Student student)
{
    _model = student;

    Observable.FromEvent<PropertyChangedEventArgs>(_model, "PropertyChanged")
        .Where(et => et.EventArgs.PropertyName == "StudentName")
        .Throttle(TimeSpan.FromMilliseconds(500))
        .Subscribe((arg) =>
                       {
                           this.StudentId = _model.StudentId;
                           this.StudentName = _model.StudentName;
                       });
}

This definition is same as previous. We have just used Throttling for PropertyChanged event for 500 milliseconds. Now we run the application. Open two child windows and enter data in StudentName property in one of the child window. As soon as we settle, the application shuts down. Let's see what is going on by updating the code further as follows:


public StudentViewModel(Student student)
{
    _model = student;

    Observable.FromEvent<PropertyChangedEventArgs>(_model, "PropertyChanged")
        .Where(et => et.EventArgs.PropertyName == "StudentName")
        .Throttle(TimeSpan.FromMilliseconds(500))
        .Subscribe((arg) =>
                       {
                           try
                           {
                               this.StudentId = _model.StudentId;
                               this.StudentName = _model.StudentName;
                           }
                           catch (Exception ex)
                           {
                               MessageBox.Show(ex.Message);
                           }
                       });
}

Now we run the application and enter data in StudentName text box as previous. The exception handling logic causes the following MessageBox to be displayed.

This is because of the reason that IObservable.Throttle causes OnNext to be placed in a ThreadPool thread.

Using Invoke / BeginInvoke on Dispatcher:
The first solution could be to directly using Dispatcher.Invoke / Dispatcher.BeginInvoke. We can specify the code that we want to execute in the Action delegate. The delegate's code is executed here on UI thread. We update the constructor as follows:


public StudentViewModel(Student student)
{
    _model = student;

    Observable.FromEvent<PropertyChangedEventArgs>(_model, "PropertyChanged")
        .Where(et => et.EventArgs.PropertyName == "StudentName")
        .Throttle(TimeSpan.FromMilliseconds(500))
        .Subscribe((arg) =>
                       {
                           Dispatcher.BeginInvoke(new Action(() =>
                                  {
                                      this.StudentId = _model.StudentId;
                                      this.StudentName = _model.StudentName;
                                  }), null);                                   
                           
                       });
}

Now we run the application. Again we open two windows and enter data in StudentName text box. We see that the data is successfully updated in the other window now. Let's insert the break point again in OnNext code.

Using other overload of Throttle:
We can use other overload of IObservable.Throttle method. This requires an additional overload which has an additional parameter of type IScheduler. IScheduler is a Rx interface available in CoreEx assembly and System.Concurrency namespace.


public StudentViewModel(Student student)
{
    _model = student;

    Observable.FromEvent<PropertyChangedEventArgs>(_model, "PropertyChanged")
        .Where(et => et.EventArgs.PropertyName == "StudentName")
        .Throttle(TimeSpan.FromMilliseconds(500), Scheduler.Dispatcher)
        .Subscribe((arg) =>
                       {
                           this.StudentId = _model.StudentId;
                           this.StudentName = _model.StudentName;
                       });
}

We have specified Scheduler.Dispatcher for other parameter. This is also available in System.Concurrency namespace. It is available in CoreEx assembly. This is saving us from dispatching in our code but Throttle's generated OnNext messages will be generated in the UI thread. Let's run the application and open two child windows like before.

Download:

WPF MVVM - Retry & Catch for Observables in Reactive Extension Rx

2011-02-15T22:14:00.023-06:00

In this post we are going to simulate a scenario of client server communication. This would simulate how observables can be used to attempt to reconnect to the server and then switching to a different server after a few unsuccessful attempts. We will keep the view simple. We would just keep a TextBlock to show the status of connection. If it is connected, the status should be displayed with green foreground, otherwise it should be shown with Red foreground.


<Window x:Class="Wpf_MVVM_Observables.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Wpf_MVVM_Observables"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <Label Content="Connection Status:" Height="25" HorizontalAlignment="Left"
               Margin="12,114,0,0" Name="lblConnectionStatusMessage" VerticalAlignment="Top" Width="122" />
        <TextBlock Height="27" HorizontalAlignment="Left" Margin="140,119,0,0"
                   Name="textBlockConnectionStatusMessage" Text="{Binding ConnectionStatusMessage}"
                   VerticalAlignment="Top" Width="221" >
            <TextBlock.Style>
                <Style>
                    <Setter Property="TextBlock.Foreground" Value="Red" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ConnectionStatusMessage}" Value="Connected">                          
                            <Setter Property="TextBlock.Foreground" Value="Green" />                           
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

This is expecting MainWindowViewModel in the same assembly. The view model should have a property, named ConnectionStatusMessage. The text of connection message is shown by binding it directly to the Text property of the TextBlock. The foreground of the message is managed through a DataTrigger on the TextBlock. DataTrigger allows us to trigger based on the values of ConnectionStatusMessage from DataContext. If the value is “Connected”, we are setting it as Green, otherwise, it would keep it as Red. Below are the way the view should appear in both states:

When connected:

When Disconnected (with specific connection status message):

The simplest view model to fulfill the requirements of the above view can be developed as presented below:


class MainWindowViewModel : INotifyPropertyChanged
{
     #region Properties

     private string _connectionStatusMessage;

     public string ConnectionStatusMessage
     {
         get { return _connectionStatusMessage; }
         set
         {
             _connectionStatusMessage = value;
             OnPropertyChanged("ConnectionStatusMessage");
         }
     } 

     #endregion Properties 

     #region INotifyPropertyChanged implementation 

     public event PropertyChangedEventHandler PropertyChanged = delegate { };

     private void OnPropertyChanged(string propertyName)
     {
         PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
     }   

     #endregion INotifyPropertyChanged implementation
}

As expected by the view, it has a property ConnectionStatusMessage. This is a string property. This is supporting change notification by implementing INotifyPropertyChanged. To verify if the view logic actually works, we can use DispatcherTimer and keep flipping the status message and see the effects in the view. We can update the view model by adding this code:


private DispatcherTimer _timer;

public MainWindowViewModel()
{
    _connectionStatusMessage = "Disconnected";

    _timer = new DispatcherTimer();
    _timer.Interval = TimeSpan.FromSeconds(3);
    _timer.Tick += new EventHandler(_timer_Tick);
    _timer.Start();
} 

void _timer_Tick(object sender, EventArgs e)
{
    ConnectionStatusMessage = (_connectionStatusMessage == "Connected") ? "Disconnected" : "Connected";
}

We have just used DispatcherTimer to flip the status message between Connected and Disconnected after every 3 seconds. When we run the application we notice that when status message is Connected, the foreground appears as Green, otherwise for Disconnected, it appears as Red. We would need to add System.Windows.Threading namespace for using DispatcherTimer. When we are done testing, the above code can be safely removed from the view model.

Now we consider that we have a Server connection type which is observable. We will see the possible gains, by just making these types Observable. Here we are using static methods of Observable and Observer classes available in System.Linq namespace. We need to add the reference of System.Reactive assembly (currently need to install reactive extensions).

Observable.Create allows to define an Observable without actually implementing IObservable interface. We can specify the code we need to execute when an observer subscribes to this. This is an example of Cold Observable i.e. it only exists when an observable subscribes to it. Since server communications are generally maintained on a separate worker thread, we have created a new background thread [IsBackground = true]. This would also keep the UI responsive. Observable.Create has two overloads. One overload returns an IDisposable. The other one returns an Action delegate. This is the code executed when the observer gets unsubscribed. We have specified the return statement in the form of a lambda statement. All the Thread.Sleep statements are just to keep the different messages on the UI for a while so that we could see those messages on the display.


public MainWindowViewModel()
{
    IObservable<Server> observableServerConnection = Observable.Create<Server>((o) =>
                                                                   {
                                                                       new Thread(() => {
                                                                                           for (int i = 0; i < 3; i++)
                                                                                           { 
                                                                                              Thread.Sleep(2000);
                                                                                              o.OnNext(new Server() { ServerStatus = "Connected"});
                                                                                            }
                                                                                            o.OnError(new Exception("Server Disconnected"));
                                                                                  }) {IsBackground = true}.Start();
 
                                                                       return () =>
                                                                                  {
                                                                                      ConnectionStatusMessage = "Running Disconnect Procedure!";
 
                                                                                      Thread.Sleep(2000);
                                                                                      ConnectionStatusMessage = "Disconnected";
                                                                                  };
                                                                   });
 
    IObserver<Server> observer = Observer.Create<Server>(
        (server) => this.ConnectionStatusMessage = server.ServerStatus,
        (ex) => {
                    this.ConnectionStatusMessage = "Getting Disconnected";
                    Thread.Sleep(2000);
        });
    
    observableServerConnection.Subscribe(observer);
 
}

Like Observable, Observer also allows us to define an IObserver without actually implementing it by a class. We can specify the handlers for OnNext, OnCompleted and OnError. There are different overloads available. At the minimum, we need to specify the handler for OnNext. Here we have specified the handlers for OnNext and OnError. For the remaining methods, default implementation of these methods in Observer class are used. For this example, the connection status is updated on the display as follows:

After each OnNext message (step 1):

After OnError is called from Observable (step 2)

Observer is automatically un-subscribed (step 3-a)

Observer is automatically un-subscribed (step 3-b)

In order to understand the above example better, we can draw a marble diagram. You can see that the Observable keeps on sending OnNext messages ten times. After that it sends calls OnError on the Observer. After this, the unsubscription code is executed. This explains the order of messages:

- Connected (Due to OnNext)
- Getting Disconnected (Due to OnError)
- Running Disconnect Procedure! (Due to unsubscription)
- Disconnected (Due to unsubscription)

Now you can see that unsubscription code is executed when OnError is finished execution.

Attempt to Retry few times before giving up:
Now we assume a requirement which directs us to try to reconnect a few times to a server before giving it up. We want to show that how easily it is for Observable to work in a situation like this. Just comment the subscription in the previous code and update it with the following code:


observableServerConnection.Retry(2).Subscribe(observer);

This code attempts to subscribe two times. If there is an error after two times, OnError of Observable is called with the exact exception message. The order of messages displayed on the screen would be as follows:

- Connected
- Running Disconnect Procedure!
- Disconnected
- Connected
- Getting Disconnected
- Running Disconnect Procedure!
- Disconnected

After seeing the marble diagram below the above sequence of messages should make sense. It can tell why OnError is executed before unsubscription code when observable is retrying. Basically, for the last Observable, the unsubscription code would be executed after OnCompleted / OnError is called on the Observable.

After Certain number of attempts, connect to a different server:
What if we need to connect to a different server after making a certain number of attempts to a server. In the example below, we are trying to reconnect two times to the server. After failing again, it just doesn't give up but attempt to connect to a different server. Look at how easy it could become if we implement Server's connection as Observable. Here we have used Catch method of Observable. We just need to update the constructor or MainWindowViewModel. We have created a new Observable like already existing Observable. If there is no error finally in the Observable on which Catch is defined then this Observable is not subscribed.


public MainWindowViewModel()
{
    IObservable<Server> observableServerConnection =
        Observable.Create<Server>((o) =>
                                      {
                                          new Thread(() =>
                                                         {
                                                             for (int i = 0; i < 3; i++)
                                                             {
                                                                 Thread.Sleep(2000);
                                                                 o.OnNext(new Server()
                                                                              {ServerStatus = "Connected"});
                                                             }

                                                             o.OnError(new Exception("Server Disconnected"));
                                                             //o.OnCompleted();
                                                         }) {IsBackground = true}.Start();

                                          return () =>
                                                     {
                                                         ConnectionStatusMessage =
                                                             "Running Disconnect Procedure!";

                                                         Thread.Sleep(2000);

                                                         ConnectionStatusMessage = "Disconnected";
                                                     };
                                      });

    IObservable<Server> observableServerConnection2 =
        Observable.Create<Server>((o) =>
        {
            new Thread(() =>
            {
                for (int i = 0; i < 3; i++)
                {
                    Thread.Sleep(2000);
                    o.OnNext(new Server() { ServerStatus = "Connected" });
                }

                o.OnError(new Exception("Server Disconnected2"));
                //o.OnCompleted();
            }) { IsBackground = true }.Start();

            return () =>
            {
                ConnectionStatusMessage =
                    "Running Disconnect Procedure 2!";

                Thread.Sleep(2000);

                ConnectionStatusMessage = "Disconnected2";
            };
        });

    IObserver<Server> observer =
        Observer.Create<Server>(
            (server) => this.ConnectionStatusMessage = server.ServerStatus,
            (ex) =>
                {
                    this.ConnectionStatusMessage = "Getting Disconnected";
                    Thread.Sleep(2000);
                });
    
    //observableServerConnection.Subscribe(observer);
    
    observableServerConnection.Retry(2).Catch<Server>(observableServerConnection2).Subscribe(observer);

}

The view goes through these steps when application is run:

- Connected
- Running Disconnect Procedure!
- Disconnected
- Connected
- Running Disconnect Procedure!
- Disconnected
- Connected
- Getting Disconnected
- Running Disconnect Procedure 2!
- Disconnected2

Download:

MVVM - Joining Rx's IObservables using LINQ to IObservable in a WPF Application

2011-02-13T11:49:00.018-06:00

In this post, we will see how we can combine two IObservable(s) using LINQ. The project is developed on top of the code as developed in this post:

http://shujaatsiddiqi.blogspot.com/2011/02/mvvm-view-model-iobserver-observing.html

We will just be discussing the changes required for this example. For the discussion of complete code please refer to the link provided above.

As in the previous post, the view model will be observing the data streams from to IObservable. It needs to combine them both using LINQ (as specified above). It would be interesting as we would see how data is combined when data is pushed by the IObservable. As soon as the data is available, it would automatically combine it using different operators provided by Reactive Extensions (Rx). Since we don't need to display data separately in the view, we update the view just to have one ListBox. The ListBox should show Id and Name of each Student. It should also show the name of the course the student is enrolled in, which could be obtained from observing CourseModel.

After completion of data stream, the use should be notified by changing the Fill color of ellipse as green. The expected final display is shown as follows:

To update the view as described above, we need to update the design of the view as follows:


<Window x:Class="WpfApp_MVVM_ReactiveModel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp_MVVM_ReactiveModel"
        Title="MainWindow" Height="350" Width="525" >    
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>   
    <Grid>       
        <ListBox Height="250" HorizontalAlignment="Left" Margin="-2,0,0,0" 
                 Name="listBox1" VerticalAlignment="Top" Width="493" 
                 ItemsSource="{Binding StudentList}">
            <ListBox.ItemTemplate>
                <DataTemplate >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding StudentId, StringFormat=Id:{0}}" />
                        <TextBlock Text="       " />
                        <TextBlock Text="{Binding StudentName, StringFormat=Name:{0}}" />
                        <TextBlock Text="       " />
                        <TextBlock Text="{Binding CourseName, StringFormat=Name:{0}}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Ellipse Height="39" HorizontalAlignment="Left" Margin="370,257,0,0" 
                 Name="ellipse1" Stroke="Black" VerticalAlignment="Top" Width="116" >
            <Ellipse.Style>                
                <Style TargetType="{x:Type Ellipse}">
                    <Style.Setters>
                        <Setter Property="Fill" Value ="Blue" />
                    </Style.Setters>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsLoaded}" Value="true" >
                            <Setter Property="Fill" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>
    </Grid>
</Window>

The view is still using MainWindowViewModel as DataContext. You can see that an additional TextBlock is added to the template of items of ListBox. It is bound to CourseName from each item of the collection bound to the list box. The DataContext is expected to have a collection StudentList with items having properties StudentId, StudentName and CourseName. This is implemented as an ObservableCollection so that as the items are entered in the collection, the view could update itself using the notification mechanism built-in for this type of collection. It should also have a boolean property, IsDataLoaded. It should turn true when data is completely loaded. This is used in DataTrigger in the view to turn the notification ellipse to be filled as Green. We need to implement INotifyPropertyChanged just because of this property so that view can be notified for this change and the data triggered could trigger the fill color of the ellipse.


class MainWindowViewModel : INotifyPropertyChanged
{
    private readonly ObservableCollection<StudentViewModel> _studentList = 
        new ObservableCollection<StudentViewModel>();

    public ObservableCollection<StudentViewModel> StudentList
    {
        get { return _studentList; }
    }

    private bool _isLoaded = false;
    public bool IsLoaded
    {
        get { return _isLoaded; }
        set 
        {
            _isLoaded = value;
            onPropertyChanged("IsLoaded");
        }
    }

    public MainWindowViewModel()
    {
        var courseModel2 = new CourseModel();
        var studentModel2 = new StudentsModel();

        (from c in courseModel2
         from s in studentModel2
         where s.CourseId == c.CourseId
         select new { s.StudentName, s.StudentId, c.CourseName })
            .Subscribe(
                (on) => _studentList.Add(new StudentViewModel(on)),
                (ex) => Console.WriteLine(@"On error"),
                () => IsLoaded = true);
     
    }

    #region INotifyPropertyChanged implementation
    public event PropertyChangedEventHandler PropertyChanged;
    private void onPropertyChanged(string propertyname)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
        }
    }
    #endregion INotifyPropertyChanged implementation
}

The focal point of this post is the constructor of MainWindowViewModel. Here we are combining to IObservable based collections using LINQ. This is a special new flavor of LINQ released with Rx. This is called LINQ to IObservable. This is available in System.Reactive assembly. Let's have a close look at the constructor.

>
public MainWindowViewModel()
{
    var courseModel2 = new CourseModel();
    var studentModel2 = new StudentsModel();

    (from c in courseModel2
     from s in studentModel2
     where s.CourseId == c.CourseId
     select new { s.StudentName, s.StudentId, c.CourseName })
        .Subscribe(
            (on) => _studentList.Add(new StudentViewModel(on)),
            (ex) => Console.WriteLine(@"On error"),
            () => IsLoaded = true);
 
}

So we are cross-joining instances of CourseModel and StudentsModel. This would be creating a Cartesian Product. We are filtering it for only those which have matching CourseId(s).

As specified in the definition of the view, we are interested in StudentId and StudentName from StudentsModel and CourseName from CourseModel.

The cross product of Cartesian Product of two or more IObservable(s) is also an IObservable. This enables us to subscribe to it by providing the OnNext, OnCompleted and OnError of Observer. It is to remember that MainWindowViewModel is not the observable for the new IObservable created by combining CourseModel and StudentsModel. Rx run-time would take care of how the provided lambda expressions for OnNext, OnCompleted and OnError are to be executed.

The overload of Subscribe method that we have used takes three arguments OnNext, OnError and OnCompleted respectively. We are not doing anything useful in the lambda expression provided for OnError except just writing on the exception message on the console. In the OnCompleted expressoin we are setting IsLoaded to true. This would trigger the DataTrigger in the view and change the fill color of Notification ellipse to Green. The type of parameter of OnNext is the anonymous type created for Select. This would have same elements with similar names. As we have data available in OnNext, we are creating a StudentViewModel object and add it to the StudentsList ObservableCollection . This is bound to the ListBox in the view which would show this new element. Though we can not use foreach for IObservable as it is a feature of just IEnumerable, we can understand it by this nested foreach loop. Don't even try this:

Since the combined collections have IObservable based, we don't have the data available at the same time. This makes it very special form of joining. This would keep each element of courseModel2 in memory until OnCompleted is not executed from studentModel2. As the elements are being received in background OnNext for studentModel they are combined with each element of courseModel. This would be creating equal number of Observers for studentModel2 as the total number of elements pushed by courseModel2. As the elements of courseModel2 continue to be received they are added to the list of Observers of studentModel2.

We should be able to safely make a summarized statement about it as follows:

All the elements pushed through OnNext of courseModel2 would be combined with all the elements pushed by studentModel2. If there is any OnNext of either of these IObservable before this LINQ, that would not be considered for joining.

As soon as the OnCompleted is executed for this Observer created at runtime, it would automatically unsubscribe it by disposing itself. As we have seen in previous posts that disposing an unsubscriber would result in its unsubscription. I think this is the default implementation provided for this dynamic Observer by Rx runtime.

This would need updates in StudentViewModel. We need to add a property CourseName as used in MainWindowViewModel. There is one more interesting thing, the datatype of parameter for constructor is specified as dynamic. This is basically because of anonymous type constructed during LINQ operation. In the constructor, we are using it as a duck type datatype, we know what properties would it have but we don't know it's name as it would be assigned any arbitrary name at run-time. This is a special feature of .net framework 4.0 [http://msdn.microsoft.com/en-us/library/dd264736.aspx].


class StudentViewModel : INotifyPropertyChanged
{
    public StudentViewModel(dynamic student)
    {
        this.StudentId = student.StudentId;
        this.StudentName = student.StudentName;
        this.CourseName = student.CourseName;
    }

    private string _courseName;
    public string CourseName
    {
        get { return _courseName; }
        set 
        { 
            _courseName = value;
            OnPropertyChanged("CourseName");
        }
    }

    private string _studentName;
    public string StudentName
    {
        get { return _studentName; }
        set 
        { 
            _studentName = value;
            OnPropertyChanged("StudentName");
        }
    }

    private int _studentId;
    public int StudentId
    {
        get { return _studentId; }
        set
        {
            _studentId = value;
            OnPropertyChanged("StudentId");
        }
    }

    #region INotifyPropertyChanged implementation

        public event PropertyChangedEventHandler  PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        #endregion INotifyPropertyChanged implementation
}

So we need to update Student to add a new property, CourseId. This would be used as a key to join StudentsModel and CourseModel IObservable collections. This is int type.

>
class Student 
{
    public string StudentName { get; set; }
    public int StudentId { get; set; }
    public int CourseId { get; set; }
}

Since we have updated Student type, we need to update the definition for StudentsModel. This is to specify value of CourseId. We are just deriving it based on a algorithm [If _studentId is odd then set CourseId as 2, otherwise, set it as 1]. We are also reducing the number of times that timer event would execute. You can see that we are calling Observer's OnCompleted just when the event has been executed 3 times. As we call OnCompleted on Observer, we are also stopping the timer, this would not keep the timer running on the background.

>
class StudentsModel : IObservable<Student>
{
    private int _studentId = 1;

    //Timer to notify observers about updates in the reactive observable
    private readonly DispatcherTimer _t = new DispatcherTimer();

    public List<IObserver<Student>> Observers = 
        new List<IObserver<Student>>();

    public StudentsModel()
    {
        _t.Interval = TimeSpan.FromMilliseconds(3000);
        _t.Tick += new EventHandler(Tick);
        _t.Start();
    }

    void Tick(object sender, EventArgs e)
    {
        var student = new Student()
                          {
                              StudentId = _studentId,
                              StudentName = string.Format("Student: {0}", _studentId),
                              CourseId = ((int)(_studentId % 2)) + 1
                          };

        if (_studentId <= 3)
        {
            Observers.ForEach((observer) => observer.OnNext(student));
            _studentId++;
        }
        else
        {
            Observers.ForEach((observer) => observer.OnCompleted());
            _t.Stop();
        }
    }

    public IDisposable Subscribe(IObserver<Student> observer)
    {
        IDisposable unSubscriber = new Unsubscriber<Student>(Observers, observer);
        if (!Observers.Contains(observer))
        {
            Observers.Add(observer);
        }
        return unSubscriber;
    }
}

Now Let's run the application. The application runs successfully and we see the elements being added to the list box.

But there is a weird thing. The notification ellipse is still filled as blue. It should have turned Green if OnCompleted of the LINQ result is executed in MainWindowViewModel. It means that OnCompleted ,for this, is not executed. You can prove that by inserting break point in the lambda expression used for OnCompleted. But the main question is why it is not executed??

Basically, we have discussed that equal numbers of Observers would be created for studentModel2 as the number of elements pushed by courseModel2 after the LINQ statment is executed. So there are will be two observers for this. If we insert break-point in the Tick event handler for timer _t in StudentsModel then we realize that OnCompleted is executed only once. We need to execute OnCompleted for all observers to fix this. This is really weird because we are using Foreach on Obsevers List. It should have executed the OnCompleted for all observers. There should have been no Observer in the list before next statement is executed [_t.Stop()]. But if we put a break point then it seems that OnCompleted is executed only once as one Observer is still lingering on.

This seems to get fixed if we update the code as follows:


void Tick(object sender, EventArgs e)
{
    var student = new Student()
                      {
                          StudentId = _studentId,
                          StudentName = string.Format("Student: {0}", _studentId),
                          CourseId = ((int)(_studentId % 2)) + 1
                      };

    if (_studentId <= 3)
    {
        Observers.ForEach((observer) => observer.OnNext(student));
        _studentId++;
    }
    else
    {
        Observers.ToList().ForEach((observer) => observer.OnCompleted());                
        _t.Stop();
    }
}

Now run this and insert the break point appropriately.

We have just called ToList() on a collection which is already a Generic List to fix this. This shows some issue with the deferred execution of Lambdas of foreach here, which is executing OnCompleted for each observer. This would definitely introduce some performance delay but whatever works...

Now since all the OnCompleted have been executed for all the collections involved in the LINQ query, it is safe to executed the OnCompleted of the result. Rx runtime does exactly that. This sets IsLoaded to true and results in filling the Notification ellipse as Green.

Download Code:

MVVM - Observable INotifyPropertyChanged.PropertyChanged Event Stream Using Reactive Extension

2011-02-10T21:24:00.022-06:00

In this post we are going to discuss how we can use observable event streams using Reactive Extension. Since we have been trying to apply this knowledge to MVVM and seeking what benefit we can obtain from Rx, we will be mostly interested in those events which we deal with the most frequently. One such event is PropertyChanged event of INotifyPropertyChanged.

Let’s start with a sample WPF application. As is general in this blog, We will start with a very simple example. Then we will keep adding complexity to it and discuss why we actually need them. Below is a typical WPF window. It just has a button. We need to show another window to enter the details about student.


<Window x:Class="WpfApp_MVVM_ReactiveModelSynch.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Show Student Form" Height="47" HorizontalAlignment="Left"
                Margin="104,244,0,0" Name="button1" VerticalAlignment="Top" Width="318" Click="button1_Click" />
    </Grid>
</Window>

Since these details need to be shared between different StudentView windows, we are defining the Student object as instance variable. When user clicks the window, we are constructing the view model on the fly but we keep passing the same Student instance. This would enable the information to be shared between different windows. We are calling Show() on this new instance of StudentView. As you know this would show this window as a Modeless window. This is to demonstrate the scenarios in which we might not instantiate view models inside the view but we need to hand it over, somehow, to the view.


public partial class MainWindow : Window
{
    private Student _student;

    public MainWindow()
    {
        InitializeComponent(); 

        _student = new Student();
    } 

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        new StudentView(new StudentViewModel(_student)).Show();
    }
}

Now we have a look at the definition of StudentView. It just has two text boxes for user entry. The information regarding Id and Name of Student can be entered in those text boxes. These text boxes are bound to StudentId and StudentName properties from the DataContext.


<Window x:Class="WpfApp_MVVM_ReactiveModelSynch.StudentView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StudentView" Height="300" Width="484">
    <Grid>
        <Label Content="Id" Height="26" HorizontalAlignment="Left" Margin="11,30,0,0"
               Name="labelId" VerticalAlignment="Top" Width="73" />
        <TextBox Height="26" HorizontalAlignment="Left" Margin="90,30,0,0"
                 Name="textBoxId" VerticalAlignment="Top" Width="362"
                 Text="{Binding Path=StudentId, UpdateSourceTrigger=PropertyChanged}"/>
        <Label Content="Name" Height="25" HorizontalAlignment="Left" Margin="11,76,0,0"
               Name="labelName" VerticalAlignment="Top" Width="73" />
        <TextBox Height="26" HorizontalAlignment="Left" Margin="90,75,0,0" Name="textBoxName"
                 VerticalAlignment="Top" Width="362"
                 Text="{Binding Path=StudentName, UpdateSourceTrigger=PropertyChanged}"/>
    </Grid>
</Window>

In the code behind, we assign the view model passed as constructor argument to the DataContext property of the view.


public partial class StudentView : Window
{
    public StudentView(StudentViewModel studentViewModel)
    {
        InitializeComponent();

        this.DataContext = studentViewModel;
    }
}

As is expected by the view, StudentViewModel has two properties StudentId and StudentName. Both support change notification using INotifyPropertyChanged’s PropertyChanged event. As is specified in the MainWindow.xaml.cs, we are using Student object as constructor parameter. We are assigning it to the instance variable _model. We are using _model as Model for this view. WPF Binding system would update the values of these properties as the user enters data in the text boxes bound to these properties. In the setters of these properties, we are just assigning these values to the corresponding properties in _model. This should keep model being updated. Since this is shared by the view models used by each StudentView object, we expect the other views to be updated as these changes are applied.


public class StudentViewModel : INotifyPropertyChanged
{
    private int _studentId;
    private string _studentName; 

    private Student _model; 

    public StudentViewModel(Student student)
    {
        _model = student;
    } 

    public int StudentId
    {
        get { return _studentId; }
        set
        {
            if (_studentId != value)
            {
                _studentId = value;
                _model.StudentId = value;
                OnPropertyChanged("StudentId");  
            }
        }
    } 

    public string StudentName
    {
        get { return _studentName; }
        set
        {
            if(_studentName != value)
            {
                _studentName = value;
                _model.StudentName = value;
                OnPropertyChanged("StudentName");
            }
        }
    } 

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

As you might have guessed from the above code, Student has two properties StudentId and StudentName. This also implements INotifyPropertyChanged so needs to define PropertyChanged event. Whenever the values of these properties are changed, PropertyChanged event is raised to notify all observers about this change. Though it does not provide the actual change but it does tell about the property updated. We can handle this event in the code using StudentModel and act accordingly.


public class Student : INotifyPropertyChanged
{
    private int _studentId;
    private string _studentName; 

    public int StudentId
    {
        get { return _studentId; }
        set
        {
            if (_studentId != value)
            {
                _studentId = value;
                OnPropertyChanged("StudentId");
            }
        }
    } 

    public string StudentName
    {
        get { return _studentName; }
        set
        {
            if (_studentName != value)
            {
                _studentName = value;
                OnPropertyChanged("StudentName");
            }
        }
    } 

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

Now let’s run this! We open two StudentView windows. We enter data in one window. The data is not being updated in the second window. Why is this?? As is apparent in the code of view model, as we receive updates in View Model’s properties through WPF Binding System, we are passing the same updates to the corresponding properties in the model.

If you put break points in the model properties’ setter, you would notice that the setter code is being executed. Even the PropertyChanged event is being raised. We just need to handle this event in the view model so that the view model could update its properties. Since these properties are supporting change notifications using INotifyPropertyChanged, the bound element in the view should also be updated accordingly. As discussed, let’s subscribe PropertyChanged event in the view model for model object.

_model.PropertyChanged += new PropertyChangedEventHandler(_model_PropertyChanged);

The definition of _model_PropertyChanged is as follows:


void _model_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    object value = _model.GetType().GetProperty(e.PropertyName).GetValue(_model, null);
    this.GetType().GetProperty(e.PropertyName).SetValue(this, value, null);
}

This is based on reflection and based on the assumption that View Model has properties with same names. Their types are also assumed to be supportive. Since we only have limited properties, we can also avoid reflection and update each property. Let’s do that.


void _model_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    this.StudentId = _model.StudentId;
    this.StudentName = _model.StudentName;
}

Now let’s run this application. We will again open two windows and enter data in one window and observe if the same updates are made in the second window.

As expected, the updates are applied in the second window.

Now since we have fulfilled whatever the requirements have stated, we should be the happiest person in the world. But we can certainly improve on this implementation. We needed to handle model’s PropertyChanged event in StudentViewModel. We can avoid these by using observable event stream support available in Reactive Extension (Rx). Not only it allows to subscribe to the observable event stream, it also allows a filtered subscription. So We will be subscribing to a subset of events using Where clause even if there is an active event stream. It is also possible that we are receiving frequent updates from the model, like millions in a second. We don’t want to update our view so frequently. Similarly, since we have set UpdateSourceTrigger as PropertyChanged for both binding in the view. All the changes in the Text property of the text box will cause the property setter to execute. It is possible that the user of this system types very frequently, we might just want to update the model when it settles and not after each key entry. In short we might need throttling support for these property changes.

Using Observable Event Stream for model’s PropertyChanged event:
Before adding the code described in this section remove model’s PropertyChanged handling logic from StudentViewModel. This includes event subscription in the constructor and definition of event handler. Before making the updates suggested above, we need to reference assemblies provided by Rx installer. We need to add references for following assemblies:

1. System.Reactive.dll
2. System.CoreEx

These assemblies are installed as part of installation of Reactive Extension (Rx). It can be downloaded as follows:

http://msdn.microsoft.com/en-us/devlabs/ee794896

Update the code of the constructor of StudentViewModel as follows:


public StudentViewModel(Student student)
{
    _model = student;

    Observable.FromEvent<PropertyChangedEventArgs>(_model, "PropertyChanged")            
        .Subscribe((arg) =>
                       {
                           this.StudentId = _model.StudentId;
                           this.StudentName = _model.StudentName;
                       });
}

System.Linq.Observable from System.Reactive assembly allows to subscribe with any event stream. System.Collections.Generic.IEvent<T> is defined in System.CoreEx assembly. We are subscribing to PropertyChanged event stream from _model instance. Observable.FromEvent<T>() returns IObservable<IEvent<T>>. Since it is an IObservable, we can subscribe to it. The code that we want to execute when event is triggered can be specified in the onNext delegate. Let's run the application now.

Like before, we are opening two instances of StudentView window. When we enter information in the text boxes, information is updated in other window. The contents are updated because of the event handling logic in the observable event stream handler code as presented above.

Filtering events from Event Stream:
Since it is an IObservable<T> we can filter it using Where operator. Let's filter it to just handle the case when event is received because of update in StudentName property. The changes in StudentId are ignored. Let's update the code as follows:


public StudentViewModel(Student student)
{
    _model = student;

    Observable.FromEvent<PropertyChangedEventArgs>(_model, "PropertyChanged")
        .Where(et => et.EventArgs.PropertyName == "StudentName")
        .Subscribe((arg) =>
                       {
                           this.StudentId = _model.StudentId;
                           this.StudentName = _model.StudentName;
                       });
}

Now run the application and again open two instances. The update in text box for StudentName shows the updates in the other window. If we update StudentId, it doesn't update the other window as the event stream is filtered.

Throttling events from Event Stream:
Since are binding using UpdateSourceTrigger as PropertyChanged, as the user types in the text boxes in StudentView, WPF Binding System automatically updates the values in the View model's properties. This updates corresponding properties of the model using the view model's property setters. We just don't want to keep sending updates to the model but we should wait until the user is done typing and then update the model's properties. This can be supported by throttling support. This can by achieved introducing PropertyChanged event in the view models for itself. We can remove the code to update corresponding model's properties in the setters. Let's update the definition of StudentViewModel as follows:


public class StudentViewModel : INotifyPropertyChanged
{
    private int _studentId;
    private string _studentName;

    private Student _model;

    public StudentViewModel(Student student)
    {
        _model = student;

        Observable.FromEvent<PropertyChangedEventArgs>(_model, "PropertyChanged")
            .Where(et => et.EventArgs.PropertyName == "StudentName")
            .Subscribe((arg) =>
                           {
                               this.StudentId = _model.StudentId;
                               this.StudentName = _model.StudentName;
                           });



        Observable.FromEvent<PropertyChangedEventArgs>(this, "PropertyChanged")
            .Throttle(TimeSpan.FromMilliseconds(500))
            .Where(et => et.EventArgs.PropertyName == "StudentName")
            .Subscribe((ar) =>
            {
                _model.StudentId = this.StudentId;
                _model.StudentName = this.StudentName;
            });
       
    }

    //void _model_PropertyChanged(object sender, PropertyChangedEventArgs e)
    //{
    //    //object value = _model.GetType().GetProperty(e.PropertyName).GetValue(_model, null);
    //    //this.GetType().GetProperty(e.PropertyName).SetValue(this, value, null);
    //    //this.StudentId = _model.StudentId;
    //    //this.StudentName = _model.StudentName;
    //}

    public int StudentId
    {
        get { return _studentId; }
        set
        {
            if (_studentId != value)
            {
                _studentId = value;
                //_model.StudentId = value;
                OnPropertyChanged("StudentId");   
            }
        }
    }

    public string StudentName
    {
        get { return _studentName; }
        set
        {
            if(_studentName != value)
            {
                _studentName = value;
                //_model.StudentName = value;
                OnPropertyChanged("StudentName");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

We needed to remove the code resulting in the updates in the setter of properties in the view model. Let' throttle these updates. When user types in StudentName, the IObservable doesn't update the other window immediately. It is rather waiting for property to settle down. After which it is causing the PropertyChanged events to be handled.

Download:

MVVM - View Model (IObserver) Observing multiple IObservable (s)

2011-02-09T23:40:00.010-06:00

This is a continuation of posts of our discussion about the usage of Reactive Extension (Rx) in MVVM implementation in WPF. For this post, we will be trying to find out how a View model observes multiple observables. The main question is, Can an IObserver observes multiple IObservable?

In this example, view model is observing the data from different sources. We want to show the list of students and courses on the same window. I am not saying this is the best thing or I would do it in a real world application. But this is more of a what if kind of a scenario. We want our view to look like this:

Let us update the view in the previous post as follows:


<Window x:Class="WpfApp_MVVM_ReactiveModel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp_MVVM_ReactiveModel"
        Title="MainWindow" Height="544" Width="526">    
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <Label Content="Students" Height="26" HorizontalAlignment="Left" Name="label1"
               VerticalAlignment="Top" Width="161" FontWeight="Bold" />
        <ListBox Height="234" HorizontalAlignment="Left" Margin="4,30,0,0" 
                 Name="listBox1" VerticalAlignment="Top" Width="493" 
                 ItemsSource="{Binding StudentList}">
            <ListBox.ItemTemplate>
                <DataTemplate >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding StudentId, StringFormat=Id:{0}}" />
                        <TextBlock Text="       " />
                        <TextBlock Text="{Binding StudentName, StringFormat=Name:{0}}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>        
        <Label Content="Courses" FontWeight="Bold" Height="26" HorizontalAlignment="Left" Margin="0,270,0,0" 
               Name="label2" VerticalAlignment="Top" Width="161" />
        <ListBox Height="161" HorizontalAlignment="Left" Margin="5,294,0,0" Name="listBoxCourse" 
                 VerticalAlignment="Top" Width="492"
                 ItemsSource="{Binding CourseList}">
            <ListBox.ItemTemplate>
                <DataTemplate >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding CourseId, StringFormat=Id:{0}}" />
                        <TextBlock Text="       " />
                        <TextBlock Text="{Binding CourseName, StringFormat=Name:{0}}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Ellipse Height="31" HorizontalAlignment="Left" Margin="326,462,0,0" Name="ellipse1" 
                 Stroke="Black" VerticalAlignment="Top" Width="166" >
            <Ellipse.Style>
                <Style>
                    <Setter Property="Ellipse.Fill" Value="Yellow" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsDataStreamFinished}" Value="true">
                            <Setter Property="Ellipse.Fill" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>
    </Grid>
</Window>

As you might have noticed we have thrown in a couple of labels to identify the data loaded in the two list boxes. The difference is we have incorporated another list box to show the list of Courses. It is bound to CourseList in the view model. Each member of this collection should have two properties i.e. CourseId and CourseName.

As we described above the view model is expected to have a collection called CourseList and each member of this collection should be having two properties CourseId and CourseName. Let us see what updates we need to make in the view model.


class MainWindowViewModel : IObserver<Student>, INotifyPropertyChanged, IObserver<Course>
{        
    #region Properties

    private ObservableCollection<StudentViewModel> _studentList;
    public ObservableCollection<StudentViewModel> StudentList
    {
        get { return _studentList; }
        set
        {
            _studentList = value;
            onPropertyChanged("StudentList");
        }
    }

    private ObservableCollection<CourseViewModel> _courseList;
    public ObservableCollection<CourseViewModel> CourseList
    {
        get { return _courseList; }
        set
        {
            _courseList = value;
            onPropertyChanged("CourseList");
        }
    }

    private bool _isDataStreamFinished;
    public bool IsDataStreamFinished
    {
        get { return _isDataStreamFinished; }
        set
        {
            _isDataStreamFinished = value;
            onPropertyChanged("IsDataStreamFinished");
        }
    }

    #endregion Properties

    #region Observable Model
    //Model
    private StudentsModel model;
    private CoursesModel courseModel;

    #endregion Observable Model

    IDisposable unsubscriber;

    #region Constructor
    
    public MainWindowViewModel()
    {
        _studentList = new ObservableCollection<StudentViewModel>();

        model = new StudentsModel();
        
        //subscribe to all updates
        //model.Subscribe(this);

        //subscribe to 10 updates after first 2 updates
        //unsubscriber = model.Skip(2).Take<Student>(10).Subscribe(this);            

        //subscribe to all students whose Ids are even
        //unsubscriber = (from m in model 
        //                where m.StudentId % 2 == 0
        //                    select m).Subscribe(this);

        //observe on UI thread
        unsubscriber = Observable.ObserveOnDispatcher<Student>(
            (from m in model 
             where m.StudentId % 2 == 0
             select m)
             ).Subscribe(this);

        courseModel = new CoursesModel();
        _courseList = new ObservableCollection<CourseViewModel>();
        Observable.ObserveOnDispatcher<Course>(courseModel).Subscribe(this);
        
    }
    
    #endregion Constructor

    #region IObserver implementation
    public void OnCompleted()
    {
        //throw new NotImplementedException();
        //unsubscriber.Dispose();
        IsDataStreamFinished = true;
    }

    public void OnError(Exception error)
    {
        //throw new NotImplementedException();
    }

    public void OnNext(Student value)
    {
        //throw new NotImplementedException();
        _studentList.Add(new StudentViewModel(value));
    }
    
    #endregion IObserver implementation

    #region INotifyPropertyChanged implementation
    
    public event PropertyChangedEventHandler PropertyChanged;
    private void onPropertyChanged(string propertyname)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
        }
    }

    #endregion INotifyPropertyChanged implementation


    public void OnNext(Course value)
    {
        //throw new NotImplementedException();
        _courseList.Add(new CourseViewModel(value));
    }
}

You should notice that the view model is not implementing IObserver<Course>;. This would enable it to observe an IObservable<Course>. It has been introduced with one IObservable<Course> instance named courseModel. We have also subscribed to this in the constructor to observe the courseModel on Dispatcher. To implement the interface, we need to provide the definition of three methods, OnNext, OnCompleted and OnError. Since OnCompleted and OnError are already provided so we don't need to provide a new definition, even, we can not implement as this would be considered as overloading the methods and this requires the methods, being overloaded, to have different signatures. In the OnNext(Course) method, we are adding a new CourseViewModel to CourseList collection.

Now let us provide the definition CourseModel. This is an IObservable<Course>. This would require it to provide an implementation of Subscribe() method. This method should accept IObserver<Course> and should return an IDisposable. Disposing this returned object should result in the nullify the subscription. This definition is similar to StudensModel.


class CoursesModel : IObservable<Course>
{
    private int _courseId;
    //For updates on a non-UI thread
    Timer t = new Timer(1000);

    public List<IObserver<Course>> Observers =
        new List<IObserver<Course>>();

    public CoursesModel()
    {
        t.Elapsed += new ElapsedEventHandler(t_Elapsed);
        t.Start();
    }

    //For updates on a non-UI thread
    void t_Elapsed(object sender, ElapsedEventArgs e)
    {
        _courseId++;

        var course = new Course()
        {
            CourseId = _courseId,
            CourseName = string.Format("Course : {0}", _courseId)
        };

        if (_courseId <= 3)
        {
            Observers.ForEach((observer) => observer.OnNext(course));
        }
        else
        {
            Observers.ForEach((observer) => observer.OnCompleted());
            t.Stop();
        }
    }

    public IDisposable Subscribe(IObserver<Course> observer)
    {
        IDisposable unSubscriber = new Unsubscriber<Course>(Observers, observer);
        if (!Observers.Contains(observer))
        {
            Observers.Add(observer);
        }
        return unSubscriber;
    }
}

The definition of Course and CourseViewModel are as follows:


class Course
{
    public string CourseName { get; set; }
    public int CourseId { get; set; }
}

class CourseViewModel : INotifyPropertyChanged
{
    public CourseViewModel(Course course)
    {
        this.CourseId = course.CourseId;
        this.CourseName = course.CourseName;
    }

    #region Properties

    private string _coursetName;
    public string CourseName
    {
        get { return _coursetName; }
        set
        {
            _coursetName = value;
            OnPropertyChanged("CourseName");
        }
    }

    private int _courseId;
    public int CourseId
    {
        get { return _courseId; }
        set
        {
            _courseId = value;
            OnPropertyChanged("CourseId");
        }
    }

    #endregion Properties

    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #endregion INotifyPropertyChanged implementation
}

Now run the application. It is successfully loading the data as desired but there is a problem. The courseModel data is loaded first. This causes OnCompleted to be executed which fills the notification ellipse as green. So we are giving the notification to the user that the data is completely loaded even before it is completely loaded.

So, an IObserver can observe multiple IObservable (s) but we really can not distinguish between OnCompleted and OnError being executed because of which IObservable. We need to find out way to do that.

There is an easier solution to this problem. We can implement the interfaces explicitly. Let us assume that the notification is just about StudentList. The ellipse should turn green only when the StudentList is loaded completely. Let us implement IObserver<Course>.


class MainWindowViewModel : IObserver<Student>, INotifyPropertyChanged, IObserver<Course>
{        
    #region Properties

    private ObservableCollection<StudentViewModel> _studentList;
    public ObservableCollection<StudentViewModel> StudentList
    {
        get { return _studentList; }
        set
        {
            _studentList = value;
            onPropertyChanged("StudentList");
        }
    }

    private ObservableCollection<CourseViewModel> _courseList;
    public ObservableCollection<CourseViewModel> CourseList
    {
        get { return _courseList; }
        set
        {
            _courseList = value;
            onPropertyChanged("CourseList");
        }
    }

    private bool _isDataStreamFinished;
    public bool IsDataStreamFinished
    {
        get { return _isDataStreamFinished; }
        set
        {
            _isDataStreamFinished = value;
            onPropertyChanged("IsDataStreamFinished");
        }
    }

    #endregion Properties

    #region Observable Model
    //Model
    private StudentsModel model;
    private CoursesModel courseModel;

    #endregion Observable Model

    IDisposable unsubscriber;

    #region Constructor
    
    public MainWindowViewModel()
    {
        _studentList = new ObservableCollection<StudentViewModel>();

        model = new StudentsModel();
        
        //subscribe to all updates
        //model.Subscribe(this);

        //subscribe to 10 updates after first 2 updates
        //unsubscriber = model.Skip(2).Take<Student>(10).Subscribe(this);            

        //subscribe to all students whose Ids are even
        //unsubscriber = (from m in model 
        //                where m.StudentId % 2 == 0
        //                    select m).Subscribe(this);

        //observe on UI thread
        unsubscriber = Observable.ObserveOnDispatcher<Student>(
            (from m in model 
             where m.StudentId % 2 == 0
             select m)
             ).Subscribe(this);

        courseModel = new CoursesModel();
        _courseList = new ObservableCollection<CourseViewModel>();
        Observable.ObserveOnDispatcher<Course>(courseModel).Subscribe(this);
        
    }
    
    #endregion Constructor

    #region IObserver implementation
    public void OnCompleted()
    {
        //throw new NotImplementedException();
        //unsubscriber.Dispose();
        IsDataStreamFinished = true;
    }

    public void OnError(Exception error)
    {
        //throw new NotImplementedException();
    }

    public void OnNext(Student value)
    {
        //throw new NotImplementedException();
        _studentList.Add(new StudentViewModel(value));
    }
    
    #endregion IObserver implementation

    #region INotifyPropertyChanged implementation
    
    public event PropertyChangedEventHandler PropertyChanged;
    private void onPropertyChanged(string propertyname)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
        }
    }

    #endregion INotifyPropertyChanged implementation


    void IObserver<Course>.OnCompleted()
    {
        //throw new NotImplementedException();
    }

    void IObserver<Course>.OnError(Exception error)
    {
        //throw new NotImplementedException();
    }

    void IObserver<Course>.OnNext(Course value)
    {
        _courseList.Add(new CourseViewModel(value));
    }
}

Now when CoursesModel calls OnCompleted on the observers the explicit implementation of the interface's OnCompleted gets called which currently no implementation (just an empty method). So the ellipse is still yellow.

After the data is completely loaded, StudentsModel, an IObservable<Student> calls OnCompleted which sets the variable bound to the trigger on the view to change the fill color of ellipse to green.

Download:

WPF - IObservable Collection based Reactive Models In MVVM (Rx)

2011-02-08T23:00:00.017-06:00

This post is a continuation of the discussion we started in last post. This would take this discussion a little further deep in the incorporation of Reactive Extension (Rx) in MVVM. In previous post we discussed how Rx is the mathematical dual of Linq to Object. Additionally, the interfaces IObservable and IObserver are mathematical dual of IEnumerator and IEnumerable.

In this post, we are going to discuss the following:

1. IObservable as a Collection of items.
2. Observing Projections of IObservable.
3. Dispatching the observation on UI thread.

Example App:
As an example application, we would be using a Window with a list (for Students) and a notification at the bottom. The notification ellipse should remain yellow until the data is being loaded.

As soon as the data load is completed, the notification ellipse should be updated and filled with green as follows:

Collection based Reactive Models:
Let's create a window. The window should be populate with a list of students. As the list becomes completed, it should show some form of notification. For notification, we are adding an ellipsis.


<Window x:Class="WpfApp_MVVM_ReactiveModel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp_MVVM_ReactiveModel"
        Title="MainWindow" Height="350" Width="525" >    
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <Grid>
        <ListBox Height="262" HorizontalAlignment="Left" Margin="4,2,0,0" 
                 Name="listBox1" VerticalAlignment="Top" Width="493" 
                 ItemsSource="{Binding StudentList}">
            <ListBox.ItemTemplate>
                <DataTemplate >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding StudentId, StringFormat=Id:{0}}" />
                        <TextBlock Text="       " />
                        <TextBlock Text="{Binding StudentName, StringFormat=Name:{0}}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Ellipse Height="31" HorizontalAlignment="Left" Margin="322,270,0,0" Name="ellipse1" 
                 Stroke="Black" VerticalAlignment="Top" Width="166" >
            <Ellipse.Style>
                <Style>
                    <Setter Property="Ellipse.Fill" Value="Yellow" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsDataStreamFinished}" Value="true">
                            <Setter Property="Ellipse.Fill" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Ellipse.Style>
        </Ellipse>
    </Grid>
</Window>

As apparent from the above definition that the DataContext is expected to have at least two properties StudentList and IsDataStreamFinished. The data from StudentList is shown in the ListBox. A customized DataTemplate is defined to specify exactly how each member form the collection would be displayed. Each member of the collection StudentList is expected to have two properties StudentId and StudentName. As soon as the value of IsDataStreamFinished becomes true the ellipse fills with green color. This indicates the completion of data stream.

As per the expectation of above view, the following view model is provided. It has both properties available i.e. IsDataStreamFinished and StudentList. This view model supports change notification of these properties by implementing INotifyPropertyChanged interface. This requires to provide PropertyChanged event. This is raised through the setter of these properties providing the name of properties using magic strings.


class MainWindowViewModel : IObserver<Student>, INotifyPropertyChanged
{        
    #region Properties

    private ObservableCollection<StudentViewModel> _studentList;
    public ObservableCollection<StudentViewModel> StudentList
    {
        get { return _studentList; }
        set
        {
            _studentList = value;
            onPropertyChanged("StudentList");
        }
    }

    private bool _isDataStreamFinished;
    public bool IsDataStreamFinished
    {
        get { return _isDataStreamFinished; }
        set
        {
            _isDataStreamFinished = value;
            onPropertyChanged("IsDataStreamFinished");
        }
    }

    #endregion Properties

    #region Observable Model
        
    //Model
    private StudentsModel model;

    #endregion Observable Model

    IDisposable unsubscriber;

    #region Constructor
    
    public MainWindowViewModel()
    {
        _studentList = new ObservableCollection<StudentViewModel>();

        model = new StudentsModel();
        unsubscriber = model.Subscribe(this);                   
    }
    
    #endregion Constructor

    #region IObserver implementation
    public void OnCompleted()
    {
        IsDataStreamFinished = true;
    }

    public void OnError(Exception error)
    {
        //throw new NotImplementedException();
    }

    public void OnNext(Student value)
    {
        //throw new NotImplementedException();
        _studentList.Add(new StudentViewModel(value));
    }
    
    #endregion IObserver implementation

    #region INotifyPropertyChanged implementation
    
    public event PropertyChangedEventHandler PropertyChanged;
    private void onPropertyChanged(string propertyname)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
        }
    }

    #endregion INotifyPropertyChanged implementation
}

The view model also implements IObserver of Student i.e. IObserver<Student>. This makes it subscribe to the collection of Student supporting observation by implementing IObservable<Student> like our model defined later in the discussion. Implementing IObserver<Student> requires it to provide the definition of three methods i.e. OnNext, OnCompleted and OnError. The IObservable executes OnNext of each observer which is still subscribed. Similarly, OnCompleted is executed by IObservable when the collection subscribed by IObserver is already completed. This might also be a subset of the actual collection. OnError is resulted in case of any exception providing the detail of exception in the method parameter.

In this example, OnComplete() results in setting IsDataStreamFinished to true. This would execute the data trigger in the view and fill the ellipse with Green. OnNext() is resulting in the addition of a new instance of StudentViewModel (constructed by using Student available through method parameter). The definition of StudentViewModel and Student is as follows:


class StudentViewModel : INotifyPropertyChanged
{
    public StudentViewModel(Student student)
    {
        this.StudentId = student.StudentId;
        this.StudentName = student.StudentName;
    }

    #region Properties

    private string _studentName;
    public string StudentName
    {
        get { return _studentName; }
        set 
        { 
            _studentName = value;
            OnPropertyChanged("StudentName");
        }
    }

    private int _studentId;
    public int StudentId
    {
        get { return _studentId; }
        set
        {
            _studentId = value;
            OnPropertyChanged("StudentId");
        }
    }

    #endregion Properties

    #region INotifyPropertyChanged implementation

    public event PropertyChangedEventHandler  PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #endregion INotifyPropertyChanged implementation
}

class Student 
{
    public string StudentName { get; set; }
    public int StudentId { get; set; }
}

In the above definition StudentViewModel implements INotifyPropertyChanged to support change notifications.

The Unsubscriber is the same as we used in previous post:


class Unsubscriber<T> : IDisposable
{
    private List<IObserver<T>> _observers;
    private IObserver<T> _observer;

    public Unsubscriber(List<IObserver<T>> observers, IObserver<T> observer)
    {
        this._observers = observers;
        this._observer = observer;
    }

    public void Dispose()
    {
        if (_observer != null && _observers.Contains(_observer))
            _observers.Remove(_observer);
    }
}

Now let us look at the definition of the model. It implements IObervable<Student>. This would enable it to support subscription of observers requiring the subscription. The only requirement is to provide definition of Subscribe method accepting the IObservable of same type. As you can guess that in order to execute OnNext, OnCompleted and OnError of these observers, the IObservable, somehow, needs to maintain observers in a form of list. The below model has Observers List for the same purpose.


class StudentsModel : IObservable<Student>
{
    private int _studentId;

    public List<IObserver<Student>> observers = new List<IObserver<Student>>();

    public StudentsModel()
    {
        t.Interval = TimeSpan.FromSeconds(1);
        t.Tick += new EventHandler(t_Tick);

        t.Start();
    }

    void t_Tick(object sender, EventArgs e)
    {
       _studentId++;
       //throw new NotImplementedException();
       var student = new Student()
       {
          StudentId = _studentId,
          StudentName = string.Format("M{0}", _studentId)
       };

       if (_studentId <= 20)
       {
          Observers.ForEach((observer) => observer.OnNext(student));
       }
       else
       {
          Observers.ForEach((observer) => observer.OnCompleted());
          t.Stop();
       }   
    }

    DispatcherTimer t = new DispatcherTimer();

    public IDisposable Subscribe(IObserver<Student> observer)
    {
        IDisposable unSubscriber = new Unsubscriber<Student>(Observers, observer);
        if (!Observers.Contains(observer))
        {
            Observers.Add(observer);
        }
        return unSubscriber;
    }
}

As the Observer calls Subscribe, it is added to the Observers list. This method returns an IDisposable based object. This object can serve as an unsubscriber for getting updates through OnNext, OnCompleted and OnNext through IObservable. As we call dispose on the unsubscriber object, it removes the corresponding observer from the Observers list. Please see a wishful definition of unsubscriber from the last post.

In order to simulate updates from another source, we have used Timer. This is a DispatcherTimer with an interval of 1 second. For each timer tick, we are creating a new Student instance. We are calling OnNext of each subscriber announcing the availability of a new Student. As we have seen in the view model, it would add a new StudentViewModel to its list. This continues till 20 students are added.

After which the timer stops simulating the end of data availability. This results in the execution of OnCompleted method of each observer.

Selective Members through IObservable:
Being a dual of IEnumerable, IObservable supports the features provided by IEnumerable. It supports all standard LSQO (LINQ Standard Query Operators) plus additional operators. These additional operators have also been copied to IEnumerable later on.

It must be remembered that we don't need to subscribe to the whole collection provided by IObservable, we might subscribe to selective updates. Below, we are subscribing to only students whose StudentId is even. We just need to update the subscription and the rest of the code should be equally useful. Below is the updated code for the constructor for MainWindowViewModel for this requirement.


public MainWindowViewModel()
{
    _studentList = new ObservableCollection<StudentViewModel>();

    model = new StudentsModel();
   
    unsubscriber = (from m in model 
                    where m.StudentId % 2 == 0
                        select m).Subscribe(this);
}

The LINQ clause above is really LINQ but it is not LINQ to IEnumerable but it is LINQ to IObservable (shipped for Reactive extension support). This is just subscribing to a subset of model whose StudentId can be divided by 2 (definition of even number). We might want to take separate examination for even and odd students because of the limited seating availability in the examination hall. When we run the application, the final display is as follows:

In order to see another example of selection from IObservable, in the following code, we are subscribing for just 10 Student(s) after first 2 Student(s). The subscription code is as follows:


public MainWindowViewModel()
{
    _studentList = new ObservableCollection<StudentViewModel>();
    model = new StudentsModel();
    unsubscriber = model.Skip(2).Take<Student>(10).Subscribe(this);            
}

When we run it, the finalized view becomes available as follows:

As the subscription data becomes available, OnCompleted is automatically called and Dispose is called on the observer removing it from the Observers list in IObservable implementation.

Updates on a non-UI Thread:
I think it would be a usual case that IObserver will have to observe IObservable on a non-UI thread specially if IObservable is model and IObserver is a view model in MVVM.

Let's change the Timer to System.Timers.Timer and use its Elapsed event to simulate updates. We know that System.Timers.Timer is a multithreaded timer. Its event handler are executed on a ThreadPool thread. If we generate OnNext, OnCompleted and OnError updates then this can simulate updates in a non-UI thread.

Let's update the definition of StudentsModel as follows:


class StudentsModel : IObservable<Student>
{
    private int _studentId;

    public List<IObserver<Student>> Observers = 
        List<IObserver<Student>>();

    public StudentsModel()
    {
        //For updates on non-UI thread
        t.Elapsed += new ElapsedEventHandler(t_Elapsed);

        t.Start();
    }
   
    //For updates on a non-UI thread
    void t_Elapsed(object sender, ElapsedEventArgs e)
    {
       _studentId++;
        var student = new Student()
        {
            StudentId = _studentId,
            StudentName = string.Format("M{0}", _studentId)
        };

        if (_studentId <= 20)
        {
            Observers.ForEach((observer) => observer.OnNext(student));
        }
        else
        {
            Observers.ForEach((observer) => observer.OnCompleted());
            t.Stop();
        }
    }
    
    //For updates on a non-UI thread
    Timer t = new Timer(1000);
    
    public IDisposable Subscribe(IObserver<Student> observer)
    {
        IDisposable unSubscriber = new Unsubscriber<Student>(Observers, observer);
        if (!Observers.Contains(observer))
        {
            Observers.Add(observer);
        }
        return unSubscriber;
    }
}

It builds just fine but when we run this it results in the following:

Basically this exception is generated even for the very first Student added to the StudentList. Since StudentList is bound to the ListBox on the view and UI related elements have affinity to UI thread in WPF, that is why this exception is resulted. Being called from Elapsed event of System.Timers.Timer, OnNext is being executed on a ThreadPool thread.

As you could guess, we need to find out a way to observe on UI thread. So, even if these updates OnNext, OnCompleted and OnError are resulted in a non-UI thread. The framework should automatically dispatch them in UI thread to be used by observer. This is basically a decision for each subscription i.e. It is possible that some IObservers(s) are observing on UI thread and others are just fine for a non-UI thread.

Rx supports such dispatching. I am not sure but it might be using the same mechanism as used by BackgroundWorker for executing its ReportProgress and WorkCompleted events. That uses DispatcherSynchronizationContext provided by ASynchronousOpertionManager. Let's subscribe on UI thread. In the following code, we are still interested in students with even Ids. Here we are using ObserveOnDispathcher method of Observable class. This is available in System.Linq namespace in System.Reactive assembly.


public MainWindowViewModel()
{
    _studentList = new ObservableCollection<StudentViewModel>();

    model = new StudentsModel();

    //observe on UI thread
    unsubscriber = Observable.ObserveOnDispatcher<Student>(
        (from m in model 
         where m.StudentId % 2 == 0
         select m)
         ).Subscribe(this);
    
}

When we run the application, it runs successfully now. The finalized display is as follows:

Download: