How to launch custom WPF Window from WPF PropertyGrid in ninjatrader

[cmarkb]

Hi there,

This question is carried over from:

https://ninjatrader.com/support/forum/showthread.php?p=525635

Attached is the sample indicator that demonstrates the scenario I am trying to get working.
In short I want to launch a Custom WPF window from the NT8 Indicator Selector WPF Property Grid. I want to have the NT8 Indicator Selector WPF Property Grid show a textbox with ellipse button:

[ ][...]

that shows the selected value and launches the WPF Window.

Currently the property is showing in the Indicator Selector WPF PropertyGrid but no ellipse button shows, just the textbox so there is no way to launch the WPF Window.

I put together a standalone WPF project as a POC that works using this method and this works fine. The attached zip is my attempt to translate this into the property of an NT indicator.

Any help would be much appreciated.

Thanks for your time.

[NinjaTrader_Jesse]

Hello,

Thank you for providing the sample, this helps to address your concern.

I have located what seems to be a possible solution for this but need to further review this with development as it also seems to generate some problems.

I just wanted to reply back and let you know that I have begun working on this item and will reply back shortly with an answer.

I look forward to being of further assistance.

[cmarkb]

Hi Jesse,

Thanks for the update. Looking forward for your answer.

[cmarkb]

Hi Jesse, how did you go with the possible solution mate?

Regards,

Mark

[NinjaTrader_Jesse]

Hello,

Thank you for the reply.

I am currently working with development on a solution, currently, there is no ETA. The problem is that the solution's syntax is being cached meaning that any changes to the script would require a platform restart. Compiles seem to fail to produce changes to this script once it is compiled initially. This is what we are currently working to see if this is a limitation or if this can be resolved. Before I provide any code on this, I want to either provide the correct solution or at the very least know that this is expected and can provide the expectation along with it. Once I have further details I will reply back here.

I look forward to being of further assistance.

[NinjaTrader_Jesse]

Hello,

I just wanted to reply back with further details on this question.

After further review, this will be an item that is limited by the property grid being used. The attached sample demonstrates how to add a button to the grid, but in general, any PropertyEditor is only loaded at startup so any changes to the PropertyEditor absolutely requires a restart of the platform.

The attached sample contains an indicator with a PropertyEditor addon. To test the indicator simply import the zip and you should see what looks to be an empty text box which is a button while the mouse is over (default file picker). This opens a new window when clicked and then returns a value to the editor once the window is closed.

Please let me know if I may be of further assistance.

[cmarkb]

Hi Jesse,

This is it. It works just as we want. Wired up our own window to popup and works like a charm. Thanks a bunch Jesse.

[cmarkb]

Jesse,

One last question mate. When the field shows in the property grid, its input is a textbox that is read-only and has some mouse over text that says "Choose file...".

How can I change the mouse over text?

I have had a look at the attributes, trued using the Prompt parameter of the Display attribute, but it does not seem to work. The input still says "Choose file..." on mouse over.

Thanks for your time,

Mark.

[NinjaTrader_Jesse]

Hello,

Thank you for the reply.

This would basically be the same process, you would just need to create a DataTemplate and use that instead of the existing FIlePickers DataTemplate. The existing file picker looks kind of strange in this use, I put the xaml used for the original picker in a new example and modified it to show a separate button and text field. Using this approach you can make any xaml controls you feel necessary for the property and add tooltips etc..

In the xaml included in the sample, you will see the following:

<Button Grid.Column=""0"" [B]Content=""...""[/B] Padding=""0"" Margin=""0""
              HorizontalAlignment=""Stretch"" VerticalAlignment=""Stretch""
              HorizontalContentAlignment=""Center""
              Style=""{x:Null}""
              Command =""pg:PropertyEditorCommands.ShowDialogEditor""
              CommandParameter=""{Binding}"" />

You can replace the ... with anything or even another binding if needed.

I did note that while using the default style for the button, I see that the text has some padding or margin so the button needs to be pretty wide for the text to be visible. I have used Style = null in this case so the text is visible. If you wanted to restyle this, you would likely need to try some different styles with the button to see what results you like.

Edit: Updated the attached script to include an indicator sample, additionally this level of WPF development is not officially supported through platform support. For any users who may come across this post, please utilize the support forum for any questions surrounding this level of WPF development.

Please let me know if I may be of additional assistance.

[cmarkb]

Jesse,

Thanks for the awesome example code that was great. However due to the use of Style="{x:Null}" in the button, it does not inherit styles of the currently loaded skin in NT8, (I use Slate Gray).
However when I remove the Style="{x:Null}", I am no longer able to see the "..." and the button is wider than the column. (which is why I can't see the "..." content. I made some modifications to the XMAL to get the entire button to show in the grid, so now I can see the "...".

My question is, how do I make the button width 20?

I have tried inheriting the NT Skin styles and just overriding width, but it does not seem to work. I have been successful with this approach in a standard WPF app, but it doesn't have any effect in NT8.

Here is the markup I am using:

const string xamlTemplate = @"
<DataTemplate>
	  <Grid HorizontalAlignment=""Stretch"">
		<Grid.ColumnDefinitions>
		  <ColumnDefinition Width=""*""/>
          <ColumnDefinition Width=""Auto""/>
		</Grid.ColumnDefinitions>

	    <Button Grid.Column=""1"" Content=""..."" Padding=""0"" Margin=""0""
			  HorizontalAlignment=""Center"" 
              VerticalAlignment=""Stretch""
			  HorizontalContentAlignment=""Center""
              Command =""pg:PropertyEditorCommands.ShowDialogEditor""
			  CommandParameter=""{Binding}"">
                <Button.Style>
                        <Style TargetType=""Button"" BasedOn=""{StaticResource {x:Type Button}}"">
                            <Setter Property=""Width"" Value=""20""/>
                        </Style>
                    </Button.Style>
                </Button>
		<TextBox Grid.Column=""0"" 
                 HorizontalAlignment=""Stretch"" 
				 Text=""{Binding StringValue}"" 
				 ToolTip=""{Binding Value}""/>
	  </Grid>
	</DataTemplate>
";

Thanks again for your time, and great support!

[NinjaTrader_Jesse]

Hello,

Thank you for the reply.

Yes as I noted you would need to play with the styles in this situation, there is not currently a specific style for a button use in a property aside from the file picker. NT8 has quite a few styles being used which may or may not work well where you use them in custom situations. The buttons default NT style seems to cause the text to be shifted due to how the style is configured.

You could try removing the Alignment properties shown in the example and instead set all three MinWidth, Width and MaxWith to the same value. Setting the all the widths to the same value should set a default size, but this would be persisted if the window is expanded or contracted which in this case may work for the purpose.

In this situation, you will likely need to run some tests to find what you like best and then go with that.



I look forward to being of further assistance.

[cmarkb]

Hi Jesse,

MinWidth and MaxWidth did it. Can now see the "..." on the button. Thanks a lot again jesse.