WPF toolkit chart axis styling

Question

Hello all,

I am using the WPF toolkit chart controls and I'd like to show a Axis-Y with different colors.

For example, 0 uses orange, >0 uses red, <0 uses blue. Please check the attached picture.

I created 2 Axis-Y at left of the chart (-10~0, 0~10) , but they displayed side by side as 2 lines, not a single line.

How should I do to implement the effect like the picture?

Answer 1

Hi Ken.Wang,

It is possible if you insert a converter in the Style of AxisLabel.

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:app="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>
        <app:BrushConverter x:Key="conv"/>
    </Window.Resources>

    <Grid>
        <chart:Chart>
            <chart:Chart.Axes>

                <chart:LinearAxis Orientation="X" />
                
                <chart:LinearAxis Orientation="Y" Minimum="-5" Maximum="5" Interval="1" ShowGridLines="true">
                    <chart:LinearAxis.AxisLabelStyle>
                        <Style TargetType="{x:Type chart:NumericAxisLabel}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type chart:NumericAxisLabel}">
                                        <TextBlock Text="{TemplateBinding FormattedContent}"
                                                   Foreground="{Binding Converter={StaticResource conv}}">
                                        </TextBlock>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </chart:LinearAxis.AxisLabelStyle>
                </chart:LinearAxis>
                
            </chart:Chart.Axes>
        </chart:Chart>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

    class BrushConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double d = double.NaN;
            if (value is string)
            {
                d=double.Parse(value.ToString());
            }
            var ic = value as System.IConvertible;
            if (ic != null)
            {
                d=ic.ToDouble(null);
            }

            if (d > 0)
            {
                return Brushes.Red;
            }
            else if (d == 0)
            {
                return Brushes.Orange ;
            }
            else if (d < 0)
            {
                return Brushes.Blue;
            }
            return Brushes.Black;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

---

個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

Answer 2

Hi gekka,

Many thanks for your help! It works!

I am now moving from WinForm to WPF, the control styling is really amazing.