none
WPF toolkit chart axis styling RRS feed

  • 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?

    Thursday, April 23, 2015 6:07 AM

Answers

  • 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!)

    • Marked as answer by Ken.Wang Saturday, April 25, 2015 1:57 AM
    Friday, April 24, 2015 3:38 AM

All replies

  • 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!)

    • Marked as answer by Ken.Wang Saturday, April 25, 2015 1:57 AM
    Friday, April 24, 2015 3:38 AM
  • Hi gekka,

    Many thanks for your help! It works!

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

    Saturday, April 25, 2015 2:05 AM