Override Open and Save commands

[Sven]

Hi guys,

I love the ImageEditor. Keep up the good work.

I was wondering how I can go about overriding the open and save commands. For example, I would like to hide the open file command at some instances and write my own save method so I can save the image for example to DB by passing it through my own encoder.

Thanks
SD

[Ivailo Karamanolev]

Hello Sven,

This has proven to be quite a popular demand and we'll try to implement it as soon as possible. We'll do our best to make such customization available for Q2 SP1, but it may be delayed to Q3 at the latest.
Until then, you can override the template of RadImageEditorUI and just change the commands these buttons are bound to. Let us know if you need additional assistance with that.

Greetings,
Ivailo
the Telerik team

[Kevin]

Hello,

I am also really enjoying your Image Editor.

Sven may not need additional assistance, but I could sure use some. I was hoping you could point me in the right direction as to how exactly one is to override RadImageEditorUI's template and change the bound command for the save button. Guidance of any kind would be appreciated.

Thanks,
Kev

[Iva Toteva]

Hi Kev,

The easiest way to overwrite the template of a control and bind the Command property of the button to your implementation of a SaveCommand. Here are the steps to do that:

1. Create a command that inherits from the ImageEditorCommandBas, which you will bind the button to:
   

   public class MySaveCommand : ImageEditorCommandBase
   {
       public MySaveCommand(RadImageEditor owner)
           : base(owner)
       {
       }
   
       public override void Execute(object parameter)
       {
           //Implement your logic here. You can access the image like this:
           //base.Owner.Image
           MessageBox.Show("My save command");
       }
   }

2. Introduce a property of your data context, which you can bound the Command property of the button to. For example, you can do this in the code-behind of the UserControl that contains your image editor like this:
   

   private MySaveCommand newSaveCommand;
   public MySaveCommand NewSaveCommand
   {
       get
       {
           if (newSaveCommand == null)
           {
               newSaveCommand = new MySaveCommand(this.ImageEditorUI.ImageEditor);
           }
           return newSaveCommand;
       }
       set { newSaveCommand = value; }
   }

3. Set the data context of the editor to the page that contains the NewSaveCommand property:
   

   public MainPage()
   {
       InitializeComponent();
       this.ImageEditorUI.DataContext = this;
   }

4. Override the template in order to have the button's Command bound to NewSaveCommand. The easiest way to do this is to open your solution with Expression Blend, right-click on the control and choose Edit template->Edit a copy. Then, you can find where the Save button has been declared and change it to:
   

   <telerik:RadButton IsBackgroundVisible="False" Margin="1" telerik:StyleManager.Theme="{StaticResource Theme}" ToolTipService.ToolTip="Save" Command="{Binding NewSaveCommand}">
       <Image Height="16" Margin="4" Source="/Telerik.Windows.Controls.ImageEditor;component/Images/save.png" Width="16"/>
   </telerik:RadButton>

 I hope this helps.

Best wishes,
Iva
the Telerik team

[Kevin]

Ah, thank you very much for the information. Great walkthrough.

My ImageToolItems don't seem to show up after changing the default template, however. For example, after creating a resource in blend by going to Edit template->Edit a copy and then applying it to the imageEditorUI, the tools simply don't show up in the UI. Am I forgetting something?

<telerik:RadImageEditorUI x:Name="imageEditorUI" Style="{DynamicResource RadImageEditorUIStyle1}">

    <telerik:RadImageEditorUI.ImageToolsSections>
        <telerik:ImageToolsSection Header="Transform">
            <telerik:ImageToolItem ImageKey="Resize" Text="Resize" Command="commands:ImageEditorRoutedCommands.ExecuteTool">
                <telerik:ImageToolItem.CommandParameter>
                    <tools:ResizeTool x:Name="resizeTool" />
                </telerik:ImageToolItem.CommandParameter>
            </telerik:ImageToolItem>
        </telerik:ImageToolsSection>
    </telerik:RadImageEditorUI.ImageToolsSections>

</telerik:RadImageEditorUI>

Thank you,
Kev

[Iva Toteva]

Hi Kevin,

Silverlight does not support DynamicResources, so you have to use StaticResource instead. More information about that can be found on MSDN.
Please find attached an application, which shows the default template of RadImageEditor. The only change that has been made is the one described in the code-snippets, i.e. Binding the Save button to the custom SaveCommand. You would only need to add the assembly references listed here in order to run the demo.
I hope this helps.

All the best,
Iva
the Telerik team

[Missing User]

Hi Iva.

I need some help, I start using the ImageEditor control and i also want to override the save button. I'm using this template of ImageEditor

http://demos.telerik.com/silverlight/#ImageEditor/CustomUI

I have this, like in the Example:

<Grid x:Name="fadeoutPanel"
                  Opacity="0.3">
                <controleImg:ControlesEditorImagem x:Name="settingsContainer" />
                <Border HorizontalAlignment="Center"
                        VerticalAlignment="Bottom"
                        Margin="0,0,0,30"
                        Background="#CCCDDFF9"
                        CornerRadius="10"
                        Padding="4">
                    <Grid x:Name="tools">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <telerik:RadImageEditorButton Grid.Column="0"
                                                      Image="/Telerik.Windows.Controls.ImageEditor;Component/Images/open.png"
                                                      Command="{Binding Commands.Open, ElementName=imageEditor}" />
                        <telerik:RadImageEditorButton Grid.Column="1"
                                                      Image="/Telerik.Windows.Controls.ImageEditor;Component/Images/save.png"
                                                      Command="{Binding NewSaveCommand}" />

                        <telerik:RadImageEditorButton Grid.Column="2"
                                                      Image="/Telerik.Windows.Controls.ImageEditor;Component/Images/Default/Crop.png"
                                                      Command="{Binding Commands.ExecuteTool, ElementName=imageEditor}">
                            <telerik:RadImageEditorButton.CommandParameter>
                                <tools:CropTool />
                            </telerik:RadImageEditorButton.CommandParameter>
                        </telerik:RadImageEditorButton>

                        <telerik:RadImageEditorButton Grid.Column="3"
                                                      Image="/Telerik.Windows.Controls.ImageEditor;Component/Images/Default/Rotate90CW.png"
                                                      Command="{Binding Commands.Rotate90Clockwise, ElementName=imageEditor}" />

                        <telerik:RadImageEditorButton Grid.Column="4"
                                                      Image="/Telerik.Windows.Controls.ImageEditor;Component/Images/Default/Rotate90CCW.png"
                                                      Command="{Binding Commands.Rotate90Counterclockwise, ElementName=imageEditor}" />
                    </Grid>
                </Border>
            </Grid>

My project uses ViewModel, in the ViewModel i need to pick the image and save it into a Sql Database. I try to create the command in the ViewModel but its not working. Can you please help me? Thanks!

[Missing User]

Hello.

I was able to override the SaveMethod, but now I have other issue, i'm trying to sabe the image into a Varbinary column, I need to convert the image into a byte[] array but when I try to convert back to a image and show it on my application i get an error. So, i think there's something wrong with the conversion, look a code snipet

          public override void Execute(object parameter)
        {
            byte[] buffer = ToByteArray(base.Owner.Image.Bitmap);

            this.ViewModel.AtualizarImagemPessoa(buffer);

        }

        private byte[] ToByteArray(WriteableBitmap bmp)
        {
            int[] p = bmp.Pixels;
            int len = p.Length * 4;
            byte[] result = new byte[len]; // ARGB
            Buffer.BlockCopy(p, 0, result, 0, len);
            return result;
        }

Can you tell me the best approach to convert the Image that is in the ImageEditor to a byte[] array?

Thanks!

[Iva Toteva]

Hi Joao,

It's good to hear that you have managed to resolve the issue with the customization of the commands in RadImageEditorUI.

When it comes to acquiring a byte array with the content of the image, this can be done using the format providers. For example, you can obtain the bytes of the image encoded as a PNG in the following way:

PngFormatProvider png = new PngFormatProvider();
byte[] imageBytes = png.Export(base.Owner.Image);

I hope this helps.

Kind regards,
Iva Toteva
the Telerik team

[Missing User]

Hi Iva,
That's exactly what i need.

Thank you!.

[Missing User]

Hi again Iva,

I follow your advice using this to get the bytes of the image

PngFormatProvider png = new PngFormatProvider();
byte[] imageBytes = png.Export(base.Owner.Image);

Today i try to change a image, and i got a error:
Index was outside the bounds of the array, i'll attach a image of the error.

The strange part is, the image that i'm triyng to save have 7,12KB and is 161 x 225, do you know what is happening?

Thanks again!

[Iva Toteva]

Hello Joao,

This may be a bug in the export of the image.

We will appreciate it if you could confirm that the issue is present with the latest official version of the control by opening the picture in the online demo and saving it to PNG. If the file is not saved successfully, please attach the image that you are previewing in the control, so that we can see what is wrong with the export.

You can attach the image to your forum post or open a support ticket, in case you don't want it to be publicly available.

Looking forward to your follow-up.

All the best,
Iva Toteva
the Telerik team

[Missing User]

Hi Iva

Thanks for your fast reply.

I try to save the image using the online demo as you mentioned, and i got the error "Unable to save the File"

I'll open a support ticket with the image, because i can't post it publicly.

Thank you.

[Iva Toteva]

Hello Joao,

We received the support ticket you opened and as answered in the ticket, will look into the issue and try to fix. We will not be able to address the problem before the upcoming 2012 Q1, but will tend to it soon after that.

Greetings,
Iva Toteva
the Telerik team

[Marco]

Hi Iva,

I followed your example to override the open command.
It works fine but I have to solve this behavior:
MyOpenButton is enabled only if the user already clicked on StandardOpenButton and open an image (exactly as a Save button).
Can you please give me a suggestion on how to solve this behavior?

Thanks in advance.
M

[Boby]

Hello Marco,
The default SaveImageCommand inherits ImageEditorCommandBase, which implementation of ImageEditorCommandBase.CanExecuteWithoutImage property returns false - meaning that the command cannot be executed when there isn't loaded image - i.e. this.Owner.Image == null is true.

To make your command behaves the same, you should ensure that your overload of CanExecuteWithoutImage returns false. If you are not inheriting from ImageEditorCommandBase, you could check the mentioned condition in your implementation of ICommand.CanExecute method.

Regards,
Boby
Telerik

[Samet]

I'm getting error exactly at this point: newSaveCommand = new MySaveCommand(this.ImageEditorUI.ImageEditor);

The error is ImageEditor is null. Do you have any solution for it ? 

[Todor]

Hello Samet,

The reason RadImageEditorUI's ImageEditor property is null is that the RadImageEditorUI didn't get its template applied yet. To force its template applying, invoke RadImageEditorUI.ApplyTemplate() method after setting its DataContext for example, or at another appropriate place in your code:

this.ImageEditorUI.ApplyTemplate();

I hope this helps.
If the problem still exists, please try to isolate the issue in a sample project and send it to us.

Regards,
Todor
Telerik