VB & .NET Blogs @ vbCity.com

WPF: How To Move Controls and Elements At Runtime

Ged Mead — Tue, 27 Oct 2009 11:23:00 GMT

XAML is brilliant for creating user interfaces at design time, but if you need to make changes dynamically at runtime, this can sometimes be a problem. To take an example, let's say that you need to allow an Image to move to a different location on screen in response to some user action.

To demonstrate this, we can use an Image which is housed in a Canvas. So the first step is to create a Canvas in a WPF Window, place the Image inside the Canvas and assign a value to the Source property of the Image:

<Window x:Class="Window2"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Image In A Canvas" Height="300" Width="300">
  <Canvas x:Name="MainCanvas">
    <Image x:Name="MoveableImage" Width="55" Source="questionmark2.jpg" />
  </Canvas>
</Window>

We can then have the Image move a few units to the right each time it receives a mouse click. The WPF Image doesn't support the Click event, but MouseDown is available for the same purpose. So the next step is to wire up an event handler for this:

    <Image x:Name="MoveableImage" Width="55" Source="questionmark2.jpg"
        MouseDown="Image_MouseDown" />

Here's the first pass at the Image_MouseDown event in the code-behind to move the Image 10 units to the right on each mouse down:

    Private Sub Image_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
        Dim LeftPos As Double = MoveableImage.GetValue(Canvas.LeftProperty)
 
        MoveableImage.SetValue(Canvas.LeftProperty, LeftPos + 10)
 
    End Sub

This seems straightforward enough, doesn't it? The variable named LeftPos reads the value that is currently stored as the attached Canvas.Left property of the Image, then it increments that value by 10. If you were to run this project, you would expect that the Image would jump 10 units to the right when the mouse is clicked on it. But if you try this code, you will find that nothing happens when the Image is clicked.

There's a little WPF Gotcha lurking in the canvas, just waiting to confuse you. When you create this layout, as you can see from the screenshot below, the Image appears in the top left hand corner of the Canvas by default:

You would be forgiven for assuming that the attached Canvas.Left and Canvas.Top values of the Image are set to zero. It's a reasonable assumption to make, especially as you can see the Image in exactly that location. However, it doesn't actually work like that. By default the Left and Top attached properties are in fact set to Double.NaN - Not A Number. This is effectively a null value that is assigned in order to allow the Canvas to make use of its own built-in layout intelligence for more complex scenarios.

The fix is simple - you just have to assign values to the Canvas.Left and Canvas.Top properties in the XAML when you create the Image element, but it's something that isn't obvious. Not only does it mean that the expected movement of the Image doesn't happen, but it will actually cause your application to crash if you try and reset the value in code to move the Image back to the start position (which we will do later).

So, here's the amended XAML for the Image:

    <Image x:Name="MoveableImage" Width="55" Source="questionmark2.jpg"
        MouseDown="Image_MouseDown" 
        Canvas.Left="0" Canvas.Top="0" /> 

With that change in place, the Image will now move when it is clicked.

In this kind of situation, you probably won't want the Image to either get stuck at the right hand side of the Canvas or, possibly even worse, move out of sight. A simple If/Then statement will fix this:

        If LeftPos < (MainCanvas.ActualWidth - MoveableImage.Width) Then
            MoveableImage.SetValue(Canvas.LeftProperty, LeftPos + 10)
        Else
            MoveableImage.SetValue(Canvas.LeftProperty, CDbl(0))
        End If 

As you can see, the first line tests if there is still enough width remaining for the Image to be moved 10 elements to the right and still be visible. If there is, then the 10 unit jump takes place. If not, then the Image is shunted back to far left of the Canvas. Note that this will fail if you haven't set the initial value of the Canvas.Left property as described earlier.

It will also fail if you don't cast the value (in this example, zero) to a Double. This is because the second parameter of the SetValue method is a generic Object Type and the Canvas.Left property requires a Double.

Moving the Image downwards follows the same kind of logic. You set an initial value on the Canvas.Top property then increment this when the MouseDown event fires. Perhaps you want to build in a feature where the left mouse button causes the Image to move left and the right mouse button to move it down.

If you are moving from Windows Forms to WPF, you may expect to find the Button property of the MouseEventArgs. You would then use code along the lines of:

        If e.Button = Windows.Forms.MouseButtons.Left Then
            ' Do Something
        End If

WPF is (again) slightly different. It uses the System.Windows.Input.MouseButtonEventArgs class in place of the Windows Forms version and it has a ChangedButton property, not a Button property. So the WPF version of the previous snippet will start with:

 If e.ChangedButton = MouseButton.Left Then 

The following code snippet combines the use of either the left or right mouse button to move the Image left or down respectively:

    Private Sub Image_MouseDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
 
        If e.ChangedButton = MouseButton.Left Then
 
            Dim LeftPos As Double = MoveableImage.GetValue(Canvas.LeftProperty)
 
            If LeftPos < (MainCanvas.ActualWidth - MoveableImage.Width) Then
                MoveableImage.SetValue(Canvas.LeftProperty, LeftPos + 10)
            Else
                MoveableImage.SetValue(Canvas.LeftProperty, CDbl(0))
            End If
 
 
        ElseIf e.ChangedButton = MouseButton.Right Then
            Dim TopPos As Double = MoveableImage.GetValue(Canvas.TopProperty)
 
            If TopPos < (MainCanvas.ActualHeight - MoveableImage.Width) Then
                MoveableImage.SetValue(Canvas.TopProperty, TopPos + 10)
            Else
                MoveableImage.SetValue(Canvas.TopProperty, CDbl(0))
            End If
        End If
 
    End Sub

Finally, of course, you can combine the horizontal and vertical movement of the Image - maybe by using the Middle mouse button:

        ElseIf e.ChangedButton = MouseButton.Middle Then
            MoveableImage.SetValue(Canvas.LeftProperty, MoveableImage.GetValue(Canvas.LeftProperty) + 10)
            MoveableImage.SetValue(Canvas.TopProperty, MoveableImage.GetValue(Canvas.TopProperty) + 10)
        End If

The above snippet can be expanded to have the tests for reaching the outer edges built in also.

The main issues I particularly wanted to cover in this blog item were the GetValue and SetValue methods, which are a very useful tool in these kind of situations. I also wanted to flag up the various WPF Gotchas that might trip up the unwary WinForms developer. In a follow-up blog, I plan to take this task a step further and look at ways of giving the user several ways of achieving the Image movement - all of which loop back to a single piece of code

Populating a WinForms ListView from a Text File

Ged Mead — Mon, 26 Oct 2009 11:41:00 GMT

The Windows Forms ListView is designed to display data. You can use a simple text file as the data source of a Windows Forms ListView. Let's start with a scenario where you have a txt file that contains the data. Each line of the text file represents one row of data to be displayed in the ListView. The content for each column item (or cell) is delimited by the use of a TAB character.

A simple text file along these lines might contain the following entries:

Ged Mead UK
Serge Baranovsky USA
Larry Blake USA
Scott Waletzko USA
Mark Dryden UK
Dave Jeavons UK
Chris Manning USA

(The uneven layout is caused by the use of the TAB as the delimiter)

Reading data from a file
An easy way of transferring this data from the file to the ListView is to:

Use a StreamReader which accesses the text file and then reads it line by line.
As each new line is read, it is split by means of the TAB character and temporarily stored in a String array.
Next, the first element is pulled out of the String array and used as the item for the first column of the ListView (the ListViewItem).
Then the remaining two elements are pulled out of the String array in turn and assigned as the SubItems of the ListViewItem.

Here's the code that carries out those steps:

  ' Variable for file to hold data
    Dim TextFile As String = "F:\MVPs.txt"
 
    Private Sub btnGet_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnGet.Click
 
        Try
            ' Declare StreamReader and pass the Path of the text file to be read as a Parameter 
            Dim SR As New StreamReader(TextFile)
            '  Variable to hold data as it is read line by line
            Dim strTemp() As String
 
            Do While SR.Peek <> -1 ' Use Peek to read the file until there are no more lines 
                '  Create a variable for the ListViewItems
                Dim LVItem As New ListViewItem
                '  Read the next line in file and Split it using the TAB. 
                strTemp = SR.ReadLine.Split(Chr(9))
                '  Pull out the first element in the line and assign it as
                '  the data for the first column.
                LVItem.Text = strTemp(0).ToString
                '  Add the item to the ListView
                LVMVPs.Items.Add(LVItem)
                '  Assign elements 2 & 3 as the subitems.
                LVItem.SubItems.Add(strTemp(1).ToString)
                LVItem.SubItems.Add(strTemp(2).ToString)
            Loop
 
            SR.Close() ' Close the StreamReader 
 
        Catch ex As Exception
 
            MsgBox("Error reading file." & ex.Message)
 
        End Try
 
    End Sub

You'll see that I've used a variable to hold the path to the file that contains the data. You will also need to include an Imports statement for System.IO at the top of the Class file.

Although the above code will successfully access the file, read and split the data and then populate the ListView, the result you will see may not be what you expect or want:

The first problem is that the View Property of the ListView needs to be set to Details. By default it is set to LargeIcon, with the result you see in the screenshot. You can make this change via the Properties Window or in code.

        LVMVPs.View = View.Details 

Make that change, run the project, hit the 'Get From File' button and you will see:

Again, definitely not what you want! The problem here is that the ListView won't automatically create columns for you, even though you might expect that it would based on the data you are feeding in. As it is traditional to have some header text at the top of each column, you can create this at the same time as you create the column itself .

        LVMVPs.Columns.Add("First Name", 76)
        LVMVPs.Columns.Add("Surname", 96)
        LVMVPs.Columns.Add("Location", 56) 

Now, when you run the project again you will see the data neatly tabulated in the ListView.

I have also set the width property of each column in the code above, because the default width would result in some of the longer strings being truncated otherwise.

If you don't want to hard code those column headers, you can change the text file structure and have the column headers written to the first line of the file. You would then pull these out first and assign them to the columns, before using the Do While loop to read and display the rest of the file.

Writing data to a file
Although a ListView's key purpose is to display existing data, there may be times when you have edited the content and want to save it back to a text file. The steps involved in doing this are as follows:

Use a FileStream to set up the file you are going to write to.
Use a StreamWriter to access the chosen file.
Loop through each row of the ListView, pull the text data from each column in turn and write it to the text file, adding a TAB character after each item.
Add a new line at the end of each loop.

The code for this process is:

   Private Sub btnSave_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSave.Click
        '  Create FileStream and StreamWriter to access and write to file
        Dim FS As New FileStream(TextFile, FileMode.OpenOrCreate, FileAccess.ReadWrite, FileShare.ReadWrite)
        Dim SW As New StreamWriter(FS)
 
        Try
            '  Loop through all rows
            For Index As Integer = 0 To LVMVPs.Items.Count - 1
                '  Internally loop through all columns, gathering items
                For SubIndex As Integer = 0 To LVMVPs.Items(Index).SubItems.Count - 1
                    SW.Write(LVMVPs.Items(Index).SubItems(SubIndex).Text & Chr(9))
                Next
                '  Create new line ready for next row
                SW.Write(Environment.NewLine)
 
            Next
        Catch ex As Exception
 
            MsgBox("Error saving to file." & ex.Message)
 
        Finally
 
            SW.Close()
            FS.Close()
 
        End Try
 
    End Sub

For many simple scenarios where you want to display tabulated text in a ListView (and optionally save it back to a file), the above approaches will work just fine. There will of course be times when you need something more sophisticated and I will look at some of those in later blogs.

How To Sort and Group Items in a WPF ListBox: Part 2

Ged Mead — Sun, 25 Oct 2009 12:26:00 GMT

Introduction
In the first part, I outlined the sample application and said that it:

will create a collection of Person objects and databind them to a ListBox.
will use very simple DataTemplates to format two properties of the Person class - FullName and Status.
will use a GroupStyle HeaderTemplate to display a third property of the Person class - Category.
groups the Person objects by their Category property.
sorts the Categories and displays them in alphabetical order.
sorts the Persons by name inside the Category groups and displays them in alphabetical order.

The first five tasks are all covered in that previous part. You can download the project up to this point from here.

Sorting the Categories
In the same way that I used a Group Description to group items together, WPF offers the SortDescription to allow data inside the CollectionView to be sorted. The following code in the Window Loaded event is all that's needed:

        currentView.SortDescriptions.Add(New SortDescription("Category", ListSortDirection.Ascending))

The SortDescription takes two parameters. The first is the name of the property that you want to sort on. The second is one of two choices for the sort direction.

For completeness, this is the full code so far in the Window Loaded event (which creates the DataContext, the View, the GroupDescription and the SortDescription):

    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Contacts = Person.GetPersons
        Me.DataContext = Contacts
 
        Dim currentView As ICollectionView
        currentView = CollectionViewSource.GetDefaultView(Contacts)
 
        '  Group
        currentView.GroupDescriptions.Add(New PropertyGroupDescription("Category"))
 
        '   Sort Categories
        currentView.SortDescriptions.Add(New SortDescription("Category", ListSortDirection.Ascending))
 
    End Sub

The sorted Categories will look like this:

Sorting the ListItems
As you can see, the Categories are now in alphabetical order. The names of the Person objects however are still shown in the relative order in which they were created. To create this secondary sort, the same kind of code is used:

        currentView.SortDescriptions.Add(New SortDescription("FullName", ListSortDirection.Ascending))

The resulting display is:

The clearest example is where you can see the three items in the 'Work Colleagues' Category. They are now sorted alphabetically.

Note that the order that you list the sorting tasks is important. If you were to reverse the order:

       '   Sort individual names
        currentView.SortDescriptions.Add(New SortDescription("FullName", ListSortDirection.Ascending))
 
        '   Sort Categories
        currentView.SortDescriptions.Add(New SortDescription("Category", ListSortDirection.Ascending))
 

You would effectively lose the Category sort.

It is possible to create and apply the grouping and sorting in XAML, but I always try as far as possible to handle these kind of tasks in code-behind. Equally, I try and use XAML for the actual graphical display. There isn't a clear line between the two sometimes, of course, and you have to allow for individual preferences, but I try and keep to this approach as a general rule.

How To Sort and Group ListItems in a WPF ListBox

Ged Mead — Sun, 25 Oct 2009 12:25:00 GMT

Introduction
I was going to title this blog "What's in a name?" because William Shakespeare's famous question smacked me on the head recently after what seemed like several hours of frustration. The answer in this particular case is "Quite a lot!". As you'll see when I cover the syntax used to group items, you can very easily fall into a trap when it comes to names.

But first, I'll need to set the scene. This small application:

will create a collection of Person objects and databind them to a ListBox.
will use very simple DataTemplates to format two properties of the Person class - FullName and Status.
will use a GroupStyle HeaderTemplate to display a third property of the Person class - Category.
groups the Person objects by their Category property.
sorts the Categories and displays them in alphabetical order.
sorts the Persons by name inside the Category groups and displays them in alphabetical order.

The Person Class
First, the Person Class - which I have chosen to implement INotifyPropertyChanged, although I don't actually take advantage of the change notification in this simple example:

Imports System.ComponentModel
Imports System.Collections.ObjectModel
 
Public Class Person
    Implements INotifyPropertyChanged
 
    Sub New(ByVal personname As String, ByVal personstatus As String, ByVal personsgroup As String)
        Me.FullName = personname
        Me.Status = personstatus
        Me.Category = personsgroup
    End Sub
 
    Private _name As String
    Public Property FullName() As String
        Get
            Return _name
        End Get
        Set(ByVal value As String)
            _name = value
            OnPropertyChanged(New PropertyChangedEventArgs("FullName"))
        End Set
    End Property
 
    Private _status As String
    Public Property Status() As String
        Get
            Return _status
        End Get
        Set(ByVal value As String)
            _status = value
            OnPropertyChanged(New PropertyChangedEventArgs("Status"))
        End Set
    End Property
 
    Private _Category As String
    Public Property Category() As String
        Get
            Return _Category
        End Get
        Set(ByVal value As String)
            _Category = value
            OnPropertyChanged(New PropertyChangedEventArgs("Category"))
        End Set
    End Property
 
    Public Sub OnPropertyChanged(ByVal e As PropertyChangedEventArgs)
        If Not PropertyChangedEvent Is Nothing Then
            RaiseEvent PropertyChanged(Me, e)
        End If
    End Sub 
 
    Public Event PropertyChanged(ByVal sender As Object, ByVal e As System.ComponentModel.PropertyChangedEventArgs) Implements System.ComponentModel.INotifyPropertyChanged.PropertyChanged
 
 
    Public Shared Function GetPersons() As List(Of Person)
        Dim GP As New List(Of Person)
        GP.Add(New Person("Neil Birch", "Available", "My Friends"))
        GP.Add(New Person("Joe Brown", "On Site", "Work Colleagues"))
        GP.Add(New Person("Larry Blake", "Available", "VB City"))
        GP.Add(New Person("Fran Mead", "At Work", "Family"))
        GP.Add(New Person("Elaine Javan", "On Vacation", "Work Colleagues"))
        GP.Add(New Person("Matt Higginbotham", "On Line", "VB City"))
        GP.Add(New Person("Zoe Flint", "On Site", "Work Colleagues"))
        Return GP
    End Function
 
End Class

Essentially, all you need to note for the purpose of this article is that the GetPersons function creates a List (of Person) and each Person instance has values assigned to all three of the properties of the class - FullName, Status, and Category.

The WPF Window
The WPF Application contains just one Window. A List of Persons is created by using the GetPersons function and this List is used as the DataContext for the Window. This will allow the ListBox to access that List. The initial code-behind is as follows:

Class Window1
    Dim Contacts As New List(Of Person)
    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Contacts = Person.GetPersons
        Me.DataContext = Contacts
    End Sub
 
End Class

The ListBox
In the XAML for Window1, there is a ListBox. To begin with, this ListBox simply shows the Person's FullName, followed by their Status. There is a minimal amount of formatting in the two TextBlocks that are used for this.

      <ListBox Name="lstContacts"
        ItemsSource="{Binding}" 
        Margin="6,6,3,3" >
 
 
        <ListBox.ItemTemplate>
        <DataTemplate >
          <StackPanel >
            <TextBlock Text="{Binding Path=FullName}"
              Margin="0,2,0,0"/>
            <TextBlock Text="{Binding Path=Status}" 
              Margin="6,0,0,0" FontSize="11" Foreground="Navy" />
 
          StackPanel>
        DataTemplate>
      ListBox.ItemTemplate>
    ListBox>

The result so far is this:

Obviously, there is no sorting or grouping going on there yet.

CollectionView
When you set up the Binding between the data source (the List of Persons) and the target control (the ListBox), a CollectionView is created automatically. This is a wrapper for the binding and allows you to sort, filter, group or navigate through the collection without affecting the underlying collection itself. Think of it as an editable snapshot of the data and you won't be far off the mark

You can access the current view by using the GetDefaultView method and passing in the name of the data source - in this case, the Contacts List created in the code-behind of Window1. In our example, we will access the CollectionView and then group and sort the items as they are displayed in the ListBox. To try and keep things as straightforward as possible I'll tackle each of these one at a time.

Creation of an instance of the view by means of the GetDefaultView method is simple.

Imports System.ComponentModel

    Private Sub Window1_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Contacts = Person.GetPersons
        Me.DataContext = Contacts
 
        Dim currentView As ICollectionView
        currentView = CollectionViewSource.GetDefaultView(Contacts)
    End Sub
 
End Class

Note the inclusion of the Imports statement for System.ComponentModel, the class which houses ICollectionView.

It's the final two lines of the Window_Loaded event that create the View:

Grouping

The following line of code, placed in the Window_Loaded event, will group the individual items based on the Category property:

        currentView.GroupDescriptions.Add(New PropertyGroupDescription("Category"))

The result is shown below:

So I don't have to be much of a mind reader to know that you're not too impressed at this point. In fact, you probably don't even believe that the items are now grouped. And even if they are, it's not very obvious to the user.

Let's start with the question of whether they are really grouped. If you look carefully at the order of the names you will see that they have changed from the way they were originally listed - as seen in the earlier screenshot. And if you take a peek at the code which created the Person instances you will be able to see the value of the Category property for each instance.

    Public Shared Function GetPersons() As List(Of Person)
        Dim GP As New List(Of Person)
        GP.Add(New Person("Neil Birch", "Available", "My Friends"))
        GP.Add(New Person("Joe Brown", "On Site", "Work Colleagues"))
        GP.Add(New Person("Larry Blake", "Available", "VB City"))
        GP.Add(New Person("Fran Mead", "At Work", "Family"))
        GP.Add(New Person("Elaine Javan", "On Vacation", "Work Colleagues"))
        GP.Add(New Person("Matt Higginbotham", "On Line", "VB City"))
        GP.Add(New Person("Zoe Flint", "On Site", "Work Colleagues"))
        Return GP
    End Function

Now, you can see that the first Category is "My Friends" and Neil Birch is the sole member of that Category. More usefully, the next three instances - Joe Brown, Elaine Javan and Zoe Flint all have "Work Colleagues" as their Category. They are now all listed consecutively - and both Elaine Javan and Zoe Flint have been moved from their original positions.

The next two names - Larry Blake and Matt Higginbotham are both in the "VB City" Category. Fran Mead is the sole member of the "Family" Category.

So, the grouping has actually taken place. The order of the Categories is based on the order in which they first appear in the GetPersons function.

Clearly, we need something to make the grouping of Categories more obvious. And that 'something' is a GroupStyle. GroupStyle has a HeaderTemplate property which can be used to format the text and/or graphics that are displayed at the start of each group - in this case at the start of each Category.

The XAML is a little bit verbose, but - apart from one potential Gotcha - is straightforward.

      <ListBox.GroupStyle>
        <GroupStyle>
          <GroupStyle.HeaderTemplate>
            <DataTemplate>
              <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>
            DataTemplate>
          GroupStyle.HeaderTemplate>
        GroupStyle>
      ListBox.GroupStyle>

The GroupStyle has a HeaderTemplate. The HeaderTemplate contains a DataTemplate. In this case I have chosen to include only a basic TextBlock in the DataTemplate. The Text property of the TextBlock needs to show the Category name.

This is where I managed to get myself quite confused.

  <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>

I initially had a property in the Person class called Name. (I've since changed it to FullName for clarity.) I couldn't understand why the Path of a TextBlock that showed the Category value would be pointing to the Name property of Person class. And of course it doesn't. But, while I was getting to grips with this I set the path to what I thought was the most logical item - the Category property. In other words, I had it like this:

 <TextBlock Text="{Binding Path=Category}" FontWeight="Bold"/>

Now, WPF is so forgiving when it comes to this kind of data binding that it doesn't throw an exception (quite rightly, because it is a valid path to an existing field). Sadly it doesn't show the Categories either. The result at this point is:

You can see that they are grouped, but there's no header. The key lesson to take away from this is that the Path in that particular binding points to the name that is assigned to the PropertyGroupDescription in the code-behind:

   currentView.GroupDescriptions.Add(New PropertyGroupDescription("Category"))

Confused yet? Put simply, you always use the syntax of:

              <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>

regardless of what the actual name of the grouping property is. You're probably thinking that we're well into the "Too much information" stage now, but - apart from wanting to share my pain - I really think that this is Gotcha that is just waiting to bite the unwary and so it was worth spending a couple of extra minutes looking at it.

OK, so getting back on track, the correct version of the GroupStyle markup will bring you the result you want. I have included all the ListBox XAML so you can see the finished product:

   <ListBox Name="lstContacts"
        ItemsSource="{Binding}" 
        Margin="6,6,3,3" >
 
      <ListBox.GroupStyle>
        <GroupStyle>
          <GroupStyle.HeaderTemplate>
            <DataTemplate>
              <TextBlock Text="{Binding Path=Name}" FontWeight="Bold"/>
            DataTemplate>
          GroupStyle.HeaderTemplate>
        GroupStyle>
      ListBox.GroupStyle>
 
      <ListBox.ItemTemplate>
        <DataTemplate >
          <StackPanel >
            <TextBlock Text="{Binding Path=FullName}"
              Margin="0,2,0,0"/>
            <TextBlock Text="{Binding Path=Status}" 
              Margin="6,0,0,0" FontSize="11" Foreground="Navy" />
 
          StackPanel>
        DataTemplate>
      ListBox.ItemTemplate>
    ListBox>

Here it is:

The grouping is clear, has a useful header and - more to the point - is accurate. The Categories are not yet in alphabetical order. The individual Person instances are also not sorted within their Categories, as you can see from the order in the Work Colleagues group.

As this blog has become a bit longer than I expected, I will continue with a Part 2, which will cover the Sorting methods.

I have posted a copy of this project which you can download from here.

WPF ValueConverter Using Enumeration and Image Paths

Ged Mead — Sun, 25 Oct 2009 12:22:00 GMT

In the previous blogs on ValueConverters - here and here - the conversion was from Integer type to Brush. In this blog I will cover the situation where you want to include a small image or icon in the ListView.

There are various alternatives here. You could hard code the image path into the collection, but the problem may be that you don't know the exact image paths at the time the collection is created. The approach I want to use is where you parse the data as it feeds through the binding and you select a stored image from the hard drive, the selection being based on the value of a specific field. This decouples the details of the image from the collection itself, which may be useful in many situations.

The DrinkProduct class looks like this:

Public Class DrinkProduct
    Enum MaterialType
        Granules
        Leaf
        Liquid
        Paste
        Powder
        Other
    End Enum
    Sub New(ByVal ID As String, ByVal Name As String, ByVal PackType As String, _
           ByVal BaseMaterial As MaterialType, ByVal Sales As Integer, ByVal Qty As Integer)
        Me.ProductID = ID
        Me.ProductName = Name
        Me.PackageType = PackType
        Me.Material = BaseMaterial
        Me.AnnualSales = Sales
        Me.Quantity = Qty
    End Sub
 
    Private _ProductID As String
    Public Property ProductID() As String
        Get
            Return _ProductID
        End Get
        Set(ByVal value As String)
            _ProductID = value
        End Set
    End Property
 
    Private _ProductName As String
    Public Property ProductName() As String
        Get
            Return _ProductName
        End Get
        Set(ByVal value As String)
            _ProductName = value
        End Set
    End Property
 
    Private _PackageType As String
    Public Property PackageType() As String
        Get
            Return _PackageType
        End Get
        Set(ByVal value As String)
            _PackageType = value
        End Set
    End Property
 
 
    Private _Material As MaterialType
    Public Property Material() As MaterialType
        Get
            Return _Material
        End Get
        Set(ByVal value As MaterialType)
            _Material = value
        End Set
    End Property
 
    Private _quantity As Integer
    Public Property Quantity() As Integer
        Get
            Return _quantity
        End Get
        Set(ByVal value As Integer)
            _quantity = value
        End Set
    End Property
 
 
    Private _annualsales As Integer
    Public Property AnnualSales() As Integer
        Get
            Return _annualsales
        End Get
        Set(ByVal value As Integer)
            _annualsales = value
        End Set
    End Property
 
    Public Shared Function StockCheck() As List(Of DrinkProduct)
        Dim CurrentProducts As New List(Of DrinkProduct)
        With CurrentProducts
            .Add(New DrinkProduct("CF1kg", "Coffee Powder", "1 Kg", MaterialType.Powder, 15684, 1276))
            .Add(New DrinkProduct("CFB500", "Ground Coffee", "500 g", MaterialType.Powder, 22785, 12856))
            .Add(New DrinkProduct("CFG500", "Coffee Granules", "500 g", MaterialType.Granules, 19233, 5907))
            .Add(New DrinkProduct("Te500", "Tea", "500 g", MaterialType.Leaf, 8544, 235))
            .Add(New DrinkProduct("TeInst500", "Instant Tea", "500 g", MaterialType.Powder, 1009, 22))
            .Add(New DrinkProduct("SMlk1lt", "Skimmed Milk", "1 Litre", MaterialType.Liquid, 28012, 2650))
            .Add(New DrinkProduct("HiJ300", "HiJuice Drink Mix", "300 g", MaterialType.Other, 578, 179))
            .Add(New DrinkProduct("Sm400", "Smoothie", "400ml", MaterialType.Paste, 9346, 3284))
            .Add(New DrinkProduct("Beef300", "Beef Drink", "300 g", MaterialType.Granules, 8316, 1965))
            .Add(New DrinkProduct("Beef750", "Beef Drink", "750 g", MaterialType.Granules, 7612, 359))
 
        End With
 
        Return CurrentProducts
    End Function
 
End Class 

The Enumeration named 'MaterialType' identifies whether the product is powder, liquid, granule, etc and this is what I will use as the key for selecting the appropriate image.

The ValueConverter class is similar to those used in the previous blogs - IValueConverter requires the two methods named Convert and ConvertBack. ConvertBack serves no purpose is this scenario, so only throws a not implemented exception.

Public Class MaterialToImagePathConverter
    Implements IValueConverter
 
    Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
        Select Case value.ToString
            Case "Powder"
                Return "Images/powderbrown.jpg"
            Case "Liquid"
                Return "Images/liquiddrop4.jpg"
            Case "Leaf"
                Return "Images/leaf.jpg"
            Case "Granules"
                Return "Images/granules.jpg"
            Case "Paste"
                Return "Images/Paste2.jpg"
            Case Else
                Return "Images/questionmark.jpg"
        End Select
 
    End Function
 
    Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
        Throw New NotImplementedException()
    End Function
End Class 

As before, the parameter named 'value' is an Object type which is the key element in the conversion process. It contains the value that is to be converted. The conversion is simple in this case because all we need is to find the string value of the enumeration that is being passed in. So the basic ToString method will work fine.

Once we have a String value, this is compared against the various possibilities. A string which represents the file path to an appropriate image is returned by the converter. I've chosen to include the image files in the project, but of course they could be stored externally and still be accessed in the same way.

The next steps are the same as for the previous examples in the earlier blogs. First, map the current assembly to an XML namespace in Application.xaml:

  xmlns:local="clr-namespace:WPFListView2"  

Then create an instance of the converter class in Application.xaml and give it a key:

    <local:MaterialToImagePathConverter x:Key="IconConverter" /> 

Next, create a DataTemplate for the new column of the ListView:

    <DataTemplate x:Key="IconCellTemplate">
            <Image Margin="0,0,1,3" Height="18" Width="25"
          Stretch="Fill"      
        Source="{Binding Path=Material, Converter={StaticResource IconConverter}}" />
    DataTemplate> 

In the above markup, the Binding Path is the Material field, the converter is the MaterialToImagePathConverter instance created above.

Finally, the ListView in the Window needs to have a new column added in which the images can be displayed:

          <GridViewColumn
           CellTemplate="{StaticResource IconCellTemplate}">
          GridViewColumn> 

And now you are all set. The finished Window displays as shown below:

For completeness, the full markup for the Window which contains the ListView is shown here:

<Window x:Class="Window2"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Image Path Converter Demo" Height="360" Width="450">
  <Grid>
 
    <ListView Name="ProductsListView"
         ItemsSource="{Binding}"
           Margin="5" >
 
      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        Style>
      ListView.ItemContainerStyle>
 
      <ListView.View>
        <GridView>
          
          <GridViewColumn
           CellTemplate="{StaticResource IconCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource IDColHeader}"
          CellTemplate="{StaticResource IDCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource NameColHeader}"
           CellTemplate="{StaticResource NameCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource PackageColHeader}"
           CellTemplate="{StaticResource PackCellTemplate}">
          GridViewColumn>
        GridView>
      ListView.View>
    ListView>
 
  Grid>
Window> 

Of course you are not forced to use the ValueConverter approach for this task. You could rewrite the class and give it an ImagePath property. Then in the code-behind run a function with a similar Select Case block to the one used above, passing back the appropriate path to the ImagePath property. The collection would be amended on the fly to include this data and finally the amended collection would be used as the DataContext. The Binding Path for the Image Source property would be that field. Personally, I think the ValueConverter is neater. And if the data comes from an external source, perhaps in the form of an XML file, then using the ValueConverter is almost certainly a better way.

How To Insert Row Divider Lines in a WPF ListView

Ged Mead — Sun, 25 Oct 2009 12:21:00 GMT

If you have read any of my previous ListView blogs, you will know that formatting the ListView is mostly a matter of creating templates and styles for the various sub-elements. The same applies if you want to do something to differentiate one row from another. For instance, you might to have horizontal divider lines between each row.

This is the look we are going for in this blog:

The column headers were described in this blog, so I won't repeat the markup for those here.

In my last ListView blog, the ItemContainerStyle was used and we looked at the HorizontalContentAlignment property of the ListViewItem. By setting it to Stretch, the width of the items in each column was stretched so that their start and finish points all lined up vertically.

Here is the markup:

      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        Style>
      ListView.ItemContainerStyle> 

And the result was this:

The problem with this obviously is those little gaps between the columns. The ListView inserts a margin of 6 units to the left and right of each column by default. So that is the cause of the gaps you can see there.

Each cell used a DataTemplate. Here is the DataTemplate for the cells in the first column shown above:

    <DataTemplate x:Key="IDCellTemplate2">
      <Border Background="LightGreen" > 
      <TextBlock Foreground="MediumBlue"
                FontFamily="Calibri"
         Text="{Binding Path=ProductID}" />
      Border>
    DataTemplate> 

What we need to do is to continue to make use the Border element in the DataTemplate for the cell, but remove the Light Green Background color. Then we can set a BorderBrush of Black and give it a Thickness of 1 unit.

Here's a first pass at it. This is the DataTemplate for the cells in the first column:

    <DataTemplate x:Key="IDBorderedCellTemplate">
      <Border BorderBrush="Black"
             BorderThickness="1" >
        <TextBlock Foreground="MediumBlue"
                FontFamily="Calibri"
           Text="{Binding Path=ProductID}" />
      Border>
    DataTemplate> 

The other two templates are very similar so I won't clog up the screen with them just yet. Here's the result so far:

We ended up with boxes when we really wanted lines, but it's a good start. The first trick is to set the individual values on the BorderThickness - that is left, top, right and bottom. By setting a value of 0 on the left and right we will remove the vertical lines.

We also want to remove the top border, otherwise there will be a double line between the rows (the bottom border of one row, followed by the top border of the next). So, here's an improved version:

    <DataTemplate x:Key="IDBorderedCellTemplate">
      <Border BorderBrush="Black"
              BorderThickness="0,0,0,1" >
        <TextBlock Foreground="MediumBlue"
                FontFamily="Calibri"
           Text="{Binding Path=ProductID}" />
      Border>
    DataTemplate> 

Getting closer. If we offset the start positions of the Borders in the DataTemplates and shunt them to the left to span the default gap of 6 units either side, we should be able to create a continuous line.

The following code snippet is the DataTemplate for the second column's cells. I'll explain why in a moment:

      <DataTemplate x:Key="NameBorderedCellTemplate">
      <Border BorderBrush="Black" Margin="-12,5,0,1"
             BorderThickness="0,0,0,1"  >
         <TextBlock Foreground="MediumBlue"
           FontFamily="Calibri" FontWeight="Bold"
           Text="{Binding Path=ProductName}" />
      Border>
    DataTemplate> 

The result:

What has happened here is that the Border in the second cell's template has been moved 12 units to the left. This has the effect of joining the end of first cell's bottom border to the start of the second cell's bottom border. This is achieved by setting the value of -12 for the left margin in the second line of markup above. So, to come back to why I have shown you the second cell's template, the reason is of course that the first cell doesn't need to be shunted to the left.

It's almost perfect, but there is just one minor adjustment still needed which I'll deal with next.

Moving the Border to the left means that its child TextBlock is also moved. It would look much better if the text content was displayed more in line with the column headers. You can see this in the second two columns in the screenshot above. This can be fixed by setting Margins on the TextBlocks. This time, I will shunt the TextBlocks back to the right.

Here is the markup for the second cell again:

      <DataTemplate x:Key="NameBorderedCellTemplate">
      <Border BorderBrush="Black" Margin="-12,5,0,1"
             BorderThickness="0,0,0,1"  >
         <TextBlock Foreground="MediumBlue"
           FontFamily="Calibri" FontWeight="Bold"
           Margin="14,0,0,2"
           Text="{Binding Path=ProductName}" />
      Border>
    DataTemplate> 

This time it is the Margin property on Line 6 that's of interest. As you can see, it pushes the start of the text back to where we want it.

For completeness, here is the markup for all three DataTemplates:

    <DataTemplate x:Key="IDBorderedCellTemplate">
      <Border BorderBrush="Black" Margin="0,5,0,1"
            BorderThickness="0,0,0,1" >
        <TextBlock Foreground="MediumBlue"
            FontFamily="Calibri"
            Margin="3,0,0,2"
            Text="{Binding Path=ProductID}" />
      Border>
    DataTemplate>
 
      <DataTemplate x:Key="NameBorderedCellTemplate">
       <Border BorderBrush="Black" Margin="-12,5,0,1"
           BorderThickness="0,0,0,1"  >
         <TextBlock Foreground="MediumBlue"
           FontFamily="Calibri" FontWeight="Bold"
           Margin="14,0,0,2"
           Text="{Binding Path=ProductName}" />
       Border>
    DataTemplate>
 
    <DataTemplate x:Key="PackBorderedCellTemplate">
      <Border BorderBrush="Black" Margin="-12,5,0,1"
             BorderThickness="0,0,0,1" >
         <TextBlock Foreground="MediumBlue"
            FontFamily="Calibri"
            Margin="15,0,0,2" 
            Text="{Binding Path=PackageType}" />
      Border>
    DataTemplate> 

As it has been a couple of blogs since you saw the markup for the actual ListView, I'll list that too:

    <ListView Name="ProductsListView"
         ItemsSource="{Binding}"
           Margin="5,25" >
      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        Style>
      ListView.ItemContainerStyle>
 
      <ListView.View>
        <GridView>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource IDColHeader}"
          CellTemplate="{StaticResource IDBorderedCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource NameColHeader}"
           CellTemplate="{StaticResource NameBorderedCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource PackageColHeader}"
           CellTemplate="{StaticResource PackBorderedCellTemplate}">
          GridViewColumn>
        GridView>
      ListView.View>
    ListView> 

The DataBinding to the very basic data source was covered in this blog.

So I know I've plodded through this in minute detail and you might think that it would have been better to have shown you the final versions of those DataTemplates and cut out all the intermediate steps. The reason I haven't is that you might want to take the basic idea and tweak it further - change colors, alter the vertical space between lines, change the distance that the text is shunted and so on. Now that you fully understand what each of those individual tweaks does, you can go ahead and make those kind of changes without having to pull my XAML apart to work out how its done.

Using a ValueConverter in WPF

Ged Mead — Sun, 25 Oct 2009 12:20:00 GMT

The Story So Far
Each of my previous blog items on WPF ListViews has mostly used a collection of DrinkProduct objects as the data source. This collection is bound to the Window via a DataContext and the individual columns are bound to fields in the collection. (As an alternative, this blog looked at the XML data source alternative.)

As the route from that first ListView blog to this one has become a bit murky, I'm going to start off by recreating the DrinkProduct class and creating the collection. I've taken the opportunity to add a few new properties which will be used in this and the upcoming ListView blogs.

You can view the revised DrinkProducts class code here.

The XAML markup for the start state of the ListView is in two locations. The ListView itself is in a WPF Window:

<Window x:Class="Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="WPF ListView" Height="300" Width="450">
    <Grid>
    <ListView Name="ProductsListView"
         ItemsSource="{Binding}"
           Margin="5" >
 
      <ListView.View>
        <GridView>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource IDColHeader}"
          CellTemplate="{StaticResource IDCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource NameColHeader}"
           CellTemplate="{StaticResource NameCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource PackageColHeader}"
           CellTemplate="{StaticResource PackCellTemplate}">
          GridViewColumn>
        GridView>
      ListView.View>
    ListView>
  Grid>
Window> 

All the Resources - GradientBrush, Styles, DataTemplates for ColumnHeaders and Cells - are in the Application.xaml file. You can see the markup for these here.

If the Resources looks like a lot of markup, it breaks down into much less if you analyze it. There's a GradientBrush, a couple of Styles, then the DataTemplates, which are really only slightly tweaked versions of two simple templates.

At this stage the ListView looks like this:

ValueConverters
In this blog I want to demonstrate a simple example of the creation and use of a ValueConverter in WPF. ValueConverters are particularly useful in situations where you are using data binding to directly populate elements in the UI. By definition, this means that the data from the fields of the data source are passed untested from the source to the display.

This data will often be in a raw state, e.g. primitive types such as integer, double, boolean, etc. In the first example I will use integer values that represent the quantity of stock remaining of the various drink products. These will be displayed in a new column of the ListView.

Although the DataTemplates created earlier can alter the core properties of all the values in the column - Foreground, Bold font, etc,- they don't offer any mechanism for analyzing these values and changing the look of the display of an individual value based on some criteria. For instance, changing the color of the text if the value is negative.

The way to achieve this kind of fine tuning is to use a ValueConverter. This automatically intercepts the data as it is being fed in from the DataContext, analyzes the value and makes any appropriate settings or changes to the display of this piece of data.

A Simple ValueConverter
Let's start with something simple, a ValueConverter that analyzes the quantity held in stock and if that value is less than a particular threshold, the figure is displayed in red in the ListView. This will give an easy introduction to the steps involved.

Before getting round to the ValueConverter I need to add a new column to the ListView, the column that will display the quantities held in stock. First a couple of DataTemplates - one for the column header and for the cell:

      
    <DataTemplate x:Key="QtyColHeader">
      <Border Style="{StaticResource BlueBorder}">
        <TextBlock Text="Quantity " Style="{StaticResource ColHeaderText}" />
      Border>
    DataTemplate>
 

      
    <DataTemplate x:Key="QtyCellTemplate">
      <TextBlock Foreground="MediumBlue"
         Text="{Binding Path=Quantity}" />
    DataTemplate> 

Followed by the additional column in the ListView itself:

          
          <GridViewColumn 
           HeaderTemplate="{StaticResource QtyColHeader}"
           CellTemplate="{StaticResource QtyCellTemplate}">
          GridViewColumn> 

With just the raw quantity values showing in the new column, the ListView now looks like this:

For the sake of example, let's say that we want to highlight in red all values that are less than 200. First we create a class that implements IValueConverter. This implementation requires two methods - Convert and ConvertBack - each with a standard signature. Here is the code, which can be placed in a file of its own or - as I have chosen to do - appended to the end of (but not inside!) the Application.xaml.vb file:

Public Class IntegerToBrushConverter
    Implements IValueConverter
 
    Public Function Convert(ByVal value As Object, ByVal targetType As Type, _
        ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) _
        As Object Implements IValueConverter.Convert
 
        ' Only allow conversion if the correct TargetType is passed in.
        '  (This is optional)
        If targetType IsNot GetType(Brush) Then
            Return Nothing
        End If
 
        '  If less than 200 in stock, display in Red, otherwise use 
        '  the default of MediumBlue
        Dim Result As Integer = Integer.Parse(value.ToString())
        Return (If(Result < 200, Brushes.Red, Brushes.MediumBlue))
    End Function
 
    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, _
ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) _
As Object Implements IValueConverter.ConvertBack
 
        ' Not used, so throw exception if this method is called.
        Throw New NotImplementedException()
    End Function
End Class

As you can see from the comments, I have chosen to test that a Brush object is passed in to the method. This isn't mandatory but is often worth including. The second test in the Convert method checks the value of the current field and if it finds the value to be less than 200, Returns a Red Brush, otherwise it Returns a MediumBlue Brush.

Clearly, what is needed next is some mechanism that is watching for those returned values and making use of the particular brush that is returned. This is handled in the markup in the Application.xaml file. If you are wondering why the markup is in Application.xaml and not the Window that contains the ListView, the reason is that we need to set the conversion on the DataTemplate that formats the Quantity column. And that DataTemplate is in Application.xaml.

As things stand, the XAML markup is unable to access the code above directly. So the first requirement is to map the current project into an XML namespace, making it possible to create a direct link between the two. The syntax for this is as follows:

  xmlns:local="clr-namespace:WPFListview" 

which is placed in the Application.xaml file, just below the default XML namespaces which are placed there automatically. This now gives the ability to refer to the IntegerToBrushConverter in the XAML markup. (You may find that you have to Rebuild the solution to remove the wavy blue error mark after you first enter this. )

Now that the mapping is in place, I can create an instance of the IntegerToBrushConverter class and assign it a key so that it can be referred to in the XAML.

  <local:IntegerToBrushConverter x:Key="QtyConverter" /> 

The final step is to use this instance of the converter inside the DataTemplate for the Quantity column. This markup is in the Application.xaml file:

    
    <DataTemplate x:Key="QtyCellTemplate">
      <TextBlock 
         Text="{Binding Path=Quantity}" 
          Foreground="{Binding Path=Quantity, Converter={StaticResource QtyConverter}}"/>
    DataTemplate> 

The only change is to the Foreground property in the markup,which I have changed from the original hard-coded value of MediumBlue to the Binding you can see there. The syntax is reasonably straightforward:

The Path has to be an Integer type because that is what the IntegerToBrushConverter expects.
The relevant Path points to the field that the column is being databound to - Quantity.
The Converter in the Binding refers to that instance of the IntegerToBrushConverter created a few moments ago and given the key of 'QtyConverter'.

The resulting display when the project runs is now:

Just to briefly cover the ConvertBack method, you can see from the commenting that this method isn't of use to us in this scenario. However, IValueConverter requires that it is included, so we simply throw an Exception if this method should be accessed at any point.

This has been a very simple example of using a ValueConverter, but it includes all the key steps. I plan to cover some more complex scenarios in later blogs.

More Complex Conversions with the WPF MultiBinding Converter

Ged Mead — Sun, 25 Oct 2009 12:18:00 GMT

In the previous blog, I created a simple ValueConverter that analyzed the data bound values and set the Foreground color of a TextBlock based on whether the value was less or more than a cut off value of 200 units. In reality, these preset values (such as the 200 in that demonstration) are rarely that rigid and you often need some flexibility in the analysis. To continue the example of a collection of drink products, it might be more realistic to compute a cut off value on the fly. For instance, if you know your annual sales for an individual item and you know the quantity you have in stock, you might want to highlight those items that need to be re-ordered. If it's a big selling item, the value of 200 may be far too low as a cut off; conversely an item with low annual sales might only need to be re-ordered when the stock is down to a handful.

So, how do we include this kind of calculation in a process where the value is data bound, but we need to apply some arithmetic to more than one field? The answer is to use MultiBinding and a MultiValueConverter.

You create a class that implements IMultiValueConverter. The core difference between this class and the one created in the previous blog is that the 'value' parameter of the Convert method is renamed to 'values' and is an array, not a single object. Armed with that array, you can pass in the values of two or more of the fields of your data source, run the calculations and Return a result.

Take a look at this class:

Public Class StockLevelConverter
    Implements IMultiValueConverter
 
    Public Function Convert(ByVal values() As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IMultiValueConverter.Convert
 
        If targetType IsNot GetType(Brush) Then Return Nothing
 
        '  Variables for the arithmetic operations
        Dim QtyHeld As Integer = CInt(values(0))
        Dim AnnualSales As Integer = CInt(values(1))
 
        '  Avoid divide by zero errors by not proceeding to the calculation
        '  and returning a different brush 
        If QtyHeld = 0 Or AnnualSales = 0 Then Return Brushes.DarkGray
 
        Dim RestockLevel As Integer = AnnualSales / 12
 
        Return (If(QtyHeld < RestockLevel, Brushes.Red, Brushes.MediumBlue))
 
    End Function
 
    Public Function ConvertBack(ByVal value As Object, ByVal targetTypes() As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object() Implements System.Windows.Data.IMultiValueConverter.ConvertBack
        Throw New NotImplementedException()
    End Function
End Class

It is similar to the converter class created in the previous blog, having the same two methods, Convert and ConvertBack. Note that this class implements IMultiValueConverter and the first parameter being an array as mentioned earlier.

In the Convert method, I have included the test that confirms that the correct Target Type has been passed in. Two variables, QtyHeld and AnnualSales are created and you will see that their respective values are taken from the two elements of the array named 'values' passed in as a parameter. We will need to look at how those array elements are notified to the converter in a moment.

Continuing with the Convert method, a test is included to avoid any divide by zero errors. I have chosen to Return a different colored Brush, but it could have been left to the default of MediumBlue if preferred.

The 'RestockLevel' variable could have been left out and the calculation that it uses could have been placed inside the If statement in the final line. But I felt that it is easier to read in the more verbose approach. The gist of these two lines is to divide the annual sales figure by 12 in order to find the average monthly sales. If the Stock held is less than one month's worth, then a Red Brush is returned, otherwise a MediumBlue one.

So, how do the values in the array get passed in to the Convert method? The answer is that a MultiBinding is used in the XAML. This is a similar approach to the single ValueConverter example seen previously, except that this time two Paths are required - one for the Quantity field and one for the AnnualSales field of the data source.

Assuming you are using the same project as in the previous blog, there is already a namespace mapping named 'local'. You then need to create an instance of this new converter class:

    <local:StockLevelConverter x:Key="StockChecker" />

The DataTemplate for the Quantity column cells will contain the MultiBinding. Here is the markup for this:

    <DataTemplate x:Key="QtyCellTemplate">
      <TextBlock 
          Text="{Binding Path=Quantity}" >
        <TextBlock.Foreground>
          <MultiBinding Converter="{StaticResource StockChecker}">
            <Binding Path="Quantity" />
            <Binding Path="AnnualSales" />
          MultiBinding>
        TextBlock.Foreground>
      TextBlock>
    DataTemplate> 

The Element.Property syntax is used to allow for the multiple sub elements. The MultiBinding is created and set to point to that instance of the StockLevelConverter class, which has been keyed as 'StockChecker'. The two paths which are passed in to the StockLevelConverter are listed next. Note that the array is filled in the order in which these paths are listed - that is values(0) will take the Quantity field values and values(1) will take the AnnualSales field values.

That's all there is to it. If I create some arbitrary dummy data for all the properties of the DrinkProduct class collection (i.e. including the Quantity and AnnualSales figures) and run the project, the resulting ListView will look like this:

If you're interested in trying this out, using the class code from the previous blog but can't be bothered to create your own dummy data, here is the collection I created:

  Public Shared Function StockCheck() As List(Of DrinkProduct)
        Dim CurrentProducts As New List(Of DrinkProduct)
        With CurrentProducts
            .Add(New DrinkProduct("CF1kg", "Coffee Powder", "1 Kg", MaterialType.Powder, 15684, 1276))
            .Add(New DrinkProduct("CFB500", "Ground Coffee", "500 g", MaterialType.Powder, 22785, 12856))
            .Add(New DrinkProduct("CFG500", "Coffee Granules", "500 g", MaterialType.Granules, 19233, 5907))
            .Add(New DrinkProduct("Te500", "Tea", "500 g", MaterialType.Leaf, 8544, 235))
            .Add(New DrinkProduct("TeInst500", "Instant Tea", "500 g", MaterialType.Powder, 1009, 22))
            .Add(New DrinkProduct("SMlk1lt", "Skimmed Milk", "1 Litre", MaterialType.Liquid, 28012, 2650))
            .Add(New DrinkProduct("HiJ300", "HiJuice Drink Mix", "300 g", MaterialType.Other, 578, 179))
            .Add(New DrinkProduct("Sm400", "Smoothie", "400ml", MaterialType.Paste, 9346, 3284))
            .Add(New DrinkProduct("Beef300", "Beef Drink", "300 g", MaterialType.Granules, 8316, 1965))
            .Add(New DrinkProduct("Beef750", "Beef Drink", "750 g", MaterialType.Granules, 7612, 359))
 
        End With
 
        Return CurrentProducts
    End Function

Don't forget to include the DataContext in the code-behind of Window1, the Window that holds the actual ListView:

Class Window1 
    Dim CurrentProducts As New List(Of DrinkProduct)
 
 
    Private Sub Me_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        CurrentProducts = DrinkProduct.StockCheck()
        Me.DataContext = CurrentProducts
    End Sub
End Class

WPF ListView - How To Format the Appearance of Rows

Ged Mead — Sun, 25 Oct 2009 12:17:00 GMT

By the end of the previous blog item on the topic of the WPF ListView, the ListView looked like this:

In this blog I want to look at ways of changing the look of the rows. You may, for example, want to assign a background color to the rows. And based on what we have done so far, you might be tempted to edit the DataTemplates used for the cells. Maybe you would think about adding a Border with a Background fill and placing this around the TextBlock for each cell:

  <DataTemplate x:Key="IDCellTemplate2">
      <Border Background="LightGreen"> 
      <TextBlock Foreground="MediumBlue"
                FontFamily="Calibri"
         Text="{Binding Path=ProductID}" />
      Border>
    DataTemplate> 

I won't waste the space showing the markup for all three templates here, but if you did try this you will get a disappointing result:

Pretty ugly, I think you'll agree. Playing around with the Margin or Padding won't get you any further either.

The answer is to use the ItemContainerStyle property of the ListView. This opens up a number of choices for you. Firstly, if you would like to still have a gap between each of the columns - but an even gap - then you can take the following approach:

      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        Style>
      ListView.ItemContainerStyle> 

This will produce the following output, which is an improvement:

If you want the light green to spread across the whole row, then you still use the ItemContainerStyle, but this time you set the Background property of the ListViewItem:

      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="LightGreen" />
        Style>
      ListView.ItemContainerStyle> 

Now you get the result you are probably looking for.

If all that whiteness in the background is a bit too much for you, then of course you can blend another shade of green into the mix by setting the ListView's Background property. Using SeaGreen, for example, will produce this:

The final markup for the ListView looks like this:

    <ListView Name="ProductsListView"
         ItemsSource="{Binding}"
           Margin="5,25" 
              Background="SeaGreen">
      <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Background" Value="LightGreen" />
        Style>
      ListView.ItemContainerStyle>
 
      <ListView.View>
        <GridView>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource IDColHeader}"
          CellTemplate="{StaticResource IDCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource NameColHeader}"
           CellTemplate="{StaticResource NameCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource PackageColHeader}"
           CellTemplate="{StaticResource PackCellTemplate}">
          GridViewColumn>
        GridView>
      ListView.View>
    ListView> 

The markup for the DataTemplates and Styles is the same as that shown in the previous blog, all of which I placed in the Application.xaml file (App.xaml for C# projects).

There are some other row formatting options I want to cover, but I will leave those for another day.

Visual Studio 2010 XAML Intellisense and Other Improvements

Ged Mead — Sun, 25 Oct 2009 12:12:00 GMT

Sometimes it's the tiniest little changes that make you happy out of all proportion to the size of the change. While testing the WPF features in VS2010 I was totally thrilled to discover that at last when you type in the opening curly brace in the XAML Pane, you get an Intellisense list of useful choices. The top one, of course, is StaticResource. If I had a penny for every time I've laboriously typed out that name, I'd be a rich man!

The same feature also offers other commonly used properties such as Binding. And once you have entered 'Binding' and a space, you also get Path, again courtesy of Intellisense.

On the subject of DataBinding, which is a key feature in WPF of course, the Properties Pane has been improved. Now if you select a control such as a ListView, the ItemsSource property is available in the Properties Pane and you can select the Binding from the available choices:

Maybe I've missed a trick, though, because when I tried to drill deeper into the ListView components and looked at the binding for a GridViewColumn, there didn't seem to be a way to select a value for the DisplayMemberBinding. If in the XAML Pane I manually typed in a valid Path, i.e. a field from the data source behind the DataContext, then that would be shown in the Properties Pane. But I couldn't find an option to switch the Path to a different field within that dialog.

I quite liked the way you can now view and choose from all the Resources in scope. This example shows where I am building a ListView and using a CellTemplate, for instance:

I noticed that when using the Properties Pane in this way, it can have an annoying habit. You close the dialog window by clicking anywhere outside it (i.e. it doesn't have a close/x button). If you are careless about where you click, you will deselect the current element in the XAML Pane. Often, if you click in the Design Pane to deselect, you will be taken back to the root element. It would be nice if a close button is added to the dialog windows at some point.

You can also pick and assign a saved Style for the Style property of any element. In this example I am offered all the previously created styles which can be assigned to a TextBlock element:

Another super improvement in the Properties pane is the color picker feature. If you select a property which can be assigned a color (well, to be more accurate, a brush), then you can click on the little down arrow at the right hand side of the property in the Properties pane and a color picker dialog will appear:

This example shows the Background property of a TextBlock. You can play with the color picker until you have the exact look you want. if you've used Expression Blend you'll recognize this layout.

You can still select a named color if you want. The drop down list is at the bottom left of the color picker:

Overall, I like the new look of the VS2010 editor and the new features I've found so far.

Date and Time: How To Create a 'Time' element

Ged Mead — Sat, 05 Sep 2009 10:18:00 GMT

I've often thought that dealing with dates and times can sometimes be much more difficult than it should be. There is a bewildering range of choices, many of which seem to do pretty much the same thing and you can sometimes wonder which is the 'right' way. One good example of the multiple choices is identifying a time. I don't mean a TimeSpan - which is a period of time - but a single specific moment in time, such as 8 o'clock, that you want to isolate and maybe compare, manipulate or filter in some way.

You can of course take any DateTime instance and display only the time element by using ToShortTimeString or ToLongTimeString.

        TimeCheck = New DateTime
        TimeCheck = Now
        Console.WriteLine("TimeCheck =  " & TimeCheck.ToShortTimeString)

You can also drill down and pull out the hour, minute, second or any combination of those.

        TimeCheck = New DateTime
        TimeCheck = Now
        Console.WriteLine("TimeCheck Hour and Minute = {0}:{1}  ", _
           TimeCheck.Hour, TimeCheck.Minute)

Also available is the TimeOfDay property of the DateTime class, which - as you would expect - will return the time element. However this is a TimeSpan which in some cases can make it very fiddly to manipulate. It is also a ReadOnly property, so you can't use it to set a new time.

And by coincidence, only today I learned of yet another one - the TimeString property, which returns the current time in HH:mm:ss format. But that is fixed to the current time, not some time point of your choice.

The TimeValue function offers a different approach. Although it gives the appearance of being just a time - e.g. 14:22:30 or 3:15 PM and so on - it is basically a full standard DateTime, but the date is always constrained to be 1st January in the year 0001. For most purposes when you use TimeValue it conveniently ignores that date, anyway.

You can extract the time value of any particular date and time by passing in a DateTime instance to the TimeValue function:

       Dim DT As DateTime = TimeValue(Now)

TimeValue returns a String, so there is no need to cast to any of the String formats to read it as text:

Console.WriteLine(DT)

If you run those last two lines of code, you may be surprised/disappointed to see that it still includes a date. However, remember that the original DateTime we passed in was the DateTime value Now. As you will see in the Console printout, the real value of today's date has been dropped and is replaced by the 01/01/0001 date.

TimeValue also allows you to manufacture a time. In the next example, a time of 1400 hours or 2pm is created:

        Dim TVTime As DateTime
        TVTime = TimeValue("14:00")

Note that unlike the overloaded constructors of the DateTime class, you don't have to include year, month and day - for the obvious reason that they would be ignored anyway.

Although I haven't done so, you can also include a value for Seconds to the time you create.

You can add or subtract elements of time from the currently stored time by using AddHours, AddMinutes, AddSeconds, etc

Finally, you can compare times. If you wanted, for example, to check if a particular deadline had passed you can compare the times extracted with TimeValue:

        Dim TVTime As DateTime
        TVTime = TimeValue("14:00")
        If TimeValue(Now) > TVTime Then
            Console.WriteLine("Passed deadline")
        Else
            Console.WriteLine("Not yet reached")
        End If

There is really nothing in TimeValue that can't be achieved by manipulating other properties and methods of the DateTime class, but in many situations it's a neat function that will make for easier, cleaner code.

WPF ListView Column and Cell Formatting

Ged Mead — Sat, 05 Sep 2009 10:03:00 GMT

In the first WPF ListView blog of this set, I used XML data binding and added some basic formatting to the Column Headers of the ListView. In the previous blog, a collection of objects was used as the data source. The formatting in that second example was a bit plain. So, in this blog I will look at some ways of breaking away from the standard monochrome ListView.

First, let's revisit those Column Headers. Instead of the plain block Yellow I used in the first example, we can use a Gradient Brush for the TextBlock background and place a matching color Border round the outside. The finished headers will look like this:

As before, it is best to try and centralize as much of the XAML for the GUI as possible. To do this we use DataTemplates and Styles.

First, there is a Style for the blue border which surrounds each column header TextBlock, which I have chosen to store in the Application.xaml file as an application wide Resource:

    <Style x:Key="BlueBorder" TargetType="Border">
      <Setter Property="BorderBrush" Value="#FF6B93CC" />
      <Setter Property="BorderThickness" Value="4"/>
      <Setter Property="CornerRadius" Value="2"/>
      <Setter Property="Padding" Value="2"/>
   Style> 

There is a LinearGradientBrush which is used to give the TextBlock background the blue and white gradient look. Again I have put this in Application.xaml:

    <LinearGradientBrush x:Key="SubtleBlue" EndPoint="0.476,-0.09" StartPoint="0.476,1.363">
      <GradientStop Color="#FF7A8EEC" Offset="0.013"/>
      <GradientStop Color="#FF6B93CC" Offset="1"/>
      <GradientStop Color="#FFF7F6F7" Offset="0.54"/>
      <GradientStop Color="#FFEDEEF4" Offset="0.46"/>
    LinearGradientBrush> 

The TextBlocks in the column headers also use a Style. This Style, as you can see, incorporates that LinearGradientBrush:

    <Style x:Key="ColHeaderText" TargetType="TextBlock">
      <Setter Property="FontSize" Value="14" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Background" Value="{StaticResource SubtleBlue}" />
      <Setter Property="Foreground" Value="Black" />
      <Setter Property="Padding" Value="2" />
   Style> 

So far, we have Styles for the Border and the TextBlock. The next step is to use these styles in a DataTemplate for the Column Headers.

    <DataTemplate x:Key="IDColHeader">
      <Border Style="{StaticResource BlueBorder}"> 
             <TextBlock Text="Product ID " Style="{StaticResource ColHeaderText}"/>
    Border>   
    DataTemplate>
 
    <DataTemplate x:Key="NameColHeader">
      <Border Style="{StaticResource BlueBorder}">
        <TextBlock Text="Product Name " Style="{StaticResource ColHeaderText}" />
      Border>
    DataTemplate>
 
    <DataTemplate x:Key="PackageColHeader">
      <Border Style="{StaticResource BlueBorder}">
        <TextBlock Text="Pack Size " Style="{StaticResource ColHeaderText}" />
      Border>
    DataTemplate> 

These three DataTemplates are essentially the same, the only difference being the text content. It would be possible to have only one DataTemplate for all the TextBlocks and use TemplateBinding to pass in the required text from the ListView markup, but I thought I would try and keep things as simple as possible for you at this stage.

We now have everything we need in the way of resources to build the GUI of the ListView. Taking things one step at a time, here is the first pass at the ListView markup:

    <ListView Name="ProductsListView"
         ItemsSource="{Binding}"
           Margin="5,25"  >
      <ListView.View>
        <GridView>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource IDColHeader}">
 
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource NameColHeader}">
 
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource PackageColHeader}">
 
          GridViewColumn>
        GridView>
      ListView.View>
    ListView> 

The data to be displayed comes from the bound DataSource. (This is covered in the previous blog item).

Each GridViewColumn uses its own HeaderTemplate to create the gradient TextBlock with blue border and appropriate text.

If you were to run this now, you will see that the headers have the right look, but the data isn't what you want:

This is because I haven't yet set the DataTemplates for each of the cells - that is, each item in each row. More specifically, I haven't set the appropriate Binding that will link the correct field in the data source to the column.

I will do this by means of another DataTemplate. As well as fixing up the Binding, I'll play with the text settings, so you can see how easy it is to create a different look for each column, if you need to. In this case, I've decided that I'll make all the data text Blue, but will make the detail of the Product Names stand out.

Here are the three DataTemplates:

    <DataTemplate x:Key="IDCellTemplate">
      <TextBlock Foreground="MediumBlue"
                FontFamily="Calibri"
         Text="{Binding Path=ProductID}" />
    DataTemplate>
 
    <DataTemplate x:Key="NameCellTemplate">
      <TextBlock Foreground="DarkBlue" FontWeight="Bold"
         Text="{Binding Path=ProductName}" />
    DataTemplate>
 
      <DataTemplate x:Key="PackCellTemplate">
      <TextBlock Foreground="MediumBlue"
         Text="{Binding Path=PackageType}" />
    DataTemplate> 

So, the final step is simply to point to these DataTemplates from the GridViewColumn's CellTemplate property. The ProductID column, for example:

 CellTemplate="{StaticResource IDCellTemplate}" 

The final complete markup for the ListView is as follows:

    <ListView Name="ProductsListView"
         ItemsSource="{Binding}"
           Margin="5,25"  >
      <ListView.View>
        <GridView>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource IDColHeader}"
           CellTemplate="{StaticResource IDCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource NameColHeader}"
           CellTemplate="{StaticResource NameCellTemplate}">
          GridViewColumn>
          
          <GridViewColumn 
           HeaderTemplate="{StaticResource PackageColHeader}"
           CellTemplate="{StaticResource PackCellTemplate}">
          GridViewColumn>
        GridView>
      ListView.View>
    ListView> 

And the finished look is:

This example only scratches the surface of the changes you can make to the look of the ListView. Some of them will take quite a lot more work (more than it should, you may think) and I will look at those in future blogs.

You may have noticed in the examples that by default the column widths are set to a size that allows the widest item to be displayed. Of course, the user can resize the column widths at run time and a useful trick to know is this: If the column width is too small for all the data to be read, double-clicking on the divider between the two columns will cause the column to the left to resize. All its data will then be visible again. It's a little weird that you have to click on the divider, not the column header, but it works just fine.

NB. Another thing to note: If you don't want to re-run the project after each change, sometimes you will need to Rebuild the solution to get the new look to appear in the Design Pane.

More on DataBinding to a WPF ListView

Ged Mead — Fri, 28 Aug 2009 14:22:00 GMT

In a previous Blog, I showed how to databind an XML file to a WPF ListView. As some people are more comfortable with collections of objects than they are with XML, in this blog item I thought we could look at binding to a collection.

One difference to note is that if you use XML data and XPath, you have the benefit of seeing all the data in the Design Pane at design time. With this collection of objects approach, the data is being created on the fly, so of course it can't be seen at design time because it doesn't exist. It isn't usually a problem, but if you have become used to seeing the data at design time, this can be disconcerting at first.

Creating a Collection of Objects
Constructing a class that you can use to create objects is exactly the same as with Windows Forms. Here is a simple class named DrinkProduct:

Public Class DrinkProduct
 
    Sub New(ByVal ProductID As String, ByVal ProductName As String, ByVal PackageType As String)
        Me.ProductID = ProductID
        Me.ProductName = ProductName
        Me.PackageType = PackageType
    End Sub
 
    Private _ProductID As String
    Public Property ProductID() As String
        Get
            Return _ProductID
        End Get
        Set(ByVal value As String)
            _ProductID = value
        End Set
    End Property
 
    Private _ProductName As String
    Public Property ProductName() As String
        Get
            Return _ProductName
        End Get
        Set(ByVal value As String)
            _ProductName = value
        End Set
    End Property
 
    Private _PackageType As String
    Public Property PackageType() As String
        Get
            Return _PackageType
        End Get
        Set(ByVal value As String)
            _PackageType = value
        End Set
    End Property
 
End Class

The next step is to create a collection of DrinkProduct objects. Again, there is nothing new here:

    Public Function StockCheck() As List(Of DrinkProduct)
        Dim CurrentProducts As New List(Of DrinkProduct)
        With CurrentProducts
            .Add(New DrinkProduct("CF1kg", "Instant Coffee", "1 Kg"))
            .Add(New DrinkProduct("CFG500g", "Ground Coffee", "500 g"))
            .Add(New DrinkProduct("Te500g", "Tea", "500 g"))
            .Add(New DrinkProduct("SMlk1lt", "Skimmed Milk", "1 Litre"))
            .Add(New DrinkProduct("HiJ300g", "HiJuice Drink Mix", "300 g"))
        End With
 
        Return CurrentProducts
    End Function

Where you place the above function is a matter of choice, depending on what kind of scope you want it to have within the application. I've chosen to place it in a helper module named modStockControl so that it is available application wide.

The next step includes a small change. The link between that collection of objects and the ListView that will display them in will be a DataContext. This is very much like the DataSource object that you will be familiar with from Windows Forms. In the code-behind for the Window, insert the following code:

    Dim CurrentProducts As New List(Of DrinkProduct)
 
    Private Sub Part2_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        CurrentProducts = StockCheck()
        ProductsListView.DataContext = CurrentProducts
    End Sub

Clearly, all this does is create an empty List, then generates some data to populate the List. The final line sets the DataContext of the ListView specifically to be the that List. At the risk of confusing the issue at this early stage, it isn't necessary to bind directly to the ListView. I could have set the DataContext on the Window or the Grid, for example and it may still be accessible by the ListView. This is something I will cover in a future blog.

Let's turn our attention to the ListView markup. A skeleton version is:

    <ListView Name="ProductsListView"
         ItemsSource="{Binding}">
      <ListView.View>
        <GridView>
          <!-- Product ID -->
          <GridViewColumn 
         Header="ProductID" >
            <GridViewColumn.CellTemplate>
              <DataTemplate> 
              <TextBlock Text="{Binding Path=ProductID}" />
              </DataTemplate>
            </GridViewColumn.CellTemplate>
          </GridViewColumn>
 
        <!-- Remaining two columns removed for brevity -->
 
        </GridView>
      </ListView.View>
    </ListView>

As you can see in the markup, the ListView is named and this name is the one we used in the code-behind to link to the DataContext. Even more crucially, the ItemsSource property is set to point to that same DataContext. Even though it only contains the word "Binding", WPF is smart enough to work out which particular binding is the appropriate one. So those two properties are the glue that enables the ListView to be populated with DrinkProduct objects.

The remaining markup creates a View and in that View there are three GridViewColumns (although I have only shown the markup for the first one). Inside the GridViewColumn markup you see a CellTemplate and a DataTemplate, both of which are simply devices for packaging the look of the data. In this case, a basic TextBlock is used to house the text data.

The line of markup:

 <TextBlock Text="{Binding Path=ProductID}" />

is the final piece of the Binding puzzle. The pointer to the "Binding" ensures that WPF looks back up the tree to find the source of the data that has been set. (In this case, it looks no further than the ItemsSource which in turn knows that the data will come from that collection of DrinkProduct items.)

The Path identifies the exact field in the data source that is to be bound to this column. For this column it is the ProductID field.

So, as you can see from the few steps we have taken above, data binding the ListView to a data source is a trivial task.

At the moment, the GUI isn't too impressive, because I've stripped out everything but the basics:

I originally intended to look at several other tweaks that you can make to the look and layout of WPF ListViews. But to keep this blog to a reasonable length (and so as not to confuse the data binding technique with other peripheral stuff) I'll cover that in my next blog.

Configuring ListView Column Headers

Ged Mead — Tue, 25 Aug 2009 20:00:00 GMT

A recent question here on VBCity came from a member who was searching for a way of changing the background color, font and border of the Column Headers in a ListView. This has always been a particularly tough call in Windows Forms. (A DataGridView, on the other hand, does have this feature, so that might often be an easy workaround.)

But, as usual when questions of difficult layout come up, my mind turns to WPF as a possible solution. Usually I would say 'an easy solution', but in this case honesty forces me to say that I've always found the WPF ListView to be one of its less user-friendly elements. Windows Forms certainly makes it easier to create data by hand, with the ability to add sub-items via the properties window. WPF effectively forces you to use data binding as the means of populating the ListView - although the data source can be a relatively simple collection of objects. So I thought it might be useful to blog how to create a relatively uncomplicated ListView in WPF - one with a differently colored Column Headers,of course.

There is quite a lot of repetition of the graphical characteristics of the various sub-elements of a WPF ListView - the Column Headers and the content of the columns themselves, for example. So, it is always worth spending the time to create Styles or Templates which can be reused. Not only does this save time in the long run, it reduces the amount of markup used to create the actual ListView itself in the Window which usually makes it a little easier to read.

The first version isn't going to be too ambitious and will look like this:

Of course I could have added lots of other graphics junk in there, but I want to try and keep things as straightforward as possible. By the time we've worked our way through the Styles, Templates and XML Data Provider, I think that will be quite enough for one session. In a later blog, I plan to expand on this version.

The Basic ListView
The first step is to drag an empty ListView from the Toolbox and drop it on the XAML pane. Note that I say XAML pane, not the Design pane. As in this case, it is often easier to start with an empty element rather than have to edit the default property settings that you will see in the XAML if you drop it on to the Design pane.

In order to display the content, a WPF ListView requires the use of a View. This has the same role as the View property in the Windows Forms ListView, i.e. it controls the manner in which the data is laid out. The similarities end there, however. At the time of writing, the WPF ListView only has one choice of view - the GridView. In its basic form, this is similar to the WinForms ListView Details View, (except of course that WPF isn't limited in the way you can package and display the data).

As you can see from the following screenshot, even if you wanted to choose a value for the View property, this is something that has to be created in XAML. Future versions of WPF may perhaps increase this choice, but WPF already gives you the freedom to use the equivalent of Large Icon, Small Icon, List, etc, if that is the look you want, so maybe not.

The markup to create the View is simple:

      <ListView >
         <ListView.View>
             <GridView>
 
             </GridView>
         </ListView.View>
       </ListView>

There will be very little to see in the Design Pane yet. The next step is to add some columns. Add three columns to the GridView of the ListView:

            <GridViewColumn Width="85">
            </GridViewColumn>
            <GridViewColumn></GridViewColumn>
            <GridViewColumn></GridViewColumn>
        </GridView>

If you check the Design pane now, you will see a fine outline of the Column Headers. There is a divider after the first column, because I have set a Width value on it. The other two columns are not visible because they currently have a zero width.

Create a Reusable Style
Each of the three Column Headers will have some properties that are set to the same values as each other. Therefore it makes sense to set those property values in one place and assign them to each Column Header. The alternative approach would be to repeat virtually the same XAML three times, which clearly isn't a sensible way forward. WPF Styles is the technique which makes this very easy to implement.

In this simple example I am going to use a TextBlock to hold the text of the Column Header. The following markup, which is placed in the Application.xaml file (for VB) or App.xaml file (for C#) creates a Style for a TextBlock:

    <Style x:Key="ColHeaderText" TargetType="TextBlock">
      <Setter Property="Width" Value="110" />
      <Setter Property="Height" Value="29" />
      <Setter Property="FontSize" Value="14" />
      <Setter Property="FontWeight" Value="Bold" />
      <Setter Property="Background" Value="Yellow" />
      <Setter Property="Foreground" Value="Navy" />
    </Style>

If you're not familiar with the concept of Styles, all it does is set values on an assortment of TextBlock properties. The Style is assigned a key - in this case 'ColHeaderText'. This Style can now be applied to any TextBlock in the application.

The markup for the ListView can now be extended to include a Header that contains a TextBlock:

 <GridViewColumn Width="85">
             <GridViewColumn.Header>
              <TextBlock Text=" Product ID" 
              Style="{StaticResource ColHeaderText}"  />
            </GridViewColumn.Header>
          </GridViewColumn>

The TextBlock created by this markup has Text content of 'Product ID' and its color, font, etc are all set by the values stored in the Style. You can see the result in the Design pane screenshot below.

In the final version, I have added similar markup for the remaining two columns. I have left them out of the snippet above for brevity.

Populating with Data
As I mentioned earlier, you need to use some form of data binding to populate the ListView. In this example I am using a simple XML file. You can view this file here. The markup that creates the link between the application and the XML file is straightforward:

    <XmlDataProvider x:Key="ProductList" Source="Products.xml" />

It uses an XMLDataProvider which I've keyed as 'ProductList' so that it can be referred to elsewhere in the project. The source data comes from the Products.xml file, which is located with the other project files in Solution Explorer.

Now that we have a data source, the ListView's ItemsSource property can be set to point to it. The markup is a bit tortuous, but not as complex as it might first appear. Essentially, the ItemsSource property is assigned a Binding and that Binding links to the ProductsList data provider. From the ProductsList, XPath syntax is used to point directly to the Product elements in the XML file. XPath isn't always the easiest syntax to use, but in the case of our simple XML file this is relatively straightforward.

ItemsSource="{Binding Source={StaticResource ProductList}, XPath=Products/Product}" 

Next, the various columns can be bound to the appropriate fields. The GridViewColumn has a DisplayMemberBinding property which , as its name implies, sets the Binding to be used for the content of the column. Once again, XPath is used for this.

   DisplayMemberBinding="{Binding XPath=ProductID}" 

In the above snippet, DisplayMemberPath is assigned a Binding which links back to the ProductID element of the Products.xml file. (Note: If the field in the data source is an XML Attribute, as opposed to an Element, it is necessary to add a leading @ symbol to the XPath name.)

For this basic ListView, that's all that is needed. You can view the Application.xaml file here, and the markup for the Window here. In a future blog, I'll improve this basic version and look at some other functionality, but if you haven't previously dealt with WPF ListViews I hope this will get you started.

How To Create a Splash Screen with WPF

Ged Mead — Tue, 25 Aug 2009 19:57:00 GMT

One small but sometimes useful new feature that was bundled with Service Pack 1 (SP1) of Visual Studio 2008 is the Splash Screen feature of WPF. This enables you to create an image file which is then used as splash while the main application spins up and loads.

Probably the main selling point of this feature is its ease of use. Here are the steps involved:

Create or select a suitable image file

Add it to the project in the Solution Explorer.
Left-click on the file name in Solution Explorer to select it
Set its Build Action to Splash Screen.

I chose to use a simple image with some text, but you can be as artistic as you like

At its simplest, that's really all there is to it. If you run the project now, you will see the splash screen appear, followed by the main startup form of the application. If you have a fast machine and a small project, the length of time the splash screen appears may be very short.

This isn't necessarily a problem. After all, the idea is usually to reassure the user that something is happening in the background. If the boot up time is short, then maybe you don't need a splash screen at all.

Of course, you may not know the speed of systems on which your application is going to be installed. Or you may have an opening message that you particularly want to display in any event. In that case, you need some way of controlling how long the splash screen stays on view. And as you probably guessed, this feature is also available.

Remembering that the splash screen is shown at the very start of the application life cycle, it makes sense for the code to be placed in the Application.xaml.vb file. Specifically, in the Application_Startup event.

There are three elements to the code required.

The first step is to create a variable for the required splash screen.
The second step is to turn off the AutoClose option of the splash screen (this being the option that you will have seen if you followed the steps first described above).
Finally, you use the Close method of the splash screen, but set a TimeSpan for the delay before the splash screen totally disappears.

That expression 'totally disappears' bears a little more explanation. What actually happens is that the splash screen fades from an Opacity level of 1 (fully opaque) to a level of 0 (completely transparent) over the period set by the TimeSpan.

Here is the code:

Private Sub Application_Startup(ByVal sender As Object, ByVal e As System.Windows.StartupEventArgs) Handles Me.Startup

        Dim splash As New System.Windows.SplashScreen("LoadingScreen.png")
        splash.Show(False)
        splash.Close(New TimeSpan(0, 0, 6))
  
  End Sub

The above snippet displays the splash screen for 6 seconds.

In most cases, the splash screen works best if you just use it in those cases where you genuinely have, or expect, a delay in the startup. One problem otherwise is that you have to start fiddling with the timing and possibly the opacity of the display of the startup Window so that it synchs with the splash screen. If you don't, then the startup Window may appear (fully opaque) while the splash screen is still gently fading out. This generally doesn't look right. But for a straightforward "Don't worry, this application is working" message to users, the WPF Splash Screen is great.

If you haven't yet installed SP1, you can access it here.

Using the ElementHost in Visual Studio 2010

Ged Mead — Fri, 31 Jul 2009 19:52:00 GMT

I'm a big fan of WPF and WinForms Interop, so have often advised people to try the ElementHost when they want to do something graphically complex on a Windows Form. This useful little container allows you to create a WPF UserControl right there inside the WinForms project and then display those WPF graphics in a Windows Form.

One of the negative things about this in VS 2008 is that you always get a kind of error message inside the ElementHost at Design Time which reads "Unable to generate a preview". It's not really an error, but it is negative feedback.

Although this message is disconcerting at first, you soon get used to it, and the WPF UserControl will display nicely once you actually run the project.

I was hoping that VS 2010 would fix this issue and that you would be able to see the WPF content in the ElementHost right there on the Window at Design time. The good news is that you can. The bad news is that the pseudo-error has been replaced with a genuine error!

The error message is: "Type 'WindowsFormsIntegration.Design.HostedComponent' is not available in the target framework". This message appears whether you choose Version 3.5 or 4 of the .NET Framework for the project. I was particularly surprised that I still got the error with 3.5 apps. You wouldn't have thought that a problem with v4 would be a breaking change in the earlier Framework, but this seems to be the case.

Anyway, I did some searching and found the fix documented in the Microsoft .NET Framework 4 Beta 1 Readme. It requires an additional Reference which is tucked away in the Visual Studio 2010 sub-folder in the Program Files folder. The exact path in my installation is:

C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE\WindowsFormsIntegration.Design.dll

You have to use the 'Browse' Tab instead of the more usual .NET tab of course to find and add this dll. You may also see a further warning message regarding the use of this dll with earlier versions of the Framework. This indicates that if you have your Framework set to 3.5 you don't need this dll (because it is a Framework 4 requirement). However, I couldn't get ElementHost to work properly in either 3.5 or 4 mode before I added this Reference, so that all left me a little confused - but happy, because it now works as it should.

Having sorted that out, I can now see the WPF UserControl on the Windows Form at Design Time, as you can see from the screenshot below. This is much more useful because it is often necessary to tweak the layout of the UserControl or other settings to make it fit in with the layout of other Windows Forms controls on the Form. Now that I can see it at Design time, I don't have to keep running and re-running the project to see the effect of changes.

I hope that this requirement to add the reference will be fixed by the time the final version of VS 2010 ships, but in the meantime I'll not complain about the small amount of work needed to gain the additional benefit.

Don't forget that you should already have the standard:

PresentationCore
PresentationFramework
WindowsBase
WindowsFormsIntegration

References in place for this kind of Interop task.

How To Format a String to Currency

Ged Mead — Fri, 31 Jul 2009 19:47:00 GMT

Here's a useful little tip for if you have a numeric value and you need to convert it into your local currency.

Let's assume you take in a value as a Double and you want the output to be in the format of currency, with two decimal places (in the case of the UK to represent Pence).

Here's the Double:

Code Copy

     Dim TotalCost As Double = 123.4567

To show this formatted, you can use the String.Format method, a placeholder for the variable and the 'c' attribute to ensure the currency format is used:

Code Copy

       Label1.Text = String.Format("Total Cost = {0:c}", TotalCost)

The result would look like this:

Notice that it automatically rounds up for you, changing '4567' to '46'.

Sorting Arrays

Ged Mead — Mon, 06 Jul 2009 08:14:00 GMT

Sorting a single array is a simple task. You just run the Shared Sort method on the array:

        Dim arCustomers() As String = {"Williams", "Brown", "Smith", "Jones", "Green"}
        Array.Sort(arCustomers)
        For Each Str As String In arCustomers
            Console.WriteLine(Str)
        Next

The resulting output is:

Brown
Green
Jones
Smith
Williams

Things get more complicated if you have two arrays that have a logical link - maybe one array contains a list of names and a second array contains a numeric value for each of those names:

    Dim arNames() As String = {"Smith", "Jones", "White", "Mead", "Knobbe", "Baranovsky", "Bonner"}
    Dim arIDNumber() As Integer = {234, 123, 765, 999, 357, 543, 666}

If you want to sort the Names array so that the name with the lowest IDNumber is first and the name with the highest IDNumber is last, then you can use an overloaded version of the Sort method:

        '  Sort the array of Names based on their IDNumbers
        Array.Sort(arIDNumber, arNames)

Note that you must assign the Key (the IDNumbers array) before the Item (the Names array) to get the correct result, which is:

Jones
Smith
Knobbe
Baranovsky
Bonner
White
Mead

Jones has an IDNumber of 123 and Mead has an IDNumber of 999.

Of course, the sort doesn't have to have a numeric key. It is just as easy to sort the IDNumber values based on the alphabetical order of the Names, if this is needed.

        Array.Sort(arNames, arIDNumber)

One potential Gotcha that isn't immediately obvious is that this Sort action will also sort the IDNumber array at the same time. It makes complete sense for this to happen when you think about it, but if for some reason you only wanted the re-sorted arrays to be temporary, you will have take a slightly different approach.

One of the easiest ways is to create a clone of the original arrays and you can sort the cloned copies while leaving the original in their default order.

        Dim arNames2() As String = arNames.Clone()
        Dim arScores2() As Integer = arIDNumber.Clone()
        Array.Sort(arScores2, arNames2)

You will then have your original arrays left unchanged and the index sorted versions available for use.

How To Animate a Gradient Brush

Ged Mead — Sun, 05 Jul 2009 19:29:00 GMT

In the previous blog item in this series, I created a simple Animation in Visual Basic Code. This used a DoubleAnimation to animate the thickness of the gradient border. That example doesn't even begin to scratch the surface of what you can achieve with WPF Animation and - as you have seen demonstrated in the previous items - how you can include these animations in Windows Forms.

In this part, we will look at a slightly more complex animation. Or at least one that seems complex at first, but a quick analysis reveals that it is really rather simple and easily created by writing the XAML by hand.

In order to see the animation effect, I recommend you download the HandBuiltAnimation project from here and run it. When you click the Button if there is no text in the TextBox, two animations will run. The first is the resize border one that was covered in the previous blog. The second animation changes the position of each of the colors in the gradient to give the impression of movement.

If you are new to WPF, you perhaps won't be too comfortable with the idea of hand-writing the XAML. You can of course use a tool, such as Expression Blend, to create the XAML for you. A time-limited trial version of Expression Blend is available, so if you decide that the hand-written route isn't for you, then you can certainly use Blend instead. (That said, there is something of a learning curve involved in getting to grips with Blend too - especially if, like me, you have more of a Developer mindset than Designer).

One of the reasons I decided to add this part to the blog was that sometimes you need to start the animation running from some user action. In this case, the user action will be the clicking of a button on a totally unrelated UI - a Windows Form, as it happens (although of course the same approach works fine with an all-WPF application too.)

So, firstly, here is the XAML that goes in the WPF UserControl to create the moving gradient effect:

    <Storyboard x:Key="MoveColors" >
 
      <DoubleAnimation By="0.2" Duration="0:0:1.3"
         AutoReverse="True"  
         Storyboard.TargetName="GradBorder"
               Storyboard.TargetProperty="BorderBrush.GradientStops[6].Offset"
                BeginTime="0:0:0.6" />
 
      <DoubleAnimation By="0.2" Duration="0:0:1.3"
                       AutoReverse="True"
              Storyboard.TargetName="GradBorder"
               Storyboard.TargetProperty="BorderBrush.GradientStops[5].Offset"
                BeginTime="0:0:0.6" />
 
      <DoubleAnimation By="0.2" Duration="0:0:1.3"
                       AutoReverse="True"
             Storyboard.TargetName="GradBorder"
               Storyboard.TargetProperty="BorderBrush.GradientStops[4].Offset"
                BeginTime="0:0:0.6" />
 
      <DoubleAnimation By="0.2" Duration="0:0:1.3"
                       AutoReverse="True"
         Storyboard.TargetName="GradBorder"
               Storyboard.TargetProperty="BorderBrush.GradientStops[3].Offset"
                BeginTime="0:0:0.6" />
 
      <DoubleAnimation By="0.2" Duration="0:0:1.3"
                       AutoReverse="True"
             Storyboard.TargetName="GradBorder"
               Storyboard.TargetProperty="BorderBrush.GradientStops[2].Offset"
                BeginTime="0:0:0.6" />
 
      <DoubleAnimation By="0.2" Duration="0:0:1.3"
                       AutoReverse="True"
            Storyboard.TargetName="GradBorder"
               Storyboard.TargetProperty="BorderBrush.GradientStops[1].Offset"
                BeginTime="0:0:0.6" />   
 
      <DoubleAnimation By="0.2" Duration="0:0:1.3"
                       AutoReverse="True"
             Storyboard.TargetName="GradBorder"
               Storyboard.TargetProperty="BorderBrush.GradientStops[0].Offset"
                BeginTime="0:0:0.6" />
 
    Storyboard>

That may look like a lot of typing, but there's a whole lot of repetition in there, which means you can copy and paste the majority of it, then just make minor tweaks.

 <Storyboard x:Key="MoveColors" >

The first line shown above simply creates a new Storyboard instance and assigns it a name, or Key, that we can use to reference it.

The next block creates a DoubleAnimation.

      <DoubleAnimation By="0.2" Duration="0:0:1.3"
         AutoReverse="True"  
         Storyboard.TargetName="GradBorder"
         Storyboard.TargetProperty="BorderBrush.GradientStops[6].Offset"
         BeginTime="0:0:0.6" />

Most of us tend not to think of Types such as Double numeric values when we are thinking about animation. In our mind's eye we are more likely to picture the physical result of such a change - the size of an element or its position, its shape or its color, perhaps. But it is perfectly possible to change the value of a Double Type, taking a set amount of time to make the change, and then having this change be visible to a user by assigning it to a property of an element that takes type Double.

That's exactly what we are doing here - changing the value of the Double that is being used to set the position of a GradientStop in a LinearGradientBrush. Here's a more detailed breakdown of what's going on:

By changes the Double value by the amount stated - in this case by 0.2. In our demonstration animation this moves one of the colors that make up the gradient 0.2 along the gradient's linear scale.

Duration sets the length of time taken to change the value from its starting value to the end of the By value. In this case it is 1.3 seconds.

AutoReverse set to True will ensure that the value returns to its starting value by the end of the Duration. In our gradient example this will cause the color to move 0.2 out and then return the same 0.2 distance back.

Storyboard.TargetName uses the WPF Attached Property syntax to identify which element is the target of the animation.

Storyboard.TargetProperty in a similar way identifies the property of the target element which is to be animated. See the further explanation below about the identification of the property.

BeginTime is an optional pause feature. The animation will only begin after an initial pause of (in this example) 0.6 seconds.

The TargetProperty in each of these DoubleAnimations is the Offset value of a GradientStop. If you look at the XAML which creates the BrightGradient LinearGradientBrush, you will see that it contains seven colors, each of which has its position in the gradient assigned by its Offset value. All we are doing in this animation is shunting each of the colors along by a value of 0.2 and this creates the effect of the color movement.

The particular block of XAML shown above animates the last GradientStop, which has an index of 6 - the index being zero based. When you look at the six DoubleAnimations which follow that one, the only difference is that the Index has changed so that the next GradientStop is targeted. So by copying and pasting the first DoubleAnimation, pasting it six times and then changing the value of the Index, this complex looking animation is shown to be very basic in reality.

All that remains now is to wire up this Storyboard in the code-behind.

    Public Sub MoveColors()
        Dim SB As Storyboard = CType(FindResource("MoveColors"), Storyboard)
        If SB IsNot Nothing Then
            SB.Begin()
        Else
            MessageBox.Show("Can't find storyboard")
        End If
    End Sub

The FindResource method is very useful in these kind of situations in WPF. I used it in the original example to change the LinearGradientBrush on the Border element and now we can employ it to find the animation. It allows you to dig into the XAML, find the markup you need for a particular task and use it. In this cas, the Resource we are looking for is the Storyboard that has a Key of 'MoveColors' - the one we have just dissected above.

Over in the Windows Forms Form1 code, the Button click has only one additional line. This calls the MoveColors procedure shown above, which in turn runs the animation. The additional line is:

           MovingGradientTextBox1.MoveColors()

You can see the remaining unchanged Button Click event code in the sample project attached.

How To Animate a TextBox in Windows Forms

Ged Mead — Fri, 03 Jul 2009 14:34:00 GMT

Starting Point
In my earlier post, the HiliteTextBox, I created a simple WPF UserControl which is hosted in an ElementHost in a Windows Form. If the user tries to continue without entering text in the TextBox, a bright colored Border would appear around it and stay there until the user does enter something.

If we are going to go to the trouble of harnessing WPF's graphics power, we may as well go a step further and add some animation to the control. One simple thing we can do is to animate the Border Thickness.

This is the XAML for the UserControl I created previously. The only thing I have changed is the class name. It was originally HiliteTextBox, but for this version it will be named AnimatedTextBox :

<UserControl x:Class="AnimatedTextBox"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300">
  <UserControl.Resources>
    <LinearGradientBrush x:Key="BrightGradient" EndPoint="0.056,0.993" StartPoint="0.634,0.342" SpreadMethod="Repeat">
      <GradientStop Color="#FFB50D0D"/>
      <GradientStop Color="#FFE80C2C" Offset="1"/>
      <GradientStop Color="#FFF4DF5A" Offset="0.17399999499320984"/>
      <GradientStop Color="#FFCA0C1F" Offset="0.357"/>
      <GradientStop Color="#FFDCD762" Offset="0.522"/>
      <GradientStop Color="#FFB70D36" Offset="0.716"/>
      <GradientStop Color="#FFDDEE49" Offset="0.823"/>
    </LinearGradientBrush>
  </UserControl.Resources>
 
  <Border x:Name="GradBorder"
           BorderBrush="LightGray"
           BorderThickness="5" 
           CornerRadius="4,4,4,4">
 
    <TextBox x:Name="InputTextBox" 
            TextWrapping="Wrap" 
         TextChanged="InputTextBox_TextChanged" >
    </TextBox>
  </Border>
</UserControl>

And this is the code-behind in the UserControl:

    Private Sub InputTextBox_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs)
        HighlightEmpty()
    End Sub
 
    Public Sub HighlightEmpty()
        If InputTextBox.Text.Length > 0 Then
            GradBorder.BorderBrush = New SolidColorBrush(Colors.Black)
            GradBorder.BorderThickness = New Thickness(1)
        Else
            GradBorder.BorderBrush = FindResource("BrightGradient")
            GradBorder.BorderThickness = New Thickness(4)
        End If
    End Sub
 
    Public Function IsTBEmpty() As Boolean
        If InputTextBox.Text.Length = 0 Then
            Return True
        Else
            Return False
        End If
    End Function

Creating the Animation in Code

Generally, you will find XAML to be the best tool for creating animations - and if they are quite complex then Expression Blend is your best bet. However, you can create a simple animation in the UserControl using code. The following code-behind in the UserControl will cause the Border to change in size over a short period of time:

    Public Sub ChangeSize()
        Dim ThickAnim As New ThicknessAnimation
 
        With ThickAnim
            .To = New Thickness(14)
            .AutoReverse = True
            .Duration = New Duration(TimeSpan.FromSeconds(0.6))
        End With
 
        Me.GradBorder.BeginAnimation(Border.BorderThicknessProperty, ThickAnim)
    End Sub

Even if you have no experience of WPF, most of the above code is relatively easy to follow.

ThicknessAnimation is a class that 'does what it says on the tin', as we say here in the UK - it does exactly what you would expect. It animates the Thickness Property of a target element.

To sets the value of the Thickness that has to be reached by the conclusion of the animation.

AutoReverse ensures that the Thickness returns to its starting value by the end of the animation sequence.

Duration assigns the length of time for which the animation will run. Note that in the case of this AutoReversed animation both the increase (The To value) and the decrease (AutoReverse to the start value) in size are completed within the allowed Duration.

The BeginAnimation Method takes parameters of a kind that might be unfamiliar. It takes the WPF DependencyProperty for the Border class as the first argument and it takes the ThicknessAnimation instance as the second argument. The correct element is animated, of course, because the BeginAnimation method is applied to GradBorder, the Border instance we are dealing with.

Me.GradBorder.BeginAnimation(Border.BorderThicknessProperty, ThickAnim)

To get the animation to run, we can incorporate it into the code we used previously that tests if the TextBox is empty. This code is in the Windows Form on which we placed an ElementHost to house the WPF UserControl :

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        If AnimatedTextBox1.IsTBEmpty = True Then
            '  Change to bright gradient border
            AnimatedTextBox1.HighlightEmpty()
 
            '  Animate
            AnimatedTextBox1.ChangeSize()
 
            ' Return focus
            Me.ElementHost1.Focus()
        Else
            MessageBox.Show("You are clear to continue")
        End If
    End Sub

If you try this code and run the project, click the Continue Button with no text in the TextBox, you will see that the Gradient Border appears and then the Border size is animated.

One thing you may have noticed is that the target in the Button Click event is an object named AnimatedTextBox1. If you scour through the small amount of code I have written so far, you won't find where I created this object. The reason being that I didn't. When you use the Smart Tag in the ElementHost and select the content, it will automatically create an instance for you and name it.

In the next part, I will create a different animation using what on the face of it seems to be a very complex block of XAML. When we take a closer look, you will see that it is not as complicated as it first appears.

WPF-WinForms Interop: A Highlighted TextBox

Ged Mead — Wed, 01 Jul 2009 15:49:00 GMT

Introduction
A recent forum post on VBCity asked for a way to highlight an important TextBox in a Windows Form. Assuming that the plan is to highlight the TextBox if the user is about to leave the Form without entering any text into it, there are of course several ways this can be done using Windows Forms techniques. But I thought it might be interesting to try something different and see how easy it would be to create a WPF UserControl that incorporated a TextBox, a smack-you-in-the-eye gradient and a border with rounded corners*. I picked those last two features because they are not particularly easy to create in Windows Forms. The WPF UserControl would then have to be integrated seamlessly into the Windows Forms environment.

(*If this isn't cutting-edge enough for you, I will be looking at adding animation to the control in a follow up blog post).

So here's our demo Windows Form that will contain two TextBoxes. The WinForms TextBox is already in place. We will create the WPF one shortly.

The WPF UserControl
The first step is to add a WPF UserControl to the Windows Forms project. This is as simple as hitting Ctrl+Shift+A and selecting "WPF" from the Add New Item menu which appears. The only choice you will then see is "User Control (WPF)", so select this and change the default name to 'HiliteTextBox.xaml'. Then click the Add button.

The WPF UserControl will be added to your Windows Forms project and behind the scenes all the required References will be added also. The UserControl will be on display as the selected item in Visual Studio and you will see that all the WPF tools are in the Toolbox, not the WinForms ones.

Delete the default Grid from the UserControl and then drag a Border element from the Toolbox and drop it on the XAML pane, on one of the empty lines where the Grid used to be. You might think it strange that you drag a visual element and drop it into the markup area. There's nothing to stop you from dropping it in the Design pane instead. If you do this, you will find that several properties are automatically added for you and, as it happens, we don't want those particular properties set and you would therefore have to delete them.

Assign the Name 'GradBorder' to the Border. Create an empty line between the opening and closing tags of the Border. Drag a TextBox from the Toolbox and drop it on the empty line. Name the TextBox 'InputTextBox'.

Here's the Markup as at this point:

<UserControl x:Class="HiliteTextBox"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="300">
  <Border x:Name="GradBorder">
    <TextBox x:Name="InputTextBox"></TextBox>
  </Border>
</UserControl>

Don't worry that nothing seems to be happening in the Design pane. We'll soon change that. With the Border selected in the XAML pane, move over to the Properties window and change the BorderBrush to LightGray, the BorderThickness and CornerRadius properties to 4. (Still no change in the Design pane; no worries).

The plan is to have a plain gray border round the TextBox by default and have this change to a bright gradient if the user tries to continue without entering any text in the TextBox. To set this up, first create a new empty line between the opening tag of the Window and the opening tag of the Border. Copy and paste the following markup, which creates a LinearGradientBrush that will be stored as a Resource.

  <UserControl.Resources>
    <LinearGradientBrush x:Key="BrightGradient" EndPoint="0.056,0.993" StartPoint="0.634,0.342" SpreadMethod="Repeat">
      <GradientStop Color="#FFB50D0D"/>
      <GradientStop Color="#FFE80C2C" Offset="1"/>
      <GradientStop Color="#FFF4DF5A" Offset="0.17399999499320984"/>
      <GradientStop Color="#FFCA0C1F" Offset="0.357"/>
      <GradientStop Color="#FFDCD762" Offset="0.522"/>
      <GradientStop Color="#FFB70D36" Offset="0.716"/>
      <GradientStop Color="#FFDDEE49" Offset="0.823"/>
    </LinearGradientBrush>
  </UserControl.Resources>

There is a very good reason for storing the gradient brush separately and naming it with the 'BrightGradient' Key, as you will see soon.

We will set a few properties on the TextBox. Select the TextBox in the XAML pane and then move to the Properties Window and set the TextWrapping property to 'Wrap'.

In the XAML pane, create a new empty line inside the opening tag of the TextBox. Then type in: 'TextChanged='. As soon as you do this, an Intellisense popup will appear, inviting you to create a new event handler for the TextChanged event.

Press the TAB key and the rest of the line will be completed for you. It will be assigned a default name and this event handler will have been added to the code-behind for you.

Your markup for the Border and TextBox should now look like this:

  <Border x:Name="GradBorder"
           BorderBrush="LightGray"
           BorderThickness="1" 
           CornerRadius="4,4,4,4">
 
    <TextBox x:Name="InputTextBox" 
            TextWrapping="Wrap" 
            TextChanged="InputTextBox_TextChanged">
    </TextBox>
  </Border>

Open up the vb file for the UserControl - HiliteTextBox.xaml.vb - in the project files in Solution Explorer. The InputTextBox_TextChanged event handler will be there for you.
Before we code the event handler though, first create a Sub that will check if the TextBox contains any Text. If it does, the Border will be set to the non-highlighted LightGray; if it doesn't, the Border will be the bright gradient. Enter the following code:

Imports System.Windows
Imports System.Windows.Media

    Public Sub HighlightEmpty()
        If InputTextBox.Text.Length > 0 Then
            GradBorder.BorderBrush = New SolidColorBrush(Colors.Black)
            GradBorder.BorderThickness = New Thickness(1)
        Else
            GradBorder.BorderBrush = FindResource("BrightGradient")
            GradBorder.BorderThickness = New Thickness(4)
        End If
    End Sub

The only code that may be new to you might be the FindResource method. This is a really useful feature in WPF, which allows you to ferret through the project and pull out any specific resource that you want to use. The 'BrightGradient', you will recall, is the Key that I assigned to the LinearGradientBrush that I stored as a UserControl Resource earlier.

The Imports statements at the top of the file ensure that you are accessing elements in the System.Windows namespace.

Hosting the UserControl
Now the UserControl is built, it has to be hosted in the Windows Form. Rebuild the project and then select the Form1.vb file. The control that WinForms uses to host WPF UserControls is the ElementHost. This probably won't be in your Toolbox by default, so if it isn't listed, right-click on the Toolbox and select Choose Items... Select the ElementHost from the .NET Framework Components Tab.

Drag an instance of the ElementHost from the Toolbox on to the surface of the Form. It will be too large by default, but before you change its size, click on small down arrow next to 'Select Hosted Content' and select HiliteTextBox from the list:

The Smart Tag window will close and you can then adjust the size of the ElementHost. As you can see from the screenshot, an error message appears inside the ElementHost. You can safely ignore this as it is only tells you that the Windows Form can't display the visuals of the UserControl at Design time.

Next we need to add code to the Continue button. For our demo purposes, this will be sufficient:

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        HiliteTextBox1.HighlightEmpty()
    End Sub

If you look back at the earlier code, you will know that the HighlightEmpty method checks if the TextBox has Text entered and sets the Border accordingly. Although the Button on the Windows Form can't access the graphical elements of the UserControl directly, the HighlightEmpty procedure allows for this interchange between the two.

Try running the application now. Don't enter any text into the UserControl, then press the Continue button. You should see the highlight gradient border appear around the TextBox.

If you then insert some text and press the Continue button again, the highlight border will be replaced with the gray one.

Adding Some Refinements
That pretty much fulfills the spec, but there are a couple of things I would definitely add. The first feature is that if the user is warned about not entering text, then I would like to give some positive feedback as soon as they do so. That is, before they press the Continue button for a second time. This is easily achieved by adding a line of code to the TextChanged event handler of the InputTextBox.

Go back to the WPF UserControl code-behind file and add a call to the HighlightEmpty procedure:

    Private Sub InputTextBox_TextChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.TextChangedEventArgs)
        HighlightEmpty()
    End Sub

When you run the application again and press the Continue button with no text in the TextBox, the highlight border appears as before. Now though, when you enter a character, the highlight Border disappears. As a small bonus, if the user then deletes all the text in the TextBox, the highlight will reappear, just to make certain they know about it.

The second thing I would like to add is a way of giving the developer a choice of actions on the Continue Button Click event. What I mean by this is that at the moment, the call goes to the HighlightEmpty procedure of the UserControl. This approach makes it difficult to build choices into the Button Click event, along the lines of "Depending whether the TextBox is empty, do something here in the Form's logic".

There are several easy ways of doing this, including adding a Boolean Property to the UserControl or creating a simple Function. This tests if the InputTextBox is empty and if it is, it Returns True. Based on the returned value, the Button event handler can follow one course of action or another.

Here's a Function that can be added to the UserControl:

    Public Function IsTBEmpty() As Boolean
        If InputTextBox.Text.Length = 0 Then
            Return True
        Else
            Return False
        End If
    End Function

You can then put whatever code you want in the Button Click event handler. Maybe something like:

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        If HiliteTextBox1.IsTBEmpty = True Then
            HiliteTextBox1.HighlightEmpty()
            Me.ElementHost1.Focus()
        Else
            MessageBox.Show("You are clear to continue")
        End If
    End Sub

You can apply this approach of using a WPF UserControl in a Windows Form to get access to lots of those enhanced visual goodies that WPF offers, including Animation. As you have seen, creating a WPF UserControl hosted in an ElementHost is a very easy process. As an alternative to fiddling with individual controls on a Windows Form, you can of course include complete WPF Windows in Windows Forms projects.

How To Change WPF ListBox SelectedItem Color

Ged Mead — Mon, 29 Jun 2009 14:43:00 GMT

In this article, we will look at how to alter the background color that appears when a user selects an item in a WPF ListBox

I've been using DataTemplates to organize the layout of WPF ListBoxes for quite a while now. Not only in my WPF Applications, but also by using WPF/WinForms Interop (See my article on devcity for info on how to do this).

If you have used DataTemplates yourself, you will know that they can make a great job of packaging up the data display and allowing you to easily create UIs that would be extremely difficult in Windows Forms.

I was working on a ListBox creation task this week. Nothing very fancy - each item comprised of an Image and two items of text inside a Gradient Border:

The DataTemplate makes a fair job of tweaking the presentation of the data, but when I ran it and selected an item I still got the standard solid blue selection color:

I thought it would be better if I could replace the standard solid blue with something else, but this wasn't something I could achieve by tweaking the DataTemplate. What is needed is a change to the ItemContainerStyle .

It's important to understand the role of these two styling tools. The DataTemplate allows you to package up the individual items of data for display. In the case of a ListBox, you can think of the DataTemplate as sitting inside the ListBoxItem. The ItemContainerStyle is one level up from this. It is responsible for the overall look of the ListBoxItem. So if it helps you to picture the respective roles, you could think of the DataTemplate being contained in the ItemContainerStyle, although that's not exactly how it works.

The question is, how do you change the ItemContainerStyle to create a different selection color and, once this is done, how do you then get the ListBox to apply it?

The answer to the second question is shorter, so I'll deal with that one first. ItemContainerStyle is a property of the ListBox.

 <ListBox ItemContainerStyle="{StaticResource SimpleListBoxItem}">

As you would expect, this property takes a Style as its value. And that leads us to the answer to the first question - you create a Style, but (and here's the important bit) you ensure that the Style also contains the ControlTemplate for the ListBox.

When you stop and think about it, this has to be right. As soon as you find you want to change the fundamental look of the ListBox element, you know you have to work with its Template. How much trouble you then go to in order to rewrite the ControlTemplate is a matter of choice.

I began by looking at the full ListBox template, which is fairly lengthy, but then realized two things:

I already had my DataTemplate in place to do the fancy stuff, so all I needed to do was find the part of the Template that deals with the change of color when an item is selected and tweak this. Everything else could be left unchanged.
I didn't need to make any changes to the ListBox template. What I was dealing with here was the ListBoxItem template.

When the requirement is as simple as this, a useful approach is to use the Simple Styles, which are available from many sources. If you haven't come across these yet, they are a cut-down version of the full Styles that are used to create the standard WPF elements. One easy way to access and download them is to enter "Styling with ControlTemplates Sample" in the "Look For" text box of the Index, (not the online Search box) on the Visual Studio Help page. This will reveal the sample page, which includes a link to download all the simple styles.

So I took the simple style version of the ListBoxItem and changed the Setter for the IsSelected Trigger. Here is the finished Style:

    <Style x:Key="SimpleListBoxItem" TargetType="ListBoxItem">
     <Setter Property="FocusVisualStyle" Value="{x:Null}" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem">
            <Border 
           Name="Border"
           Padding="2"
           SnapsToDevicePixels="true">
              <ContentPresenter />
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="IsSelected" Value="true">
                <Setter TargetName="Border" Property="Background"
                     Value="{StaticResource AuthorGradient}"/>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

Compared to the full version, that's fairly brief. You will see that I changed the Background color of the Border that contains the ListBoxItem in the Template* from the default to a gradient brush named AuthorGradient that I created and stored in the App.xaml file as an Application scope Resource.

* Don't confuse the Border in the Style's Child ControlTemplate with the Border that is used in the DataTemplate.

Now when an item is selected, the user sees this gradient instead of the plain blue:

So the full markup for the ListBox is as follows:

      <ListBox x:Name="TemplatedListBox"
      HorizontalAlignment="Left"  Margin="10"    
      ItemTemplate="{StaticResource GreenDataTemplate}"
      ItemsSource="{Binding}" 
      ItemContainerStyle="{StaticResource SimpleListBoxItem}" >
      </ListBox>

You can see that the ListBox's ItemTemplate is set to the DataTemplate which controls the layout of the data in each ListBoxItem. The ItemContainerStyle contains the template for the ListBoxItem - the one where I changed the selected item color from plain blue to gradient green.

In order for this particular example to work, you will of course need to have a DataSource available to the ListBox's ItemsSource, to which it can bind. However, you don't need to have a bound ListBox, as you will see at the end of this item.

The DataTemplate I used to create the Border/Image/TextBlocks combination is:

    <DataTemplate x:Key="GreenDataTemplate" >
      <Border BorderBrush="{StaticResource GreenGradient}" BorderThickness="4"
             CornerRadius="4" Margin="4,2">
        <StackPanel Orientation="Horizontal">
          <Image Source="{Binding Path=ImagePath}" Margin="2,0,4,0" 
            Width="60" Height="70" Stretch="UniformToFill"   />
 
          <StackPanel Margin="1" Width="120">
            <TextBlock Padding="2,17,5,2"
               FontSize="13"
                FontWeight="Bold" Foreground="DarkGreen" 
                Text="{Binding Path=Name}" Height="56">
            </TextBlock>
 
            <TextBlock Foreground="Green"
               Margin="12,2,0,2"
               Text="{Binding Path=Published}" >
            </TextBlock>
 
          </StackPanel>
        </StackPanel>
      </Border>
    </DataTemplate>

I placed this in the Window.Resources block. Again, this will only work if you have a DataSource which contains the three fields I have used in the Bindings for the Image and TextBlocks - ImagePath, Name and Published.

If all this DataBinding and DataTemplates is confusing or more than you need, and you simply want to change the selected item background color, then the following ListBox will be sufficient:

    <ListBox ItemContainerStyle="{StaticResource SimpleListBoxItem}">
      <ListBoxItem> <TextBlock Margin="4" Padding="5" FontSize="14">Item 1</TextBlock></ListBoxItem>
      <ListBoxItem>
        <TextBlock Margin="4" Padding="5" FontSize="14">Item 2</TextBlock>
      </ListBoxItem>
    </ListBox>

When an item is selected, the ItemContainerStyle will kick in and the user will see the gradient:

And finally, if you don't even want the gradient, but just need a different solid color, then simply make the change in the Style:

    <Style x:Key="SimpleListBoxItem" TargetType="ListBoxItem">
     <Setter Property="FocusVisualStyle" Value="{x:Null}" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ListBoxItem">
            <Border 
           Name="Border"
           Padding="2"
           SnapsToDevicePixels="true">
              <ContentPresenter />
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="IsSelected" Value="true">
                <Setter TargetName="Border" Property="Background"
                     Value="Yellow"/>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

As you can see, in this case, I have changed the highlight color to Yellow by editing the Setter for the Border in the IsSelected trigger. The result will be:

So, whether you want to create multicolor effects, tied in with bound DataSources, or even if you simply want to change the selected item solid color, you now know how to do it.

Comparing Differences Between WPF in Visual Studio and Silverlight 2

Ged Mead — Wed, 17 Jun 2009 21:24:00 GMT

This will be something of a 'Work in Progress' blog item, as I plan to jot down differences between WPF and Silverlight as I find them, either in my own work or from other sources. It can be difficult to keep up to speed on what the precise differences are at any given time. The SDKs, Toolkits, roll out of new editions of both platforms, etc all cause the sands to keep on shifting. Anyhow, I hope those that I do identify will be of help to those of you who are familiar with WPF, but maybe not so much with Silverlight.

The topic headings are listed alphabetically.

Button Content
In WPF, you can create a Button and assign its Content in the following way:

 <Button Margin="5" >SilverlightButton>

In Silverlight, you don't have this facility and have to explicitly identify the Content property:

 <Button Margin="5" Content="Silverlight">Button>

Button ClickMode
This is more a matter of user expectation than different properties. The WPF Button has a ClickMode property. This is available in both WPF and Silverlight. The three available values are:

Hover
Press
Release

As you would expect, when the Click event of the button will fire depends on this particular setting.
The reason why I include it as a difference is that I think it is unlikely that you will often use the 'Hover' option in a desktop application, because that isn't a reaction your users will expect. In a Silverlight, browser based environment, of course, it may well be that users will be happy with a button click firing when they hover over a button. (Actually, I'm not sure that 'hover' is totally accurate. It really seems to fire on the immediate mouse enter action and I haven't found a setting that allows a built in delay.)

The default value - both for WPF and Silverlight - is 'Release'.

Chrome and Decorators
Most of the Chromes and Decorators, which can be used to fine tune control templates to a very detailed level, are not available in Silverlight2.

Commands
Silverlight 2 does not support the WPF Commands structure. It does however support the ICommand interface.

Controls (Visual Elements)
It's hard to keep up with the permutations and changes, but I think the following breakdown is accurate:

1. Available in WPF (.NET 3.5, Visual Studio SP1), but not in Silverlight 2:

FlowDocument Readers
Frame
Glyph
GroupBox
InkCanvas
ListView
Menu
NavigationWindow *
Page *
PageFunction *
RichTextBox
StatusBar
UniformGrid
VirtualizingStackPanel
WebBrowser
Window
WindowsFormsHost

* These items are not necessary in Silverlight, because it is browser based.

2. Available in Silverlight 2 , but not in WPF with Visual Studio 2008:

DataGrid *
DatePicker *
HyperlinkButton
MultiScaleImage

* These are not included in WPF in Visual Studio 2008, but are downloadable as part of the WPF Toolkit and will almost certainly ship with VS 2010. You can see info and download the WPF Toolkit from here.

3. Available in the Silverlight 2 Toolkit and in WPF in Visual Studio 2008.

Calendar
Expander
GridSplitter
TabControl
TreeView
ViewBox
WrapPanel

4. Available in the Silverlight 2 Toolkit, but not in WPF.

Accordion
AutoCompleteBox
ButtonSpinner
Data Visualization/Chart Tools
DomainUpDown
NumericUpDown
TimePicker
TransitioningContentControl

5. Available in the WPF SDK, but not in Silverlight 2.

Ribbon

DataBinding

Silverlight 2 does not support One-Way To Source binding.
With WPF, the default binding mode is dependent upon the dependency property, but is usually TwoWay. The default binding mode in Silverlight 2 is OneWay.
Silverlight does not support Explicit DataBinding. It does however support the key approaches of LostFocus and PropertyChanged.
Silverlight 2 does not support MultiBinding.
Silverlight 2 does not support Element Binding (e.g. Binding a Slider value directly to a property on another element).
Silverlight 2 does not support the ObjectDataProvider.

DependencyProperties
Silverlight 2 does not support Read Only DependencyProperties.

Deployment Options
A Silverlight application is deployed to a web server and hosted in a web browser. (The next version of Silverlight should also include the ability to view the application offline). WPF applications may be deployed as a standard installed application or via Click Once. WPF also offers a browser hosted version - the XAML Browser Application (XBAP). In view of the limitations of XBAPs it is likely that most developers would now choose Silverlight over WPF for browser hosted applications.

DrawingBrush
The WPF DrawingBrush is not supported in Silverlight 2. However, there is little that this brush does that can't be achieved with other approaches. The key loss would be the ability to tile, but there are workarounds for this.

Effects
Effects (as opposed to BitmapEffects, which are no longer recommended for use) are only available in WPF. The next version of Silverlight should have the ability to create Pixel Shaders, and therefore Effects.

File Access
WPF has full access to local files in the same way as other .NET desktop applications. Silverlight runs in a Low Trust environment, so Users have restricted access to local files. Access to files in Silverlight is only available by means of the OpenFileDialog and even then is effectively only Read Only access. In Silverlight 2, saving data to file can only be achieved by using Isolated Storage.

Hardware Acceleration
By default, WPF hands off much of the heavy duty graphics work to the GPU, assuming that the graphics card meets the minimum specification. Silverlight uses software rendering.

Hyperlinks
In WPF you can create a Hyperlink by using the Hyperlink element. Generally you use these in Page based applications and FlowDocuments. Silverlight uses the HyperlinkButton.
Both elements use the NavigateUri property to assign the address of the link. The Silverlight version seems to be more versatile. Although it is called 'button', it doesn't have the standard rectangular button appearance. In fact, if you drag one from the Toolbox, you will see its markup in the XAML pane, but nothing shows in the Design pane.
The intention is that you use the HyperlinkButton as a canvas (with a small 'c', not a Canvas element). You then add Content to the button and this is what creates the interface that the user sees. The Content can be anything from a simple single element to a more complex interface - such as a StackPanel which contains multiple elements:

<HyperlinkButton NavigateUri="http://www.devcity.net" Width="60" 
                Margin="15" HorizontalAlignment="Left"
                VerticalAlignment="Top">
      <HyperlinkButton.Content>
        <StackPanel>
          <Image Source="ShelfUnit_WithCans.png">Image>
          <TextBlock>  Click Me! TextBlock>
        StackPanel>
      HyperlinkButton.Content>
    HyperlinkButton>

Isolated Storage
There are significant differences between the implementation of local isolated storage in Silverlight 2 and WPF. Silverlight 2 restricts the availability of disk space. The default setting is 1 MB. This may be increased with explicit user authorization.

Key Enumeration
WPF contains more precise Keyboard Key definitions in its Key enumeration. For example, it

KeyEventArgs
WPF implements several properties in KeyEventArgs; Silverlight implements two - Key and PlatformKeyCode.
WPF does not implement PlatformKeyCode. This is used in Silverlight to identify non-Windows keys.

Markup Extensions
Silverlight only supports a small sub-set of markup extensions. They are:

Binding
StaticResource
TemplateBinding
x:Null

It is not possible to create your own markup extensions in Silverlight.

Mouse Events
Silverlight supports a limited set of Mouse events:

LostMouseCapture
MouseEnter
MouseLeave
MouseLeftButtonDown
MouseLeftButtonUp
MouseMove

This means that Silverlight doesn't support mouse wheel, left/right mouse button differentiation or any of the PreviewXX mouse events that are available in WPF.

Network
Silverlight 2 is limited to asynchronous network calls.
Silverlight 2 can communicate to Network Resources via Sockets.
Silverlight 2 supports only SOAP 1.1 over HTTP, and does not support other web services not compliant with WS-I Basic Profile 1.0.

Path Based Animations
This feature is not available in Silverlight 2. Linear interpolated and KeyFrame animations are available.

Printing
No PrintDialog or Printing facility in Silverlight 2.

Resources
Silverlight 2 does not support MergedDictionaries.
Silverlight 2 does not include the FindResource method.

RoutedEvents
Silverlight 2 only supports Bubbling and Direct Routed Events. WPF also supports Tunneling Events.

Security
WPF desktop applications require FullTrust permission in order to run. XBAPs run with partial trust. Silverlight 2 applications run in low trust.

Styles
WPF offers the choice of Named Styles and Typed Styles. Named Styles allow you to set the Style on an element by using its Key. Typed Styles do not have a Key and all elements of the TargetType within scope of the Style will be assigned the Style.
Silverlight doesn't recognize Typed Styles and if they are used, the assignment of the Style will fail silently.
Silverlight doesn't allow the use of the 'BasedOn' feature to inherit from Styles.
When setting the TargetType, Silverlight does not use the markup extension. You simply assign the name of the TargetType in double quotes. If you forget, and force of habit makes you add the curly braces and markup extension in Silverlight, you won't get a design time error, but it will fail at run time.

3D Graphics
Silverlight doesn't have the full range of 3D creation tools that are available in WPF.

Tiled Brushes
Silverlight 2 doesn't support the TileMode in ImageBrush.

Transitions
Silverlight will not accept Triggers and uses the Visual State Manager (VSM) to organize animations and transitions for user interaction. VSM's capabilities currently are limited to the equivalent of standard Style Triggers and EventTriggers. There are no features equivalent to DataTriggers or MultiTriggers in Silverlight.
VSM for WPF will be available soon.

Validation
WPF supports the creation of ValidationRules. This feature is not available in Silverlight 2.

Visual Brush
Silverlight2 doesn't support WPF's Visual Brush. As this is a brush of very limited use, it's not likely to be much of a problem.

Visual State Manager (VSM)
Currently this is a Silverlight only feature. It will be introduced into WPF in the future.

Visual Studio Designer
Visual Studio 2008 has the facility for you to drag and drop, reposition, resize, etc, elements in the Design pane with WPF. For Silverlight it seems to offer editing tools only in the XAML pane. The Design pane is a kind of 'Read Only' version of what is created in the markup.

VisualTreeHelper
This class exists in both WPF and Silverlight 2, but because of differences in the underlying base classes of the two platforms they have different implementations. The key difference is that WPF offers the HitTest method, whereas Silverlight2 uses FindElementsInHostCoordinates.
With the exception of GetChild, GetParent and GetChildrenCount, Silverlight2 doesn't support any of the GetXXX methods found in WPF.

Watermarked TextBox
This is a Silverlight only control. The name says it all - basically a TextBox that allows you to include light shaded text to help the user. If memory serves, this was in Kevin's famous Bag o'Tricks.

Note: Most of the differences described above are also included in an excellent White paper comparison document published by Wintellect. You can download a copy from here.

First Steps in Silverlight 2 and Expression Blend 2

Ged Mead — Sun, 14 Jun 2009 08:50:00 GMT

As a Developer, Visual Studio is my comfort zone but I thought the time had come to see what the experience of creating a Silverlight 2 project in Expression Blend would be like. Having spent the past six months working almost exclusively on Windows Presentation Foundation, I was particularly interested to find out how different the WPF and Silverlight experience would be.

The first thing I had to do was update my copy of Expression Blend 2. Out of the box, your only Silverlight option is a Silverlight 1 site. But if you go to the download site here you can download the latest Service Pack. This incorporates the changes that were available in the Blend 2.5 Beta, the main one being that you can build a Silverlight 2 Application.

Probably the biggest difference between the two versions of Silverlight is that Silverlight 2 gives you the option of using C# or Visual Basic as the code-behind. If, like me, you're not a Javascript expert, but have served your time on the .NET learning curve, this is a really welcome option.

If you have used WPF, you will know that by default when you create a new WPF Application you are presented with a Window instance containing a Grid as the root element on which to start creating your UI. In Silverlight 2, the default is a user control, again containing a Grid as the root element. As Silverlight is a browser plug in*, rather than the desktop application of WPF, this approach makes sense. However, I have to doubt the wisdom of this User Control being named "Page.xaml" by default, as this might cause confusion to those of us who have also created Pages in WPF Applications and think of Pages as being, well, er, pages!.

To add some elements to the User Control, you simply drag them from the Asset Library on to the design surface. I added a TextBlock, an Image and a Button.

If you are not familiar with Expression Blend, the Asset Library - where you drag your elements from - is the last icon on the left, which I have circled in Red. I added the png file which is used as the Source property of the Image to the project files.

A Button that does nothing when clicked won't impress anyone, so my next task was to fix this. My inclination was to switch straight away to Visual Studio, but I thought I would see what Blend had to offer in the way of event handler creation.

The Properties Pane in Blend has a button which causes the Properties to be listed (the default choice) and next to that there is a button for events. You can see this in the screenshot below.

Expression Blend is essentially a tool for creating visual user interfaces. So, unsurprisingly, all you get when you choose that Events pane button is a list of common events for the particular element or control. What is quite impressive though is that if you type in the proposed name for the event handler (as I have done in the example below) and then hit the Enter key, not only does this cause Visual Studio to fire up, but when you look at the code-behind page you will see that a handler of the name you input will be created and it will have the correct signature. You can then simply insert whatever code for what you want to happen as a result of the button click.

One thing I was keen to try out was Silverlight's Visual State Manager, about which I had heard much, but understood nothing. As it seems certain that WPF will have VSM soon, I wondered how much easier (or not) VSM would be compared to the current WPF Storyboard and Triggers approach.

I experimented by adding a simple animation to a button, transforming its size when the mouse entered its area. (I will be writing a full article on Visual State Manager soon, which will include VSM for controls which have CommonStates built in for you in Blend - such as the Button - as well as VSM for those that don't, such as Images.)

The steps for the Button are as follows:

Drag a Button from the Asset Library on to the drawing surface (Note to self: Must get used to calling this the 'Artboard').
Right click on the button and choose 'Edit Control Parts (Template)'.
Select 'Edit a Copy'.
Rename the Key if you want to.
Click OK.

If you now look at the States Pane :-

you will see that a standard set of States for a Button object are displayed for you. These are the four main CommonStates

Normal
MouseOver
Pressed
Disabled

and two FocusStates:

Focused
Unfocused

If you want the visual state to change when the Button is pressed, you add a Transition to the Pressed State in that pane. This is done by clicking on the small 'Arrow and plus symbol' icon to the right of the word 'Pressed' in the States Pane. When you left click on this icon you will see a context menu which shows combinations of state changes. Select the first one - '*>Pressed'. The area round the Artboard should now have a red border and the "State recording is on" message appears at the top left corner. (If for any reason it is not on, simply click the mouse over the dot to the left of the "State recording is off" message.)

As my initial experiment, I wanted to reduce the width and height of the Button by 15% when it is pressed. Here are the steps:

Select the part of the Button that you want to animate.
Go to the Properties pane.
Scroll down until you reach the 'Transform' section.
Select the Scale transform icon (the arrow coming out of a rectangle).
Change the value of X to 0.85.
Change the value of Y to 0.85.
Press F5 to test the project.
Click on the button to ensure that the animation works.
Close the Browser.
In the Objects and Timeline pane in Blend, click on the 'Return Scope to [UserControl]' icon at the right hand side of the Style name.

I had quite a lot of trouble with this. I found that if I clicked on the button on the Artboard and made the transformations (or any other animations, for that matter), I was not getting the results I expected. I eventually worked out that the trick is to select the exact element you want to animate from the Objects and Timeline pane. In the case of the button transformation, the item to select is the parent grid. In some cases, you may need to expand the dropdown list to get to the exact item you need and you may have to experiment some before you get it right. I think this kind of problem is only likely to occur where you stick with the standard template; clearly, if you build up your own set of elements on the Artboard to make a styled button of your own, you will be more familiar with exactly which part(s) you want to animate.

Another little thing to watch out for which might confuse at first, is that the States pane seems to 'remember' the last set of States you dealt with. If you then select a different object, (for example, the TextBlock in my initial user Control) and the States haven't been changed or set for this object, you will still see the States from the preceding object in the pane.

Because I was familiar with the Triggers and Storyboard approach, I did want to see if this was still available as an option in Blend. It doesn't seem to be, but of course I can always do this in XAML in Visual Studio, using an EventTrigger. However, I can see that the Visual State Manager is going to be an easy beast to tame, so I don't think I'll need to revert to the old way very often.

So at this stage, my first impression is that I will be content to use Blend for complex graphics and animations, gradients and visual states. For most other things, I think I will still be using Visual Studio whenever possible.

* At least it is a browser plug in for the time being. Silverlight 3, which is coming up fast, is going to offer an out-of-browser experience. That is, you will be able to include code that will let the user access the Silverlight User Control when offline. My first thought was "Isn't that what WPF does?", but then realized that Silverlight is cross-browser, cross-platform whereas WPF is not. It will be interesting to see where this leads in the long term.

Copying An Item Between ListViews

Ged Mead — Tue, 09 Jun 2009 08:44:00 GMT

I've always found ListViews quite fascinating. Slightly confusing sometimes, but fascinating nevertheless.

As I have often been heard to say, it's the little Gotchas that'll get ya. Take, for instance, the subject of this blog - copying an item between ListViews. The scenario is that you let the user click on an item in ListView1 and if they want this item copied to ListView2, they hit a button.

Now, you would probably think that all you need to do is identify the currently selected item and add it straight to the second ListView. Something like:

Code Copy

ListView2.Items.Add(ListView1.SelectedItems(0))

But if you do try this, you will get an error.

The text of the error message pretty much says it all. What you have to do (assuming that you aren't prepared to remove the item from the original ListView) is to clone it. You will then be allowed to add the clone to the second ListView.

Although the cloning isn't difficult, you do have to be aware of the need to cast the selected item to ListViewItem if you have Option Strict On. To be honest, I found this a bit strange at first. If I lift a ListViewItem from a ListView, I didn't expect to have to cast it to what it is - i.e a ListViewItem.

I'm not entirely sure why this occurs and wonder if the underlying reason for this is that the ListViewItem is stored in the SelectedItems collection of the ListView as a generic object. Anyway, Casting it back to a ListViewItem at the point where the cloning takes place, fixes this without any problem.

This code works well:

Code Copy

If ListView1.SelectedItems.Count > 0 Then
    Dim lvi As New ListViewItem
    lvi = ListView1.SelectedItems(0)
    Dim lvi2 As New ListViewItem
    lvi2 = CType(lvi.Clone, ListViewItem)
    ListView2.Items.Add(lvi2)
End If

You'll have noticed that I built in a test to ensure that an item is currently selected. It's an easy thing to forget and is sure to bring your app to a grinding halt before long if you don't build this in.

You can see where I have cast the selected item (aka lvi) to ListViewItem in Line 5. Intriguingly, casting to ListViewItem in the third line of code, e.g.

Code Copy

lvi = CType(ListView1.SelectedItems(0), ListViewItem)

doesn't cut it.

Removing Double Quotes from a Text File

Ged Mead — Tue, 09 Jun 2009 08:35:00 GMT

Sometimes you don't have control over how the data is saved to a text file. For instance, some items might be saved with quotation marks around words or phrases. If you want to read the file but not show these marks then you'll need a way to remove them.

Like a lot of things, it's actually very easy when you know how. You can use the built-in Replace function of the String class, replacing the marks as you find them. The trick though (and to my mind, the less than totally intuitive bit) is knowing how many quotation marks to use in the first argument of the Replace method's parameters. This is the 'OldChar' parameter, i.e the one you want to replace.

You would think, wouldn't you, that you could put a Quotation Mark inside a pair of Quotation Marks like this:-

Code Copy

MyString.Replace(""", "")

But if you try that, you will find that it doesn't work. What you actually have to do is include a second Quotation Mark inside the outside ones. In other words, you need four Quotation Marks in a row.

Code Copy

MyString.Replace("""", "")

It's only a tiny change, but it will move your mental state from annoyed confusion to enlightened contentment. Or something like that, anyway.

So putting this together with code that reads from a file and displays the result (minus Quotation Marks) in a ListBox, you have:

Code Copy

Private Sub RemoveQuotes(ByVal filename As String, ByVal target As ListBox)
        '  A StreamReader to fetch the data
        Dim sr As New IO.StreamReader(filename)
        '  A string to hold each line as it is read
        Dim line As String = String.Empty

        ' Read from the file
        ' As long as there is something left to read
        Do While sr.Peek <> -1
            ' Replace the Quotation Marks with Nothing
            line = sr.ReadLine.Replace("""", "")

            ' Add edited text to a ListBox
            target.Items.Add(line)
        Loop

        '  Tidy up when finished
        sr.Close()
        sr = Nothing
End Sub

If you prefer your code to be broken down into clearer steps, you could do this instead:

Code Copy

    Private Sub RemoveQuotes(ByVal filename As String, ByVal target As ListBox)
        '  A StreamReader to fetch the data
        Dim sr As New IO.StreamReader(filename)
        '  A string to hold each line as it is read
        Dim line As String = String.Empty

        ' Read from the file
        ' As long as there is something left to read
        Do While sr.Peek <> -1
            '  Read the next line
            line = sr.ReadLine

            ' Replace the Quotation Marks with Nothing
        line = line.Replace("""", "")

            ' Add edited text to a ListBox
            target.Items.Add(line)
        Loop

        '  Tidy up when finished
        sr.Close()
        sr = Nothing
    End Sub

Either way, your quotation marks will be history.

Colors and Brushes in WPF

Ged Mead — Tue, 09 Jun 2009 08:33:00 GMT

One of the things that first caught me out in WPF was the simple topic of colors. For example, let's say you want to reset the BackColor of a Form in Windows Forms.

Easy enough. This will do the job:

Code Copy

Me.BackColor = Color.CadetBlue

When it comes to WPF, you'll know that we are dealing with a Window, instead of a Form and have probably already picked up that BackColor is now Background. You can however, still use "Me" to reference the Window.

But if you were to try something like:

Code Copy

Me.Background = Color.CadetBlue
    ' or even
Me.Background = Colors.CadetBlue

you would be disappointed.

You would however get some help from Intellisense (at least with the second version). The error message tells you that a Color cannot be converted to a Brush. And there's the answer to the problem.

The Background property doesn't take a Color - it takes a Brush, which of course can, and usually does, have a color assigned to it. Don't forget though that you are not limited to a single solid color; there are many gradient, tile and image based options that you can choose when it comes to brushes in WPF.

So this code will work fine in WPF:

Code Copy

  Me.Background = New SolidColorBrush((Colors.CadetBlue))

Ah yes, I hear you say, but what about the theory that you should use XAML for the look and code-behind for the behaviour? Well, I can't disagree with you there and personally I would use:

<Window x:Class="Window1"

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

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

    Title="Window1" Height="300" Width="300"

Background="CadetBlue">

where the Background property for the Window is set there in the XAML. However, there may well be times when you want the user to have a say in color choices and in those cases it can be easier to take the user's input and deal with it in the code-behind.

For example, if the user was empowered to enter values for the ARGB components then you might use an approach like the following:

Code Copy

        Dim col As New System.Windows.Media.Color
        '  In reality the values below could be
        ' selected by the user and passed in
        col = Color.FromArgb(214, 122, 52, 24)
        Dim br As New SolidColorBrush(col)
        Me.Background = br

It would also be quite easy to create a display in WPF where you bind, for example, sliders to the Brush that is used for the background. But I won't go any deeper into that just now, as this sub-set of blog items is meant only to help identify those missing WinForms favorites and repatriate them as WPF troops.

Restricting TextBox Input

Ged Mead — Tue, 09 Jun 2009 08:28:00 GMT

This is a question that seems to come up a lot in the forums:- How can I restrict the TextBox input to numerals, or only a single occurrence of a decimal point, or some other restriction?

As ever, there are several approaches. If the restriction is something basic, such as numerals only then the easy approach is to use the KeyPress event. What you can do is stop the character from appearing in the TextBox, test to see if it is allowable and, if it is, then allow it to continue.

Letters Only
To take an example which only allows letters of the alphabet, it would look like this:

    Private Sub TextBox1_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox1.KeyPress
        e.Handled = True
 
        If e.KeyChar Like "[A-z]" Then e.Handled = False
 
    End Sub

In this snippet, it is the e.Handled = True which blocks the input temporarily. The next line assesses whether the key press is a letter of the alphabet*, either lower or upper case, and if it is then the handled setting is reversed. This allows the key press to be passed to the TextBox display. If it fails the test, the block on this key press remains.

* Depending on your locale and keyboard, some other keys are allowed. These include symbols that are used in combination with characters in some languages, such as accents. In most cases this is the behaviour you will want.

Specific Keys
Sometimes you may want to allow certain keys. A common situation is where you will let the user use the Backspace to correct an error when inputting:

    Private Sub TextBox2_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox2.KeyPress
        e.Handled = True
 
        If e.KeyChar Like "[A-z]" _
        Or e.KeyChar = Chr(&H8) Then
            e.Handled = False
        End If
 
    End Sub

In this case, it is the Chr(&H8) which identifies and allows the Backspace.

Numbers Only
Another common requirement is to restrict input to numerals. Of the several possible approaches, using IsNumeric is one of the most straightforward:

    Private Sub TextBox3_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox3.KeyPress
        e.Handled = True
        If IsNumeric(e.KeyChar) Then e.Handled = False
    End Sub

Sometimes that is too restrictive though. What happens if you want to allow the user to enter decimal points or (depending on their locale) commas to break up large numbers? Allowing these individual characters is simple, but there is another potential catch as we will see in a moment:

    Private Sub TextBox4_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox4.KeyPress
        e.Handled = True
        If IsNumeric(e.KeyChar) _
        Or e.KeyChar = "." _
        Or e.KeyChar = "," Then
            e.Handled = False
        End If
    End Sub

Only One Decimal Point
In most cases where users are inputting numeric values you will want to restrict them to a single decimal point. The code above will allow multiple entries. Again, there are several solutions, but the following one will usually do the job:

    Private Sub TextBox5_KeyPress(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyPressEventArgs) Handles TextBox5.KeyPress
        e.Handled = True
        If e.KeyChar <> "." Then
            If IsNumeric(e.KeyChar) Then e.Handled = False ' 
        ElseIf TextBox5.Text.Contains(".") Then
            MessageBox.Show("Only one decimal point allowed")
        Else
            e.Handled = False
        End If
    End Sub

Command Keys
If you use any of the previous methods, you will be able to control the standard input keys. But there is another group of keys - Command keys - which won't be excluded by the use of the e.Handled approach. These include such keys as Home, End, Tab, and so on. You may risk alienating your users by excluding these, but there may be times when it is reasonable to do so, in which case you'll need to know how.

A good way is to intercept the message at the window level and you can do this by overriding the ProcessCmdKey function. Here's how:

Create a new class which inherits from the basic TextBox. Override the ProcessCmdKey function and test for the currently pressed key in a similar way to that used in the earlier examples. If the key is one you want to suppress then you return True and the Windows message pump will ignore it.

The following code will be all you need:

Public Class CustomTextBox
 
    Inherits System.Windows.Forms.TextBox
 
    Sub New()
        Me.BackColor = Color.Azure
    End Sub
 
    Protected Overrides Function ProcessCmdKey(ByRef msg As System.Windows.Forms.Message, ByVal keyData As System.Windows.Forms.Keys) As Boolean
 
        ' Declare a variable of type Keys enumeration 
        ' named keyPressed. 
        ' Cast the msg's WParam as a KeyEnum value 
        ' and assign it to the keyPressed variable. 
 
        Dim keyPressed As Keys = CType(msg.WParam.ToInt32(), Keys)
 
        ' Process the key that is pressed. 
        '  If keyPressed = Keys.Home Or keyPressed = Keys.End Then Return True
        If keyPressed = Keys.Tab Then Return True
 
        ' Return the Command key message
        Return MyBase.ProcessCmdKey(msg, keyData)
 
    End Function
 
End Class

The light blue back color is simply to make this sub-classed TextBox look slightly different from the default one for demo purposes, but of course is not a key part of the key checking functionality. As you can see, my example blocks the Tab key. You can add or replace other keys, such as Home and End.

Multiple Options
Handling the KeyPress is fine if you only have a few TextBoxes for which you are controlling input. If there are going to be a lot of them throughout your application, or if you have different input rules for several TextBoxes, then again it may be worth your while to create your own inherited version.

The following example deals with some of the previous scenarios, but allows the input rule to be selected from an enumeration of choices. The choices used here remain basic, but of course you can expand this idea much further.

Here is the code:

Public Class RestrictedTextBox
    Inherits System.Windows.Forms.TextBox
 
    Enum RestrictionCategory
 
        NoRestriction
        NumeralsOnly
        LettersOnly
        AlphanumericOnly
 
    End Enum
 
    Private _allowedKeys As RestrictionCategory
 
 
    Property AllowedKeys() As RestrictionCategory
 
        Get
            Return _allowedKeys
        End Get
 
        Set(ByVal Value As RestrictionCategory)
            Select Case Value
                Case 1 To 3 ' One of the enum choices 
                    _allowedKeys = Value
                Case Else ' No restriction
                    _allowedKeys = 0
            End Select
 
        End Set
 
    End Property
 
 
    Protected Overrides Sub OnKeyPress(ByVal e As KeyPressEventArgs)
 
        MyBase.OnKeyPress(e)
 
        '  Test whether key is allowed, based on the current choice
        '  from the enum
 
        Select Case _allowedKeys
 
            Case 1 'Numerals only 
 
                If IsNumeric(e.KeyChar) Then
                    Exit Sub
                Else
                    e.Handled = True
                End If
 
            Case 2  ' Letters Only
 
                If e.KeyChar Like "[A-z]" Then
                    Exit Sub
                Else
                    e.Handled = True
                End If
 
            Case 3  ' Alphanumeric
                If e.KeyChar Like "[A-z]" _
                Or IsNumeric(e.KeyChar) Then
                    Exit Sub
                Else
                    e.Handled = True
                End If
 
        End Select
 
    End Sub
 
End Class

The key areas are the enumeration which is called RestrictionCategory. These are automatically assigned values from 0 to 3. The Property AllowedKeys and its backing Field carry out the standard roles of a Property, the user being able to set the AllowedKeys property in code. (You could improve this by having the property appear in the Properties Window).

The core of this class is the overridden OnKeyPress method. This checks for the chosen enumeration and then either allows or applies the blocking filter to the currently pressed key. This works in a very similar way to the individual KeyPress approach used in the earlier examples.

By default, all keys will be allowed and to set the enumeration of your choice, you simply include code similar to the following somewhere appropriate in your form (I've used the Form Load event for my example):

  Private Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Me.RestrictedTextBox1.AllowedKeys = RestrictedTextBox.RestrictionCategory.NumeralsOnly
 
    End Sub

Summary
I think that a combination or extension of any of the above approaches will enable you to control exactly what you will allow the user to input into a TextBox.

Blog moved

V. Neil Knobbe — Sat, 11 Apr 2009 09:01:00 GMT

My blog has moved to it's new address.

You can find my new blog here.

AutoDragger: automatically enable start dragging for your controls

Robert Verpalen — Wed, 11 Feb 2009 06:12:00 GMT

Another 'old' bit of code that I'm still using a lot none the less. Whenever I needed drag and drop, it annoyed me that I had to use repetitive code to start it manually by tracing the mousedown etc. So what better place for repetitive code than in a reusable component. It isn't any highly fancy or complicated code, but a raincoat doesn't have to be pretty to keep you dry ;)
Anyway, when I was thinking when extending the AutoDragger today to alter the behaviour when dragging from a datagridview, that it was never posted on this blog. So here it is. (As far as I know it hasn't been outdated in the sense that .net now supports this out of the box)

Usage in Designer: drop the component on your form, select a control you wish to enable auto dragging for, locate the added 'UseAutoDrag' property on that control (under a 'Drag Drop' header) and set it to true.
(Of course the component can be used as a runtime class too.) The cursor can be set in the drag events or by setting a default drag cursor on the component.

Code CopyHideScrollFull

namespace Subro.Controls
{

using System;
using System.ComponentModel;
using System.Windows.Forms;
using System.Collections.Generic;
using System.Drawing;

/// <summary>
/// Generic component that can start dragging for most control by handling
/// its mouse events.
/// Set the Controls property to indicate for which controls dragging should be handled
/// automatically. Catch the StartDrag event to alter the data which is to be dragged.
/// </summary>
[DefaultEvent("StartDrag")]
[ProvideProperty("UseAutoDrag",typeof(Control))]
public class AutoDragger : Component,IExtenderProvider
{

public AutoDragger()
{
}

public AutoDragger(IContainer c)

: this()

{

c.Add(this);

}

public AutoDragger(Control ctr)

: this(ctr, null)

{
}
public AutoDragger(Control ctr, EventHandler<AutoDragEventArgs> handler)

: this()

{

StartDrag += handler;

}

List<Control> controls = new List<Control>();

public int Register(Control DragSource)
{

int i = controls.IndexOf(DragSource);
if (i != -1) return i;
if (!DesignMode)
{

DragSource.MouseDown += new MouseEventHandler(Control_MouseDown);
DragSource.MouseMove += new MouseEventHandler(Control_MouseMove);
DragSource.MouseUp += new MouseEventHandler(Control_MouseUp);
DragSource.GiveFeedback += new GiveFeedbackEventHandler(Control_GiveFeedback);

}
controls.Add(DragSource);
i = controls.Count - 1;
ControlAdded(DragSource);
OnControlsChanged();
return i;

}

protected virtual void ControlAdded(Control c)
{
}

public void UnRegister(Control DragSource)
{

DragSource.MouseDown -= new MouseEventHandler(Control_MouseDown);
DragSource.MouseMove -= new MouseEventHandler(Control_MouseMove);
DragSource.MouseUp -= new MouseEventHandler(Control_MouseUp);
DragSource.GiveFeedback -= new GiveFeedbackEventHandler(Control_GiveFeedback);
controls.Remove(DragSource);
ControlRemoved(DragSource);
OnControlsChanged();

}

protected virtual void ControlRemoved(Control c)
{
}

public void UnRegisterAll()
{

int c = controls.Count -1;
for(int i = c;i>=0 ;i--)

UnRegister(controls[i]);

}

const string Category = "DragDrop";

[DefaultValue(null)]
[Category(Category)]
public Control[] Controls
{

get
{

return controls.ToArray();

}
set
{

suspendcontrolschanged = true;
while (controls.Count > 0)

UnRegister(controls[0]);

if (value != null)

foreach (Control c in value)
{

}

suspendcontrolschanged = false;
OnControlsChanged();

}

bool suspendcontrolschanged;
protected virtual void OnControlsChanged()
{

if (!suspendcontrolschanged && ControlsChanged != null) ControlsChanged(this, EventArgs.Empty);

}

public event EventHandler ControlsChanged;

public Control this[int Index]
{

get
{

return controls[Index];

}

/// <summary>
/// The amount of registered controls used as a dragsource
/// </summary>
public int DragSourceCount
{

get { return controls.Count; }

}

public event EventHandler<AutoDragEventArgs> StartDrag;

private DragDropEffects effects = DragDropEffects.All;
[DefaultValue(DragDropEffects.All)]
public DragDropEffects Effects
{

get { return effects; }
set { effects = value; }

}

protected override void Dispose(bool disposing)
{

UnRegisterAll();
base.Dispose(disposing);

}

int diffmin = 2;
[DefaultValue(2)]
[Category(Category)]
public int DifferenceMinimum
{

get { return diffmin; }
set
{

diffmin = value;

}

AutoDragEventArgs curdrag;

void Control_MouseDown(object sender, MouseEventArgs e)
{

if (e.Button == MouseButtons.Left)
{

curdrag = new AutoDragEventArgs(sender as Control, e.Location, this);

}
else

curdrag = null;

}

void Control_MouseUp(object sender, MouseEventArgs e)
{

if (curdrag != null)
{

AutoDragEventArgs de = curdrag;
EndCurDrag();
OnDragEnded(de);

}

protected virtual void OnDragEnded(AutoDragEventArgs e)
{
}

void Control_MouseMove(object sender, MouseEventArgs e)
{

if (e.Button == MouseButtons.Left && curdrag != null)
{

curdrag.CheckStartDrag(e);

}

void Control_GiveFeedback(object sender, GiveFeedbackEventArgs e)
{

curdrag.SetFeedback(e);

}

private Cursor cursor;
[DefaultValue(null)]
public Cursor DragCursor
{

get { return cursor; }
set
{

if (cursor == value) return;
cursor = value;
dragicon = null;

}

}
bool ShouldSerializeDragCursor()
{

return cursor != null && dragicon == null;

}

private Icon dragicon;
[DefaultValue(null)]
public Icon DragIcon
{

get { return dragicon; }
set
{

if (dragicon == value) return;
if (value == null)

DragCursor = null;

else

DragCursor = new Cursor(value.Handle);

dragicon = value;

}

private bool alwaysshowcustomcursor;
[Description("Only applies when the DragCursor property is set. If this value is false, the cursor is only shown when drop is allowed")]
[DefaultValue(false)]
public bool AlwaysShowCustomCuror
{

get { return alwaysshowcustomcursor; }
set { alwaysshowcustomcursor = value; }

}

void EndCurDrag()
{

if (curdrag != null)

curdrag.Dispose();

}

public class AutoDragEventArgs : EventArgs
{

public readonly Control Control;
public readonly Point StartPoint;
public readonly AutoDragger AutoDragger;
public AutoDragEventArgs(Control Control, Point StartPoint, AutoDragger Owner)
{

this.Control = Control;
this.StartPoint = StartPoint;
this.AutoDragger = Owner;

}

private object dragobj;
public object DragObject
{

get { return dragobj; }
set { dragobj = value; }

}

private bool started;

public bool DragStarted
{

get { return started; }

}

internal void CheckStartDrag(MouseEventArgs e)
{

int diff = Math.Abs(e.X - StartPoint.X)

+ Math.Abs(e.Y - StartPoint.Y);

if (diff >= AutoDragger.diffmin)
{

started = true;
Cursor = AutoDragger.DragCursor;
AutoDragger.OnStartDrag(this,e);

}

public void Dispose()
{

if (AutoDragger.curdrag == this)

AutoDragger.curdrag = null;

}
private Cursor cursor;

public Cursor Cursor
{

get { return cursor; }
set
{

cursor = value;

}

internal void SetFeedback(GiveFeedbackEventArgs e)
{

if (cursor != null)
{

if (e.Effect != DragDropEffects.None || AutoDragger.alwaysshowcustomcursor)
{

e.UseDefaultCursors = false;
Cursor.Current = cursor;

}

internal object GetDragObject()
{

Control c = Control;
if (c is ListControl)

return (c as ListControl).SelectedValue;

if (c is TextBoxBase)

return GetDragObject(c as TextBoxBase);

if (c is Label)

return c.Text;

if (c is TreeView)

return GetDragObject(c as TreeView);

if (c is DataGridView)

return GetDragObject(c as DataGridView);

return null;

}

object GetDragObject(TextBoxBase tb)
{

if (!tb.ReadOnly)
{

//when in edit mode and selecting text, don't start dragging
//TODO: make optional
return null;

}
if (tb.SelectionLength == 0)

return tb.Text;

return tb.SelectedText;

}

object GetDragObject(TreeView t)
{

TreeNode node = t.GetNodeAt(StartPoint);
if (node == null) return null;
t.SelectedNode = node;
return node;

}

object GetDragObject(DataGridView dg)
{

DataGridView.HitTestInfo ht = dg.HitTest(StartPoint.X, StartPoint.Y);
if (ht.RowIndex == -1) return null;
if (ht.ColumnIndex > -1 && !dg.Columns[ht.ColumnIndex].ReadOnly && dg[ht.ColumnIndex, ht.RowIndex].IsInEditMode)

return null; //when on a cell in edit mode, don't start drag drop

if (ht.ColumnIndex == -1 || dg.SelectionMode == DataGridViewSelectionMode.FullRowSelect || AutoDragger.AlwaysDragFullRow)
{

DataGridViewRow row = dg.Rows[ht.RowIndex];
if (row.DataBoundItem != null) return row.DataBoundItem;
return row;

}
return dg[ht.ColumnIndex, ht.RowIndex].Value;

}

[Browsable(false)]
public AutoDragEventArgs LastDragInfo
{

get
{

return curdrag;

}

protected virtual void OnStartDrag(AutoDragEventArgs e,MouseEventArgs me)
{

if (StartDrag != null)

StartDrag(this, e);

if (e.DragObject == null)

e.DragObject = GetDragObject(e);

if (e.DragObject != null)
{

e.Control.DoDragDrop(e.DragObject, Effects);
OnDragStarted(e);

}
else
{

//dragging not allowed
curdrag = null;

}

protected virtual void OnDragStarted(AutoDragEventArgs e)
{
}

protected virtual object GetDragObject(AutoDragEventArgs e)
{

return e.GetDragObject();

}

private bool fullrow;
[DefaultValue(false)]
[Description("Only applies when dragging on a datagridview.\r\nIf this value is not set, the full row only will be dragged if the selection mode of the grid is FullRowSelect or the rowheader is dragged and the cell value otherwise.")]
public bool AlwaysDragFullRow
{

get { return fullrow; }
set { fullrow = value; }

}

#region IExtenderProvider Members

bool IExtenderProvider.CanExtend(object extendee)
{

return extendee is Control;

}

[DefaultValue(false)]
[Category(Category)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)] //serialized in the control property
public bool GetUseAutoDrag(Control c)
{

if (controls.Count == 0) return false;
return controls.Contains(c);

}
public void SetUseAutoDrag(Control c, bool value)
{

if (GetUseAutoDrag(c) == value) return;
if (!value)

UnRegister(c);

else

}

#endregion

}

. . .

Blog moved

Serge Baranovsky — Wed, 28 Jan 2009 18:09:00 GMT

My new blog URL is http://sergeb.com/blog/

New feed is http://feedproxy.google.com/SergeB

Creating Video Demos With Camtasia Studio

Ged Mead — Fri, 23 Jan 2009 09:28:00 GMT

I've been meaning to blog about the tools I use regularly and find useful and I've managed to get a couple written this month. I'm always a bit concerned that blogs like this might end up looking like some kind of infomercial. But I eventually came to the conclusion that I've always thought that personal recommendation was the best kind of recommendation, so if I like a tool I should tell the world. Whether the world sets any store by my opinion is a matter for the world to decide! J

I have been using Camtasia Studio on and off for a couple of years now. When I first got hold of a copy, I needed it to create some demo videos. What I really liked about it was that, with no previous experience of screen recording, I was able to make the recording successfully after only a couple of tries. OK, so when I look back at that effort now, maybe "successfully" is an extravagant claim, but it was good enough for what I wanted to do at the time.

Although there are still some (many!) features that I haven't yet got round to using, it has still been a really useful tool for me. When I first got it, I was more interested in grabbing the screen action and recording some audio narration. More recently, I needed to improve the narration side and so was looking for a way to record the voice independently and (often) edit parts of it without having to re-record the whole thing for the umpteenth time.

Camtasia Studio comes with a subset of handy little apps, one of which is their Audio Editor. This has been really useful, as it enabled me to make those voice recordings and edit them easily. I also found myself doing a lot of "Inserting Silence" to replace the intakes of breath and the occasional unwanted clunk when I'm waving my hands around and hit the boom mike.

The tutorials are excellent and there is a lively set of User forums. FAQs are available to help you with those tricky things that should go right but somehow don't.

The work area is as easy to use as you could reasonably hope for with an application that seems to have so many options. As you can see from the screenshot, the timeline allows for more than one audio track.

Version 6 of Camtasia comes with even more presets to help you create the best screen size, resolution and (often important for web distribution or viewing) file size.

I'm currently working on creating some courses, all of which contain video demos. As I get more used to using it, I am of course finding that I can get from starting idea to finished production much quicker. When I've finished my current project, as a long term plan, I hope to be able to create a set of short videos to be made available for free here on VBCity.

All in all, I'm really pleased with it and many a time I've silently thanked the friend who first put me on to it. You can download a free 30 Day trial version from the TechSmith site here.

The Best WPF Developer Books

Ged Mead — Sun, 18 Jan 2009 12:10:00 GMT

I now have several WPF books. I've written reviews on some of them and often mentioned them in answers to Forum questions from members who want to start out in WPF.

When I wrote those articles and answers, my opinion was mostly based on my experience as a general reader who was interested in seeing what WPF had to offer and dabbling with it at a fairly elementary level. For the past three months though, I've been involved with WPF on a daily basis in a training capacity. During this time, it's become clear that I turn to some of the books much more regularly than others - and to some of them only when fairly desperate).

With the very clear understanding up front that this is my personal experience, opinion and preference - which may be completely different from anyone else's - here is my view on the various books.

The book I first turn to is :
Pro WPF with VB 2008: Windows Presentation Foundation with .NET 3.5
by Matthew MacDonald.

Comprehensive, detailed, clearly written, understandable code snippets, and downloadable code samples that work.

It's almost impossible to fault this book.

And of course, as the title says, the code behind samples are all in VB.NET - the only book I know of so far that is aimed specifically at VB developers.

However, if you are a C# developer then that won't impress you much. For you, Apress and Matthew MacDonald have produced the equivalent C# title - Pro WPF with VB 2008: Windows Presentation Foundation with .NET 3.0. The key differences obviously being the absence of "VB.NET" in the title and the slightly earlier Framework.

I do have this version too and find it very useful when I want to try and understand the C# approach to a concept that I understand in VB.

The next book I reach out for is usually
Windows Presentation Foundation Unleashed
by Adam Nathan.

The key value of this book is that it is packed with little hints, tips, Gotchas and information that will help you fight your way through the minefield that you encounter when first starting with WPF.

One negative for me is that the code samples are in C#. There are however many useful XAML samples.

The book is in full color. This makes it slightly more attractive, but isn't a key issue for me.

Compared to most other WPF books, it appears to be relatively slim. In spite of this, I have still found it to be a gold mine of really useful WPF nuggets.

Third in line is:
Programming WPF
by Chris Sells and Ian Griffiths.

Another C# book, but again contains a lot of XAML. Ian Griffiths was one of the first writer/speaker/presenter/trainers on WPF in general and XAML in particular, so there are some useful insights to be had here.

On the negative side, my impression is that the authors prefer to use code behind sometimes where I would have liked to see the XAML alternative.

Make sure you get the Second Edition if you decide to go for this book. The First Edition is inevitably way out of date now.

Surprisingly (to me anyway, considering I spent a lot of time converting the code in the next book from C# to VB) the Petzold book only comes fourth in my list of most used books. This is:
Applications = Code + Markup: A Guide to the Microsoft Windows Presentation Foundation
by Charles Petzold.

If you want intricate details and almost philosophical insight into the structure of WPF, then this would be the book for you. As with all Petzold books, it painstakingly works its way through the minutiae of the subject.

If I have a criticism, it would be that sometimes the sackcloth and ashes approach to developing (such as manually creating everything yourself, even if it is available for free) doesn't always work for me. I understand the purity of the approach, but this means that it can sometimes be difficult to just dip into this book for a quick answer to a particular question.

However, if you really - really - want to get at the nuts and bolts of WPF, then you will probably not find one that has more detail.

The fifth book in my WPF stable (for now, anyway!) is:
Professional WPF Programming: .NET Development with the Windows Presentation Foundation
by Chris Andrade and others.

When there were very few other books available, this one had some benefits. The authors had each looked at specific areas and came up with some guidance. Some parts were clearly better than others, but overall it was an easier read than MSDN at the time, but basically rather shallow coverage.

It rarely gets opened these days.

I have the greatest respect for anyone who takes the time, trouble and effort to write or co-write a book. Knowing how long it takes me to write a short article or a training package, I wouldn't dream of criticising someone who will have spent many long, hard months writing (and no doubt re-writing) a book. So, as I said at the start, the opinions in this blog item only reflect my personal experience of using this collection of books; other readers with other backgrounds and author style preferences may well have different opinions.

As WPF picks up speed and interest grows, I'm sure there will be many other WPF books published in the coming months. There are already several that were published at the end of 2008 that I haven't read. No doubt the temptation to pick up another title or two will become irresistible as 2009 progresses and, if so, I will post up my thoughts on those too in the hope that it might help you decide the best way of spending your hard-earned cash.

WPF Commands and PerformClick

Ged Mead — Sun, 18 Jan 2009 10:04:00 GMT

Some weeks ago I wrote a blog item about how to get the functionality of PerformClick in WPF.

I remember thinking at the time that it was a fairly clunky workaround and wondered why PerformClick hadn't been included in WPF. Of course there may be lots of reasons, beginning with 'No-one thought of it' and ending with 'It was just too difficult'.

But while looking at an apparently unrelated problem this week, it occurred to me that maybe there is a more elegant solution staring me in the face - WPF's Commands.

In many cases where PerformClick is required, the situation is that whatever action is wired up to the Button's Click event is often also of interest to other controls - perhaps a menu item, a keyboard shortcut or a user instigated selection of some kind or other elsewhere.

WPF Commands, if this is a new area for you, is a variation on the theme of Events. Whereas events are generally locked in to a specific action, a Command on the other hand is more along the lines of a loosely-coupled task that can be subscribed to from several places.

Of course,you may be sat there thinking that it doesn't take a coding genius to create code for events that can be re-used and accessed from several different points. The point is though that Commands are specifically designed for this purpose and they have a feature that I think makes them almost unique. (Can you be 'almost' unique, the literary critic part of my brain asks? Never mind, you know what I mean!)

Commands have the ability to turn themselves off in situations where it wouldn't be appropriate for them to be available - and back on again when it is. A common example is the Paste Command, where it doesn't make sense to have it available unless there is some data in the Clipboard.

Similarly, you might build in a test where the Exit command isn't allowed to function unless the user has taken some action, such as saving data. There are lots of similar examples.

WPF comes with a bundle of pre-built Commands for common tasks, including Copy, Cut, Paste, Find, Save, Close, Play, Zoom, Align and many more. Naturally, the designers of WPF don't know the exact actions you will want to link to each of the commands in every circumstance, so there is still some work for you to do. Commands are clever - but they're not magic!

Apart from the built in Commands, and on the basis that there are never enough of these kind of things, you can create Commands of your own relatively easily. You can set the bindings and the rules that decide when it may be able to execute and when not (as per the Paste example earlier).

All of which brings me back to my original thought. If you can create a Command that both a Button and (in the case of the Forum question that got me thinking about this) a Menu Item can bind to, then that really removes the need to worry about PerformClick. Command would be a neater and more sophisticated way of achieving the same effect.

If you want more info on Commands, here is a useful link to an MSDN Introduction to Commands article.

Generic comparer: for comparing/sorting sources of unknown types

Robert Verpalen — Mon, 29 Dec 2008 11:56:00 GMT

It's been a long time since making this class and don't believe I posted it yet, but since I'm going to use it in the DataGridViewGrouper (see previous post), thought I'd post it now.
Since it's “older” code, it's fully .net 2.0 compatible. It can be uses where ever an IComparer interface is used. (or the Compare function of the GenericComparer<> class for a Comparison<> call)

Usage example:

Code Copy

Array.Sort(YourArray, new GenericComparer());

There is a generic comparer class already in the framework, but it will fail on certain types. It's been a while, but I believe the .net native class doesn't support the Nullable struct and strong implementers of the generic IComparer<> interface. (The new Linq will fail if the object sorted on is not an IComparable)

Code CopyHideScrollFull

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections;
using System.ComponentModel;

namespace Subro
{

/// <summary>
/// Comparer that tries to find the 'strongest' comparer for a type.
/// if the type implements a generic IComparable, that is used.
/// otherwise if it implements a normal IComparable, that is used.
/// If neither are implemented, the ToString versions are compared.
/// INullable structures are also supported.
/// This way, the DefaultComparer can compare any object types and can be used for sorting any source.
/// </summary>
/// <example>Array.Sort(YourArray,new GenericComparer());</example>
public class GenericComparer : IComparer
{

public GenericComparer()
{

}
public GenericComparer(Type Type)
{

this.Type = Type;

}

Type type;
public Type Type
{

get
{

return type;

}
set
{

if (value == null) throw new ArgumentNullException();
type = value;
comp = null;

}

Type targettype;
/// <summary>
/// normally the same as the type, but can be set to a different type
/// </summary>
public Type TargetType
{

get
{

if (targettype == null) return type;
return targettype;

}
set
{

if (TargetType == value) return;
targettype = value;
comp = null;

}

IComparer comp;

IComparer GetGenericComparer(Type From, Type To)
{

while (To != typeof(object))
{

if (typeof(IComparable<>).MakeGenericType(To).IsAssignableFrom(From))

return (IComparer)Activator.CreateInstance(typeof(StrongCompare<,>).MakeGenericType(From,To));

To = To.BaseType;

}
return null;

}

public IComparer GetComparer(Type From, Type To)
{

var gen = GetGenericComparer(From,To);
if (gen != null)

return gen;

else if (typeof(IComparable).IsAssignableFrom(type))
{

return (IComparer)Activator.CreateInstance(typeof(NonGenericCompare<>).MakeGenericType(type));

}
else if (type.IsGenericType && typeof(Nullable<>) == type.GetGenericTypeDefinition())
{

var basetype = type.GetGenericArguments()[0];
return (IComparer)Activator.CreateInstance(typeof(NullableComparer<>).MakeGenericType(basetype),

GetComparer(basetype, To == From ? basetype : To));

}
return new StringComparer();

}

class NullableComparer<T>:IComparer

where T:struct

{

public readonly IComparer BaseComparer;
public NullableComparer(IComparer BaseComparer)
{

this.BaseComparer = BaseComparer;

}

object getval(object o)
{

return ((Nullable<T>)o).Value;

}

public int Compare(object x, object y)
{

return BaseComparer.Compare(getval(x), getval(y));

}

class StrongCompare<F,T> : IComparer

where F : IComparable<T>

{

public int Compare(object x, object y)
{

return ((F)x).CompareTo((T)y);

}

class NonGenericCompare<T> : IComparer

where T: IComparable

{

public int Compare(object x, object y)
{

return ((T)x).CompareTo(y);

}

class StringComparer : IComparer
{

public int Compare(object x, object y)
{

return x.ToString().CompareTo(y.ToString());

}

public bool Descending
{

get
{

return factor < 0;

}
set
{

factor = value ? -1 : 1;

}

int factor = 1;

int compare(object x, object y)
{

if (x == y) return 0;
if (x == null) return -1;
if (y == null) return 1;
if (type == null)

Type = x.GetType();

if (comp == null)

comp = GetComparer(type, TargetType);

return comp.Compare(x, y);

}

public int Compare(object x, object y)
{

return factor * compare(x, y);

}

public class GenericComparer<T> : GenericComparer,IComparer<T>
{

public GenericComparer()

: base(typeof(T))

{ }

public int Compare(T a, T b)
{

return base.Compare(a, b);

}

public class PropertyDescriptorComparer : GenericComparer
{

public readonly PropertyDescriptor Prop;

public PropertyDescriptorComparer(PropertyDescriptor Prop)

: this(Prop, true)

{
}
public PropertyDescriptorComparer(PropertyDescriptor Prop, bool Descending)

: base(Prop.PropertyType)

{

this.Prop = Prop;
this.Descending = Descending;

}

public static partial class Extend
{

public static void Sort<T>(this List<T> list, Func<T, T, int> Comparer)
{

list.Sort(new Comparison<T>(Comparer));

}

/// <summary>
/// Sort on a property or field
/// </summary>
public static void Sort<T, S>(this List<T> list, Func<T, S> Property)
{

var c = new Subro.GenericComparer<S>();
Sort(list, (t1, t2) => c.Compare(Property(t1), Property(t2)));

}