Modifications to chart WPF elements and tab considerations

[NinjaTrader_ChelseaB]

Hello All,

Moving forward this will be maintained in the Desktop SDK reference samples and no longer maintained on the forum.
Desktop SDK: Creating Chart WPF (UI) Modifications from an Indicator

I've made some updates to my examples that modify the WPF elements on a chart to be chart tab specific.

When the tab is no longer visible the added controls are removed, when the tab is selected, the controls are added back.

ChartCustomSidePanelExample demonstrates adding a custom column and child grid (what looks like a panel) to the chart grid with a few custom buttons similar to ChartTrader.

ChartCustomToolbarExample demonstrates adding a custom row above the chart and to the left of the chart to add custom buttons (saving space on the existing chart toolbar).

ChartTraderModifyExistingButtonsExample modifies the Buy and Sell Market buttons on ChartTrader. Changes the colors and adds an event handler. The original order actions still take place, however, it also triggers an action with the indicator.

ChartTraderCustomButtonsExample adds custom buttons below the PnL display in ChartTrader and below the Bid and Ask display in ChartTrader.

To play friendly with other indicators that are modifying the chart, each of these indicators adds rows using the existing chart's TabControl or ChartTrader area as a starting point.

When terminating the script, the current column and/or row of the object object is found and removed in case another indicator has changed the row number.

For a look at adding buttons to the rendered chart area, the 'ChartOrderButtonsExamples_NT8' strategy and indicator is a great example of adding buttons to the UserControlCollection.
NinjaScript Developer Example: https://support.ninjatrader.com/s/ar...-Order-Buttons


(Updated June 25th, 2018 - ChartTraderCustomButtonsExample and ChartTraderModifyExistingButtonsExample were missing the removal of the chartWindow.MainTabControl.SelectionChanged handler TabChangedHandler in State.OnTermination)

(Update Nov 13th, 2018 - Due to new functionality added to resize the ChartTrader Control with a gridsplitter in 8.0.16.0, I've chosen to move the side panel in ChartCustomSidePanelExample to the right of ChartTrader. Small note, the gridsplitter and ChartTrader controls are both in column 1 and only the ChartTrader control spans into column 2 as well.)

(Update Oct 25th, 2020 - See a new version of these indicators. This post will remain to see history of changes.
https://ninjatrader.com/support/foru...07#post1124507)

Moving forward this will be maintained in the Desktop SDK reference samples and no longer maintained on the forum.
Desktop SDK: Creating Chart WPF (UI) Modifications from an Indicator

[aligator]

Hello All,

I've made some updates to my examples that modify the WPF elements on a chart to be chart tab specific.

When the tab is no longer visible the added controls are removed, when the tab is selected, the controls are added back.

ChartCustomSidePanelExample demonstrates adding a custom column and child grid (what looks like a panel) to the chart grid with a few custom buttons similar to ChartTrader.

ChartCustomToolbarExample demonstrates adding a custom row above the chart and to the left of the chart to add any custom buttons to (saving space on the existing chart toolbar).

ChartTraderModifyExistingButtonsExample modifies the Buy and Sell Market buttons on ChartTrader. Changes the colors and a handler. The original order actions still take place, however, it also triggers an action with the indicator.

ChartTraderCustomButtonsExample adds custom buttons below the PnL display in ChartTrader and below the Bid and Ask display in ChartTrader.

To play friendly with other indicators that are modifying the chart, each of these indicators adds rows using the existing chart's TabControl or ChartTrader area as a starting point.

When terminating the script, the current column and/or row of the object object is found and removed in case another indicator has changed the row number.
*

ChelseaB,

Hi, I am looking for a working example button added to the main toolbar using a BitmapImage icon with an image file instead of text or default icons.

Many Thanks.

[NinjaTrader_ChelseaB]

Hi alligator,

I don't have an example already created, but all that is needed is an image object and then set the content of the button to the image.

Below are publicly available links to a few examples.

http://stackoverflow.com/questions/35455309/set-image-programmatically-on-button

https://www.codeproject.com/Questions/208408/Dynamically-add-image-to-WPF-button

[Subhash Badri]

Not able to get the sample working

Hello Chelsea,
I have tried your samples, but for some reason I am not able to get them working. I have built the code and put them in the <reg-entry>\nt8\bin\custom. I also verified that the addon gets loaded from the log. I have put the breakpoint in OnStateChange, it does not break into the code nor shows any buttons inside the chart.

one change i made was "indicator.ChartCustomSidePanelExample(Input); throws a compiler error since indicator is not defined. I have defined it as
Indicators.Indicator indicator = new Indicators.Indicator();

any pointers will help a great deal.
Thanks,
Subhash

[NinjaTrader_ChelseaB]

Hello Subhash,

Please remove the altered version from your computer and re-download the ChartCustomSidePanelExample_NT8.zip from post #1.

I have retested this script and I can assure you it is in a working state.

Do not export the contents of the .zip file.

To import a NinjaScript into NinjaTrader 8 do the following:

1. Download the script to your desktop, keep it in the compressed .zip file.
2. From the Control Center window select Tools -> Import -> NinjaScript...
3. Click the Desktop icon on the left to navigate to the desktop
4. Select the downloaded .zip file -> then click Open
5. NinjaTrader will then confirm if the import has been successful.

Critical *Note that on any files that say "File already exists on your PC" that start with an "@" symbol are the ones that came preloaded inside of NinjaTrader so you would say "No" so that you do not override those files.


If you would like assistance importing the script please let me know.

[Subhash Badri]

Still not working

I followed the exact steps like you suggested. I checked the custom\indicators folder and the file is present and I hope that confirms that import was successful.

I launch the chart but do not see any button controls.

[NinjaTrader_ChelseaB]

Hello Subhash,

Please include a screenshot of your chart so that I may see the indicator has been applied.

Also, are there any errors in the Log tab of the Control Center?

[Subhash Badri]

attaching the chart screenshot

I do not see any error either in the log of cc or in the ninja output editor.

[Subhash Badri]

full process screenshot

No errors seen in the log tab and no information seen in the "ninja script output" window.

[NinjaTrader_ChelseaB]

Hello Subhash,

You have not added the indicator to the chart.

No indicator will do anything if it is not added to a chart.

Add the indicator to the chart from the Indicator window.

https://www.youtube.com/watch?v=S2JHxkaf_1I&index=12&list=PL3-s3qsUnfLRn04hfjEwcvUJSTB5vDBcC

[Subhash Badri]

Really helpful

Chelsea, thanks for the support
I have couple of questions:
1. how to develop/debug these addons from the visual studio?, The cs file is placed in the indicators directory and no PDB, so not sure if there is a way to debug these addons
2. The controls inside the chart are wierd, outside ones are correctly displayed. pasting the screenshot for the inside ones. even the toolbar ones are good.

thanks,
Subhash

[NinjaTrader_Jesse]

Hello,

you can find a short guide to using visual studio for debugging here: http://ninjatrader.com/support/helpG...isual%2Bstudio

The debug mode is what would flag to compile with symbols so you can utilize breakpoints when attached to NinjaTrader.

For the image, I am not certain I understand the comparison here. Are you saying that the buttons on the right side are different that the toolbar buttons? If so, yes that would be correct. The toolbar buttons are a specific style whereas the buttons on the right are just the general button style it appears. Could you provide more detail on this question if I am not seeing the correct part of the image?

I look forward to being of further assistance.

[ClauTrade]

Hello,

many thanks for the sample code in first post.

About "ChartCustomSidePanelExample_NT8.zip" please could you suggest the code to add the action to a strategy?

For example the code to push Botton 1 >> enter buy market?

I have not understand how to do it!

Thanks

[NinjaTrader_Jesse]

Hello,

Thank you for the reply.

The same concepts can be used in a Strategy, you could reference the Indicator for a sample of the syntax required to append items to the GUI. The concepts in the indicator are able to be used wherever the ChartControl is present.

To enter strategy orders, you could use the following page as a reference to the commands: http://ninjatrader.com/support/helpG...d_approach.htm

I look forward to being of further assistance.

[kkc2015]

Hello, ChelseaB
Thank you for the useful examples. For the SidePanel example, while I can change the panel background and button colors, could you please advise how to:
1. Place the side panel on the left side of the chart.
2. Change the width of the side panel.