Buttons-StackPanels-DockPanels

[TheBarChartist]

I'm attempting to change the style of a toolbar button when the mouse enters the toolbar button. I can manipulate the font and the font size, as well as the foreground color, but I can't override the background color. I'm pretty sure the code is fine (see below), but whenever I mouse over the toolbar button I'm stuck with the default highlighted color.

        private void toolBarButton_Enter(object sender, RoutedEventArgs e)
        {
                Print("enter");
                Style toolBarStyle = new Style();
                toolBarStyle.TargetType = typeof(System.Windows.Controls.Button);
                toolBarStyle.Setters.Add(new Setter(System.Windows.Controls.Button.FontSizeProperty, 11.0));
                toolBarStyle.Setters.Add(new Setter(System.Windows.Controls.Button.BackgroundProperty, Brushes.Red));
                toolBarStyle.Setters.Add(new Setter(System.Windows.Controls.Button.ForegroundProperty, new SolidColorBrush(Color.FromRgb(200,200,200))));
                toolBarStyle.Setters.Add(new Setter(System.Windows.Controls.Button.FontFamilyProperty, new FontFamily("Courier New")));
                toolBarStyle.Setters.Add(new Setter(System.Windows.Controls.Button.FontWeightProperty, FontWeights.Bold));
            
                //Set Button Style             
                toolBarButton.Style = toolBarStyle;
        }

Is there a solution?

[NinjaTrader_MichaelM]

Hello TheBarChartist,

You need to override the default control template where the logic that handles the visual display of the button on mouse over events is stored. A good walkthrough is available on the msdn website here: https://msdn.microsoft.com/en-us/lib...(v=vs.95).aspx

A more specific article on the same can be found on stack overflow here: http://stackoverflow.com/questions/1...useover-in-wpf

Using XamlReader.Parse() you can setup custom xaml in your C# code as a string, and then parse it into a style or control template.

Please let me know if you have any questions or if I may be of further assistance.

[TheBarChartist]

It was a long hard fight, but I figured out how to add the following code to the ControlTemplate of my button:

</Trigger>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Red"/>
</Trigger>

And the I successfully used XamlReader.Parse() to convert the edited template to my button's template.

And I had success, in that now when I mouse over the button the background changes to red. But the problem is that it doesn't stay red. While the mouse is still over the button, it changes back to the default color.

Does anyone know what state my button is transitioning to while the mouse is hovering over it so that I can edit that property as well?

[TheBarChartist]

All that's left for me to do is some cosmetic work on my indicators, so I thought I would bump this.

Here's what I'm doing to access, modify, and then set the ControlTemplate for my button:

                XmlWriterSettings xmlSettings = new XmlWriterSettings();
                xmlSettings.Indent = true;
                StringBuilder sb = new StringBuilder();
                XmlWriter writer = XmlWriter.Create(XmlWriter.Create(sb, xmlSettings));
                XamlWriter.Save(toolBarButton.Template, writer);
                Print(sb.ToString());
                sb.Remove(sb.Length - 50, 50);
                sb.Append("\n\t<Trigger Property=\"IsMouseOver\" Value=\"True\">\n\t\t<Setter Property=\"Background\" Value=\"Red\"/>\n\t</Trigger>\n\t</ControlTemplate.Triggers>\n</ControlTemplate>");
                toolBarButton.Template = (ControlTemplate)XamlReader.Parse(sb.ToString());
                Print(sb.ToString());

And here's what the Control Template looks likes before my modification:

<?xml version="1.0" encoding="utf-16"?>
<ControlTemplate TargetType="ButtonBase" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
  <mwt:ButtonChrome Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" RenderDefaulted="{TemplateBinding Button.IsDefaulted}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" Name="Chrome" SnapsToDevicePixels="True">
   <ContentPresenter RecognizesAccessKey="True" Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" Margin="{TemplateBinding Control.Padding}" HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
  </mwt:ButtonChrome>
  <ControlTemplate.Triggers>
    <Trigger Property="UIElement.IsKeyboardFocused">
      <Setter Property="mwt:ButtonChrome.RenderDefaulted" TargetName="Chrome">
        <Setter.Value>
          <s:Boolean>True</s:Boolean>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger Property="ToggleButton.IsChecked">
      <Setter Property="mwt:ButtonChrome.RenderPressed" TargetName="Chrome">
        <Setter.Value>
          <s:Boolean>True</s:Boolean>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger Property="UIElement.IsEnabled">
      <Setter Property="TextElement.Foreground">
        <Setter.Value>
          <SolidColorBrush>#FFADADAD</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>False</s:Boolean>
      </Trigger.Value>
    </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

And after the modification:

<?xml version="1.0" encoding="utf-16"?>
<ControlTemplate  TargetType="ButtonBase"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:s="clr-namespace:System;assembly=mscorlib"  xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
   <mwt:ButtonChrome Background="{TemplateBinding Panel.Background}"  BorderBrush="{TemplateBinding Border.BorderBrush}"  RenderDefaulted="{TemplateBinding Button.IsDefaulted}"  RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"  RenderPressed="{TemplateBinding ButtonBase.IsPressed}" Name="Chrome"  SnapsToDevicePixels="True">
    <ContentPresenter  RecognizesAccessKey="True" Content="{TemplateBinding  ContentControl.Content}" ContentTemplate="{TemplateBinding  ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding  ContentControl.ContentStringFormat}" Margin="{TemplateBinding  Control.Padding}" HorizontalAlignment="{TemplateBinding  Control.HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding  Control.VerticalContentAlignment}"  SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"  />
  </mwt:ButtonChrome>
  <ControlTemplate.Triggers>
    <Trigger Property="UIElement.IsKeyboardFocused">
      <Setter Property="mwt:ButtonChrome.RenderDefaulted" TargetName="Chrome">
        <Setter.Value>
          <s:Boolean>True</s:Boolean>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger Property="ToggleButton.IsChecked">
      <Setter Property="mwt:ButtonChrome.RenderPressed" TargetName="Chrome">
        <Setter.Value>
          <s:Boolean>True</s:Boolean>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>True</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger Property="UIElement.IsEnabled">
      <Setter Property="TextElement.Foreground">
        <Setter.Value>
          <SolidColorBrush>#FFADADAD</SolidColorBrush>
        </Setter.Value>
      </Setter>
      <Trigger.Value>
        <s:Boolean>False</s:Boolean>
      </Trigger.Value>
    </Trigger>
    <Trigger Property="IsMouseOver" Value="True">
        <Setter Property="Background" Value="Red"/>
    </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Maybe I'll take a video, but for now a description will have to suffice. When I alter the ControlTemplate in this way, upon mouse over the button turns red for maybe half a second and then returns to the default mouse over color, even though the mouse is still over the button.

It also puts an thin outline around the button. The style of the button seems changed in a subtle way.

[ninZa]

Not following this topic for a while and now I see Edge has made a big progress with the charts he showed here. Congratulations!

One thing I notice is that the buttons are placed inside a chart, so they occupy some space of chart. This space may be important in some situations, so users may prefer the buttons placed in a separate toolbar, which can be put at top, left, right, bottom of chart (see the pic below). I mean a toolbar outside of chart, just like Chart Trader's behavior.

I know we will have to handle tab-sensitivity issue. But in some cases the toolbar can be global (for all tabs), just like the quick-drawing toolbar.

Any instructions on this?

Thanks.
Pi

[-=Edge=-]

Not following this topic for a while and now I see Edge has made a big progress with the charts he showed here. Congratulations! One thing I notice is that the buttons are placed inside a chart, so they occupy some space of chart. This space may be important in some situations, so users may prefer the buttons placed in a separate toolbar, which can be put at top, left, right, bottom of chart (see the pic below). I mean a toolbar outside of chart, just like Chart Trader's behavior. Any instructions on this?

I don't believe there is currently any way of doing this outside of using the UserControlCollection. Although this way does occupy chart space, you can thru the use of grids, toolbartrays, toolbars, buttons, and/or various panel types place these on either the top, bottom, left, or right of the chart, by setting their alignment, orientation, and in some case flow control..

I do suggest that anyone utilizing this approach keep in mind that as time goes on, this UserControlCollection space is going to become a premium.. And that you should design your controls in mind that they might/will indeed share space with other indicators from various sources.. One way of doing this would be to use a user definable variable inside your controls margin, so that your users have control of what gets placed where..

Just an example of me allowing my users to drop their color palette below the drawbar, or visa versa, or even adjust it below any other controls they might be using if they so choose..

[-=Edge=-]

When I alter the ControlTemplate in this way, upon mouse over the button turns red for maybe half a second and then returns to the default mouse over color, even though the mouse is still over the button. It also puts an thin outline around the button. The style of the button seems changed in a subtle way.

Sorry TBC, I have not utilized or played around with ControlTemplates to be able to answer your question.. But would be interested in hearing your solution if and when you find one..

[NinjaTrader_Brett]

Ninza,

We're working on a concept internally which should be available for next beta which would allow you to do this. You technically can go in and try messing with the visual tree but the chart does not adapt correctly to the new size and ends up with unexpected results. With the next beta this will be resolved so you could inject your own toolbar there.

The other piece of the puzzle is getting that data saved to the workspace. Which we are working on as well.

Please keep an eye out for that for the next beta and we likely would be adding documentation on how to do that as well shortly thereafter as long as we don't run into any blockers that would prevent us from doing so.

[-=Edge=-]

We're working on a concept internally which should be available for next beta which would allow you to do this. You technically can go in and try messing with the visual tree but the chart does not adapt correctly to the new size and ends up with unexpected results. With the next beta this will be resolved so you could inject your own toolbar there.

Thanks for the heads up Brett! Definitely looking forward to that capability!!

[ninZa]

Ninza,

We're working on a concept internally which should be available for next beta which would allow you to do this. You technically can go in and try messing with the visual tree but the chart does not adapt correctly to the new size and ends up with unexpected results. With the next beta this will be resolved so you could inject your own toolbar there.

The other piece of the puzzle is getting that data saved to the workspace. Which we are working on as well.

Please keep an eye out for that for the next beta and we likely would be adding documentation on how to do that as well shortly thereafter as long as we don't run into any blockers that would prevent us from doing so.

Million thanks for bringing this invaluable news, and wonderfully the official documentation on how to do that. I believe we will be able to convert almost any NT7 indicators/tools to NT8.

We hope Beta 7 will be released at the end of this month or early December.

[Sim22]

Sample button controlling indicator visibilty

Thank you for this thread Edge.

With your code and help I was able to code a basic EMA that plots on/off with a panel button. This is already in the download section but for anyone following this thread you might find this useful.

Sim22

[-=Edge=-]

Found myself looking for the how to example code of Brett's Post #68.. Took a bit of searching and just wanted to add the link here in case I or anyone else watching this thread might need it in the future..

http://ninjatrader.com/support/forum/showthread.php?t=80237