Modifications to chart WPF elements and tab considerations

[NinjaTrader_ChelseaB]

Hello Goldy,

Thank you for reporting the behavior.

I was able to reproduce and I am taking a look.

[NinjaTrader_ChelseaB]

Hello Goldy,

I'm getting closer but still having errors with setting the DropMenu border brush.

Updated changes posted in post #139.

[NinjaTrader_ChelseaB]

Hello Goldy,

Some small changes added today should prevent the buttons from appearing from other tabs. The border brush i've just wrapped in a try and catch to allow the script to run without errors, and will revisit this later.

[Revazi123]

Hi there,

This is very good and important post and thanks for that.
I have 1 question: is it possible to have button inside chart. I will attach example. I just need sample of 1 working button(strategy code not indicator).

Hope its possible. Waiting for your reply. Thanks

[NinjaTrader_ChelseaB]

Hello Revazi123,

That would be the UserControlCollection which is actually documented and supported.

https://ninjatrader.com/support/helpGuides/nt8/usercontrolcollection.htm

Everything else with these WPF modifications outside of the UserControlCollection is technically not officially supported.

[Revazi123]

Hello Revazi123,

That would be the UserControlCollection which is actually documented and supported.

https://ninjatrader.com/support/helpGuides/nt8/usercontrolcollection.htm

Everything else with these WPF modifications outside of the UserControlCollection is technically not officially supported.

Thank you.

[Revazi123]

Hi Chelsea B,

I am trying to make bot which will have inputs from chart directly. I mean Distance for Pending orders, Stop Loss points value etc. I have created TextBox object but when I try to edit it chart is changing. Will attach screenshot what I mean and I want to disable that so I could change textbox text.

Thanks

[NinjaTrader_ChelseaB]

Hello Revazi123,

Below is a link to an example of a textbox that prevents the instrument overlay selector from appearing.

https://ninjatrader.com/support/forum/forum/ninjatrader-8/platform-technical-support-aa/108264-can-wav-file-be-activated-when-order-entry-hot-key-is-pressed?p=831756#post831756

[futurenow]

Hello Community,

I am uploading an updated version of these scripts that is combined into one example script, with concepts separated by regions.

There are some fixes with the right side panel grid-splitter, and with styling buttons and menus. There are also some important fixes for adding multiple instances to the same tab and to different tabs.

(Old versions can be found on post #1 of this thread)

Update 12/29/2020: changed detecting the current tab, still having errors with the custom DropMenu class setting the menu background color (Popup) when loading from xml

Update 12/31/2020: The ViewBox template was being accessed to early. Moved DropMenu popup border changes to the ViewBox.Loaded event using a WeakEventManager. This fixes the issues with rapidly reloading and when loading from xml. Still having an issue with the TabItems in the TabControl moving.

Hello Chelsea

First of all thank you for this amazing sample work with 'SampleWPFModifications_NT8.zip', it provides a serious start point for some ideas about chart window custom features.

In my case, currently I have a custom indicator that is working as should, and for now it displays a list of values into a textbox list, in any chart you need, but in my case a textbox is not the best visual presentation because in a vertical list not always is easy to follow the thread of continuity between related values when you need to be constantly quickly analyzing those values. So for that reason I need to display the values in a kind of table or board to display them in a more organized way.

I'm trying to modify the indicator 'SampleWPFModifications_NT8.zip' for a simpler version, because what I would need is only the top area above the chart, that called 'Use case #1: Custom top toolbar' into the code, and I don't need buttons or custom drop-down menu, i.e. the main what I need is the indicator draws a table with some rows and columns to specify exactly where each variable value or fixed text will be displayed, also being able to add colors to the "cells" and text into those cells, something similar like the 2nd attached picture.

Since yesterday I'm trying to modify the sections of 'Use case #1: Custom top toolbar', and trying to work with what is already created I thought to do a kind of grid of buttons simulating a table but seeing that buttons are like a kind "active element" that change the color when you press them, etc. because their function is to execute an action, I concluded a grid of buttons is not like inactive cells into table, so I think it needs to be a more efficient way to do this but I've not found that way.

In theory, the steps to do what I need would be:
- Step 1: Only leave the code for the parts of 'Use case #1: Custom top toolbar' and delete or comment the other 5 cases
- Step 2: To find the way to generate a table maybe giving to each cell a kind of tag or some ID in order to specify what variable or fixed text will be in each one of the cells.
- Step 3: Pass the code from the other indicator is actually working,
- Step 4: Specify where the variables and the text will be.
- Step 5: Finally giving format to the text, cells conditional colors etc.

Other way could be to add the necessary code into the indicator I have already working.

Could you help me with this situation, if maybe you could make a quick modification until the Step 2 to the point to print a table that I could fill with my values.

Thank you very much in advance

[NinjaTrader_ChelseaB]

Hello futurenow,

Looks like you've got a real interesting script going on.

I'm with you on adding rows to a grid, which is fairly easy. But I'm getting lost when you mention assigning IDs to the cells in the grid..

"To find the way to generate a table maybe giving to each cell a kind of tag or some ID in order to specify what variable or fixed text will be in each one of the cells."

What exactly are we trying to do?

When it comes to grid work, I feel like it comes down to using variables and arrays to track things. My scripts tend to start with the ChartControl grid cell as a base, and I count outward from there so that if someone else is writing code that adds stuff to the grid, it doesn't interfere. Try adding the script multiple times or to different tabs, it should play nicely because I count outward from the center.

[futurenow]

Hello futurenow,

Looks like you've got a real interesting script going on.

Thank you for the mention Chelsea, I'm getting interesting results thanks to Kate, Jim, Jesse and you, so in short, thanks to all the NT team and thanks to all those who have contributed their part providing me instructions, suggestions or key line of code that has helped to me to start to understand and learn, almost from the scratch, about the development for NinjaTrader 8 indicators/scripts. All of you are amazing but I would like to give special thanks to Kate and you because I see both of you are those who give that extra effort to provide the best answer and solution that is in your hand, which is something that is really appreciated.

I'm with you on adding rows to a grid, which is fairly easy. But I'm getting lost when you mention assigning IDs to the cells in the grid..

"To find the way to generate a table maybe giving to each cell a kind of tag or some ID in order to specify what variable or fixed text will be in each one of the cells."

Ok, here maybe I didn't use the correct term, but with "giving to each cell a kind of tag or some ID in order to specify what variable or fixed text will be in each one of the cells" what I meant was, as I haven't found the way to generate a table in the script, I thought that maybe it could be managed in a similar way as a spreadsheet, maybe specifying something like: I need the variable 'sumResult' be displayed in the 'Column 1', 'Row 2' (the cell '1-2'), with the 'textColor Green', with the 'text-box fill area Black', i.e. here with the idea the tag '1-2' would be the cell identifier (ID) that could be used to specify where exactly I need a variable or fixed-text be printed, but having in count it is just an idea, not because I exactly know if this could be managed in this way.

What exactly are we trying to do?

As I couldn't be considered a "developer" yet, please don't take my explanations as a coder explanation and that's the reason I attach pictures, in order to show the idea or approximate final result I have in my mind, so in general what I need is the code to generate a table in a similar way like the 2nd picture attached above in my previous post.

When it comes to grid work, I feel like it comes down to using variables and arrays to track things. My scripts tend to start with the ChartControl grid cell as a base, and I count outward from there so that if someone else is writing code that adds stuff to the grid, it doesn't interfere.

By the way, congratulations because the code into 'SampleWPFModifications_NT8.zip' is amazingly well organized, the regions '#region Use case #X: Custom...' help to see the 1,300 lines of code as if it would be a text file with 150 lines.

Try adding the script multiple times or to different tabs, it should play nicely because I count outward from the center.

Could you please extend a little this idea, to know better how I could work the array you mention, i.e. what would be the exact start point.


Thank you for your fast response

[NinjaTrader_ChelseaB]

Hello futurenow,

In the example, the tabControlStartRow from Grid.GetRow(chartWindow.MainTabControl) gets the row of the chart control and the tabControlStartColumn from Grid.GetColumn(chartWindow.MainTabControl) gets the column.

I'm not certain the grid cells can have IDs, there's just rows and columns. However, you could use a multi-dimensional array or list to store and set the row and column numbers.
Something like List<int[]> myList = new List<int[]>(); myList.Add(new int[] { 2, 3});.

If you wanted to have IDs this way you could also use a Dictionary object.

https://docs.microsoft.com/en-us/dotnet/api/system.collections.generic.dictionary-2?view=net-5.0

[luxurious_04]

I would like to know if someone here already has tried adding another 4 buttons under the lowerButtonGrid on the ChartTraderCustomButtonsExample? Kindly share some tips on it.

[aligator]

For anyone who's looking to make a custom icon using System.Windows.Media.Geometry icon = Geometry.Parse() for the NTMenuBar, that can be achieved by making a SVG file (Inksape or illustrator). By opening up the SVG file in a text editor such as NotePad++, one can grab the path data. Then use Geometry.Parse() to make the icon.

Hope this helps!

Unsuitable, Hi.

I am trying to make a custom geometric Path Icon for the NT menu bar. Would you be able to provide a sample code for that to be inserted into an indicator?

Many thanks.

[Unsuitable]

Hello aligator,

Do you mean the specific c# code? I pulled this from ChelseaB's sample code.

System.Windows.Media.Geometry topMenuItem1Icon = System.Windows.Media.Geometry.Parse("m 70.5 173.91921 c -4.306263 -1.68968 -4.466646 -2.46776 -4.466646 -21.66921 0 -23.88964 -1.364418 -22.5 22.091646 -22.5 23.43572 0 22.08568 -1.36412 22.10832 22.33888 0.0184 19.29356 -0.19638 20.3043 -4.64473 21.85501 -2.91036 1.01455 -32.493061 0.99375 -35.08859 -0.0247 z M 21 152.25 l 0 -7.5 20.25 0 20.25 0 0 7.5 0 7.5 -20.25 0 -20.25 0 0 -7.5 z m 93.75 0 0 -7.5 42.75 0 42.75 0 0 7.5 0 7.5 -42.75 0 -42.75 0 0 -7.5 z m 15.75 -38.33079 c -4.30626 -1.68968 -4.46665 -2.46775 -4.46665 -21.66921 0 -23.889638 -1.36441 -22.5 22.09165 -22.5 23.43572 0 22.08568 -1.364116 22.10832 22.338885 0.0185 19.293555 -0.19638 20.304295 -4.64473 21.855005 -2.91036 1.01455 -32.49306 0.99375 -35.08859 -0.0247 z M 21 92.25 l 0 -7.5 50.25 0 50.25 0 0 7.5 0 7.5 -50.25 0 -50.25 0 0 -7.5 z m 153.75 0 0 -7.5 12.75 0 12.75 0 0 7.5 0 7.5 -12.75 0 -12.75 0 0 -7.5 z M 55.5 53.919211 C 51.193737 52.229528 51.033354 51.451456 51.033354 32.25 51.033354 8.3603617 49.668936 9.75 73.125 9.75 96.560723 9.75 95.210685 8.3858835 95.23332 32.088887 95.25177 51.382441 95.03694 52.393181 90.588593 53.943883 87.678232 54.95844 58.095529 54.93764 55.5 53.919211 Z M 21 32.25 l 0 -7.5 12.75 0 12.75 0 0 7.5 0 7.5 -12.75 0 -12.75 0 0 -7.5 z m 78.75 0 0 -7.5 50.25 0 50.25 0 0 7.5 0 7.5 -50.25 0 -50.25 0 0 -7.5 z");

Then you would set the Icon property of a Gui.Tools.NTMenuItem() object to the Geometry object.

Or do you mean from the SVG file?
1. Make the icon within Illustrator or Inkscape (I used Inkscape).
2. Do "object/stroke to path" for all objects.
3. Make sure to combine all the elements into one path and not separate paths.
4. Save the file as .svg.
5. Right-click and open the .svg file in notepad or notepad++.
6. Copy the path data within d="".
7. If there are multiple paths, make sure steps 2&3 were done.

This method is a tad janky so you may have to test and edit the objects multiple times to achieve crisp pixels. An alternative method for icons is to use special Ascii characters. Just Google Ascii codes to find the desired icons and set the Icons property directly with a char.

Creating the path data
https://drive.google.com/file/d/1_sg...iNgk8o4x5/view

Obtaining path data from .SVG file
https://drive.google.com/file/d/1qk8...ew?usp=sharing