Missing documentation

[tomas]

Hello Telerik.

I would like to have a simple version of your editor from your sample CustomImageEditor UI, but I need some changes.

Loaded image should has its natural dimensions. If with or height is bigger than some value, the picture should preserve aspect ratio and change its dimensions to fit.

I am not sure about the influence of the RadImageEditor With and Height properties to Image with and height properties.

It seems to me, auto values are not working at all:

<telerik:RadImageEditor x:Name="imageEditor" ScaleFactor="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="Auto" Width="Auto" />

Also setting ScaleFactor = 0 has no effect at all:

public SimpleImageEditor()
{
    InitializeComponent();

    this.FadeIn = (Storyboard)this.LayoutRoot.Resources["FadeIn"];
    this.FadeOut = (Storyboard)this.LayoutRoot.Resources["FadeOut"];

    this.imageEditor.ToolSettingsContainer = this.settingsContainer;
    this.imageEditor.Loaded += new RoutedEventHandler(imageEditor_Loaded);
}

void imageEditor_Loaded(object sender, RoutedEventArgs e)
{
    this.imageEditor.History.CurrentImageChanged += new EventHandler(History_CurrentImageChanged);
}

void History_CurrentImageChanged(object sender, EventArgs e)
{
    if (this.imageEditor.Image != null)
    {
        this.imageEditor.ScaleFactor = 0;
    }
}

All my opened pictures have size 5 x 10 but they are much bigger in real.

Thank you very much.

Tom

[Deyan]

Hello Tom,

Thank you for contacting us about this issue!

RadImageEditor's ScaleFactor property is responsible for resizing the image by some scale amount. If you want to have your images shown with their original size you should set this property to 1.

this.imageEditor.ScaleFactor = 1;

When setting ScaleFactor property to 0, RadImageEditor makes the image to fit perfectly in the bounding view box size, so that the proportions of the original image are preserved. That is the reason why your small images of size 5 x 10 are shown bigger - RadImageEditor resizes them to fit the editor size - reflected in the UI as "Auto" size.

So for images that are smaller than the RadImageEditor size you should use ScaleFactor = 1. For bigger images you should use ScaleFactor = 0, so that they fit in the the editor sizes by constraining the proportions of the image.

You may use the following code snippet for this case:

this.imageEditor.ScaleFactor = 1;
if (this.imageEditor.ImageViewSize.Width > this.imageEditor.Width || this.imageEditor.ImageViewSize.Height > this.imageEditor.Height)
{
    this.imageEditor.ScaleFactor = 0;
}

I hope this helps! If you have any other issues or concerns, please do not hesitate to contact us!

Regards,
Deyan
the Telerik team

[tomas]

Hello Deyan,

It helps me a lot, thank you very much. But I still have a problem with a  picture that is very small. The reserved space of image editor is too large. When I don't set with and height of the image editor at all, I am getting Silverlight error about layout cycle detected.  passes.

I would need to set the ImageEditor this way:

Height="auto" Width="auto" MaxHeight="300" MaxWidth="300"

Do you know, how to achieve this please?

Thank you very much.

Tom

[Deyan]

Hello Tom,

If you want the image editor to reserve precisely the space equal to the size of the image you could try to set the width and height from code behind on every change of image scale factor (or on any change in the image). If you have some DesiredMaxWidth and DesiredMaxHeight, you could do the following:

this.imageEditor.ScaleFactor = 1;

if (this.imageEditor.ImageViewSize.Width <= DesiredMaxWidth && this.imageEditor.ImageViewSize.Height <= DesiredMaxHeight)
{
    this.imageEditor.Width = this.imageEditor.ImageViewSize.Width;
    this.imageEditor.Height = this.imageEditor.ImageViewSize.Height;
}
else
{
    this.imageEditor.Width = DesiredMaxWidth;
    this.imageEditor.Height = DesiredMaxHeight;
    this.imageEditor.ScaleFactor = 0;
}

With this code you will make the ImageEditor size to be exactly equal to the size of the image for small images and equal to the desired max width and height for bigger images.

I hope this solves your issue! If you still encounter any issues or have any other questions or concerns, please do not hesitate to contact us again!

Regards,
Deyan
the Telerik team