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
17 Answers, 1 is accepted
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!
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
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:
- 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"
);
}
}
- 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; }
}
- Set the data context of the editor to the page that contains the NewSaveCommand property:
public
MainPage()
{
InitializeComponent();
this
.ImageEditorUI.DataContext =
this
;
}
- 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 >>
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
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.
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 >>
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!
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!
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 >>
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!
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.
Iva Toteva
the Telerik team
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
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
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.
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