KARIM's PLAYGROUND

While writing a WPF application that made use of incremental search basing on the value of a TextBox I've faced a problem that the ViewModel (the DataContext) was notified about the changed value of the property only when it lost focus.

So let's say I had on the ViewModel side:

public string QueryString
{
    get
    {
        return _queryString;
    }
    set
    {
        _queryString = value;
        OnPropertyChanged("Patients");
    }
}

and in my WPF:

<TextBox Height="36" Margin="12,23,12,0" VerticalAlignment="Top" FontSize="18" Text="{Binding QueryString, Mode=TwoWay}" />

A change on the QueryString property on the ViewModel should be whenever the value of the TextBox is changed - no matter whether it lost focus or not.

The solution to this is to set the UpdateSourceTrigger property of the binding to "PropertyChanged". Now a PropertyChanged is triggered immediately after a new character is typed (or pasted):

<TextBox Height="36" Margin="12,23,12,0" VerticalAlignment="Top" FontSize="18" Text="{Binding QueryString, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

Yet, everytime a new value is entered a new search is performed. Although the searching algorithm is quite efficient (as it's built on suffix trees) but the user could experience some delays between his keystroke and the new value appearing on his TextBox, thus why I recommend setting it's IsAsync value to "true":

<TextBox Height="36" Margin="12,23,12,0" VerticalAlignment="Top" FontSize="18" Text="{Binding QueryString, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, IsAsync=True}" />

Ever tried to bind a control to a data source in WPF? Usually the procedure looks this way: You use or create a control (let's say a ListView), create a data source and point the control to the data source.

But there are some circumstances when you need to add certain behavior to your control based on the data that it's bound to, like marking it red when the value is larger than certain value. .NET framework provides us with the DataTrigger trigerring mechanism, but the limitation of this mechanism is that it could only be triggered when the data is equal to a certain value. It cannot accept other comparisons. You could always do this in the code-behind of your UI, but this won't be a good practice in general (with some exceptions).

Now, what I want to create is a ListView, that will contain Label Controls in it's ListViewItem and when the value of the data item is larger than 100 I want to set the foreground to Red brush.

Let's start with a basic ListView:

        <ListView Name="listView">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Value1" />
                    <GridViewColumn Header="Value2" />
                </GridView>
            </ListView.View>
        </ListView>

Next, let's say that we want to bind to it a List of our custom classe

class OurCustomClass
{
    public int Value1 { get; set; }
    public string Value2 { get; set; }
}

List<OurCustomClass> data = new List<OurCustomClass>();
Random rand = new Random();
for(int i = 0; i < 100; i++)
    data.Add(new OurCustomClass {Value1 = rand.Next(1, 1000), Value2 = rand.Next(3000, 30000).ToString()});

:

listView.ItemsSource = data;

What .NET Framework enables us to do is adding a DataTrigger do a DataTemplate:

<ListView>
    <ListView.Resources>
        <DataTemplate x:Key="OurTemplate">
            <Label Name="val1Label" />
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=Value1}"  Value="SomeValue">
                    <Setter ... />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ListView.Resources>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Value1" />
            <GridViewColumn Header="Value2" />
        </GridView>
    </ListView.View>
</ListView>

Here as you see the DataTrigger checks if the bound data is equal to the value defined in the Value property, if yes, the trigger is fired and the setters alter the content and attributes of the item. But when we need to check, let's say, if the value is grater than 100 we have to use a small trick.

The binding mechanism provides something called Converter, it is used to convert the bound data to another type and the syntax for it is  Binding="{Binding Path=Value1, Converter=OurConverter}".

When there is a converter assigned to the bound data, they are first passed to it, converted and the comparison is done on the converted data and here we could trick the mechanism with a small hack, that works in a way, that it will convert the int to string. It will convert it to a string of "Hi" if it is higher than 100, or convert it to "Low" if lower. We could write it in a yet more elegant way in this particular example as we are having only two possible options (either it is bigger than 100 or not) so we could return a Boolean value.

In other situations, where there are several possible results of comparison and we should react to each of the results in a different way, a good idea is to create an enum.

Ahh, and I forgot to mention that the Converter class should implement the IValueConverter interface and should be added to the resources .

The code below illustrates how to set the color of the label in the items' template basing on the data value (the condition is that the value should be > 100):

First, the converter:

class OurConverter : IValueConverter
    {
        private int originalValue;
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            originalValue = (int)value;
            if (originalValue > 100)
                return true;
            return false;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return originalValue;
        }
    }

Next we add it to the resources:

<UserControl.Resources>
        <MyNamespace:OurConverter x:Key="outConverter" />
</UserControl.Resources>

Finally we add the converter to the binding and the final resulting XAML will be:

        <ListView>
            <ListView.Resources>
                <DataTemplate x:Key="OurTemplate">
                    <Label Name="val1Label" />
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding Path=Value1, Converter={StaticResource ourConverter}}"  Value="True">
                            <Setter TargetName="val1Label" Property="Foreground" Value="Red" />
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ListView.Resources>
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Value1" CellTemplate="{StaticResource OurTemplate}" />
                    <GridViewColumn Header="Value2" />
                </GridView>
            </ListView.View>
        </ListView>

Enjoy!

Ever had a LINQ-to-SQL query that returns an anonymous type and you needed to pass the result of your query to the view? probably yes :)

Today I was faced with a problem that required me to query several table, extract the results from them and finally create a list of objects with nested values and all this should be passed to the view so that there I could iterate it and show a sensible results.

Let's first examine the tables I needed to query, here you have the schema containing the significant fields I'll need:

These are the significant fields I required to get a list of Tutors along with their ratings and their subjects. The SQL query I wrote for it was:

   1:  SELECT T.Id,

   2:         T.FirstName, 

   3:         T.LastName, 

   4:         T2.Rating, 

   5:         TutorSubjects.Id, 

   6:        (SELECT [Subject].Name

   7:         FROM [Subject]

   8:         WHERE [Subject].Id = TutorSubjects.SubjectId) SubjectName,

   9:         T.AboutMe

  10:  FROM [User] T

  11:       LEFT OUTER JOIN (SELECT Tutor.Id, SUM(Comment.Rating) Rating

  12:                        FROM [User] Tutor, Comment

  13:                        WHERE Comment.TutorId = Tutor.Id AND Tutor.Type = 2

  14:                        GROUP BY Tutor.Id) T2

  15:             ON T.Id = T2.Id

  16:       LEFT OUTER JOIN TutorSubjects

  17:             ON TutorSubjects.TutorId = T.Id

  18:  WHERE T.Type = 2

  19:  ORDER BY T2.Rating DESC

Now, the application is based on ASP.NET MVC, and it uses LINQ-to-SQL orm. First of all, we should somehow execute this query using LINQ, we could do it in several ways. Either write a ninja-query joining multiple entities or as I did, create a view in the database that executes this query and import the view to linq2sql, so that we could use it as an entity. Our new view (and the new object ) is called TutorRatingWithSubjects.

In the code, when I query it, I want to have a structure that looks somehow like this:

So that when I'll pass the results to the view I could display them without any extra effort. I could accomplish it with the C# feature - anonymous types, but the problem in here is with passing it to the view.

   1:  var tutors = from tutor in db.TutorRatingWithSubjects

   2:               select new

   3:                          {

   4:                              tutor.Id,

   5:                              tutor.FirstName,

   6:                              tutor.LastName,

   7:                              tutor.Rating,

   8:                              tutor.AboutMe,

   9:                              Subjects = (from ts in db.TutorRatingWithSubjects

  10:                                          where ts.Id == tutor.Id

  11:                                          select new

  12:                                                     {

  13:                                                         ts.SubjectId,

  14:                                                         ts.SubjectName

  15:                                                     }

  16:                                         )

  17:                          };

When I'm passing it, the whole anonymous type get's up-casted to an object when it's stored in the ViewData. Here, the problem is that you are unable (directly) to reproduce the original anonymous type from the ViewData.

There are several ways to read data from a boxed anonymous type:

Using reflection

In the view you cast it to IQueryable and iterate through it:

    <ul>
    <%
        IQueryable tutors = (IQueryable) ViewData["Tutors"];
        foreach(object v in tutors) {
      %>
       <li> <%= v.GetType().InvokeMember("FirstName", System.Reflection.BindingFlags.GetProperty, null, v, null) %></li>
  <% } %>
    </ul>

Now, while this method works, I highly discourage it's usage, as using reflection is just cheating. It has weak performance, the code is less readable, etc...

There is a more elegant way to read the results of the linq query in our view.

Using strongly-typed list

We create a nested class that has the same properties as our anonymous type:

internal class TutorsWithSubjectsResult
{
    public Guid TutorId { get; set; }
    public String FirstName { get; set; }
    public String LastName { get; set; }
    public int? Rating { get; set; }
    public string AboutMe { get; set; }

    internal class Subject
    {
        public Guid? SubjectId { get; set; }
        public String SubjectName { get; set; }
    }

    public List<Subject> Subjects { get; set; }
}

Now we need to select the data with our linq into the TutorsWithSubjectsResult:

List<TutorsWithSubjectsResult> tutors = (from tutor in db.TutorRatingWithSubjects
                                         select new TutorsWithSubjectsResult
                                                    {
                                                        TutorId = tutor.Id,
                                                        FirstName = tutor.FirstName,
                                                        LastName = tutor.LastName,
                                                        Rating = tutor.Rating,
                                                        AboutMe = tutor.AboutMe,
                                                        Subjects = (from ts in db.TutorRatingWithSubjects
                                                                    where ts.Id == tutor.Id
                                                                    select
                                                                        new TutorsWithSubjectsResult.Subject
                                                                            {
                                                                                SubjectId = ts.SubjectId,
                                                                                SubjectName = ts.SubjectName
                                                                            }
                                                                   ).ToList()
                                                    }).ToList();

Voila! we have a strongly-typed list, that could be easily unboxed in the view, or if you create a strongly typed-view you would have a type that could be the type of the ViewData.