January, 2008

Combobox - using simple properties

To follow on from my previous post about Comboboxes (see binding combo boxes to objects), how do you bind to a simple int representation of a foreign key?

Lets say you have a Person object, with a member called Employee which is an int and refers to the Id on an Employee object.

When you want to bind to an Person object with an int you set:

• SelectedValue - this points to the EmployeeId member (typically set to {Binding Path=EmployeeId})
• SelectedValuePath - point this to the member of the Employee object that will match up to your EmployeeId member, typically this will be set to {Binding path=Id}
• DisplayMemberPath - point this to the member of the Employee that displays something meaningful, like Name. This will then get displayed in the drop down.
• ItemsSource - point this to the ObservableCollection that holds the list of Employees

This is all you need to do

Combobox - using objects

I have seen a number of people getting confused about how to set up the various combobox properties for data binding.

Lets say you have a Person object, with a member called Employee which is a reference to an Employee object
When you want to bind to an Person object with an object reference you set:

• SelectedItem - this points to the Employee member (typically set to {Binding Path=Employee})
• DisplayMemberPath - point this to the member of the Employee that displays something meaningful, like Name. This will then get displayed in the drop down.
• ItemsSource - point this to the ObservableCollection that holds the list of Employees

This is all you need to do

Hierarchial data template

Although you can do recursion quite simply with DataTemplates (see recursion example), you may want to use a Hierarchical Data Template instead. You may want to do this if you are for example connecting the Data Template up to a TreeView.

The template will look like this for a tree of files and directories:

<HierarchicalDataTemplate DataType=”{x:Type si:DirectoryInfo} ItemsSource=”{Binding Path=., Converter={StaticResource fileConv}}”>
<TextBlock Text=”{Binding Path=Name}” />
</HierarchicalDataTemplate>

Where fileConv is a static resource to a converter class that converts a FileInfo into a string, and si refers to System.IO.

The magic happens in the ItemSource property, which when it encounters a DirectoryInfo will create another template, and so on.

Recursive data template

Yes, believe it or not, it is possible to have a recursive data template.

I was recently writing a ListBox that showed a directory, but I wanted the ListBox to show nested ListBoxes for subdirectories.
It turned out to be very easy with WPF:

<DataTemplate DataType=”{x:Type si:DirectoryInfo}”>
<ListBox ItemsSource=”{Binding Path=., Converter={StaticResource fileConv}}” />
</DataTemplate>

Where fileConv is a static resource to a converter class that converts a FileInfo into a string, and si refers to System.IO.

You may be thinking where is the recursion? The magic is in the fact that when the DataTemplate encounters a DirectoryInfo it will invoke the DataTemplate for that DirectoryInfo, and suddenly it just all works.

Popup box

One thing that I have noticed, out there in the real world, is that people new to WPF haven’t noticed the (slightly) unsung hero Popup.
I have actually seen people spending man weeks recreating a floating window as per the popup control in WPF.

So what is it? Well it is the ancestor class for menus, tooltips and the combobox - and provides the necessary floating behaviour.

An example of using it is:

<StackPanel>
<ListBox Name=”xxx” />
<Popup PopupAnimation=”Fade” Placement=”Mouse” x:Name=”pop”>
<TextBlock Text=”ggggg” />
</Popup>
</StackPanel>

This example will show a floating window at the mouse cursor, when the mouse is in the stackpanel. Easy as pie isn’t it?

ListView - finding the non selected item

Eh?

What I mean by the title is that sometimes when you are using a ListView, you want to find out the row that was used rather than the selected row.
The most likely scenario for this is when you have a button (or similar) as a column in the ListView. You want to be able to respond to the button click event and do something in relation to the row that it was clicked on.
Now you may (or may not) know that when you click on a button in this scenario, the row is not selected. This means that you cannot rely on using the currently selected item in the listview.
What you need to do is find the item pertaining to the row of the button that has been clicked. Actually this is quite easy because the button is part of the visual tree for the row, so you can just traverse up the visual tree to find it!

An example of how you would do this is:

private void btnAddSymbol_Click(object sender, RoutedEventArgs e)
{
                   DependencyObject dep = (DependencyObject)e.OriginalSource;
                   while ((dep != null) && !(dep is ListViewItem)) { dep = VisualTreeHelper.GetParent(dep); }
                     if (dep == null)
                                       return;