WPF ColorGrid DataBinding

[jfrtx]

Hi,

Are there any examples showing how to use a WPF ColorGrid that has a databinding defined in xaml?

Thanks

[Christopher]

Hello,

Are there any examples showing how to use a WPF ColorGrid that has a databinding defined in xaml?

Not at the moment I'm afraid, no - I've added this request to our issue tracker with id=2412, meaning an implementation of it will become available shortly.

[Christopher]

Hello,

just to let you know we've released a new NuGet in which the ColorGrid series is present in the TeeChart.Xaml.WPF assembly - you can see an example of it working in this example:

Screenshot from 2021-04-22 13-09-26.png (47.58 KiB) Viewed 37937 times

[jfrtx]

How do I databind x,y,z that is used in the ColorGrid to a viewmodel?

[Christopher]

How do I databind x,y,z that is used in the ColorGrid to a viewmodel?

There are a couple of Binding examples already in the examples, specifically those in this example here:

Screenshot from 2021-04-26 17-16-31.png (97.19 KiB) Viewed 37832 times

You should be able to adapt these techniques to the ColorGrid - any problems do please let us know.

[jfrtx]

I did not see an example for binding 3D data (x,y,z).

[Christopher]

I did not see an example for binding 3D data (x,y,z).

As I say, I think you will be able to adapt the 2D (x,y) data techniques shown in those examples to the 3D (x,y,z) data of the ColorGrid.

[jfrtx]

Do I use Series3DData and do I setup the binding on X, Y, Z as shown

series:Series3DData X="{Binding XData}" Y="{Binding YData}" Z="{Binding ZData}"

When I do this I get a binding error during runtime.

[Christopher]

Do I use Series3DData and do I setup the binding on X, Y, Z as shown

series:Series3DData X="{Binding XData}" Y="{Binding YData}" Z="{Binding ZData}"

When I do this I get a binding error during runtime.

Which of the two examples are you trying to follow, BindingDataProperties.xaml or BindingObservableCollection.xaml?

[jfrtx]

BindingObservableCollection.xaml

[jfrtx]

I tried the following but did not get a ColorGrid plot. It looked more like a (x,y) scattered plot. I think the problem is associated with not setting IrregularGrid to false. I do not see how to do this since colorgrid is a series and not Steema.TeeChart.WPF.Styles.

Code: Select all

    <Grid>
        <teechart:TChart x:Name="tchart">
            <series:ColorGrid x:Name="colorgrid" UsePalette="True" UseColorRange="False" PaletteStyle="Rainbow" ItemsSource="{Binding DataArray}" XPath="X" YPath="Z" ZPath="Y" />
        </teechart:TChart>
    </Grid>

and in my ViewModel I have

Code: Select all

    public ObservableCollection<Data> DataArray { get; private set;}

    public class Data
    {
        public double X;
        public double Y;
        public double Z;

        public override string ToString()
        {
            return $"({X:F4}, {Y:F4}, {Z:F2})";
        }
    }

[Christopher]

Hello,

I tried the following but did not get a ColorGrid plot.

Okay, I've made a change at the GitHub example here which you will now be able to run:

Screenshot from 2021-04-27 10-51-00.png (108.94 KiB) Viewed 37721 times

[jfrtx]

Hello,

I changed your BindingDataPropertiesViewModel constructor slightly to show a problem I am seeing. I expect to see a ColorGrid where both axis range from (-1 to 1). Instead I see something that is partially displayed in the upper right half. In this example dx=0.2 and dz=0.1. Therefore, the axis ideally should be x=-1,-0.8,-0.6,...,0.8,1.0 and z=-1,-0.9,-0.8,..., 0.9, 1.0. However, due to numerical precision, the axis appears to be irregular which is causing problems for ColorGrid.

Code: Select all

public BindingDataPropertiesViewModel()
{
    int nx = 11;
    int nz = 21;
    double dx = 2.0 / (double)(nx - 1);
    double dz = 2.0 / (double)(nz - 1);

    Data = new Series3DData[nx*nz];

    int k = 0;
    for (int i = 0; i < nx; i++)
    {
        double x = -1.0 + i * dx;
        for (int j = 0; j < nz; j++)
        {
            double z = -1.0 + j * dz;
            Data[k] = new Series3DData { X = x, Y = Math.Sin(k / (double)(nx * nz) * Math.PI * 2) * Height, Z = z };
            k++;
        }
    }

    //_timer = new DispatcherTimer(DispatcherPriority.Normal) { Interval = TimeSpan.FromSeconds(0.05) };
    //_timer.Tick += OnTick;
    //_timer.Start();
}

[Christopher]

Hello,

However, due to numerical precision, the axis appears to be irregular which is causing problems for ColorGrid.

Does this code work for you at runtime, that is, without use of the TeeChart.Xaml.WPF assembly?

[jfrtx]

Hi Christopher,

I am not sure I understand your question. Are you asking if the code snippet I supplied for a change in the constructor compiles and runs?
Yes, I was able to compile and run the changes in the example project that you created.