Currently, SVG files that have filter tags in their XML are not respected by the RadPictureBox control. Sample code:
<filter ..>
<feGaussianBlur .. />
<feMorphology .. />
<feGaussianBlur .. />
<feColorMatrix .. />
<feComposite .. />
<feGaussianBlur .. />
<feDiffuseLighting ...>
<feDistantLight ... />
</feDiffuseLighting>
<feBlend .. />
<feComposite ../>
<feSpecularLighting ...>
<feDistantLight ../>
</feSpecularLighting>
<feComposite .. />
</filter>
Steps to reproduce:
1. Copy an image with a transparent background to the Clipboard
2. Paste it in RadPictureBox.
As a result you will notice that the transparency is lost.
Note: it is possible to handle clicking the Paste menu item and control what image exactly to be pasted:
public RadForm1()
{
InitializeComponent();
this.radPictureBox1.ContextMenuItemClick += RadPictureBox1_ContextMenuItemClick;
}
private void RadPictureBox1_ContextMenuItemClick(object sender, HandledEventArgs e)
{
if (sender == this.radPictureBox1.ContextMenuProperties.PasteItem)
{
e.Handled = true;
// Image extractedImage = // get image with transparency;
// this.radPictureBox1.Image = extractedImage;
}
}
Moving the cursor over the image would display a zoomed portion of the image located under the mouse position:
at System.Drawing.Graphics.CheckErrorStatus(Int32 status) at System.Drawing.Graphics.DrawPath(Pen pen, GraphicsPath path) at Telerik.WinControls.Svg.SvgRenderer.DrawPath(Pen pen, GraphicsPath path) at Telerik.WinControls.Svg.SvgVisualElement.RenderStroke(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgMarkerElement.RenderStroke(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgVisualElement.RenderFillAndStroke(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgVisualElement.Render(ISvgRenderer renderer, Boolean renderFilter) at Telerik.WinControls.Svg.SvgVisualElement.Render(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgElement.RenderChildren(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgVisualElement.Render(ISvgRenderer renderer, Boolean renderFilter) at Telerik.WinControls.Svg.SvgGroup.Render(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgElement.RenderChildren(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgVisualElement.Render(ISvgRenderer renderer, Boolean renderFilter) at Telerik.WinControls.Svg.SvgGroup.Render(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgElement.RenderChildren(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgVisualElement.Render(ISvgRenderer renderer, Boolean renderFilter) at Telerik.WinControls.Svg.SvgGroup.Render(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgElement.RenderChildren(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgElement.Render(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgFragment.Render(ISvgRenderer renderer) at Telerik.WinControls.Svg.SvgDocument.Draw(Int32 rasterWidth, Int32 rasterHeight) at Telerik.WinControls.RadSvgImage.GetRasterImage(Int32 width, Int32 height, Boolean cache) at Telerik.WinControls.Primitives.ImagePrimitiveImpl.PaintZoomSvgImage(IGraphics graphics, RadSvgImage svgImage, RectangleF rect, Single opacity, Size svgImageSize) at Telerik.WinControls.UI.PictureBoxCanvasElement.PaintOwnerSvgImage(IGraphics graphics) at Telerik.WinControls.UI.PictureBoxCanvasElement.PaintElement(IGraphics graphics, Single angle, SizeF scale) at Telerik.WinControls.RadElement.DoOwnPaint(IGraphics graphics, Single angle, SizeF scale) at Telerik.WinControls.RadElement.Paint(IGraphics graphics, Rectangle clipRectangle, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadItem.PaintOverride(IGraphics screenRadGraphics, Rectangle clipRectangle, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadElement.PaintChild(RadElement child, IGraphics graphics, Rectangle clipRectange, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadElement.PaintChildren(IGraphics graphics, Rectangle clipRectange, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.VisualElement.PaintChildren(IGraphics graphics, Rectangle clipRectange, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadElement.Paint(IGraphics graphics, Rectangle clipRectangle, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadItem.PaintOverride(IGraphics screenRadGraphics, Rectangle clipRectangle, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadElement.PaintChild(RadElement child, IGraphics graphics, Rectangle clipRectange, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadElement.PaintChildren(IGraphics graphics, Rectangle clipRectange, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.VisualElement.PaintChildren(IGraphics graphics, Rectangle clipRectange, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadElement.Paint(IGraphics graphics, Rectangle clipRectangle, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadItem.PaintOverride(IGraphics screenRadGraphics, Rectangle clipRectangle, Single angle, SizeF scale, Boolean useRelativeTransformation) at Telerik.WinControls.RadControl.OnPaint(PaintEventArgs e) at System.Windows.Forms.Control.PaintWithErrorHandling(PaintEventArgs e, Int16 layer) at System.Windows.Forms.Control.WmPaint(Message& m) at System.Windows.Forms.Control.WndProc(Message& m) at System.Windows.Forms.ScrollableControl.WndProc(Message& m) at Telerik.WinControls.RadControl.WndProc(Message& m) at System.Windows.Forms.Control.ControlNativeWindow.OnMessage(Message& m) at System.Windows.Forms.Control.ControlNativeWindow.WndProc(Message& m) at System.Windows.Forms.NativeWindow.DebuggableCallback(IntPtr hWnd, Int32 msg, IntPtr wparam, IntPtr lparam)
Currently, RadPictureBox supports the gif format, but the animated gifs are not animated like the standard MS PictureBox.
Workaround: use a RadLabel to show the animated gif:
this.radLabel1.LabelElement.Image = Properties.Resources.giphy;
Currently, SVG image blurs for example when "opacity:0.2995 (...)" See below image:
Add a call to "OnImageLoaded" to "RadPictureBoxelement.PasteImage()" method or create an event like "ImagePasted" ot be able to tract an image change at this point.
For me I solved this via an Harmony patch that adds a call to OnImageLoaded() on PasteImage() long time ago. Not really elegant, but I'm a noob in patching with Harmony.
Just want to leave it here for anyone that want ot use this solution too or for Telerik to implement a native way to expose an image change via PasteImage.
[HarmonyPatch(typeof(RadPictureBoxElement))]
[HarmonyPatch("PasteImage")]
public class RadPictureBoxElement_PasteImageFixes
{
private static readonly Dictionary<RadPictureBoxElement, Image> images = [];
public static void Prefix(object __instance)
{
if (__instance is RadPictureBoxElement pb)
{
// Remember our image
images.Remove(pb);
images.Add(pb, pb.Image);
}
}
public static void Postfix(object __instance)
{
if (__instance is RadPictureBoxElement pb && images.TryGetValue(pb, out var image) && pb.Image != image)
{
// Remove first to avoid conflicts on error
images.Remove(pb);
// Call "OnImageLoaded"
var method = typeof(RadPictureBoxElement).GetMethod("OnImageLoaded", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
method.Invoke(pb, null);
}
}
}
Overview
A bug found in the Telerik PictureBox control for Windows Forms. The issue specifically affects the rendering of SVG graphics, where the text element is being duplicated by the viewer.
Affected Component
- Product: Telerik UI for WinForms
- Control: `RadPictureBox'
- Version: 2025.02
- Platform: Windows Forms (.NET Framework)
Steps to Reproduce
1. Run the application from provided MCVE
2. Observe the text in SVG preview: the text is duplicated twice
3. Zoom in the view
4. Observe the text in SVG preview: there are many instances of the same text
Expected Behavior
The Telerik PictureBox should render only a single instance of the text from SVG file.
Actual Behavior
PictureBox shows many instances of the same text and the specifix number of them depends on the zoom level.
Sample Files
- ✅ `example.svg`: A SVG file that renders correctly in Microsoft Edge.
- ✅ `browser.png`: Screenshot of how the SVG file looks in Microsoft Edge.
- ✅ `browser_after_zoom.png`: Screenshot of how the SVG file looks in Microsoft Edge after 150% zoom.
- ❌ `telerik.png`: Screenshot of how the same file looks in the Telerik PictureBox.
- ❌ `telerik_after_zoom.png`: Screenshot of how the same file looks in the Telerik PictureBox after zooming in.
Environment
| Component | Version |
|----------------|--------------------|
| Telerik UI | 2025.2.520.48 |
| .NET Framework | .NET Framework 4.8 |
| OS | Windows 11 |
