To improve performances, I want to use DrawingVisual objects instead of Shapes
https://learn.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/using-drawingvisual-objects?view=netframeworkdesktop-4.8
But I cannot figure out how to make the stroke invariant to scale transformations.
I found information (Invariant stroke thickness of Path regardless of the scale) recommending using Path instead of lines, but Path is a Shape and is incompatible with Drawing.
Is there a way to have a DrawingVisual with children scalable by transformation but maintaining the stroke thickness regardless of the scaling factor?
You would still have to transform Geometries instead of Drawings.
An example:
var transform = new ScaleTransform(10, 10);
using (var dc = drawingVisual.RenderOpen())
{
dc.DrawGeometry(
Brushes.AliceBlue,
new Pen(Brushes.Red, 3),
new RectangleGeometry
{
Rect = new Rect(5, 2, 15, 10),
Transform = transform
});
dc.DrawGeometry(
Brushes.Beige,
new Pen(Brushes.Navy, 3),
new EllipseGeometry
{
Center = new Point(12, 10),
RadiusX = 5,
RadiusY = 5,
Transform = transform
});
}
If the scaling factors are changing later, you do not need to redraw anything. Just set the ScaleX and ScaleY properties of the ScaleTransform that was initially assigned to the Transform properties of the Geometries.
Result:
Related
I've tried a few different approaches to this, but can't seem to get a combination that works.
Creating WPF app in C#, Visual Studio.
System.Windows.Shapes.Polyline works really nicely to draw into a Canvas in real-time, but I want to be able to draw in higher resolution onto a non-visual component that I can then render onto an Image.
If I create a Polyline on a Canvas that's visible in the UI, this works fine:
// Make rendertarget size of full page
RenderTargetBitmap rtb = new RenderTargetBitmap((int)wPage, (int)hPage, 96, 96, PixelFormats.Default);
// Render the polyline
rtb.Render(lineVirt);
// Apply to background image
imgBG.Source = rtb;
But if I create a Polyline on a Canvas that's not visible in the UI, then nothing renders to the image. This is probably fair enough. My guess is that the component recognises that it's not visible and therefore doesn't bother to render.
I've considered putting the Canvas somewhere in the UI buried under other controls, but that seems like a horrible kind of hack.
Essentially, all I need is a clean and fast way to draw a multi-point line of a specified width and color onto an Image. I thought that Polyline would work well, but only seems to work in a visible container.
What are my options?
You do not need a rendered Canvas or any other visible Panel at all.
Just use basic drawing primitives available at the Visual layer.
The DrawGeometry method below draws a Geometry onto a BitmapSource, using the bitmap's rendered size, i.e. the size that takes its DPI into account, and returns the resulting BitmapSource.
public static BitmapSource DrawGeometry(
BitmapSource source, Pen pen, Geometry geometry)
{
var visual = new DrawingVisual();
var rect = new Rect(0, 0, source.Width, source.Height);
using (var dc = visual.RenderOpen())
{
dc.DrawImage(source, rect);
dc.DrawGeometry(null, pen, geometry);
}
var target = new RenderTargetBitmap(
(int)rect.Width, (int)rect.Height, 96, 96, PixelFormats.Default);
target.Render(visual);
return target;
}
In order to draw in the bitmap's pixel units and hence ignore its DPI, modify the method like this:
var rect = new Rect(0, 0, source.PixelWidth, source.PixelHeight);
using (var dc = visual.RenderOpen())
{
dc.DrawRectangle(new ImageBrush(source), null, rect);
dc.DrawGeometry(null, pen, geometry);
}
The following method uses the above to draw a polyline as an IEnumerable<Point>.
public static BitmapSource DrawPolyline(
BitmapSource source, Pen pen, IEnumerable<Point> points)
{
var geometry = new PathGeometry();
if (points.Count() >= 2)
{
var figure = new PathFigure { StartPoint = points.First() };
figure.Segments.Add(new PolyLineSegment(points.Skip(1), true));
geometry.Figures.Add(figure);
}
return DrawGeometry(source, pen, geometry);
}
It would be used like
var source = new BitmapImage(new Uri(...));
var pen = new Pen
{
Brush = Brushes.Blue,
Thickness = 2,
};
var points = new List<Point>
{
new Point(100, 100),
new Point(1000, 100),
new Point(1000, 1000),
new Point(100, 1000),
new Point(100, 100),
};
image.Source = DrawPolyline(source, pen, points);
Your canvas needs a size, so someone or something has to Arrange it. That might already be enough to get it to render, but the only reliable way of rendering arbitrary visuals to a bitmap is to actually place them in the visual tree of a window that's displayed and thus laid out by WPF. You can then render to the bitmap in a deferred task at ContextIdle priority to ensure that layout is complete.
I'm using a DataGrid to represent some data in a WPF application. In a feature where I'm saving a particular WPF Window which has the DataGrid into a PDF using PDFSharp, I'm facing an issue that the DataGrid GridLines are not visible when the saved PDF is viewed in smaller viewing percentages.
(Refer attached images, only when the PDF view is set at 139%, the GridLines are visible. However, in smaller viewing %, some grid lines get omitted.)
Here's the PDF Saving Code:-
MemoryStream lMemoryStream = new MemoryStream();
Package package = Package.Open(lMemoryStream, FileMode.Create);
var doc = new System.Windows.Xps.Packaging.XpsDocument(package);
XpsDocumentWriter writer = System.Windows.Xps.Packaging.XpsDocument.CreateXpsDocumentWriter(doc);
VisualBrush sourceBrush = new VisualBrush(this);
DrawingVisual drawingVisual = new DrawingVisual();
using (var drawingContext = drawingVisual.RenderOpen())
{
drawingContext.DrawRectangle(sourceBrush, null, new Rect(new Point(0, 0), new Point(this.ActualWidth, this.ActualHeight)));
}
writer.Write(drawingVisual);
doc.Close();
package.Close();
var pdfXpsDoc = PdfSharp.Xps.XpsModel.XpsDocument.Open(lMemoryStream);
XpsConverter.Convert(pdfXpsDoc, sFileName, 0);
I believe it has to do with the quality with which the visual is drawn. Then I tried this snippet where I'm using DrawImage to make the visual at a higher resolution. Here's the snippet:-
MemoryStream lMemoryStream = new MemoryStream();
Package package = Package.Open(lMemoryStream, FileMode.Create);
var doc = new System.Windows.Xps.Packaging.XpsDocument(package);
XpsDocumentWriter writer = System.Windows.Xps.Packaging.XpsDocument.CreateXpsDocumentWriter(doc);
double dpiScale = 600.0 / 96.0;
var renderBitmap = new RenderTargetBitmap(Convert.ToInt32(this.Width * dpiScale),
Convert.ToInt32(this.Height * dpiScale),
600.0,
600.0,
PixelFormats.Pbgra32);
renderBitmap.Render(this);
var visual = new DrawingVisual();
using (var dc = visual.RenderOpen())
{
dc.DrawImage(renderBitmap, new Rect(0, 0, this.Width, this.Height));
}
writer.Write(visual);
doc.Close();
package.Close();
var pdfXpsDoc = PdfSharp.Xps.XpsModel.XpsDocument.Open(lMemoryStream);
XpsConverter.Convert(pdfXpsDoc, _pdfFileName, 0);
This snippet is working as in the grid lines are visible even in smaller viewing percentages but it makes my application stuck at the PDF save operation and also it throws System.OutofMemoryException with message "Insufficient memory to continue the execution of the program." However, the application doesn't crash.
To check the behavior of PDF viewer, I generated a table with multiple rows and columns in MS Word and saved it as a PDF. In that case, the table grid lines are clearly visible even at small viewing percentages.
Can anyone help me with this?
I assume the first code snippet creates a table in vector format (you do not supply a PDF that allows to verify this).
The second code snippet attempts to create a bitmap image (raster format).
Either way: with both vector and raster images it depends on the PDF viewer whether thin lines are visible. Adobe Reader has many options (like "Enhance thin lines", "Smooth line art", "Smooth images") that will have an effect on the actual display - to be set on the client computer, nothing to be set in the PDF.
I assume your test with MS Word also created a table in vector format, but maybe with thicker lines. So this test proofs nothing.
I had the same problem with disappearing grid lines when zooming out a PDF created with WPF.
The problem was that the TextBox objects in the Grid cells had a default background color (white) and a border color (black), and both were painted in the same place when zooming out. The solution was to not have a background at all, by setting the background to Transparent.
TextBox tx = new TextBox();
tx.Text = "X";
tx.SetValue(Grid.RowProperty, row);
tx.SetValue(Grid.ColumnProperty, col);
tx.BorderThickness = new Thickness(0.3, 0.3, 0, 0);
tx.BorderBrush = System.Windows.Media.Brushes.Black;
tx.Background = Brushes.Transparent;
grid.Children.Add(tx);
But what if you want to have some background in the grid cell? Then the solution is to add a separate Border object to the same Grid cell, and use Zindex to make sure that the Border object is painted in front of the other content.
TextBox tx = new TextBox();
tx.Text = "X";
tx.SetValue(Grid.RowProperty, row);
tx.SetValue(Grid.ColumnProperty, col);
tx.BorderThickness = new Thickness(0);
tx.Background = Brushes.LightPink;
grid.Children.Add(tx);
Border ct = new Border();
ct.SetValue(Grid.RowProperty, row);
ct.SetValue(Grid.ColumnProperty, col);
ct.BorderThickness = new Thickness(0.3, 0.3, 0, 0);
ct.BorderBrush = System.Windows.Media.Brushes.Black;
ct.Background = Brushes.Transparent;
ct.HorizontalAlignment = HorizontalAlignment.Stretch;
ct.VerticalAlignment = VerticalAlignment.Stretch;
Grid.SetZIndex(ct, 100);
grid.Children.Add(ct);
Also, UseLayoutRounding must be set to false (false is default). Otherwise lines with Thickness 0.5 or lower will disappear completely.
I would like to export a grid (whit all his children) to a PNG.
The problem is that some of these children are outside of the grid.
Here is my code:
VisualBrush sourceBrush = new VisualBrush(MyGrid);
DrawingVisual drawingVisual = new DrawingVisual();
using (DrawingContext drawingContext = drawingVisual.RenderOpen())
{
drawingContext.DrawRectangle(sourceBrush, null, new Rect(new Point(0, 0), new Point(Math.Floor(exportWidth), Math.Floor(exportHeight))));
drawingContext.Close();
}
RenderTargetBitmap renderTarget = new RenderTargetBitmap((int)Math.Floor(exportWidth), (int)Math.Floor(exportHeight), 96, 96, PixelFormats.Default);
renderTarget.Render(drawingVisual);
The resulting image is blurred if at least one of the children is outside the grid.
The exportHeight and exportWidth values are calculated upstream, relative to the position of the grid's children.
If all children are inside the grid, the picture is clear.
I think this is because of the VisualBrush original size that cannot be changed.
Do you know a way to fix it ?
EDIT :
I do not call renderTarget.Render(MyGrid); because it does not take in charge children who are outside the grid (Children whose top or left value is negative).
Have you tried?
MyGrid.ClipToBounds = true;
I have content presenter with contented bound to a shape from the templated parent. When the shape is an ellipse, the content presenter shows the ellipse, however when I change the Shape to path and set the data property to ellipse geometry nothing gets displayed, I am setting the stroke and fill same as on the ellipse shape. Here is how I am constructing the path:
Shape = new Path();
Shape.Data = new EllipseGeometry();
Shape.Fill = Brushes.Transparent;
Shape.Stroke = Brushes.CadetBlue;
However when I replace it with this it does work (Assuming Shape is of type Ellipse):
Shape = new Ellipse();
Shape.Fill = Brushes.Transparent;
Shape.Stroke = Brushes.CadetBlue;
The reason why I want to use a path with a geometry as data, is because I want to test intersection on the shape, but I don't know how to get the geometry of a shape object, where as if the shape is of type Path I can test against Shape.Data.
Any help would be appreciated.
The EllipseGeometry behaves a bit differently to the Ellipse shape. Its dimensions are defined by its RadiusX and RadiusY properties, which by default are 0, thus nothing is drawn. You can set these as follows:
Shape.Data = new EllipseGeometry { RadiusX = 1.0, RadiusY = 1.0 };
However, this still probably won't display as your Ellipse does. The Ellipse also defaults to Stretch.Fill for its Stretch property, but the Path has Stretch.None. If you change this, they should look the same:
Shape.Stretch = Stretch.Fill;
You can play around with the other properties of the Path and the EllipseGeometry to size, orient, and locate it correctly.
I need to draw a polyline into a DrawingVisual. I'm using StreamGeometry for performance reasons. The problem I have is that I can't figure out how to enable anti-aliasing. I can't find any method or property on StreamGeometry or on DrawingContext for anti-aliasing control.
The code below is in IronPython, but it shouldn't matter:
geometry = StreamGeometry()
context = geometry.Open()
context.BeginFigure(Point(10, 10), False, False)
context.LineTo(Point(100, 100), True, False)
context.LineTo(Point(200, 300), True, False)
context.Close()
dv = DrawingVisual()
dc = dv.RenderOpen()
dc.DrawGeometry(None, Pen(Brushes.Blue, 1), geometry)
dc.Close()
To disable anti-aliasing you could use RenderOptons class, with the static method SetEdgeMode it's possible to determine how the edges of non-text drawing primitives of your DependencyObject are rendered.
RenderOptions.SetEdgeMode(MyDependencyObject, EdgeMode.Aliased)
Hope this help.