A sample that uses ImageEdit on GridControl's CardView to load\save image through Entity Framework

Hi Ipek,

Thank you for the question! It seems that we have already discussed a similar one in the ID Q303051, ImageEdit - how to write an image to database thread. Please refer to it and let me know if you need any further assistance.

Thanks,
Dmitry

I've downloaded and ran your attached sample in the thread but unfortunately it didn't work. I wasn't able to invoke file open dialog when I clicked, right-clicked, etc. on Image column. How do you make the file dialog show when ImageEditSettings is used?

And since ImageTools project is for Silverlight I can't use it in our project which is on WPF. Hopefully you implement your own converters for these kind of stuff. It's been two days that I've been struggling with this issue :(

Thanks

I've set ShowLoadDialogOnClickMode="Always" on ImageEditSettings but still the file dialog doesn't open. I've also tried to use a ImagEdit by specifying a CellTemplate for the column (actually this looks nicer in CardView) but in this case when I select an image from the dialog the ConvertEditValue is not fired. I've tried binding to EditValue and Source properties of ImageEdit but it didn't make a change:

            <dxg:GridColumn FieldName="Image" AllowColumnFiltering="False">
              <!--<dxg:GridColumn.EditSettings>
                <dxe:ImageEditSettings ConvertEditValue="ImageEdit_ConvertEditValue" ShowLoadDialogOnClickMode="Always"/>
              </dxg:GridColumn.EditSettings>-->
              <dxg:GridColumn.CellTemplate>
                <DataTemplate>
                  <dxe:ImageEdit EditValue="{Binding Path=Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                                 ConvertEditValue="ImageEdit_ConvertEditValue"
                                 HorizontalAlignment="Left" Margin="8,3,0,3" Stretch="None" ShowMenu="False" />
                </DataTemplate>
              </dxg:GridColumn.CellTemplate>
            </dxg:GridColumn>

Can you please provide a simple but working WPF example? We can't also find a way to convert ImageSource to Byte[]. We want the converter to be independent of image type (png, jpg, bmp).

Thanks in advance

Hi Ipek,

Thank you for your update!

Yes, I see the problem with the ConvertEditValue event. But I can't precisely say why it is not fired when using the cell template. I will research this issue and get back to you when I have any results.

At the moment, I suggest you set the DisplayMember binding on a grid column with a converter that will implement the conversion between the byte array and specified image format:

	
[XAML]
<dxg:GridColumn DisplayMemberBinding="{Binding Path=Image, Mode=TwoWay, Converter={StaticResource ImageConverter}}">
                    
    <dxg:GridColumn.CellTemplate>
        <DataTemplate>
            <dxe:ImageEdit Name="PART_Editor" Width="150" Height="150" ShowLoadDialogOnClickMode="Always"/>
        </DataTemplate>
    </dxg:GridColumn.CellTemplate>
                    
</dxg:GridColumn>

Note that it is necessary to specify the editor's name as 'PART_Editor' to let the DXGrid mange its bindings So there is no need to bind its data properties manually.

I've created a small sample project to demonstrate this approach. You will find it in the attachment.

I'm afraid that we do not provide any universal image converter. One of the possible implementations is suggested in Tamir Khason's blog:

	
[C#]
public Byte[] BufferFromImage(BitmapImage imageSource) {
    Stream stream = imageSource.StreamSource;
    Byte[] buffer = null;

    if (stream != null && stream.Length > 0) {
        stream.Position = 0;
        buffer = new byte[stream.Length];
        stream.Read(buffer, 0, buffer.Length);
    }

    return buffer;
}

public BitmapImage ImageFromBuffer(Byte[] bytes) {
    if (bytes == null) return null;
    MemoryStream stream = new MemoryStream(bytes);
    BitmapImage image = new BitmapImage();
    image.BeginInit();
    image.StreamSource = stream;
    image.EndInit();
    return image;
}

I hope it will help you to accomplish your task.

Thanks,
Dmitry

Thanks for the sample. I've ran your sample and the bindings work. But in order to do test conversion I had to make the changes in my project.

But then I found out that I can't invoke the open file dialog when there is no previous value in field that the ImageEdit is bound. So I've returned back to your project and the same thing happens there too: simply clear the first record's Image field in your TestData class and then try to invoke the file dialog, you'll see that it won't work (eventhough ShowLoadDialogOnClickMode is set to "Always").

So I'll be waiting you to fix this problem in order to proceed.

Ipek

I couldn't wait any longer and tried to test the converter you've supplied, by putting an ImageEdit control on a LayoutControl but the BitmapImage to Byte[] conversion didn't work:

public Byte[] BufferFromImage(BitmapImage imageSource) {
    Stream stream = imageSource.StreamSource;
    Byte[] buffer = null;

    if (stream != null && stream.Length > 0) {
        stream.Position = 0;
        buffer = new byte[stream.Length];
        stream.Read(buffer, 0, buffer.Length);
    }

    return buffer;
}

In the above code when stream.Length is tried to accessed I get this exception: System.ObjectDisposedException: "Cannot access a closed file."

We are really tired of working on the same problem almost for a week which is a pretty basic operation. Need your immediate assistance.

Ipek