Display Image Histogram using EmguCV in the context of MVVM WPF

Question

I'm not sure how can I get the histogram chart and display it using MVVM. I found an answer, which although very easy it doesn't fit the MVVM design pattern I have so far and want to keep: How to draw histogram using EmguCV and C#

Not very sure how to display this histogramBox control using MVVM. If there would be a proper solution not a workaround to make forms be displayed in MVVM I would be happy, if not the workaround will do it as well.

Can I get the histogram chart as an Image ?, and display it as an Image ? (I can handle that in MVVM).

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

In order to use mvvm properly you need to get histogram as array of values, that you will show in a chart. Here's an example how to calculate histogram: How to draw histogram using EmguCV and C#

Expose the array as a property of viewmodel. In xaml use ItemsControl with custom ItemTemplate and PanelTemplate to show the chart. Databind ItemsSource to the array. In the ItemTemplate you can have Rectangle with Height databound to the histogram value. Benefit of this is that you can define visual appearance of the chart in xaml, you can add some user interactions and your layout can be responsive when resizing.

Let me know if you need assistance with the xaml.

EDIT: here's promised example of chart made in pure xaml.

viewmodel:

public class MainWindowViewModel
{
    public MainWindowViewModel()
    {
        ChartValues = Enumerable.Range(1, 10) //replace this with your histogram
            .Select(i => (float) i*i)
            .ToArray();
    }

    public float[] ChartValues { get; set; }
}

view:

<ItemsControl ItemsSource="{Binding ChartValues}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Rectangle Height="{Binding }" Width="10" VerticalAlignment="Bottom"
                       Fill="#eee" Stroke="Gray" Margin="-1.0"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

and the result:

chart

edited May 23 '17 at 11:44

Community

1
1

answered Feb 28 '15 at 18:05

Liero

25,216
29
151
297

This is a bit beyond my understanding, there are many details which I think I'll have difficulties at :(. Can you be very kind and show me some code that would work ? Seems that you know exactly what needs to be done. – Chris Feb 28 '15 at 18:25
OK, Thanks. Ill check this post tomorrow every 10 min :D – Chris Feb 28 '15 at 18:44
Great ! Thanks :D. I will accept this as an answer. But one more question, You have any idea how to actually show the values of this Rectangles in the plot ? ... there will be 255 rectangles for a grayscale image and the value of the pixels measured are actually the indexes of the rectangles from the array. I was thinking when I mouse over a rectangle to pop near the cursor a small text box with the rectangle index. Another idea is to have a sort of ruler in steps of 50 under the chart, something like this: http://cnx.org/resources/9e6b6deca3c3ba22a53fe018df3b4bc6/hist.png – Chris Feb 28 '15 at 21:01
Do you mean something like ? – Liero Feb 28 '15 at 21:35
Maybe. I never used Tooltip. So when I mouse over a rectangle I get its index as a small text box near the cursor. Also the rectangles width will be very small, like 1-2, and there will be 256 in the plot. So now the user can have a sens of the values of the pixels which have the highest histogram. – Chris Mar 01 '15 at 01:26
Liero, maybe you can check this post :P http://stackoverflow.com/questions/28790131/tooltip-use-to-show-the-index-of-the-item-in-collection-c-sharp-wpf-mvvm – Chris Mar 01 '15 at 04:48

Display Image Histogram using EmguCV in the context of MVVM WPF

1 Answers1