Home / Community & Support / Developer Productivity Tools Forums / Silverlight > ImageEditor > Override Open and Save commands

• Sven

  Posted on Jul 26, 2011 (permalink)

  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

  Reply

• Ivailo Karamanolev Ivailo Karamanolev

  Posted on Jul 28, 2011 (permalink)

  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

  Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  Reply



• Kevin

  Posted on Aug 24, 2011 (permalink)

  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
  

  Reply

• Iva Toteva Iva Toteva

  Posted on Aug 29, 2011 (permalink)

  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

  Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  Reply

• Kevin

  Posted on Aug 29, 2011 (permalink)

  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

  Reply

• Iva Toteva Iva Toteva

  Posted on Sep 2, 2011 (permalink)

  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

  Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  Attached files

  • RadImageEditorDemo.zip

  Reply

• Joao Paulo Grassi Intermediate

  Posted on Nov 23, 2011 (permalink)

  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!
  
  

  Reply

• Joao Paulo Grassi Intermediate

  Posted on Nov 24, 2011 (permalink)

  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!

  Reply

• Iva Toteva Iva Toteva

  Posted on Nov 28, 2011 (permalink)

  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

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  Reply

• Joao Paulo Grassi Intermediate

  Posted on Nov 28, 2011 (permalink)

  Hi Iva,
  That's exactly what i need.
  
  Thank you!.

  Reply

• Joao Paulo Grassi Intermediate

  Posted on Feb 9, 2012 (permalink)

  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!
  
  
  

  Attached files

  • Image-Error.jpg

  Reply

• Iva Toteva Iva Toteva

  Posted on Feb 9, 2012 (permalink)

  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

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

• Joao Paulo Grassi Intermediate

  Posted on Feb 9, 2012 (permalink)

  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.
  

  Reply

• Iva Toteva Iva Toteva

  Posted on Feb 13, 2012 (permalink)

  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

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > ImageEditor > Override Open and Save commands