WPF Intensity Graph Change ColorScale Orientation

[clsmd]

Hi,

How can i change intensity graph ColorScale orientation from vertical to horizontal .

Can i move it from right side to top of graph . 

Best Regards,

[phansen · Accepted solution]

Unfortunately, the ColorScale currently supports only the Location property (to move the scale between left and right sides of the graph), and does not have a separate “Orientation” property.

However, it is possible to accomplish this, using the scale host technique from the “Non-Uniform Intensity” example installed with Measurement Studio.

XAML:

...
xmlns:ni="http://schemas.ni.com/controls/2009/xaml/presentation"
xmlns:niPrimitives="http://schemas.ni.com/controls/2009/xaml/presentation/primitives"
...
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <ni:IntensityGraph x:Name="graph" Grid.Row="1">
            <ni:IntensityGraph.ColorScale>
                <ni:ColorScale Location="None">
                    <ni:ColorScaleMarker Color="Green" Value="0"/>
                    <ni:ColorScaleMarker Color="Red" Value="1"/>
                    <ni:ColorScaleMarker Color="Yellow" Value="2"/>
                </ni:ColorScale>
            </ni:IntensityGraph.ColorScale>
        </ni:IntensityGraph>

        <niPrimitives:ScaleHost x:Name="colorScaleHost"
                                Margin="30,5"
                                niPrimitives:LayeredGraph.TargetOrientation="Horizontal"
                                niPrimitives:LayeredGraph.TargetPosition="Far"
                                Owner="{Binding ElementName=graph}" />
    </Grid>
</Window>

Code: 

...
using NationalInstruments.Controls;
using NationalInstruments.Controls.Primitives;
...

    public partial class MainWindow : Window {

        public MainWindow( ) {
            InitializeComponent( );

            IScale scale = graph.ColorScale;
            IScalePresenter presenter = scale.CreateDefaultPresenter( colorScaleHost );
            colorScaleHost.Presenter = new CompositeScalePresenter { presenter, new ClearColorRampVisualOrientation( ) };
            colorScaleHost.Scale = scale;
        }

    }

    sealed class ClearColorRampVisualOrientation : IScalePresenter {

        public Visibility DesiredVisibility { get { return Visibility.Collapsed; } }
        public bool IsCompatible( ScaleHost host, IScale scale ) { return scale is ColorScale; }
        public void Uninitialize( ScaleHost host, IScale scale ) { }

        public void Initialize( ScaleHost host, IScale scale ) {
            // Clear the orientation of the color ramp created by the default scale presenter,
            // so that it will display horizontally.
            var panel = (Panel)host.Child;
            foreach( var colorBox in panel.Children.OfType<Rectangle>( ) )
                colorBox.ClearValue( RelativePanel.RelativeOrientationProperty );
        }

    }

(Note that this workaround requires some property manipulation to correct the display of the color ramp, which makes assumptions about implementation details that may change in the future.)

[clsmd]

Hi,

How can i use binding method to ColorScaleMarker Value properties. I want to change Values at run time.

Best Regards

<ni:ColorScaleMarker Color="Green" Value="0"/>

[phansen]

(For future reference, it is easier to get responses by posting new questions in the forum, instead of adding to older questions that have been marked “Solved”. I only happened across your new question because I had already made a reply to this thread.)

The ColorScaleMarker is a lightweight value type, so you cannot create a WPF binding directly on an individual marker property.

---

If you just want to bind the color of one specific marker, you could use a converter in a two-way binding to that index in the marker collection:

XAML:

<FrameworkElement.Resources>
    <local:ColorToMarkerConverter x:Key="ColorMarkerConverter" />
</FrameworkElement.Resources>
...
<!-- This will modify just the marker at index "1" in the Markers collection. -->
<TextBox Text="{Binding ElementName=graph, Path=ColorScale.Markers[1], Converter={StaticResource ColorMarkerConverter}, ConverterParameter=1.0, UpdateSourceTrigger=PropertyChanged}" />

Code:

public sealed class ColorToMarkerConverter : IValueConverter {

    private readonly ColorConverter _colorConverter = new ColorConverter( );

    public object Convert( object value, Type targetType, object parameter, CultureInfo culture ) {
        object result;

        var marker = value as ColorScaleMarker?;
        if( marker.HasValue ) {
            result = marker.Value.Color;
        }
        else {
            double markerValue = double.Parse( parameter as string ?? "0.0" );
            Color markerColor = (Color)_colorConverter.ConvertFrom( value );
            result = new ColorScaleMarker( markerValue, markerColor );
        }

        return result;
    }

    public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture ) {
        return Convert( value, targetType, parameter, culture );
    }

}

---

If you want to modify any marker, then you can use the same technique as the PlotsSource attached property from the question Wpf Graph Binding and defining Axes and Plots only in ViewModel:

XAML:

<ni:ColorScale Location="None" local:GraphExtensions.MarkersSource="{Binding Markers}" />

Code:

public static class GraphExtensions {

    // Private property to hold on to synchronizer. 
    private static readonly DependencyProperty MarkersSynchronizerProperty =
        DependencyProperty.RegisterAttached(
            "MarkersSynchronizer", typeof( CollectionViewSynchronizer ), typeof( GraphExtensions ) );

    // Public property to declare source of ColorScale.Markers collection. 
    public static readonly DependencyProperty MarkersSourceProperty =
        DependencyProperty.RegisterAttached(
            "MarkersSource", typeof( IEnumerable ), typeof( GraphExtensions ),
            new PropertyMetadata( OnMarkersSourceChanged ) );

    public static IEnumerable GetMarkersSource( ColorScale g ) {
        return (IEnumerable)g.GetValue( MarkersSourceProperty );
    }

    public static void SetMarkersSource( ColorScale g, IEnumerable value ) {
        g.SetValue( MarkersSourceProperty, value );
    }

    private static void OnMarkersSourceChanged( DependencyObject d, DependencyPropertyChangedEventArgs e ) {
        var colorScale = (ColorScale)d;

        // Retrieve existing synchronizer, or create a new one for the target. 
        var synchronizer = (CollectionViewSynchronizer)colorScale.GetValue( MarkersSynchronizerProperty );
        if( synchronizer == null ) {
            synchronizer = new CollectionViewSynchronizer { TargetCollection = colorScale.Markers };
            colorScale.SetValue( MarkersSynchronizerProperty, synchronizer );
        }

        // Synchronize Markers with new source. 
        synchronizer.SourceCollection = CollectionViewSource.GetDefaultView( e.NewValue );
    }
}

If you use an observable collection of markers for the source (ObservableCollection<ColorScaleMarker>), then any collection changes you make from the model side (add, remove, or replace) will be reflected in the color scale. For example, to change the color at index 1 you could do Markers[1] = new ColorScaleMarker( Markers[1].Value, newColor ) in the model.

[phansen]

Just wanted to let you know that Measurement Studio 2019 added the Orientation property to the color scale.

[clsmd]

Hi Paul,

Thank you for this information. We want to try.  Could you please provide offline installer.

Best Regards,

Muhammed.

[phansen]

It looks like you can get an offline installer from the Measurement Studio Download page: