Override Open and Save commands

16 posts, 0 answers
  1. Sven
    Sven avatar
    19 posts
    Member since:
    Feb 2011

    Posted 26 Jul 2011 Link to this post

    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

  2. Ivailo Karamanolev
    Admin
    Ivailo Karamanolev avatar
    276 posts
    Member since:
    Sep 2012

    Posted 28 Jul 2011 Link to this post

    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!

  3. Download a free trial of UI for WPF
  4. Kevin
    Kevin avatar
    2 posts
    Member since:
    Aug 2011

    Posted 24 Aug 2011 Link to this post

    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

  5. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts
    Member since:
    Sep 2012

    Posted 29 Aug 2011 Link to this post

    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 >>

  6. Kevin
    Kevin avatar
    2 posts
    Member since:
    Aug 2011

    Posted 29 Aug 2011 Link to this post

    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

  7. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts
    Member since:
    Sep 2012

    Posted 02 Sep 2011 Link to this post

    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 >>

  8. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 23 Nov 2011 Link to this post

    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!

  9. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 24 Nov 2011 Link to this post

    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!

  10. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts
    Member since:
    Sep 2012

    Posted 28 Nov 2011 Link to this post

    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 >>

  11. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 28 Nov 2011 Link to this post

    Hi Iva,
    That's exactly what i need.

    Thank you!.

  12. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 09 Feb 2012 Link to this post

    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!


  13. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts
    Member since:
    Sep 2012

    Posted 09 Feb 2012 Link to this post

    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 >>

  14. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 09 Feb 2012 Link to this post

    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.

  15. Iva Toteva
    Admin
    Iva Toteva avatar
    1319 posts
    Member since:
    Sep 2012

    Posted 13 Feb 2012 Link to this post

    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 >>

  16. Marco
    Marco avatar
    1 posts
    Member since:
    Jun 2013

    Posted 10 Jun 2013 Link to this post

    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

  17. Boby
    Admin
    Boby avatar
    510 posts
    Member since:
    Sep 2012

    Posted 13 Jun 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
Download a free trial of UI for WPF