WPF Sample Apps — Stock Market Demo Update with New Charting Features and More (v20.1)

As you may already know, our demos include sample applications that replicate potential real-word usage scenarios. In our last major release, we updated our WPF Stock Market demo and extended its capabilities. In this post, I’ll summarize some of the changes we made and ask for feedback from those of you in the finance sector. We’d love to hear your thoughts as we want to refine this demo further in future builds.

If you have the WPF Subscription v20.1 installed, you can launch the demo by selecting the following link below:

dxdemo://WPF/StockMarketTraderDemo

WPF Charts

The primary view within the Stock Market app is the Trading Chart. As you’d expect, we used our WPF Chart control’s Candle Stick Series for prices and Side-by-side Bars for sales volume. Series use panes to help generate advanced layouts.

Our WPF Chart control was configured to display up to 1200 series points at any point in time. Use your mouse scroll wheel to zoom in and out as needed.

The crosshair is a built-in feature. By default, the crosshair displays content within in a label. In this sample app, we chose to display crosshair content in a legend above the chart to avoid UI clutter.

The Toolbar is a new addition to our WPF Chart control. In this demo, the Toolbar allows users to add indicators/annotations and specify the desired time interval.

The Market Depth view is a new addition to the demo. To create this view, we used our WPF Chart control to display two Step Area series – one bids (buy orders) and the other for asks (sell orders).

WPF Grid

We used our WPF Data Grid to display raw data on the right side of the screen. Order Book consists of two grids, one atop the other. Sorting was disabled, and each time the data source updates, the MoveLastRow and MoveFirstRow methods scroll both grids to the most recent record.

Conditional formatting helps improve data visualization and readability.

App Layout

We used our WPF Tab control to organize individual UI elements. Each market stock is displayed within a separate tab. You can drag a tab outside the panel to create a new window.

When you click the new tab button, it displays a popup menu with available stocks. This menu is a custom ControlBoxPanelTemplate and it displays a GridControl.

The WPF Tab control is integrated into a ThemedWindow. ThemedWindow supports DevExpress themes and provides numerous customization options. For instance, we placed the InformationPanel view in the HeaderItems collection to display market trends.

MVVM

We used the DevExpress MVVM Framework to build our views and view models. This framework allows you to skip tedious steps – such as notification and commands implementation. DXBinding and DXEvent markup extensions give you easy-to-use syntax to bind views and view models as needed.

Your Feedback

As mentioned earlier, we’d love your feedback on this demo. How would you improve/extend the UX? What can we do to improve this demo? Which DevExpress WPF control would you like to see incorporated?

Free DevExpress Products - Get Your Copy Today