Automating ScaleTransform for Rectangles in bar chart

Question

I've this UserControl for the bar chart:

On my MainWindow I've used it in a Grid.Row and it it looks like this normally:

Values on top of those lines are recalculated in an ICommand for SizeChanged event. When I resize the window it becomes like this:

Height of the rectangles don't change automatically! I could recalculate the height, which is a double, of each rectangle in that ICommand to readjust BUT that's inefficient, right? Is there any simple way to transform all those rectangles in a single shot?

EDIT

I'd to change a few things in Canvas as well to make it work. Here's what I've in UserControl now:

and in MainWindow I've these:

and in ViewModel These are the relevant functions that adds rectangles and sets range:

public VM()
{
    Add = new Command(AddRect, (o) => true);
    SizeChanged = new Command(sizeChanged, (o) => true);
}

void sizeChanged(object obj)
{
    var c = obj as TestControl;
    CalculateLineText(c.ActualHeight);
}

void AddRect(object obj)
{
    var value = rand.NextDouble() * 500;
    if (max < value) CalculateLineText(value);
    RectCollection.Insert(0, value);
}

void CalculateLineText(double d)
{
    max = d;
    HighestPoint = Math.Round(d);
    FirstPoint = Math.Round(d / 3);
    SecondPoint = Math.Round(d / 3 * 2);
}

and in value converter:

public class MyConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        var height = (double)values[0];
        var highest = (double)values[1];
        var value = (double)values[2];
        return value * height / highest;
    }

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

There's still a little issue when I resize the window and it probably because I've hardcoded the height of the ItemsControl.

EDIT

This:

void CalculateLineText(double d)
{
    if (max < d) max = d;
    HighestPoint = Math.Round(max);
    FirstPoint = Math.Round(max / 3);
    SecondPoint = Math.Round(max / 3 * 2);
}

solves the issue on resize.

Clemens · Accepted Answer

As an extension of my answer to your other question, you could use the ActualHeight of the ItemsControl as a scale factor when the value range is 0..1:

with this in the code behind:

Random r = new Random();
DataContext = Enumerable.Range(0, 20).Select(i => r.NextDouble());

Edit: Instead of a ScaleTransform you may also use a MultiBinding for the Rectangle's Height property. The following example assumes that besides a Values collection there is also a Range property in the view model, e.g. like this:

Random r = new Random();

DataContext = new
{
    Range = 100d,
    Values = Enumerable.Range(0, 20).Select(i => r.NextDouble() * 100)
};

The XAML would then look like this:

with this IValueConverter:

public class HeightConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return (double)values[0] / (double)values[1] * (double)values[2];
    }

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

Automating ScaleTransform for Rectangles in bar chart

Answers (1)

Related Questions