ATC Avalon Team (Closed)

The blog is close down

We will no longer keep this blog.

For information about WPF, you can find more in Kevin Moore's blog: http://blogs.msdn.com/okoboji/ 

Thanks,

ATC Avalon Team

A Fancy StatusBar

Download and try it! 

When moving Mouse over an item, the item jumps up until Mouse leaves. The key steps to achieve it are as follows. 

1.      Subclass StatusBarItem and add new property ImagePath. Therefore, we can pass image to StatusBarItem easily.

2.      Subclass StatusBar and override MouseLeave and MouseMove event. In MouseMove event handler, find current item according to mouse position, and then change each item’s position by changing Canvas.Top property. When Mouse Leave, restore each item to original position.

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

Moral Event: Mountain Climbing

How to Create a Custom View

One of the most powerful features of ListView is supporting custom views. If built-in views do not apply your scenarios, you can easily write your own. ListView will handle your views the same way with built-in views.

Creating a custom view is pretty simple. ListView control has done quiet a bit of work to make the implementation easy. Here are main steps to follow. Firstly, a class should be created and it should derive from ViewBase directly or indirectly. Then define the style of the view in a resource file. Finally link them together using ComponentResourceKey. In this blog I will show you how to create a custom view named ImageView. ImageView is used to display thumbnail of image files. The snapshot is listed below.

 Step 1. Define ImageView class

All you have to do is to subclass ViewBase.

 Step 2. Define Style for ImageView

Two styles should be defined in a resource file. One is for ListView and the other is for ListViewItem. If you only want to do a little modification on the original one, you can use the following code. It will merge your style into its original style. The magic lies in the keyword “BasedOn”. It means your style definition is based on another style definition.

NOTE: if you forget to define Template in styles, ListView will show nothing.

The following XAML code is digested from the style definitions for ImageView.

Step 3. Link them together

The link method here is using ComponentResourceKey. Firstly give a key to each style defined before.

Then set DefaltStyleKey and ItemContainerStyleKey in ImageView class.

Step 4. Use it in ListView

It is used like GridView.

 We’re done!

How to display data from database?

It is common for ListView to display data from database. In this blog, I will briefly introduce how to do this. To achieve this, we need to resolve two problems:

1. Binding data table to ListView;
2. Binding fields of data table to GridViewColumns.

Binding data table to ListView

How to bind data of a DataTable to ListView depend on how to use DataTable, but the basic rules are the same:

1.      If use DataTable directly, first set the DataTable to the ListView.DataContext. And then bind ListView.ItemsSource to ListView.DataContext. The following code is a simple sample:

2.      If define wrapper classes for DataTable, wrapper classes should implement IEnumerable, so that instances of the wrapper classes can be directly assigned to ListView.ItemsSource. Fortunately, the Data Source Manger in Visual Studio 2005 can automatically create wrapper classes if you use it to manage your data source in your application.

3.      In some cases, you may need to dynamically add data rows into the source. For example, start a background thread to insert items into the data source. In this case, you can use ObservableCollection directly or create a wrapper class implementing INotifyCollectionChanged interface.

Binding fields of data table to GridViewColumns

1. When defining data source for ListView in the first way mentioned above, use data field names in the DisplayMemberBinding directly, for example:

2. If use wrapper class for data rows, just use property names in the wrapper class.

 In fact, it is straightforward to display DataTable with ListView. Two bindings are keys: one for ItemsSource of ListView and the other for fields in a row.

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

Fixed-Width Column in ListView: A Column that cannot be resized

A fixed-width column is a column that cannot be resized by mouse dragging or double-clicks. You can find instances in outlook. Currently two methods can be used to achieve the effect. One is to restyle GridViewColumnHeader to remove the gripper inside its Template. The other is to subclass GridViewColumn to restrict columns' width to a fixed size. Today's topic is about the second solution. The resulting column is a little bit different from the restyling one because there is still a gripper inside GridViewColumnHeader. When mouse is over the gap between columns, the cursor is still changed to the resizing cursor.

The main WPF elements we are going to cover in this session are GridViewColumn, dependency property definition, dependency property coercion.

 Step 1. Subclass GridViewColumn

The key in this step is to override WidthProperty's metadata to make it call CoerceWidth() to coerce its value when a new value is available.

 Step 2. Add a dependency property FixedWidth

The FixedWidth is used to set column's fixed width in spite of whatever the column's width is. The keys in this step are:

1.      Define a dependency property.

2.      When FixedWidth is changed, it calls CoerceValue() to coerce Width into the new value.

Step 3. Rewrite CoerceWidth() to make it always return FixedWidth

Then the Width will always get the same value whatever value is set on Width.

Step 4. Use it in GridView

It is used like normal GridViewColumn.

 We're done!

This sample is based on the February CTP.

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

Other solutions to implement Alternate Background

We have found three solutions to achieve alternative background scenarios so far. The first one is provided in the previous post. Now we will describe another two.

The second solution:

 Derive from ListView, override PrepareContainerForItemOverride method and return the container with the correct background. And in your xaml file, replace ListView with SubListView. When items change, call ListView.Items.Refresh method.

The code is as follows.

The third solution:

Creat a StyleSelector for ListView.ItemContainerStyleSelector property, in which alternate styles. Reset the containerStyleSeletor property when collection changes.

The code is as follows.

Alternate Background for ListViewItems

This sample shows how to create a ListView control that uses a GridView to display a list of dates that are defined as DateTime objects. Items in this example have alternate background.

Key Step 1. Restyle ListViewItem, and set its Background by converter in the new style.

Key Step 2. Implement BackgroundConvertor. We need the index of a ListViewItem to determine its background. int ItemContainerGenerator.IndexFromContainer(DependencyObject container) method can tell the index of a ListViewItem.

Key Step 3. We’ve almost finished the sample, and it works well in sorting/grouping. However, when one item is removed from the ListView, you may find two adjacent rows have the same background color. That's because the background of all the other items will not be updated automatically after removing/inserting. Therefore, some extra code is needed to refresh the items after the inserting/removing operation.

This sample is based on the February CTP.

Team Moral Event: StarTrooper Laser Tag

ListView with grouping (In GridView mode)

ListView inherits GroupStyle from ItemsControl, so we can easily achieve grouping for GridView. The only thing we should provide is a GroupStyle. Besides, in order to collapse and expande a group, an Expander is added in the GroupStyle.

The number on the group header indicates the count of items in that group.

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

Editing In ListView

Idea

To achieve our goal, create a customized control called EditBox for GridViewColumn.CellTemplate.  The EditBox has two modes, one for displaying content in normal way, the other one for displaying content in editable mode. In normal mode, the EditBox displays content in a TextBlock, when in editable mode, it displays content in a TextBox, which lies in the TextBlock's adorner

1. Create a customized Edit Control

To build an EditBox, we need to define its OM(object model) and behaviors first. In our context, the OM can be outlined by the following rules:

• When the ListViewItem that contains an EditBox is selected, click on the EditBox should switch it into Editing mode.
• When in editing mode, pressing Enter key or F2 can switch it into Normal mode.
• When in editing mode, once the TextBox loses its focus, the EditBox should switch to its Normal model.

    Behaviors:

• In Normal mode, a TextBlock is used to display content;
• In Editing mode, a TextBox will pop up for editing.     

This control is built for a DataTemplate to specify GridViewColumn.CellTemplate. No guarantee that it can work out of GridView.

     Steps

1)     Create an EditBox inherited from Control. Since we need a property to store displayed value, we add a dependency property “Value”.

2)     Add a DependencyProperty to represent the mode: IsEditing. It is of type Boolean, when it is true, EditBox is in Editing mode. We use it to trigger whether to show the TextBox or not.

3)      Style the EditBox.

4)    To enable editing, create EditBoxAdorner to host the TextBox. It needs to do some measuring and arranging work to make TextBox work as expected.

     5)     To implement all the rules, add some event handling code.(See source code for details)

2. Customize CellTemplate

By putting the EditBox in GridViewColumn.CellTemplate, the column can be edited when its ListViewItem is selected and then clicked. For example:

ListView Sorting

This sample shows how to create a ListView control that uses a GridView to display a list of dates that are defined as DateTime objects. The sample enables sorting of data in ascending or descending order according to the contents of one column.

Key Step 1. Add Sorting method in GridViewColumnHeader.Click event. Consider both last clicked header and last sorting direction, and decide current sorting direction. Sorting itself is very simple, as written in Sort method.

Key Step 2(optional). In order to figure out current sorting status, add Template in the Column Header. Change Template along with sorting status, so it should also be added in GridViewColumnHeader.Click event. And in the Template, Use path to draw the arrows.

Key Step 3. Put it all together and you have the following ListView sorting!

This sample is based on the February CTP.

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

TreeListView: Show Hierarchy Data with Details in Columns

This is the first session of this topic. I’ll introduce the minimum steps needed to build a TreeListView. The TreeListView is able to present hierarchy data with details in columns. See the following diagram:

The main Avalon elements we are going to cover in this session are TreeView, TreeViewItem, GridViewColumnCollection, GridViewRowPresenter, GridViewHeaderRowPresenter and Binding of course.

Step 1. Sub-class TreeView and TreeViewItem

The key in this step is to override proper methods to make sure correct container is generated.

Step 2. Add a Level property to TreeListViewItem

Make the item be aware of the level it belongs to.

Step 3. Write a data template for the 1st column

The keys in this step are:

1. Bind Margin to item’s Level to mimic the indent;
2. Write a converter to convert Level to proper indent space;
3. Use ‘ancestor’ binding to find the TreeListViewItem;
4. When there is no child in the item, trigger the expander’s (+ sign) visibility to Hidden but not Collapsed, so that the space is kept and all the item texts align vertically.

Step 4. Write control template for TreeListViewItem

The keys in this step are:

1. Instead of using ContentPresenter, we use GridViewRowPresenter to present the content in multiple columns
2. Presenter finds content from item’s Header property
3. Bind GridViewRowPresenter.Colums property to TreeListView.Columns property

Step 5. Put it all together

The key in this step is: When setup the columns you want to show, the cell template for the 1st column is the one we just wrote that can do smart indent.

We’re done!

I’ll introduce how to encapsulate the implementation details into a control in near future.

A Step-by-Step to Create a Song List

How to create a song list above with some fancy effects? Now it is easy with ListView in Avalon.

1.      To simplify, we can use XmlDataProvider to provide data for ListView, the xaml looks like below:

2.      Create a ListView with GridView mode and bind data to each column.

3.      To add an image to each column header, use GridViewColumn.HeaderTemplate property. The property’s type is DataTemplate, so a DataTemplate should be provided in Resources. Create one DataTemplate for each headerwith different Image Source.

4.      If we would like to see the selection of the ListView items by using CheckBox, create a DataTemplate for GridViewColumn.CellTemplate property. In that DataTemplate, add a checkbox and bind its IsChecked property with ListViewItem’s IsSelected property.

Note: In order to apply CellTemplate to the first Column, remove its DisplayMemberBinding property set in step 2 because the latter has higher priority.

5.      How to make those cute stars of Rating column? Customize CellTemplate of that Column and restyle its ToggleButtons using Path.  

6.      You may want ListViewItem to have different MouseOver effect (in Red) and Selected effect (in Blue). To achieve those effects, trigger should be added in ListView.ItemContainerStyle.

7.      Put it all together and you have the following gorgeous Song List!

This sample is based on the February CTP.

Declaimer: This posting is provided "AS IS" with no warranties, and confers no rights.

Download the attached file to get the source code.