Develop Reference

C# WPF shape rotation jagged edges

I am developing a software using WPF, when I draw a simple shape and rotate it for around 45', I get jagged edges. Antialiasing is not a solution, because I get blurry edges and on diagonals it simply does not work like I want. UseLayoutRounding and SnapsToDevicePixels does not help, because I think, it has something to do with line drawing algorithm. I tried the same with WinForms and I get better results, but I want to stick to WPF, because I am using some features of it already.
Code looks something like that:
Create a shape -> Shape = new Polygon();
Add shape to canvas -> DrawingLayer.Children.Add(Shape);
Rotate the shape -> RotateTransform rt = new RotateTransform(Angle, Centroid.X, Centroid.Y);
Update shape -> Shape.RenderTransform = rt;
WPF rotation:
WinForms rotation:
WPF rotation with Antialiasing:

It's hard to comment without seeing your actual code/markup, but with this markup...
<Window x:Class="StackOverflow.Question54926730"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="StackOverflow 54926730" SizeToContent="WidthAndHeight">
<Canvas Height="400" Width="400">
<Polygon Canvas.Left="100" Canvas.Top="100" Stroke="Black" StrokeThickness="1">
<Polygon.Points>
<Point X="0" Y="0" />
<Point X="200" Y="0" />
<Point X="200" Y="200" />
<Point X="0" Y="200" />
</Polygon.Points>
<Polygon.RenderTransform>
<RotateTransform Angle="45" CenterX="100" CenterY="100" />
</Polygon.RenderTransform>
</Polygon>
</Canvas>
</Window>
...the result looks good to me...
I notice you say you are rotating by "around" 45 degrees and, again, without seeing any code it's not clear what that means (44.95 degrees? 40 degrees?) but at both of those two angles the result looks good. Here's the not-so-round angle of 41.3579 degrees:
Only at multiples of 90 degrees ± 10 do I start to see a pronounced staircase effect. Here's 9 degrees:
Relevant version numbers:
64-bit Windows 10 Pro 1809 v17763.437
Visual Studio Community 2019 v16.0.1
.NET Framework v4.7.2
PresentationCore.dll v4.7.3362.0
PresentationFramework.dll v4.7.3362.0

XAML gradient issue in UWP for some devices

I'm using Page as landing screen in my app. XAML looks like this:
<Grid x:Name="LayoutRoot">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="7*"/>
</Grid.RowDefinitions>
<Rectangle StrokeThickness="0" Fill="#FF79D2F4" Margin="0,0,0,-10" Grid.RowSpan="2"/>
<Rectangle StrokeThickness="0" Fill="#FF1F8CC5" Margin="0,-10,0,0" Grid.Row="2" Grid.RowSpan="2"/>
<Image Source="ms-appx:///Assets/ViewMedia/Banners/Banner_Light_Big.jpg" Grid.Row="1" Grid.RowSpan="2"/>
<Rectangle StrokeThickness="0" Grid.Row="2" Grid.RowSpan="2">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0"/>
<GradientStop Color="#7F000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<StackPanel MaxWidth="300" Margin="20,35"
HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
<Button x:Name="LoginButton" x:Uid="LoginButton" Style="{StaticResource BrandButtonStyle}" Margin="0,5"
Click="LoginButton_Click"/>
<Button x:Name="RegisterButton" x:Uid="RegisterButton" Style="{StaticResource BrandButtonStyle}" Margin="0,5"
Click="RegisterButton_Click"/>
</StackPanel>
</Grid>
I've got 3 devices on which I'm running the app:
Microsoft Lumia 950 XL [M]
Custom build PC [PC]
Lenovo ThinkPad Tablet 2 [T]
When running the app this page renders well on M and PC but on T Gradient and two Buttons at the bottom are not rendered at all. I don't see them but I can press Buttons and their tap event handlers will strike. But if I comment Rectangle with gradient everything is fine on all devices.
This is how the app looks on T when using gradient. No buttons. And gradient is also not visible.
This is how the app looks on T without gradient. Buttons are in place.
And this is how it should look running on PC. Buttons and gradient are visible.
I don't see any errors in output when running the app. I don't know why this happens only on specific devices. Maybe this is kind of known issue?
UPDATE 1
From users feedback, I can say that this bug hits only Atom-powered devices. But I'm not sure if this is 100% true for all Atom-powered devices.
UPDATE 2
I'd updated T with W10 from Insider Preview Fast Ring. The bug is in place. So this is not connected to OS builds.
UPDATE 3
Switching Buttons Style back to normal does not solve this. So Style is good, it's not the cause.

Try removing the Grid.RowSpan="2" from the Rectangle (or add a RowDefinition), you have 4 rows (4 RowDefinition) but with the Rectangle having Grid.RowSpan=2 it adds up to 5 rows, so it might be causing you trouble.
EDIT: My bad, Rectangle actually spans over rows 2 and 3 (Grid.Row="2"), so it's ok.
Since you're just stacking <StackPanel> over <Grid> (with nothing fancy), you could try to replace the root layout <Grid x:Name="LayoutRoot"> with <Canvas x:Name="LayoutRoot"> and see if that makes a difference.

I've come across similar issues, and went for a different and more portable approach.
I made a gradient image of height 1 (to save space), and sufficient pixels in width to give the proper gradient resolution. Added an image and stretched it. Quite a bit faster and offloads the renderling pipeline as well.
And it works just as well in Xamarin.Forms.

The fact that the rectangle has a gradient in it is a probably a "red herring".
Focus first on why the buttons don't appear at all. Once you solve that, it should be easy to add the gradient.
There are two likely reasons:
Adding the rectangle pushes the buttons down offscreen.
or 2. The renderer "choked" on the gradient, and didn't render anything else after it encountered it.
IMHO, #1 is more likely. I say that because I notice your overlaid StackLayout has VerticalAlignment="Bottom". So if the layout engine has (mistakenly?) decided that the single cell in the outermost grid is much taller than the screen, then two things will happen: the gradient will be stretched very far vertically (so appears not to change), and the buttons will be pushed off the bottom of the screen.
#2 would be a renderer bug involving gradient (but I doubt that will be the case).
back to #1:
What is the actual pixel height of "Banner_Light_Big.jpg"? Consider making a smaller version for the device giving you trouble [picking a version based on device height in inches or in pixels, not sure which applies here]. If you remove the banner completely, does the problem go away? If so, but you don't want to shrink it, you might need to override layout (measure?) method and do your own calculation.
Alternatively, change the two "Auto" heights to "NN*" or "NN" (NN = any specific number): anything with no "Auto"s will almost surely eliminate the problem.
If the resulting "non-Auto" layout isn't exactly what you want, at least it will give you a working starting point, from which to try slightly different variations on how to nest these elements, to get the desired spacing.

Try adding the color attribute and value for the first Gradient stop as well.
Maybe since only a single color is specified, it takes the same color and applies throught the button.
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0"/> // add color attribute here
<GradientStop Color="#7F000000" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>

Different images are printed as same image using PrintVisual

I'm using PrintDialog.PrintVisual() to print my viewmodel. For this I use binding on a dictionary:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="329" Height="204">
<Image Source="{Binding Details.Properties[Imagedata].ImageStream}" Stretch="Fill" Width="95" Height="122" Canvas.Left="14" Canvas.Top="41"/>
<Image Source="{Binding Details.Properties[Signature].ImageStream}" Stretch="Fill" Height="25" Width="100" Canvas.Left="122" Canvas.Top="143"/>
</Canvas>
If I put this Canvas on my WPF window, it's showing fine. But if I want to print it, it's using the first image on my second image. In debugger I checked after UpdateLayout the Image.Source - both are right. The next step is PrintDialog.Printvisual(canvas, "print"); The output is as described but not the same every time. Sometimes the first image is even repeated in the second Image.
Why does this happen?
UPDATE: I found a workaround: I search for all Image elements, copy the ImageSource into a MemoryStream and create a new BitmapImage out of it. It's not nice, but it works right now. If anybody could explain, why this works, it would be great.

Drop shadow effect in Windows Phone 8.1 Runtime?

I'm looking for a way to add a Drop Shadow Effect to the multiple kind of elements in my Windows Phone 8.1 Runtime (not Silverlight!) application. The main problem is that.. there's no offical API for it. The main problem is that I need to mimic this effect not only to the basic shapes (like rectangle or a line), but also a path, like here:
Picture is borrowed from this question: path-with-broken-shadow-effect - I hope the owner won't mind ;) Now, he has achieved this effect because it was done in WPF. I'm working on a Universal App (so WinRT), and there's no Effects extension.
I've searched the web multiple times, and found some kind of workarounds, but they all miss something. For example this one:
http://www.silverlightshow.net/items/Simple-Xaml-Drop-Shadows-in-Silverlight-2.aspx <- I can't work on Canvas, the content has to be a Grid.
Do you any idea how can I achieve satisfying results on faking Drop Shadow Effect in Windows Phone 8.1 Runtime?

Apply a RenderTransform to the shadow shape. Set the scale to make it bigger:
<Grid Style="{StaticResource LayoutRootStyle}" Background="#FF803535" >
<Rectangle Width="100" Height="100" Opacity="0.3" RenderTransformOrigin="0,0" StrokeThickness="16" StrokeDashCap="Round" StrokeEndLineCap="Round" StrokeLineJoin="Round" StrokeStartLineCap="Round" Stroke="Black" >
<Rectangle.RenderTransform>
<CompositeTransform ScaleX="1.07" ScaleY="1.07" />
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle Width="100" Height="100" Fill="Blue"></Rectangle>
</Grid>

WPF XAML clipping ellipse on canvas when using TranslateTransform

When I run this code in WPF it gives me 1/4 of a circle. When removing the ClipToBounds tag, i get my whole circle.
1. Why is it clipping before rendering?
2. How to i fix that, while keeping clipping?
<Canvas ClipToBounds="True">
<Ellipse Canvas.Left="-10"
Canvas.Top="-10"
Width="20"
Height="20"
Fill="LightSeaGreen"/>
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="4.8"
ScaleY="4.8"
CenterX="0"
CenterY="0"/>
<TranslateTransform X="48"
Y="48"/>
</TransformGroup>
</Canvas.RenderTransform>
</Canvas>

Why is it clipping before rendering?
It's not.
As you can see from here:
Your Ellipse is rendered perfectly. The ClipToBounds="True" is what ruins is as you can see from your Canvas:
How to i fix that, while keeping clipping?
This is quite a broad question. Your problem comes from the fact you are putting your Ellipse outside the Canvas (Canvas.Left="-10" Canvas.Top="-10") and then you clip it. Explain what is your goal and I can try to help you out.

This behaviour is by design. The authors of the textbook (Computer Graphics: Principles and Practice - Third Edition) have confusingly introduced ClipToBounds in a way that makes it seem like it is a part of the examples that follow in the book. In fact, they are not using ClipToBounds="True". You can verify that by downloading their lab package from http://sklardevelopment.com/graftext/ChapWPF2D/ .
To illustrate, here is the actual source code for one of their examples:
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Name="ClockCanvas" >
<Ellipse
Width="20.0" Height="20.0"
Canvas.Left="-10.0" Canvas.Top="-10.0"
Fill="lightgray"/>
</Canvas>
Note that there is no ClipToBounds="True" on the canvas.