Q & A

Q1. When is this free training available?
A1. The entire weekend of Nov 12th 2011 through Nov 14th 2011.

Q2. Do I have to be a Pluralsight subscriber to get this awesome training?
A2. This training will be freely available to everyone. You do not have to be a subscriber.

Q3. What does the course cover?
A3. Well let’s take a look:

• Getting started with Prism
• Bootstrapper and Shell
• Regions
• Modules
• Views
• Communication
• State-Based Navigation
• View-Based Navigation

More course information.

Q4. Who is the author of this kick ass Prism course?
Q4. That would be me.

Q5. Is it really free?
Q5. You’re kidding right? Didn’t I already cover this part? Yes, it is free.

New and Improved

If you are a subscriber and have already watched the course, I would like to bring to your attention that there have been two new modules added.  These modules will cover everything you need to know in order to start using the navigation services provided by Prism.  This includes state-based navigation and view-based navigation.

Mark your calendar for Nov 12th and be sure to cram as much Prism knowledge into your brain as you can before the weekend ends.  Don’t worry, if you run out of time you can always ask me questions directly.  You can contact me either through Twitter (@brianlagunas) or through the Extended WPF Toolkit project site.  I hope you enjoy the training.

Specifying Properties

Custom Editors

• CheckBoxEditor
• CollectionEditor
• ColorEditor
• DateTimeUpDownEditor
• DecimalUpDownEditor
• DoubleUpDownEditor
• EnumComboBoxEditor
• FontComboBoxEditor
• IntegerUpDownEditor
• ItemsSourceEditor
• PrimitiveTypeCollectionEditor
• TextBlockEditor
• TextBoxEditor
• TimeSpanEditor

Custom ItemsSource

Expandable Properties

Conclusion

Let’s begin by defining what the BusyIndicator is used for.  The BusyIndicator is used to give an application user a visual indicator that a long running process is occurring.  So from this definition we can make two assumptions. One; There must be a mechanism for notifying the BusyIndicator when the long running process begins and when it ends.  Two; the long running process will have to occur on a separate thread as to not block the UI.

Anatomy of the BusyIndicator

The first thing you need to do when using any control inside the Extended WPF Toolkit is add a namespace declaration to the consuming view.

The BusyIndicator is a ContentControl.  What this means is that the BusyIndicator can contain a single child element within it’s open and closing tags.  For example:

Looking at this code snippet you can see that the Grid is the BusyIndicator’s Content.  If you were to place anything outside of this Grid element you would receive an exception.

The BusyIndicator has two visual states:

Not Busy:

Busy:

Toggling between these states is as simply as setting a single property called IsBusy.

When the BusyIndicator.IsBusy property is set to True, the BusyIndicator becomes visible and prevents any user interaction with the BusyIndicator’s Content.  So any elements that you have defined within the Content of the BusyIndicator will be disabled.  When the IsBusy property is set to False, the Content re-enables and user interaction can continue.

The Common Problem

The most common problem I see when people are having trouble using the BusyIndicator is that they are doing everything on the UI thread.  Let’s look at an example:

The event handler for the button looks like this:

Now the assumption is that first the BusyIndicator will be shown, then the long running process will occur, and lastly the BusyIndicator will be hidden.  To most people’s surprise it doesn’t work.  The BusyIndicator never shows and the UI is not responsive.  Do you see the problem?  The problem is that everything is running on the UI thread.

Solution

As we have already stated, the long running process must occur on a separate thread.  The UI thread needs to stay responsive while the process is running.  The most common method to place a long running process on a separate thread is to use the BackgroundWorker.

Let’s modify the event handler to utilize a BackgroundWorker.

Examine the code.  First we create an instance of a BackgroundWorker and add delegates for the DoWork and RunWorkerCompleted events.  The DoWork hander is where the long running process should go.  NO DIRECT INTERACTION WITH THE UI IS ALLOWED.  The RunWorkerCompleted handler is code that will run when the long running process has completed.  This is where you can interact with the UI again, meaning that this would be a perfect place to set the IsBusy property to False.  After the long running process has finished.  Now pay special attention to where we are calling RunWorkerAsync.  Just before that call, we are setting the IsBusy property to true.  Then the call to RunWorkerAsync is made.  This will show the BusyIndicator and then start the long running process.  When the process is complete the BusyIndicator is hidden again.  Perfect!

Common Problem 2

The next common problem is dealing with using data that is generated on the background thread in the UI.  Well if you read my post on multi-threading then you should already know how to solve this one.  If you haven’t, I will show you again.  This scenario requires that our UI have a ListBox control that is populated with items on a background thread.  While the items are being populated, the BusyIndicator should show the user something is happening and that they need to be patient.  Let’s modify our UI and our code behind to support his new scenario:

This is similar to what the problem cases look like.  This code will most definitely fail.  Remember, you cannot access any UI elements on a separate thread.  Now let’s modify this code to make it run correctly.

Solution

First we had to remove any reference to a UI element from the DoWork handler.  Now in order to propagate the generate list of strings back to the ListBox we enlist the help of the Dispatcher.  The Dispatcher will take the collection of strings, and in a thread safe way, give them to the ListBox for consumption.  Our BusyIndicator will be shown while the collection is being generated, and then be hidden when the process has been completed.

That about wraps it up.  These are the most common troubles developers have had using the BusyIndicator control.  If you have different problems that you haven’t been able to solve, feel free to post your question in the Discussions page of the project site.  You never know, it may be worth blogging about.

1. Get the Bing Maps WPF control.
2. Get a Bing Maps API key.

You MUST have a Bing Maps API key in order to use any of the SOAP services.

For this application we will be using the Geocode Service and the Route Service.  The Geocode service is used to match addresses, places, and geographic entities to latitude and longitude coordinates on the map, as well as return location information for a specified latitude and longitude coordinate.  The Route service is used to generate routes and driving directions based on locations or waypoints.

Now that you have that out of the way let’s write an application. Create a new WPF application targeting the .NET 4.0 framework. Add a reference to the Microsoft.Maps.MapControl.WPF.dll. This will most likely be located in Program Files or Program Files (x86) –> Bing Maps WPF Control –> Beta –> Libraries.

Open up your App.xaml. You need to add an ApplicationIdCredentialsProvider as a resource and enter your ApplicationId:

We need to add the Geocode and Route service to our application.  First, let’s start by adding the Geocode service.  Right click the project and select “Add Service Reference”.  Use the following address:

http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc

Give your service a name. I called mine BingServices.  Now we need to add the Route service, but we don’t want to add a separate service reference.  Ideally we would have a single service that contained both the Geocode and Route services.  Luckily there is a trick we can use to do just that.  Select the Project and click the “Show All Files” button at the top of the Solution Explorer.  Expand the Service Reference folder and then expand the BingServices service.  Look for a file called Reference.svcmap. Open the References.svcmap and locate the MetadataSource node.  It will loko something like this:

Simply add a new MetatdataSource as follows:

As you can see we added a new MetadataSource that points to the Route service and we gave it a SourceId of 2.  Now right click the service and select “Update Service Reference”.  This will generate a single service proxy for both the Geocode and Route services.  Pretty slick huh?

The next step will be to create a ViewModel that will contain an ICommand that will execute the route calculation, properties that will represent a “To” address and a “From” address.  We will also need a property for the RouteResult and for the directions we generate.  Lets first create our Direction object:

Now we will need a make-shift delegate command (do not use in production code):

Now on to the ViewModel itself:

Let’s walk though the CalculateRoute Method.  First we geocode the “From” and “To” properties the same way we did in the geocoding post.  Once we have our From and To locations we use those results to generate a RouteRequest and send that request to the Route service.  The service will generate a result and we set our RouteResult property accordingly.  This property will be used in data binding shortly.  Next we generate an ObservableCollection<Direction> by looping through all the ItineraryItems in the result. 

Now that we have generate all of our data, we need to create a View that supports and displays this data, but before we do that we need to create some attached properties.  Why do you ask?  Well because as it stands, the Bing Maps WPF control is not data binding friendly.  So we need to enable data binding with the use of attached properties.  We will need an attached property for the Route result which will be responsible for drawing the route line on the map.  We will also need one for the MapLayer that will be used to contain the route line.  Here is the code:

The RouteResult property simply creates a MapPolyline, loops through all the points in the result and adds the locations to the route line.  It then gets the RouteLineLayer and adds it to the map.  Lastly, it sets the map’s view to best fit the route line.

Now we are ready for the View:

Oh and don’t forget the code behind:

Now let’s view the fruits of our labor at runtime.

As you can see, given a “From” and “To” address, we can draw a route line and provide turn-by-turn directions as the user hovers over the direction pins.  Pretty neat huh?  And it wasn’t too difficult to pull off.  As always you can Download the Source and start playing.

The concept is simple.  We want a Bing Maps application that can be extended at runtime.  By extended, I mean that I want the ability to add new elements/modules to the Map at runtime.  The important thing about these elements/modules is that they can come from anywhere and they should be loosely coupled from the Map as well as other elements/modules that may exist on the Map.

Luckily for us this is extremely simple to accomplish.  All we have to do is create a custom RegionAdapter, register it with our Prism application, and then apply it to our Bing Map control.  So let’s start with the RegionAdapter.

Now in the Bootstrapper we need to register our mapping.

Now we simply give the Map a region name. (this is actually all the shell has in it)

That is all there is to it.  You can now start injecting modules onto the Map at runtime.  Lets look at my two modules I am using as an example.  Here is the structure of my application:

• ModuleA will inject a MapPolygon in the Shape of Texas.
• ModuleB is the Earthquake application we built in an earlier post.
• Infrastructure is the project where shared code goes, in this case our MapRegionAdapter
• BingMapsPrismfiedDemo is of course our shell project.

This is what the application looks like at runtime when both modules have been injected into it.

Now I can easily add more layers to this map as I see fit.  As always, Download the Source and start playing.  You may want to add MEF support as well.

Let’s start with the Geocode Service which is used to match addresses, places, and geographic entities to latitude and longitude coordinates on the map, as well as return location information for a specified latitude and longitude coordinate.  We will create a simple application that allows you to enter an address and place a pushpin at that location.  First thing is first:

1. Get the Bing Maps WPF control.
2. Get a Bing Maps API key.

You MUST have a Bing Maps API key in order to use any of the SOAP services.  Now that you have that out of the way let’s write an application. Create a new WPF application targeting the .NET 4.0 framework. Add a reference to the Microsoft.Maps.MapControl.WPF.dll. This will most likely be located in Program Files or Program Files (x86) –> Bing Maps WPF Control –> Beta –> Libraries.

Open up your App.xaml.  You need to add an ApplicationIdCredentialsProvider as a resource and enter your ApplicationId:

Now create a very simple UI that will accept an address and a button to perform the geocoding:

The next thing we need to do is add a new Service Reference to the project and point to the following service:

http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc

Give your service a name (I called mine BingMapsService) and just for fun, in the “Add Service Reference” dialog, click the “Advanced” button and click “Generate asynchronous operations”.

Next we need to create a ViewModel to support our View.  This is a WPF application after all.  This ViewModel will need a command for the button that will perform the geocoding, and a property that will represent the result of the service that the UI will use to map the address.  It should resemble something like this:

I want to point out that the DelegateCommand<T> is a very simple ICommand implementation and should NOT be used in production applications.  Here is the code:

Let’s hook our UI up to our command.  it should look something like this:

Notice that we are using the text of the TextBox as the CommandParameter.  Next, we need to implement the command:

In this command we are simply creating an instance of the service client, creating a GeocodeRequest, setting the credentials using the ApplicationId we have stored in the App.xaml, and then using the address as the Query for the request.  When the call to the service is completed we are setting the GeocodeResult property to the first element in the results.

Now the tricky part.  We want to place a Pushpin on the address that was entered and then move the map to that location.  We also need to make sure that when another address is entered, we clear any previous Pushpins that may exist on the map.  We also have to be aware that other elements my be on the map and we don’t want to accidentally alter those elements.  Oh and did I mention this was an MVVM application and this has to be done with just data binding?

The approach that I decided to go with is to use Attached Properties.  So I created two attached properties; one for the GeocodeResult and another for a MapLayer that will be dedicated to the GeocodeResult.  This will allow us to create a MapLayer that is specific to our GeocodeResut and not alter any other elements that may be on the map.  Let’s check out the code.

Notice that when the GeocodeResult changes we get the Location and create a pushpin for that location.  We also set the tooltip to the FormattedAddress of the GeocodeResult.  So when we hover over the pushpin we will see a nice little tooltip of the address.  Next we try to get the GeocodeResultLayer from the map, if it is null this means it doesn’t exist on the map yet so we create one and assign it accordingly.  We clear the layer child elemnts and then add out pushpin.  The last thing we do is call the SetView method of the Map control passing in the location and the current ZoomLevel.

The final step is to use our AttachedProperty on the map.  Be sure to create a namespace for the MapInteractivity class and define it as follows:

One last thing.  Be sure to remember to set your DataContext of your View to the ViewModel we have created:

That’s it.  You now have an application the can map (geocode) an address using the Bing Maps WPF Control and the Geocoding SOAP Service.  Oh and we are doing this all with MVVM and data binding which is my favorite part.  Be sure to Download the Source and start playing around.

1. Get the Bing Maps WPF control.
2. Get a Bing Maps API key. (not needed for development)

Now that you have that out of the way let’s write an application.  Create a new WPF application targeting the .NET 4.0 framework.  Add a reference to the Microsoft.Maps.MapControl.WPF.dll.  This will most likely be located in Program Files or Program Files (x86) –> Bing Maps WPF Control –> Beta –> Libraries.  Next you need to declare a namespace in XAML:

Not much to look at, but it’s definitely a map. Notice that because we are not using an API key we get a nice little message that tells us where to get one.  Well this is great and all, but we want to see earth quakes!  So let’s start doing the real coding now. We know we will need an object to hold information about the earthquakes.

That should take care of that.  Next we need data about earthquakes and their locations.  Luckily for us there is a free resource available to grab this information from USGS.  So let’s write a simple service to get this information:

The last thing we need is a ViewModel that will expose our earthquakes from consumption by our view:

Don’t forget to set the DataContext of the view to our ViewModel:

Here is what you will see when you run the application:

HEY! Where the hell are my earthquakes?  This thing sucks!  Piece of sh….. Oh wait, I need to tell the map how to render the earthquakes.  So we need to create a DataTemplate:

And don’t forget to specify the ItemTemplate:

Now let’s see what we get when we run the application:

Hey look! Earthquakes.  That is so cool. But wait, I want to see information about the earth quake.  Preferably in a popup when I hover over a Pushpin.  Well Lets wire that up real quick.  First we need to add a MapLayer to the map that will act as our popup:

Now we need to add some event handler to the ItemTemplate.

We have added two event handlers; one for when we mouse over and the other for when the mouse is no longer over the pushpin.  Notice that I am storing the bound item in the Tag of the Pushpin object.  We will need that to change the location of popup.

Now when we hover over the Pushpin we get some useful information about the earthquake:

That’s it for this application.  The Bing Maps WPF Control has been a long awaited control and I am glad it finally made it to WPF.  As you can see it is pretty easy to use as well.  Now you can Download the source and start playing.

CheckListBox

The CheckListBox control is a ListBox in which each item is represented with a CheckBox. The CheckBox.IsSelected can be data bound using the CheckedMemberPath property. The CheckListBox also provides a Command property which will execute everytime an item is checked/unchecked. The CommandParameter is the recently checked/unchecked item.

CollectionEditor

The CollectionEditor is exactly what it sounds like.  It is a control that is used to edit collections the implement the IList interface.

CollectionEditorDialog

The CollectionEditorDialog is basically the CollectionEditor stuffed inside a Window.  You could have probably done this yourself, but I figured I would save you the trouble.

DropDownButton

The DropDownButton control is a button that when clicked displays a drop down in which you can place any custom content within.

MultiLineTextEditor

The MultiLineTextEditor is a ComboBox that, when opened, provides a drop down text editor.  This is useful for those scenarios when you want to provide you user with a way to edit a large amount of text, but without the need for a TextBox that is a mile long or mile high.

PrimitiveTypeCollectionEditor

The PrimitiveTypeCollectionEditor is a collection editor that is meant for use with a IList of primitive types such as String, Int, Double, etc.  Items are represented by a new line.  The following example is bound to a List<String>.

Wizard

This is another control that is self explanatory.  You simply create various WizardPages to represent you flow.  Each Wizard page has a PageType which specifies if it is a blank page, interior page, or an external page.  The PreviousPage and NextPage properties are for navigation.  If you do not specify a PreviousPage or NextPage, the Wizard will use indexing for navigating between pages.

Sample Application

There is also a new sample application that will show basic usage of each control.  Over time I will add new and more advance samples. You can always request a sample to be added.

You will be able to see the XAML:

As well as any C# code:

I know the documentation on these controls are lacking but these controls will be documented in more detail in the coming weeks or as soon as I can get to it.

As you can see I have been hard at work trying to make the Extended WPF Toolkit the most functional, feature rich, and FREE open source WPF toolkit available.  Please be sure to submit bugs or request new features in the Issue Tracker, and ask any questions or to get support in the Discussions.  I would like to thank the community for all the feedback and support you have given this project.

Calculator

The Calculator is a control used for performing mathematical calculations.

It provides basic math functions, memory functions, as well as mouse and keyboard support.

CalculatorUpDown

The CalculatorUpDown provides a TextBox with button spinners that allow incrementing and decrementing numeric values by using the spinner buttons, keyboard up/down arrows, or mouse wheel. It also provides a Calculator dropdown which allows you to perform mathematical calculations.

ColorCanvas

The ColorCanvas allows you to select a color either using an advanced color canvas, by setting the HexadecimalString, or by setting the ARGB values.  This control has also been merged with the ColorPicker to provide advanced color editing abilities.

DateTimePicker

Get the best of both worlds. The DateTimePicker provides a DateTimeUpDown control as well as a dropdown with a calendar and a TimePicker.

DecimalUpDown

The DecimalUpDown control provides a TextBox with button spinners that allow incrementing and decrementing Nullable<Decimal> values by using the spinner buttons, keyboard up/down arrows, or mouse wheel.

When using the DecimalUpDown in data binding scenarios, bind your object’s value to the Value property. You can specify how much to increment the value by setting the Increment property. You can control the minimum and maximum allowed values by setting the Minimum and the Maximum properties. You can also specify if the user can directly edit the values in the text box by setting the IsEditable property. If you would like to get the actual fromatted string representation of the value, you can use the Text property.

DoubleUpDown

The DoubleUpDown control provides a TextBox with button spinners that allow incrementing and decrementing Nullable<Double> values by using the spinner buttons, keyboard up/down arrows, or mouse wheel.

IntegerUpDown

The IntegerUpDown control provides a TextBox with button spinners that allow incrementing and decrementing Nullable<int> values by using the spinner buttons, keyboard up/down arrows, or mouse wheel.

PropertyGrid

The PropertyGrid is a pure WPF replacement for the WinForm PropertyGrid control.  Currently the PropertyGrid is in beta and still has a lot of work to be done on it.  But it is ready from simple use and testing.

SplitButton

The SplitButton control is a button that can be clicked and also provides a drop down in which you can place any custom content within.

TimePicker

The TimePicker is a control that is specifically for the Time portion of a DateTime property.  It provides a ButtonSpinner as well as a list of times to choose from.  You can also manually type in the time as long as it matches the specified format.

WatermarkTextBox

The WatermarkTextBox is simply a TextBox that allows you to sepcify an object, usually a String, to represent null or missing text.  Don’t think you are limited to just text!  With this control you may use any object as a watermark.  Here is an example using an image with text:

Also, all input controls in the Extended WPF Toolkit now provide a Watermark option.

That’s it for the new controls.  I hope you enjoy version 1.4.0 and be sure to report any bugs or request new features in the Issue Tracker.  As always if you have any questions be sure to ask them in the Discussions.

This post is intended to get you started in using jump lists in an advanced implementation, and is not meant to be an all inclusive solution for all problems you may run into.  The problem we will solve with this post is how to open another part of an application that is already running based on the jump list item the user clicked.

Outlook for example has a number of tasks that be performed using the jump list:

The first thing we need to do is ensure that our WPF application is a single instance application.  Meaning that only one instance can run at once.  We want to retain any state that the user may be in and perform any related tasks with the jump list, so we want prevent opening a new instance of the application and work with what is currently running.

There are a couple of ways to create a single instance application.  One involves using Windows Forms classes, but since I don’t want to pollute my WPF application with WinForms I will use an implementation from a Microsoft reference application.

Single Instance Application

First thing you need to do is add the SingleInstance.cs file to your application.  This class provides all the hard work that is done for you. 

Next you need to add a reference to System.Runtime.Remoting to your project. 

Now have your App.xaml.cs class implement ISingleInstanceApp.  There is only one method in this interface called SignalExternalCommandLineArgs that provides an ILIst<string> as a parameter.  It is called when a second instance of your application tries to run.  The args parameter is the command line arguments passed to the second instance.

The next step is to define your own Main function that will use the SingleInstance<TApplication> class and an Init method.  Your application class should look something like this:

Now this next step is VERY IMPORTANT. You need to change the Build Action of the App.xaml to Page.

That’s it for the single instance application.  Now only one instance of you application will run at one time.

Adding a Jump List

Now that we know we will only have one instance of our application running, we need to create our jump list.  For this post we will have a simple Hello and Goodbye JumpTask as follows.

Notice that we are using reflection to get the location of our application.  We are also passing an string to the Argument property of the JumpTask object.  This is what we will use to know what action to perform.

Responding to JumpTasks

So now we have a single instance application and our JumpList is defined.  Next thing we need to do is respond when a JumpTask is clicked.  To do that we need to do two things.  First we need a method somewhere that will perform the action.  The method will need to return a bool because it will be called from the SignalExternalCommandLineArgs method in the App.xaml.cs.  In this example I will create it on the MainWindow.

Now this method is going to be called when a second instance is created and the SignalExternalCommandLineArgs method is run:

Conclusion

As you can see the most complicated part of this whole thing is making sure we have a single instance application.  The rest is pretty easy.  I know this post doesn’t cover every single scenario of using a jump list, but is should give you the start you need to start solving those problems.

Be sure to download the source and start playing around with the code.