What’s in it do you ask? Five kick @ss controls:

The BusyIndicator

BusyIndicator makes it easy to let the user know when an application is busy. Simply wrap the relavent content in an instance of the BusyIndicator control and toggle its IsBusy property to True during any long-running process.

The ColorPicker

The ColorPicker is an editor that allows a user to select a custom color including support for transparency.

The MessageBox

Displays a message box that has a message and that returns a result.

The RichTextBox

Extends the System.Windows.Control.RichTextBox control that represents a rich editing control which operates on FlowDocument objects. The RichTextBox control has a Text dependency property which allows a user to data bind content to the RichTextBox.Document property. The RichTextBox control introduces the concept of Text Formatters. Text Formatters allows a user to format the content of the RichTextBox control into any format of their choice. Three Text Formatters are included; PlainTextFormatter, RtfFormatter, and a XamlFormatter. The RtfFormatter is the default Text Formatter. A user can create their own custom Text Formatter by creating a class that inherits from ITextFormatter and implimenting the contract accordlingly.

The ChildWindow – although it is in alpha

Similar to the functionality of a traditional, standard Windows Forms dialog window, the ChildWindow allows you to popup both modal and non-modal dialog windows using C# or XAML.

These controls need to be pulled through the mud, used and abused.  Help me find the bugs and make this toolkit a solid toolset that any WPF developer would want in their toolbox.  please submit all issues to the Discussions section of the Extended WPF Toolkit project site.

The ColorPicker is pretty much self explanatory.  It allows a user to select a color using a color canvas, a hue slider, and an alpha slider for transparency.

This is what is looks like when it is in display mode:

This is what it looks like in edit mode:

It is a pretty simple control for now.  There will be added functionality in the coming future to support entering RGB and HSV values, as well as Hexadecimal values.

There is a SelectedColor dependency property that can be data bound to as follows.

As you can see, I have been hard at work trying to make the Extended WPF Toolkit a successful project full of valuable controls that can be used in your application.  But I will need feedback on the controls to make sure they are meeting the needs of the users.  So please leave your feedback, good or bad, in the Discussions section of the project site.

The RichTextBox extends the System.Windows.Control.RichTextBox control that represents a rich editing control which operates on FlowDocument objects. The RichTextBox control has a Text dependency property which allows a user to data bind content to the RichTextBox.Document property. The RichTextBox control introduces the concept of Text Formatters. Text Formatters allows a user to format the content of the RichTextBox control into any format of their choice. Three Text Formatters are included; PlainTextFormatter, RtfFormatter, and a XamlFormatter. The RtfFormatter is the default Text Formatter. A user can create their own custom Text Formatter by creating a class that inherits from ITextFormatter and implimenting the contract accordlingly.

Usage

When data binding to the Text property, you must use the Text Formatter that matches the format of the underlying data. If your data is in RTF you must use the RTF formatter. If your data is in plain text, you must use the PlainTextFormatter.

This RichTextBox is bound to an object that has a Notes property. The value of the Notes property is as follows in the RTF format:

{\rtf1\ansi\ansicpg1252\uc1\htmautsp\deff2{\fonttbl{\f0\fcharset0 Times New Roman;}{\f2\fcharset0 Segoe UI;}}{\colortbl\red0\green0\blue0;\red255\green255\blue255;}\loch\hich\dbch\pard\plain\ltrpar\itap0{\lang1033\fs18\f2\cf0 \cf0\ql{\f2 {\ltrch This is the }{\b\ltrch RichTextBox}\li0\ri0\sa0\sb0\fi0\ql\par}}}

Using Formatters

To use a different Text Formatter than the default RtfFormatter use the following syntax:

PlainTextFormatter

XamlFormatter

Custom Formatters

To create a custom formatter, create a class that inherits from ITextFormatter and implement accordingly.

XAML

MessageBox

Displays a message box that has a message and that returns a result.

Buttons

Icons

Usage

1. MessageBoxResult result =  Microsoft.Windows.Controls.MessageBox.Show("Hello world!", "Extended WPF ToolKit MessageBox", MessageBoxButton.OK, MessageBoxImage.Question);

Well my solution to that problem is on CodePlex and it is called the Extended WPF Toolkit.  The Extended WPF Toolkit is a collection of WPF controls, components and utilities made available outside the normal WPF Toolkit.  It includes controls that are missing from the WPF Toolkit, or that have been ported over from the Silverlight Toolkit.

Currently there is only one control in it, the BusyIndicator.  It is the same busy indicator that is in the Silverlight toolkit, but for some strange reason never made it into the WPF toolkit.  Hey, WPF developers need busy indicators too!

BusyIndicator

BusyIndicator makes it easy to let the user know when an application is busy. Simply wrap the relavent content in an instance of the BusyIndicator control and toggle its IsBusy property to True during any long-running process.

Do you need a control ported over from the Silverlight toolkit?  Or a control that is used so commonly you think to yourself, “Why didn’t that just ship with Visual Studio?”.  Maybe you have a control you would like to contribute.  Whatever the case may be, place your questions in the Discussions and report bugs or request features in the Issue Tracker.

Help me shape the Extended WPF Toolkit with your feedback!

Go To Value Definition

Have you ever had a control that had a style assigned to it, but had no idea where to find that style?  It could be nested down in some obscure folder path in a ResourceDictionary somewhere.  You would have to do the good-old “ctrl + F” and do a search for it.  Well, no longer.  You can now go to the style value definition just by using the property inspector.

And when you click that magic button, it takes you straight to its definition.

Style Intellisense

A big pain for writing styles is that you have to hope you are setting the correct properties, and not fat-fingering them (misspelling).  Well, never fear, Style intellisense is here.  Never guess which property to use in the setter again.

Grid manipulation with a simple right-click

The source of my biggest headaches comes from the Grid.  Yes the Grid.  Because it can be a real pain to change once you have it created.  Lets say that I have laid out my nice beautiful form, and all of a sudden realize I put a row in the wrong order.  Well, I have to go into my XAML and update all my Grid attached properties for all the controls affected.

Not anymore!  With a simple right-click I can now move, insert, and delete rows and columns from my grid.  I just have to select any control in the row/column I want to manipulate, right-click it, then make my selection.  In this case I chose to move an entire row down one level.

As you can see, not just the control I selected moves, but the entire row moves with it.

As you can see, the Silverlight Tools for VS2010 aren’t just for Silverlight developers.  Even WPF peeps get a little love. 

Check out this video which shows theses features in action.

Recap:

The Silverlight and WPF platforms are very similar, but they do not have binary compatibility; this means that an assembly compiled for one platform cannot execute on the other platform (Although, the story is a little different in Silverlight 4). You may want to target some or all of your application on WPF and Silverlight for a number of reasons.

Due to the fact that Silverlight and WPF are so closely related, the bulk of your application code can be shared between the two platforms. This encourages heavy use of pattern based development to isolate the logic from the presentation and maximize the separation between UI code and non-UI code.

Elements you can share:

• Presenters
• Controllers
• Models
• Services
• Unit tests
• Simple views, if the XAML used is supported by both Silverlight and WPF.

Elements that are harder to share:

• Complex views (XAML)
• Controls
• Styling
• Animation

Like always, if anyone has any questions feel free ask.

Recap:

The Silverlight and WPF platforms are very similar, but they do not have binary compatibility; this means that an assembly compiled for one platform cannot execute on the other platform (Although, the story is a little different in Silverlight 4). You may want to target some or all of your application on WPF and Silverlight for a number of reasons.

Due to the fact that Silverlight and WPF are so closely related, the bulk of your application code can be shared between the two platforms. This encourages heavy use of pattern based development to isolate the logic from the presentation and maximize the separation between UI code and non-UI code.

Elements you can share:

• Presenters
• Controllers
• Models
• Services
• Unit tests
• Simple views, if the XAML used is supported by both Silverlight and WPF.

Elements that are harder to share:

• Complex views (XAML)
• Controls
• Styling
• Animation

Like always, if anyone has any questions feel free ask.

Enter the ICollectionView.  “You can think of a collection view as a layer on top of a binding source collection that allows you to navigate and display the collection based on sort, filter, and group queries, all without having to manipulate the underlying source collection itself.”, says the MSDN documentation. The ICollectionView supports filtering, sorting, grouping, selection, and navigation.

Now the most common way this is used is by creating your collection, populating it with data, then creating an ICollectionView instance from your collection, and then start sorting, filtering, grouping, etc.  The following code show some examples of how to use the ICollectionView.

//get the view

List<MyObject> myList = new List<MyObject>();   

ICollectionView view = CollectionViewSource.GetDefaultView(myList);

//filtering

view.Filter = delegate(object item)

{return item.Contains(searchText);};

//sorting

view.SortDescriptions.Add(new SortDescription("LastName", direction));

//grouping

view.GroupDescriptions.Add(new PropertyGroupDescription("State"));

//selection

view.CurrentItem

But I didn’t want to do this every time I had a collection of data I wanted to navigate. I wanted a single generic collection class that encapsulated all this functionality. So I decided to extend the ObservableCollection to allow for this functionality. So the first thing I need to do is create my class, inherit from ObservableCollection, and then create my constructors.

public class MyObservableCollection<T> : ObservableCollection<T>

{

    public MyObservableCollection(List<T> list)

        : base(list)

    {

    }

    public MyObservableCollection(IEnumerable<T> collection)

        : base(collection)

    {

    }

}

Next I want to create my method to return my instance of ICollectionView.

private System.ComponentModel.ICollectionView GetDefaultView()

{

    return System.Windows.Data.CollectionViewSource.GetDefaultView(this);

}

Now, lets create a property to retrieve the currently selected item in the list.

public int CurrentPosition

{

    get

    {

        return GetDefaultView().CurrentPosition;

    }

}

Now lets create our four methods for navigating the items in the collection.

public void MoveFirst()

{

    GetDefaultView().MoveCurrentToFirst();

}

public void MovePrevious()

{

    GetDefaultView().MoveCurrentToPrevious();

}

public void MoveNext()

{

    GetDefaultView().MoveCurrentToNext();

}

public void MoveLast()

{

    GetDefaultView().MoveCurrentToLast();

}

Now, lets use our new collection. First start off by creating and instance of your custom collection.

MyObservableCollection<MyObject> ProgressItemsList = new MyObservableCollection<MyObject>(data);

In this example I am using a WPF Ribbon to hold my navigation controls, and commanding to execute the navigation methods. The center label maintains the current position and the count of the number of items in the collection.

So now, when I click the Next button I first need to check whether or not I can move to the next record in the command’s CanExecute event.

private bool CanMoveNext(object parameter)

{

    bool canExecute = false;

    if (ProgressItemsList != null)

    {

        int currentPosition = ProgressItemsList.CurrentPosition;

        int lastIndex = ProgressItemsList.Count - 1;

        canExecute = currentPosition < lastIndex;

    }

    return canExecute;

}

If I can move to the next record, then execute the Execute method of the command.

private void MoveNext(object sender)

{

    ProgressItemsList.MoveNext();

}

That is it, and because this is an ObservableCollection, all the changes are notified back to the UI for you automatically. Now you can extend your custom collection even more to customize your sorting, filtering and grouping.

Download Sample Code

I know I covered the subject fast, but I was in a hurry. I had to go to the airport. So here is a quick review.

Event Types:

• Direct events are like ordinary .NET events. They originate in one element and don’t pass to any other. For example, MouseEnter is a direct event.
• Bubbling events are events that travel up the containment hierarchy. For example, MouseDown is a bubbling event. It is raised first by the element that is clicked. Next, it is raised by that element’s parent, and then by that element’s parent, and so on, until WPF reaches the top of the element tree.
• Tunneling events are events that travel down the containment hierarchy. They give you the chance to preview (and possible stop) an event before it reaches the appropriate control. For example, PreviewKeyDown allows you to intercept a key press, first at the window level, and then in increasingly more specific containers until you reach the element that had focus when the key was pressed.

RoutedEventArgs Class:

• Source indicates what object raised the event.
• OriginalSource indicates what object originally raised the event. Usually the OriginalSource is the same a the Source. But in some cases they could be different. For example, if you click close to the border of a window, you will get a Window object for the Source but a Border object for the OriginalSource.
• RoutedEvent provides the RoutedEvent object for the event triggered by your event handler.
• Handled allows you to halt the event bubbling or tunneling process.

Here is a simple example of when you might use a bubbling event:

<StackPanel Hyperlink.Click="StackPanel_Click">

    <TextBlock>

        <Hyperlink NavigateUri="http://www.yahoo.com">Yahoo!</Hyperlink>

   </TextBlock>

   <TextBlock>

       <Hyperlink NavigateUri="http://www.google.com">Google</Hyperlink>

   </TextBlock>

   <TextBlock>

       <Hyperlink NavigateUri="http://www.msn.com">MSN</Hyperlink>

   </TextBlock>

</StackPanel>

private void StackPanel_Click(object sender, RoutedEventArgs e)

{

    Process.Start(((Hyperlink)e.Source).NavigateUri.ToString());

}

So instead of having to create an event handler for each hyperlink, or creating a single event handler and pointing each hyperlink to the same event handler, I can use one event handler on the parent element.