Change Detection

[Will]

When using the RadImageEditorUI in a Silverlight app, how can I determine if a loaded image has been changed interactively by the user? Note that I am loading the original image from a SQL Server database in the form of a byte array. I interactively resize the image in the image editor and then convert the edited image to a temporary byte array and compare the temporary byte array to the original byte array and everything is the same. I've also compared the 'imageEditor.Image.Height' and 'imageEditor.Image.Width' properties and the edited image always returns the same values despite having been resized. What am I missing?

[Will]

Now I understand. When I interactively click on the resize tool and resize the image, the changes do not take effect until I click on the resize tool for a second time to commit any changes. Once changes are committed, only then are all associated object properties updated and the History_CurrentImageChanged fires ... and I know the image has changed. 

Summary:

a) Silverlight form opens and an image is loaded into a RadImageEditorUI control.
b) User clicks the resize tool.
c) User resizes the image.
d) 'Save Changes' button remains disabled because no events have fired to indicate the image has changed.

The user needs to interactively click the resize tool for a second time after resizing the image in order for all necessary events to fire so that I can enable the 'Save Changes' button (and let the user save their changes back to the database).

So ....

a) How do I know when the user interactively selects the resize tool?
b) Is there an event I can handle so that I can update the user interface appropriately?
c) How will I know if the resize tool is being opened or closed? 
d) If the resize tool is executing, how can I end the execution and commit the changes using C# in the code behind to determine if changes have been made? Otherwise, the History_CurrentImageChanged hasn't fired and as far as my code is concerned, no changes have been made to the image, so no changes will be written back to the database.

Any help would be great!

[Lancelot]

Hi Will,

I've retrieved a couple links for you to go digging around in the RadImageEditor's namespace. You may find the Resize tool's class methods particularly interesting. While you're in there, look over to the left column and scroll down until you see the expanded node for Telerik.Windows.Imaging.Tools.

You will find the complete API reference for the RadImageEditor here.

Good luck,
Lancelot

[Will]

Thanks Lancelot. I've figured it out.

Preamble:

using Telerik.Windows.Media.Imaging.Tools;

using Telerik.Windows.Media.Imaging.Tools.UI; 
...

private ResizeToolSettings mResizeToolSettings = null;

private double mNewHeight = 0;

private double mNewWidth = 0;

1) Xaml (To hook the 'ImageEditorLoaded' event handler):

<telerik:RadImageEditorUI Grid.Row="0" Name="businessLogoEditor" ...
... ImageEditorLoaded="businessLogoEditor_ImageEditorLoaded">

2) businessLogoEditor_ImageEditorLoaded (To hook the 'ImageEditor_CommandExecuted' event handler):

private void businessLogoEditor_ImageEditorLoaded(object sender, EventArgs e)

{

    //Wire event handlers.

    businessLogoEditor.ImageEditor.CommandExecuted += new

        EventHandler<ImageCommandExecutedEventArgs>
               (ImageEditor_CommandExecuted);

}

3) ImageEditor_CommandExecuted (To hook the 'ResizeToolSettings_SettingsChanged' event handler):

private void ImageEditor_CommandExecuted(object sender, ImageCommandExecutedEventArgs e)

{

    //Check to see if the resize tool is executing.

    if (businessLogoEditor.ImageEditor.ExecutingTool is ResizeTool)

        //Check to see if a new event handler needs to be wired.

        if (mResizeToolSettings == null)

        {

            //Wire an event to handle changes to the image size.

            ResizeTool rt = (ResizeTool)e.CommandParameter;

            mResizeToolSettings = (ResizeToolSettings)rt.GetSettingsUI();

            mResizeToolSettings.SettingsChanged +=
                    ResizeToolSettings_SettingsChanged;

        }

}

4) ResizeToolSettings_SettingsChanged (To get the new height and width values from the executing resize tool):

private void ResizeToolSettings_SettingsChanged(object sender, EventArgs e)
{
    //Save the new size of the resized image.
    mNewHeight = mResizeToolSettings.ImageHeight;
    mNewWidth = mResizeToolSettings.ImageWidth;

    //Update the 'save' button.
    EnableDisableSaveButton();
}

5) Once you have the mNewHeight and mNewWidth values, you can then compare them to the original height and width of the loaded image to determine if a change has been made:

private void EnableDisableSaveButton()
{
    //Enable the 'save' button if the image has been resized.
    btnSave.IsEnabled =
        businessLogoEditor.Image.Height != mNewHeight ||
        businessLogoEditor.Image.Width != mNewWidth;
}

Thanks again Lancelot.

Will

[Lancelot]

Hi Will,

Excellent! I see you used the CommandExecuted event. Thank you for sharing your solution with the forums :)

Lancelot

[Laszlo]

Hi!

I have the same problem, and it seems to me that this is a bug in the RadImageEditorUI control.
When I use my own command like this:

void radImageEditorUI_ImageEditorLoaded(object sender, EventArgs e)
{
    radImageEditorUI.ImageEditor.History.CurrentImageChanged +=
          (_s, _e) => { Console.WriteLine(123); };
    radImageEditorUI.SaveCommand = NewSaveCommand;
    radImageEditorUI.ImageEditor.CommandExecuted += (ImageEditor_CommandExecuted);
}

For me, my Save Button is always enabled.
When I click on "Resize", the CommandExecuted event hits, I change the size and click Save Button, than it saves with the default size. (This is wrong!)
But if I clik on "Resize" again, CurrentImageChanged event hits, and than Save Button saves with the new size.

Is there a workaround for this?
I use version 2012.3.1016.0

[Will]

The requirements for the project that I was working on have changed - we are no longer using the image editor control.
Sorry.