BreckonWorld.com

Create the class diagram for the Stock class by right-clicking on the Stock class in the solution explorer.

By playing around with some of the “Hide Compartment” options it is possible to create a class diagram showing the properties and the StockState enum type. This diagram can then be shared with the designer to allow them to understand the structure of the Stock data.

It is now time to start creating the basic template. This requires direct editing of the XAML (I’ve not found any other way of doing this). Firstly add a reference to the StockQuote application code namespace using xmlns:local=”clr-namespace:StockQuote”. The  next section defines a basic data template in a general resources section for our current window. A DataTemplate defines the way in which a data type (such as our Stock class) will be displayed. The DataType parameter connects the template to the Stock class. The graphical representation will consist of a single TextBlock bound to the Symbol property of the Stock.

This gives us the following output:

This is just the beginning. The next graphical thing to do is to add a border around the text. The Border definition has quite a few properties to play around with - I’ve just used the basics here.

That gives the following:

Unfortunately the list box selection bleeds through the back of our items. The only way I’ve found to do this so far is to create a white background that spreads slightly outside the current item to erase the selection colour.

It is very straightforward to add gradient brushes to the background.

… and the finishing touch of a DropShadow bitmap effect.

That is it for the basic visual template. Next time it’s briefly back to some code to ensure we download the data and then we can play with the graphical template to our heart’s content.

Add a new class called “Stock”

In order to allow the framework to automatically update when properties on this object are set, the class should be derived from IPropertyNotifyChanged (this is defined in System.ComponentModel). This interface requires that a PropertyChanged event handler is defined. An OnPropertyChanged method is also added to remove the amount of copy and pasted code required when adding new properties.

I had a play with the stock service responses and decided that it was possible to detect a number of conditions. This is added as a public enum called StockState.

Looking through the stock service response it is possible to generate a list of available properties for a stock. Unfortunately when adding these properties to the class it isn’t possible to use the new shiny simplified get/set syntax as we need to add code to notify of the property changes.

Here is one of the properties:

There are several other properties that need to be added:

Name, Symbol, QuoteDate, QuoteTime, QuoteLast, QuoteChange, QuotePercentageChange, Open, High, Low, PreviousClose, AnnualRange

Once these properties have been added then a constructor is added to set the initial state and the requested symbol. The requested stock symbol is used to create the stock service query and is replaced by the stock symbol returned. I don’t believe that the symbol returned will be different from the requested symbol but you never know I guess.

I’ve deliberately not gone into the detail of the Update() method because it creates a service query, retrieves the XML and extracts the data from it. This isn’t really part of the WPF framework and you’ll be able to view it in the source code.

Adding settings

This is a general .NET feature that I didn’t use enough before deciding to learn a bit about it for this project. The framework has built in handling for settings on a per-user or per-application basis.

Double click on the Settings.settings item in the Properties folder.

The settings editor appears, enter the setting name “StockNames” and change the data type to a string collection.

Clicking the “…” button in the “Value” field will open the String collection editor dialog. Enter the list of stocks that you wish to appear.

So far, we have defined a stock class with various properties and a list of stock symbols. We now need to define a collection of stock objects that is initialised using the stock symbol list. I’ve just added a new class in the Stock.cs file:

The next thing to do is to create a list box to attach the data to. The following XAML definition creates a list box that takes it’s items from the data context that it is given.

Once the list box is setup, I deleted the handlers and delegate created last time and added the following code to the Window1.cs file.

This should now build and run to produce the following exciting output:

What is happening here? The framework is picking up the StockQuote.Stock items but hasn’t been told how to display them. In the absence of this information it just calls ToString() and displays the resulting text.

Surprisingly enough we’ve done more than enough now to pass on the structure to our designer who will create the visual templates. This will be the topic of the next post.

Creating the WPF application

This is very easy thanks to the New Project wizard in VS2008. Just select “WPF Application”, enter a name and press Ok.

Change the title of the application in the XAML window by just typing “StockQuote” in place of “Window1″

Adding the Service Reference

Right click on the “References” item in the Solution view and select “Add Service Reference”.

Type in the URL of the web service description file, in this case http://www.webservicex.net/stockquote.asmx?wsdl. Enter a name for the namespace that will be used in the code to access the web service.

Once you click “Ok” VS2008 downloads the service description and creates all the necessary code behind the scenes to access the web service.

The service reference appears in the Solution tree.

Using the Web Service

Firstly create a Button and a TextBlock somewhere on the form using the designer. I’ve changed the background colour of the TextBlock to make it easier to see and to add some variety.

As you make changes in the editor the XAML will be automatically updated.

Make sure the TextWrapping property on the TextBlock is set to Wrap so that we can dump the data that comes back from the web service into it.

Double click on the button to add a click handler.

Add the following code to the button handler. We create a StockQuoteSoapClient object within the web service namespace that we created earlier. This already has a “GetQuote” method defined and we simply pass in the stock symbol that we want to retrieve information about.

Once the application is built and run, click the button and after a brief pause some XML data from the stock quote service should appear in the text block.

You may have noticed that the whole application stopped whilst the data was downloaded from the web service. This is because we made the call on the User Interface thread. When using WPF you should avoid doing this as it will provide a poor user experience.

 Multithreading

Fortunately multithreading in WPF is relatively easy. By using BeginInvoke we can make an asynchronous call to a method. The code in button1_Click calls the local GetQuote method asynchronously and returns to the UI thread immediately allowing it to continue responding to the user. The GetQuote method is then running on a separate thread and must use the Dispatcher.Invoke method to update the Text property of the text block (as that can only be updated from the User Inteface thread). Try the application again and you should be able to click the button and move the window around without it freezing whilst the data loads.

 This part of the StockQuote WPF series has been relatively basic and is far from complete. I’ll be building on the application in the coming posts. It is left as an exercise for the user to add exception handling (in the case of a failed connection) or to add a more dynamic selection of the stock symbol to download.

Next time: Extracting the quote data

This is the first of a series of posts providing an introduction to WPF.

I’ll be talking through how to create a stock quote application from scratch.

This is what the end result will look like (I’m not a great designer but I don’t think it’s too bad):

Each quote has different states - Connecting, Connection Failed, Unknown Stock Symbol, Market Closed and of course normal conditions. Each state has a separate display style.

Connecting

      
The attached .zip file includes the application but not any source code. I’ll release the source code once the series has been completed.

StockQuote.zip

This application uses the webservicex.net free stock quote service. I can’t provide any guarantees for it’s accuracy or availability.

Next post: Creating a new WPF application & linking to the Stock Quote service
 

I’m launching this blog again but with a different focus. Previously it was about business, MicroISVs, programming, and general life. This time it is just about technology and software.

The technologies I’m focussing on are C#, the .NET Framework including WPF, WCF and WWF. Why am I focussing on Microsoft technologies? Once upon a time I was a Unix & Linux user (I even began to put together a Linux box using the Linux From Scratch project) but I’m pragmatic - if I want to write great software and share it with as many people as possible then Microsoft provide the platform, tools and support to do that.

My current day job requires me to use C++ and MFC in a very 1990’s fashion. Although I believe that C++ and even MFC still have an important part to play in today’s technology world, I want to explore the other options that are available when creating new projects.

I’m going to share my journey as I explore the benefits, high points and low points of the current range of technologies.

I’ll be starting with a few posts about getting started using WPF.