在WPF Toolkit图表上移动轴标签的位置

Question

I have a chart, all working fine except for I need to have the x-axis labels 'follow' the y-axis zero crossing.

I have been playing with the label margins and can offset the label to the left or right of the gridline

<DVC:LinearAxis.AxisLabelStyle>
                <Style TargetType="{x:Type DVC:AxisLabel}">
                    <Setter Property="Margin" Value="25,0,0,0" />
                </Style>
            </DVC:LinearAxis.AxisLabelStyle>

I haven't got a clue how to move the label up the chart so that it appears in the middle. I will bind to value for determining the exact location but I can't even work out how to move the label in the vertical plane.

Any help or pointers much appreciated.

Thanks.

Answer 1

After lots of trial and error and reading articles I have finally put together a really simple and elegant solution.

I have bound the margin property of the AxisLabel to the ActualHeight of the chart area and used a MultiValueConverter to create the correct margin values.

XAML

<DVC:LinearAxis.AxisLabelStyle>
    <Style TargetType="{x:Type DVC:AxisLabel}">
        <Setter Property="Margin">
            <Setter.Value>
                <MultiBinding Converter="{StaticResource MarginConverter}">
                    <Binding Path="ActualHeight"
                        RelativeSource="{RelativeSource AncestorType={x:Type primitives:EdgePanel}}" />
                    <Binding Path="DataContext.ChartRange" RelativeSource="{RelativeSource FindAncestor, 
                        AncestorType={x:Type DVC:LinearAxis}}" />
                </MultiBinding>
            </Setter.Value>
        </Setter>
    </Style>
</DVC:LinearAxis.AxisLabelStyle>

MarginConverter.cs

public class MarginConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            var height = 0d;
            var chartHeight = (double) values[0];
            var range = (Range<double>) values[1];

            if (range.HasData)
            {
                if (range.Minimum > 0)
                {
                    // Set labels to bottom
                    height = 0;
                }
                else if (range.Maximum < 0)
                {
                    // Set labels to top
                    height = -chartHeight;
                }
                else
                {
                    var rangeHeight = range.Maximum - range.Minimum;
                    var pointsPerHeight = chartHeight / rangeHeight;
                    height = range.Minimum * pointsPerHeight;
                }
            }

            return new Thickness(25, height, 0, 0);
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }

    }

Range is the maximum and minimum y values when I draw the graph and then bound to a property on the VM.

This is a surprisingly elegant solution to what I thought was going to be quite hacky. As the view is resized, the labels are repositioned with new dimensions.