Using Images and Geometry with Custom Icons | NinjaTrader Developer Docs

Custom Icon Overview

When overriding the Icon method in a Share Service, Drawing Object, or Chart Style, you can use a variety of inputs to specify what will be displayed on the icon, including UniCode characters (if they exist in the icon pack for the font family used in NinjaTrader), custom Geometry Paths from the System.Windows.Shapes namespace, or image files. Using an image file for a custom icon can allow the flexibility of creating your icon’s visuals outside of your code via image editing software. For more information about adding custom Icons, see the “Icon” page under the topics for each of the NinjaScript object types listed above.

Using an Image as an Icon

The process for using an image as an icon is fairly straightforward using WPF objects, and is the same for different NinjaScript objects.

Instantiate a new BitmapImage object
Assign a Uri to the BitmapImage, pointing to an image file
Instantiate a Grid of the same dimensions as the icon
Instantiate an Image object
Assign the BitmapImage as the Image’s Source
Add the Image to the Grid
Return the Grid by overriding the Icon property

Be careful to instantiate the Grid to be same size as the needed icon. Some icon sizes differ from others. For example, the icon for Share Services is substantially larger than the icon for a Chart Style in the Chart Toolbar.

1 // Add the following Using statements
2 using System.Windows.Controls;
3 using System.Windows.Media;
4 using System.Windows.Media.Imaging;
5 
6 BitmapImage iconBitmapImage = new BitmapImage();
7 
8 protected override void OnStateChange()
9 {
10   if (State == State.Configure)
11   {
12     // Set the BitmapImage's UriSource to the location of an image file
13       iconBitmapImage.BeginInit();
14       iconBitmapImage.UriSource = new Uri(NinjaTrader.Core.Globals.InstallDir + "icon.jpg");
15       iconBitmapImage.EndInit();
16   }
17 }
18 
19 // Override Icon (read-only) to return the custom Grid and Image
20 public override object Icon
21 {
22   get
23   {
24       // Instantiate a Grid on which to place the image
25       Grid myCanvas = new Grid { Height = 16, Width = 16 };
26 
27       // Instantiate an Image to place on the Grid
28       Image image = new Image
29       {
30           Height = 16,
31           Width = 16,
32           Source = iconBitmapImage
33       };
34  
35       // Add the image to the Grid
36       myCanvas.Children.Add(image);
37  
38       return myCanvas;
39   }
40 }

Using Geometry on an Icon

Custom geometry Paths can be used to draw and fill custom shapes, which can then be applied directly to a Canvas returned for use in an Icon. The process for using a Path is similar to that for using an Image:

Instantiate a new Path object
Instantiate a Grid of the same dimensions as the icon
Define the visual properties of the Path
Add the Path to the Grid
Return the Grid by overriding the Icon property

1 // Add the following namespace to use Path objects
2 using System.Windows.Shapes;
3 
4 using System.Windows.Controls;
5 
6 public override object Icon
7 {
8   get
9   {
10       // Instantiate a Grid on which to place the Path
11       Grid myCanvas = new Grid { Height = 16, Width = 16 };
12 
13       // Instantiate a Path object on which to draw geometry
14       System.Windows.Shapes.Path myPath = new System.Windows.Shapes.Path();
15  
16       // Define the Path's visual properties
17       myPath.Fill = Brushes.Red;
18       myPath.Data = System.Windows.Media.Geometry.Parse("M 0 0 L 5 0 L 5 5 L 10 5 L 10 0 L 15 0 L 15 5 L 10 5 L 10 10 L 5 10 L 5 5 L 0 5 Z");
19  
20       // Add the Path to the Canvas, then return the Canvas
21       myCanvas.Children.Add(myPath);
22       return myCanvas;
23   }
24 }