How to create icons with support for skins?

[codeowl]

Hi there,

I am creating an Add-On and have successfully got a new menu on the Chart window with an icon. The icon I am using is a png file. I have just become aware of the skinning functionality in NT8 and find that when I change to a lighter skin my icon is difficult to see. However all the icons on the NT8 menus actually change color with the skin.

I have done a search of the BluePrint.xaml for the word "icon" and found the following entry:

<!-- Colors for menu icons throughout the application -->
<SolidColorBrush po:Freeze="true" x:Key="MenuIconDisabledForeground" Color="#676768" />
<SolidColorBrush po:Freeze="true" x:Key="NinjaScriptOutputSearchHighlight" Color="DimGray" />

What is the proceedure for creating an icon that will use these styles?

Is there a way of detecting from code what the current skin is?

Regards,

Scott

[Calonious]

Yeah you can try this snippet out to get the skin that is being loaded from the config file -

private string CheckActiveSkin()
{
        string skinId;
	XmlTextReader reader = new XmlTextReader(string.Concat(Core.Globals.UserDataDir,"\\Config.xml"));
	bool stringCheck = false;
	while(reader.Read())
	{
		if(reader.Name == "Skin" && reader.NodeType == XmlNodeType.Element)
			skinId = reader.ReadString();
	}
	reader.Dispose();

        if(string.IsNullOrEmpty(skinId))
        {
             // Should never hit this, but if it does then we know something bad happened with 
             // the reader
             return null;
        }
        return skinId;
}

[codeowl]

Calonious,

Thanks for the response mate, and the code sample that is great.

What I am really interested in though is how to create icons that will inherit the color of the skin. I wonder if these are actual vectors drawn on a canvas and the brush color is linked to a style in the skin...

If we could get some direction from NinjaTrader on this it would be great, as then we can make Add-On's that seamlessly integrate with the UI, giving the end user a great experience.

Identifying the skin name is a fallback position, in that all the default skins have the word Dark or Light in their name, so I could have two icons one for each and initialize based on the skin name... but that is not a robust solution, especially when end users can make their own skins....

Thanks for taking the time to reply mate.

Regards,

Scott

[Calonious]

Gotcha,

This should do it -

<SolidColorBrush		x:Key="[B]FontMenuTopBrush[/B]" Color="#FF000000" po:Freeze="true"/>

This was in the Blueprint.xaml.

There are three groupings right there called -
"Font for menu items"
"Font for the Control Center's main navigation"
"Color for highlighted menu items across the application"

For the C# part -

Brush myBrush = (Brush)Application.Current.TryFindResource("FontMenuTopBrush");

[codeowl]

Calonious,

Great work mate, thanks for that. I will do some testing tonight and see what I can do with this.

Thanks again for your help mate, much appreciated.

NinjaTrader support it would still be great to hear from you on this... maybe a code sample of what you are actually doing with the menu icons. Are they vectors on a canvas, is this the right approach, or is it a different approach we should take?

MS Object Inspect doesn't really shed any light on of this...

Regards,

Scott

[Calonious]

They're aren't using an Icon/image so my first gut instinct is telling me PathGeometry or StreamGeometry and more than likely using the color from that blueprint to set the fill for it.

Tested it out and yeah, you can use a StreamGeometry and create the data points in it and use that in a Path object, then grab that color and set it the fill of shape.
https://msdn.microsoft.com/en-us/lib...v=vs.110).aspx

[codeowl]

Calonious,

Yes I thought it must have been something like this, but I have not done anything with PathGeometry as yet, so that is why I was thinking same concept but with Canvas. Thanks for the link, I will get stuck into this tonight and check out PathGeometry and see what I can come up with.

Thanks again for your help mate, has given me some great direction ;-)

Regards,

Scott

[NinjaTrader_Jesse]

Hello,

The following two examples show how to load both a Bitmap and a Path as an Icon which can be used in various places in the platform.

Please note, the following examples are specific to overriding the Icon property which can be used in a ChartStyle or Drawing tool for example, the same concepts could be applied anywhere a Icon is to be used, you would just need to use the logic in the overrides where you need it in your own code.


Using an image:

// Add the following Using statements
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
BitmapImage iconBitmapImage = new BitmapImage();
protected override void OnStateChange()
{
   if (State == State.Configure)
   {
      // Set the BitmapImage's UriSource to the location of an image file
        iconBitmapImage.BeginInit();
        iconBitmapImage.UriSource = new Uri(NinjaTrader.Core.Globals.InstallDir + "icon.jpg");
        iconBitmapImage.EndInit();
   }
}
// Override Icon (read-only) to return the custom Grid and Image
public override object Icon
{
    get
    {
       // Instantiate a Grid on which to place the image
        Grid myCanvas = new Grid { Height = 16, Width = 16 };
        // Instantiate an Image to place on the Grid
        Image image = new Image
        {
            Height = 16,
            Width = 16,
            Source = iconBitmapImage
        };
        // Add the image to the Grid
        myCanvas.Children.Add(image);
        return myCanvas;
    }
}

Using Geometry:

// Add the following namespace to use Path objects
using System.Windows.Shapes;
public override object Icon
{
    get
    {
        // Instantiate a Grid on which to place the Path
        Grid myCanvas = new Grid { Height = 16, Width = 16 };
        // Instantiate a Path object on which to draw geometry
        System.Windows.Shapes.Path myPath = new System.Windows.Shapes.Path();
        // Define the Path's visual properties
        myPath.Fill = Brushes.Red;
        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");
        // Add the Path to the Canvas, then return the Canvas
        myCanvas.Children.Add(p);
        return myCanvas;
    }
}

I look forward to being of further assistance,

[codeowl]

Jessie,

Thanks for the response and code samples, that is great. However I was more thinking of MenuItem icons. I did a POC last night in a test WPF app were I was able to get a Path to be used in a MenuItem icon using basically the same approach you have demonstrated. I now need to get that to work in NT8 and then link it into the same style for brush color that all the other menu items use. Then I will have a menu item that supports skinning , which is what I am trying to achieve.

Can you confirm what the style is that the menu items icons use to get their colors for mouse over and mouse off?

Thanks for your time.

Regards,

Scott