Drawing with the draw tool over the image with big size (e.g. 3000 x 2500) result in loss of quality. Workaround: In the DrawCommand use the following method to create a BitmapSource which should be used for creating a RadBitmapImage. public RadBitmap Execute(RadBitmap source, object context) { ... ... ... BitmapSource bitmapSource = GetBitmapSource(source.Width, source.Height, canvas); return new RadBitmap(bitmapSource); } private BitmapSource GetBitmapSource(int width, int height, Canvas surface) { Size size = new Size(width, height); surface.Measure(size); surface.Arrange(new Rect(size)); // Create a render bitmap and push the surface to it RenderTargetBitmap renderBitmap = new RenderTargetBitmap( (int) size.Width, (int) size.Height, 96d, 96d, PixelFormats.Pbgra32); renderBitmap.Render(surface); return renderBitmap; }
When the ShapeTool is active and you execute another tool (lets say DrawTool) the UI becomes partially unresponsive. This includes the tools section and the tool settings panel. The issue is reproducible in a NoXaml scenario (using implicit styles) and only if the Telerik.Windowls.Controls.ImageEditor.xaml ResourceDictionary is merged in the resources of the view where the control is defined (example: MainWindow.Resources). To work this around define the ResourceDictionary in App.xaml.
As a workaround you can subscribe to the Loaded event of the control where you can set the IsPanningEnabled property. private void ImageEditor_Loaded(object sender, System.Windows.RoutedEventArgs e) { this.imageEditor.IsPanningEnabled = true; } Available in LIB version: 2017.1.213
The setting should be available in the settings UI, the DrawTextCommandContext and it should be respected in the DrawText command's Execute method. Scheduled for:
The feature will be available in R1 2019, scheduled for the mid of January 2019.
Using the built in OpenImageCommand functionality of telerik:RadImageEditorUI, you can detect the OpenImageCommand has been executed via the CommandExecuted event.
However there is no way to determine whether an image was loaded or not.
The Dialog Result is silently consumed by the OpenImageCommand class so if the user clicks the cancel button on the open file dialogue you have no way of knowing.
It would be good to have a means to determine the dialog result, either via a property on the command, by an additional property in the CommandExecuted event args, or even an event that is raised when an image is loaded or the dialog is cancelled.
To achieve this functionality I had to implement code like the following:
public bool IsNewImage { get; set; }
private void ImageEditor_CommandExecuting(object sender, ImageCommandExecutingEventArgs e)
{
if (e.Command is OpenImageCommand)
{
IsNewImage = false;
}
}
private void HistoryOnCurrentImageChanged(object sender, EventArgs e)
{
var history = (ImageHistory)sender;
IsNewImage = (!history.CanRedo && !history.CanUndo);
}
private void ImageEditor_CommandExecuted(object sender, ImageCommandExecutedEventArgs e)
{
if (e.Command is OpenImageCommand)
{
if (IsNewImage)
{
// Deal with new image...
}
}
}
It'd be so much easier to have the following:
private void ImageEditor_CommandExecuted(object sender, ImageCommandExecutedEventArgs e)
{
if (e.Command is OpenImageCommand)
{
if (!e.CommandCancelled)
{
// Deal with new image...
}
}
}
Thanks 👍
The RadImageEditorUI's tools (selection, shape, text, etc.) have different UI element representing their settings. Those are hosted in a settings panel. In case there are many options that cannot fit in the vertical size of the control, a scrollbar should get displayed. One example of this is the SelectionTool.
In the Office2019 and VisualStudio2019 themes, the vertical scrollbar doesn't get displayed.
To work this around, extract the ControlTemplate of SettingsPanel control. Then find the first RowDefinition of the root Grid panel and change its Height from Auto to star ( * ).
<Style TargetType="telerik:ToolSettingsPanel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerik:ToolSettingsPanel">
<Grid Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- other xaml here -->
1. RadImageEditor with ZoomToCursor enable.
2.Apply ZoomOut function until render width/height less than view width/height
result => Image zoom at center of viewport, not zoom at cursor position.
var stream = new MemoryStream();
image.Save(stream, System.Drawing.Imaging.ImageFormat.Png);
ArgumentException is thrown on mouse up, after using the DrawTool or ShapeTool in RadImageEditor or RadImageEditorUI.
The exception message is: "'∞' is not a valid value for property 'Width'."
The stacktrace is:
System.ArgumentException: '8' is not a valid value for property 'Width'. at System.Windows.DependencyObject.SetValueCommon(DependencyProperty dp, Object value, PropertyMetadata metadata, Boolean coerceWithDeferredReference, Boolean coerceWithCurrentValue, OperationType operationType, Boolean isInternal) at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value) at Telerik.Windows.Media.Imaging.Commands.DrawCommand.Execute(RadBitmap source, Object context) at Telerik.Windows.Media.Imaging.History.ImageHistory.Execute(IImageCommand command, Object context) at Telerik.Windows.Controls.RadImageEditor.ExecuteCommand(IImageCommand command, Object context) at Telerik.Windows.Controls.RadImageEditor.CommitTool(Boolean executeSameToolAfterCommit) at Telerik.Windows.Media.Imaging.Tools.DrawToolBase.InvokeEndDraw(Point point) at Telerik.Windows.Media.Imaging.Tools.DrawToolBase.DrawingCanvas_MouseLeftButtonUp(Object sender, MouseButtonEventArgs e)
To work this around, you can create a custom DrawCommand based on the code from the default one and then replace it in the ShapeTool and DrawTool.
public class CustomDrawTool : DrawTool
{
public override IImageCommand GetCommand()
{
return new CustomDrawCommand();
}
}
public class CustomShapeTool : ShapeTool
{
public override IImageCommand GetCommand()
{
return new CustomDrawCommand();
}
}
public class CustomDrawCommand : IImageCommand
{
public RadBitmap Execute(RadBitmap source, object context)
{
DrawCommandContext drawCommandContext = context as DrawCommandContext;
if (drawCommandContext == null || drawCommandContext.DrawnPath == null)
{
return source;
}
Canvas canvas = new Canvas();
canvas.ClipToBounds = true;
var dpiXFactor = source.Bitmap.DpiX / 96;
var dpiYFactor = source.Bitmap.DpiY / 96;
double imageWidth = source.Width / dpiXFactor;
if (imageWidth == double.PositiveInfinity)
{
imageWidth = source.Width;
}
double imageHeight = source.Height/ dpiYFactor;
if (imageHeight == double.PositiveInfinity)
{
imageHeight = source.Height;
}
canvas.Children.Add(new System.Windows.Controls.Image()
{
Source = source.Bitmap,
Width = imageWidth,
Height = imageHeight,
});
Panel parent = drawCommandContext.DrawnPath.Parent as Panel;
if (parent != null)
{
parent.Children.Remove(drawCommandContext.DrawnPath);
drawCommandContext.DrawnPath.RenderTransform = new ScaleTransform(1 / dpiXFactor, 1 / dpiYFactor);
canvas.Children.Add(drawCommandContext.DrawnPath);
}
RenderOptions.SetBitmapScalingMode(canvas, BitmapScalingMode.NearestNeighbor);
BitmapSource bitmapSource = this.GetBitmapSource(source.Width, source.Height, canvas, source.Bitmap.DpiX, source.Bitmap.DpiY);
return new RadBitmap(bitmapSource);
}
private BitmapSource GetBitmapSource(int width, int height, Canvas canvas, double dpiX, double dpiY)
{
Size size = new Size(width, height);
canvas.Measure(size);
canvas.Arrange(new Rect(size));
RenderTargetBitmap renderBitmap = new RenderTargetBitmap(width, height, dpiX, dpiY, PixelFormats.Pbgra32);
renderBitmap.Render(canvas);
return renderBitmap;
}
}
<telerik:ImageToolItem ImageKey="Draw" telerik:LocalizationManager.ResourceKey="ImageEditor_Draw" Command="commands:ImageEditorRoutedCommands.ExecuteTool">
<telerik:ImageToolItem.CommandParameter>
<local:CustomDrawTool />
</telerik:ImageToolItem.CommandParameter>
</telerik:ImageToolItem>