S#.UI - StockSharp Graphic Framework

S#.UI - StockSharp Graphic Framework


image3979.png

In this paper, I will show how to use graphic components included in S#.API, in order to create a fully-featured application of the S#.Shell:

You will learn how to make a professional-level program with connection settings, output of securities, prices, and charts (and all this is saved and loaded upon restart). And the complexity of creating such an application is not a few months, but just a few hours (it is no joke! read to the end). This is the main advantage of the graphic framework, which I called by analogy S#.UI (this name is unofficial, I think it up myself).
I will not use complex constructs and design patterns that are understandable only to professional programmers. On the contrary, the paper's purpose is to show that the learning curve on creating your trading applications using S#.API is very short.
You will also be interested if you work in a company and make your own unique software (for example, you work in proprietary trading or a brokerage company). In this paper, you will be able to learn the practice of creating such systems (especially if you have just taken up your duties).

What You Need


1) Visual Studio 2017 (Community, free version), in which we will program.
2) Free connection to test exchange trading, I will use QUIK.

Creating Project


We create a new WPF application in Visual Studio.
image5545.png
After that we need to add the S#.API libraries, and how to do this is described here. I prefer installing with Nuget.
Since all S#.API graphic elements are based on DevExpress, and DevExpress libraries are included in S#.API, it would be foolish not to use them. All information about DevExpress graphic elements can be found in Google.
Let's go to the MainWindow.xaml window editor.
image4259.png
We replace Window with DXWindow, we will need it to use different color schemes.
image4329.png
Visual Studio will prompt us to add the necessary libraries.
We split the window into three parts, there will be a bar with buttons of connection setting and connection at the top. The window with logs will be below. All other panels are in the middle. The easiest way is to split the window in this way using LayoutControl from DevExpress.
We will add the elements we need to the resulting three parts.
image2275.png

Configuring Connection to Connector


We add two buttons, one button to configure connection and the second button to connect. To do this, we use the SimpleButton button from DevExpress. The buttons will be located at the top of application. We will place pictures familiar with Terminal and Designer on each button.
image9977.png
We will see such an image in the upper right corner of the screen form.
image1157.png
We double-click each button to create button click event handlers.
In MainWindow code it is necessary to declare the connector, as well as the file location and name where the connector settings will be stored.
image836.png
We will open the connector configuration window in the connector settings button click event handler and save it to a file.
image1289.png
We will check in the constructor whether there is a directory and a file with the connector settings and, if there is one, we will load it into the connector.
image3497.png
Most S#.API objects have Save and Load methods, with which it is possible to save and load this object from an XML file.
We connect the connector in the connection button click event handler method.
image6463.png
Now we can run the program and test it.

Setting Dark Theme


I prefer a dark theme. Therefore, we make the program theme dark at once. To do this in the App.xaml file
image1012.png
We replace Application with charting:ExtendedBaseApplication. Visual Studio will prompt us to add the necessary libraries. And in the file App.xaml.cs delete ": Application". The code will be the following.
image4777.png
image9701.png
We write ApplicationThemeHelper.ApplicationThemeName = Theme.VS2017DarkName in the MainWindow constructor;
Full code at the moment:
image8484.png
Run to check the dark theme.
image1199.png

Creating Security Panel


We add the XAML folder where we will store all the created controls.
We add our first UserControll to the folder, let's call it SecurityGridControl.
image5159.png
We add one SecurityPicker element to it. In which the available securities will be displayed. Similar to the main window, we will use LayoutControl from DevExpress.
image2385.png
We go to the main window constructor and change the central part to the tab view. We place created control with SecurityPicker in one of the tabs.
image5375.png
Now we have the security panel, we need to set it a data source, in our case it is a connector. It was possible to write SecurityPanel.SecPicker.SecurityProvider = Connector in MainWindow constructor.
But we will not place code in the MainWindow that is not related to it. Therefore, I will create the Instance static variable, and assign it the MainWindow value in the MainWindow constructor.
image1508.png
Now we can call the MainWindow properties anywhere in our program using MainWindow.Instance.XXX code.
In the SecurityGridControl constructor, we specify Connector as a data source.
image6003.png
We run the program to check.
image8483.png

Adding Logging


The operation of the program, connector or robot must be monitored. For this purpose, S#.API has a special LogManager class. This class receives messages from sources and sends them to listeners. In our case, the sources will be Connector, strategies, etc., and listeners will be a file and log panel.
In the MainWindow code, we declare the LogManager object and the location where it will be stored.
image3414.png
In the MainWindow constructor, we create LogManager, set in it Connector as the source, and a file as the listener.
image5931.png
Similar to the security panel, we create a log panel, add another UserControl to the XAML folder. We call it MonitorControl. We add the Monitor element to it.
image4717.png
In the MonitorControl constructor, we set Monitor as a listener in LogManager.
image8141.png
We add the created MonitorControl to the bottom of MainWindow.
image5572.png
We run the program to check.
image6299.png

Creating Portfolio Panel


Similar to the security panel, we create a log panel, add another UserControl to the XAML folder. We call it PortfolioGridControl. We add the PortfolioGrid element to it.
image68.png
In PortfolioGridControl constructor, we need to subscribe to new portfolio appearance events and event of new position appearance at Connector.
image1333.png
Thus, when a new portfolio appears, it will be displayed in the portfolio panel, and when a new position appears in the portfolio panel, the portfolio will update the position.
We add the created PortfolioGridControl panel to the central part of MainWindow.
image127.png
We run the program to check.
image3862.png
We have a tab with portfolios.

Creating Order Panel


The order panel in S#.API has the ability to register orders, cancel orders and reregister them.
Similar to the security panel, we create an order panel, add another UserControl to the XAML folder. We call it OrderGridControl. We add the OrderGrid element to it.
image4502.png
OrderGrid has the OrderRegistering event, the OrderReRegistering event, and the OrderCanceling event.
Let's create their handlers.
image6128.png
In the order registration event handler, we create an OrderWindow window where we need to specify data sources for securities, portfolios, and market data. For all cases, this will be the Connector.
After that, we call OrderWindow using ShowModal method, if the OK button was clicked in this window, we register the order via the connector using the RegisterOrder method.
image4848.png
We do the same in the order reregistration event handler. Only in this case the event receives the Order object - this is the order that needs to be reregistered. Therefore, in OrderWindow, we specify Order = order.ReRegisterClone(newVolume: order.Balance) to fill in the fields of the OrderWindow window.
After that, we call OrderWindow using ShowModal method, if the OK button was clicked in this window, we will reregister the order via connector using the ReRegisterClone method. We pass to it old order, which should be cancelled, and the new one, which should be registered.
image1314.png
In the order canceling event handler, it is enough to call the CancelOrder method and pass to it the order that need to be canceled.
image2355.png
In order for Orders to be displayed in the OrderGrid, it is necessary in the OrderGridControl constructor to subscribe to new order appearance events and to a registration error event and pass these events to the OrderGrid.
image9790.png
We add the created OrderGridControl panel to the central part of MainWindow.
image4806.png
We run the program to check.
image7488.png

Creating Panel of Own Trades


Similar to the security panel, we create a panel of own trades, add another UserControl to the XAML folder. We call it MyTradeGridControl. We add the MyTradeGrid element to it.
image3653.png
In the MyTradeGridControl constructor, we need to subscribe to the new own trade appearance events and pass it to MyTradeGrid.
image7227.png
We add the created OrderGridControl panel to the central part of MainWindow.
image3738.png
We run the program to check.
image514.png

Creating Order Book Panel


Similar to the previous panels, we create an order book panel, add another UserControl to the XAML folder. We call it MarketDepthControl.
In MainWindow we have already used LayoutControl, in this control we will also use LayoutControl. We split the panel into two parts horizontally.
image1678.png
We add SecurityPicker to the left side, we use it when we created the security panel.
image7627.png
Let's split the right part into vertical parts. There will be an order book on the top right.
image1159.png
In MarketDepthControl, we need to set some MaxHeight value, otherwise the application will not start.
Below the order book we will place the elements of specifying a portfolio, price, and order volume.
image8282.png
Here it is worth noting the Label property of LayoutItem, it allows to set the text over the element. And also the SpinEdit element from DevExpress, in which it is convenient to set numerical values. These elements look like this.
image4967.png
Even below, we will place the buttons to buy, sell.
image62.png
Full code.
image9810.png
In the MarketDepthControl constructor, we set the security source for SecurityPicker and the portfolio source for PortfolioComboBox, in our case it will be Connector.
image651.png
We create a security selection event handler in SecurityPicker. We check in it whether the selected security is not equal to zero. If it is not equal to zero, we save the received security to a local variable, we will need it when updating the order book. After that, we clear and register the received security in Connector to receive an order book using the RegisterMarketDepth method. Using the GetMarketDepth method, we get the current order book on security to update the MarketDepthControl.
image3667.png
To keep the order book updated in the MarketDepthControl constructor, we will subscribe to the MarketDepthChanged order book change event at the connector. In the handler of this event, we will check which security the received order book belongs to, and if it belongs to the security selected in SecurityPicker, we update MarketDepthControl with it.
image4084.png
We add the created MarketDepthControl panel to the central part of MainWindow.
image7347.png
At this stage, we can run the program and check the order book update operation.
We create a buy and sell buttons click event handler. In each handler we create an Order, in which we specify the security selected in SecurityPicker, the portfolio selected in PortfolioComboBox, the volume and price from the corresponding SpinEdit. We register the order in Connector using the RegisterOrder method.
image7717.png
Both handlers differ only by the order direction.
Let's make that the SpinEditPrice value is changed to the selected quote price when selecting a quote in the order book. To do this, we will create a handler for the SelectionChanged event at MarketDepthControl. In which we will update SpinEditPrice value by the price of the selected quote if the selected quote is not equal to zero
image90.png
We run the program to check.
image8902.png

Saving Market Data


To save portfolios, securities, platforms, we need the CsvEntityRegistry class. We need to pass the entities storage location to it and call the Init method to load them.
image7322.png
To save candles, trades, etc., we will need StorageRegistry.
image809.png
We will also need the SnapshotRegistry snapshot storages registry.
image4003.png
All this we pass to Connector when it is created.
image6704.png
Here I also specified that Connector will reconnect when the connection is broken, and also specified how many history days should be downloaded.
The Connector.LookupAll(); string queries the available data.
image6016.png
After starting the application, we will see that new folders have appeared in the Date folder.
image7577.png
And when reconnecting the security and portfolio panels will already be filled.

Creating Strategy Panel


I will create the strategy panel just like all previous panels.
We add another UserControl to the XAML folder. We call it StrategyControl. We split the screen form into two parts using the LayoutControl.
There will be a tab with a candle chart on the left side.
image344.png
As well as a tab with strategy statistics,
image4907.png
Here I use StatisticParameterGrid to display strategy statistics and EquityCurveChart to display profit and loss chart.
In StatisticParameterGrid, we need to set some MaxHeight value, otherwise the application will not start.
The strategy properties in PropertyGridEx will be configured on the right side.
image721.png
As well as strategy start and stop buttons.
image1047.png
Full code.
image2510.png
In the StrategyControl constructor, we set Connector as a data source for PropertyGridEx, we carried out similar actions in almost every control.
image8773.png
We need to somehow pass the strategy to our control. To do this, in StrategyControl I will create a BindStraregy method that will receive a strategy, save a link to it in the local variable, and also set a strategy in PropertyGridEx and StatisticParameterGrid.
Using the SetChart method, we pass the Chart candle chart to the strategy, after that, the Chart can be obtained in the strategy using the GetChart method. We also set the Connector for the strategy.
image8230.png
When working with the profit and loss chart, it is necessary to take into account that the strategy may start and stop several times, so every time the strategy starts, the chart should be cleared. To do this, let's create the ResetEquityCurveChart method, in which we will first clear EquityCurveChart. After that we need to create graphic elements for EquityCurveChart, for them we can set a name, color and line type.
image6360.png
Then, we subscribe to the PnL change event of the strategy and in this event handler we draw a new value on the EquityCurveChart profit loss chart.
image3106.png
Full method code.
image2024.png
We will call this method in the Start button click event handler. And also we will reset the strategy state and run it.
image3375.png
We will stop the strategy in the Stop button click event handler.
image3399.png
We add the created StrategyControl panel to the central part of MainWindow.
image8678.png

Creating Strategy


For example, let's consider creating a simple strategy with candles. Which will buy if the candle is growing (green), and sell if the candle is falling (red).
Let's create another folder in the project and store all our strategies in it. We create a new class in this folder and call it SimpleStrategy. All S# strategies must be inherited from the base class Strategy.
image1577.png
Since our strategy uses candles, we will create a public property CandleSeries, and set its default value in our strategy constructor.
image442.png
Here I specified that candles in CandleSeries will be TimeFrameCandle with time span of 15 seconds (TimeSpan.FromSeconds(15)). We can specify the candle creating mode for CandleSeries - BuildCandlesMode. I specified that candles will be built (MarketDataBuildModes.Build), by default they will be built from ticks, but we can specify other data types as well.
Since we made the CandleSeries a public property, the CandleSeries can be additionally configured from the PropertyGridEx described in the previous paragraph.
All strategies have methods that can be overridden, we will need to override the OnStarted method. Which is called before the launch of the strategy and allows to preset its starting state.
image6026.png
Here we set the security for CandleSeries, which is specified in the PropertyGridEx. After that, we create a rule for processing the completed candle. See the documentation for details on working with rules. In the rule we specify the method that will process each completed candle, in our case it is the ProcessCandle method, it will be described later. After everything is set, we subscribe to the appearance of candles on the CandleSeries in connector using the SubscribeCandles method.
In our case, the ProcessCandle method contains the main strategy logic.
image3324.png
First of all, we need to determine whether the candle is real-time or historical, if the candle is historical, we ignore it. Not all strategies require this, for example, for strategies based on order books, this is not required, since order books are always real-time. There is no general way to determine whether a candle is real-time or historical, and in each strategy this problem will have to be solved independently depending on the strategy requirements. In this case, I will simply compare the candle closing time with the connector time, and if it does not exceed a certain lag, then I consider the candle real-time.
image2732.png
Next, we consider what candle it is and what the strategy current position. If the candle is growing, then at a position equal to 0, we will open a position with a market order for the volume set by us in PropertyGridEx. If the candle is growing and the position is less than 0, we reverse the position.
image4474.png
We do opposite actions for a falling candle.
image5127.png
At the moment, our strategy is ready to work. It should be passed to SimpleStrategyControl, which we created in the previous paragraph using the BindStraregy method. We do this in the MainWindow constructor immediately after the MainWindow components are initialized.
image374.png
We run the program to check.
image9399.png
image5010.png
The strategy works, trades are made, but there are no candles and trades on the chart yet.

Adding Candles and Trades to Chart from Strategy


In the paragraph about the strategy panel, we passed the Chart candle chart to the strategy using the SetChart method. In the OnStarted strategy method, we check whether the strategy has a chart set, and if it is set, then we initialize the chart, as well as subscribe to the events of new own trade appearance and candle change.
image5547.png
InitChart chart initialization method.
image977.png
Here we save the link to Chart in a local variable. We clear the chart. We also create chart elements for candles and trades and pass them to the chart.
The chart.GuiSync(()=>{ ... }); construct is necessary in order to initialize the chart in the main thread.
CandleSeriesProcessing is a method for drawing candles on a chart.
image9921.png
Here we get a candle from the CandleSeriesProcessing event of the connector, create ChartDrawData to display it on the chart. We specify the time data.Group(candle.OpenTime), specify that the candle should be added to the candle element of the chart .Add(_chartCandleElement, candle);. And we specify that the chart should draw new data.
We perform similar actions for trades.
image4611.png
We run the program to check.
image944.png

Short conclusion


It is not necessary to spend a lot of time to create a complex and professional-looking application. In a few hours we created the fully-featured application with the ability to configure, display and trade directly.
Do not be afraid to try and create your own programs. I hope this paper will help you get used to this business.




Thanks: Oleg


Jake

Avatar
Date: 11/15/2018
Reply


You mentioned UI components in S#API. I'm going through the API source code and cannot locate the UI components. Where are they?
Thanks:

Mikhail Sukhov

Avatar
Date: 11/15/2018
Reply


It is paid sources. We publish on GitHub only S# core to provide examples of how to create own connectors and algos. All extended components provide without free sources. But you can use as binary for free as well (no license required, no trial, just download and use as regular .NET assemblies).
Thanks:

Jake

Avatar
Date: 11/15/2018
Reply


I really wish you would clarify in documentation what is and is not opensource. You mention opensource in several places on your site and it gets really confusing. You might also mention that, while the code on Github is open source, it isn't usable outside of your closed source products. I don't have an issue with this being the case, but I have spent quite a bit of time trying to get the Github code to work outside of your products. Would have been nice to know its intended use up front.

This leads me to another question. If I purchase the code to S#.Shell do I need to also use your connectors/algos? I ask because I have an in-house trading platform and I want to re-do the UI, but I cannot change the underlying infrastructure. S#.Shell looks like it would be a good foundation for what I need.
Thanks:

Mikhail Sukhov

Avatar
Date: 11/15/2018
Reply


Jake
I really wish you would clarify in documentation what is and is not opensource. You mention opensource in several places on your site and it gets really confusing. You might also mention that, while the code on Github is open source, it isn't usable outside of your closed source products. I don't have an issue with this being the case, but I have spent quite a bit of time trying to get the Github code to work outside of your products. Would have been nice to know its intended use up front.


It is really simple. S# is open source. All derived products like S#.Shell S#.Designer S#.UI (it is unofficial name of S#.Xaml + S#.Studio Core) are closed. On GitHub published S# and S# is underlying basis product for all other derived. Not sure what exactly we should to inform cause everywhere we applied "open source" title to S# product only.

Jake

This leads me to another question. If I purchase the code to S#.Shell do I need to also use your connectors/algos? I ask because I have an in-house trading platform and I want to re-do the UI, but I cannot change the underlying infrastructure. S#.Shell looks like it would be a good foundation for what I need.


S#.Shell uses closed binaries. We can provide it for you as a purchased packed. But I'm not sure why the sources are required for you. If you wanna modify it you should be noticed that for UI components we use DevExpress products and we provide neither their license no their sources.

S#.Shell is a standalone app (like Designer or Terminal) that demonstrate how to create from scratch fully workable app for auto trading (mostly, but it can be reinvented into charting application as well). If you like use our platform (whole or partially) S#.Shell will save your time and provide extended examples. If you wanna create everything by your own using source codes - as I mentioned before - not a problem we can provide sources for S#.UI and connectors as well (final price depends on what the connectors your prefer).

You can email me directly mika@stocksharp.com
Thanks:

Jake

Avatar
Date: 11/15/2018
Reply


I guess I am confused on what S# is. I was under the impression S# and S#.API were the same thing. Is this not the case?
Thanks:

royburns

Avatar
Date: 11/16/2018
Reply


oh, the article is very useful, but, is there any paper to tell us how to integrate it with stock trading?
thanks
Thanks:

Mikhail Sukhov

Avatar
Date: 11/16/2018
Reply


royburns
oh, the article is very useful, but, is there any paper to tell us how to integrate it with stock trading?
thanks


Sure, in main documentation - https://doc.stocksharp.com

The necessary section is here https://doc.stocksharp.c...14-bc5c-56220f41a67e.htm
Thanks:

royburns

Avatar
Date: 11/19/2018
Reply


Mikhail Sukhov
royburns
oh, the article is very useful, but, is there any paper to tell us how to integrate it with stock trading?
thanks


Sure, in main documentation - https://doc.stocksharp.com

The necessary section is here https://doc.stocksharp.c...14-bc5c-56220f41a67e.htm


Got it, thanks

Thanks: M

M

Avatar
Date: 11/25/2018
Reply


I still need a guide to connect to a stock broker. Lets say Etrade, I cant seem to figure it out by reading the API documentation....

I just keep getting this error:

Connector 11/26/2018 12:09:47 PM Error "System.InvalidOperationException: The calling thread cannot access this object because a different thread owns it.
at System.Windows.Threading.Dispatcher.VerifyAccess()
at #=zdJCq1jWmZlUBH9LvXcINo3R2OBfhzVdKmg==.#=z6GDG0nPWbM3j(String #=zaqPR9qmFcA_Z)
at #=zdJCq1jWmZlUBH9LvXcINo3R2OBfhzVdKmg==.#=zNiJd7uU=()
at #=zXBOtZyJyXg_k_uI2_Gm$V78dsymL8L7a5Q==.#=z7YtBCZNTX3tLv9iedQ==()"
Thanks:


Attach files by dragging & dropping, , or pasting from the clipboard.

loading
clippy