StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There really isn't a discrepancy... what's happening is that you are taking something that renders really small (your path is very small):</p> <p><img src="https://i.stack.imgur.com/2rdpS.png" alt="screenshot"></p> <p><em>look at the tiny boxes</em></p> <p>...and scaling it up extremely large and telling the layout to round to the nearest whole pixel via <code>UseLayoutRounding</code></p> <p>the reason why the result is unreliable is that the <code>Path</code>s are being scaled independently of the <code>Canvas</code> since it doesn't actually layout its contents. So when one of your path points land on an uneven pixel boundary (which could happen at some screen resolutions and not others) it's rounding to the nearest virtual pixel inside the un-scaled the canvas and this is getting scaled from the <code>Viewbox</code> and then rounded again to the nearest whole pixel (using the same scale the <code>Viewbox</code> determined by the scaling of the <code>Canvas</code>) exacerbating the rounding error. You can see this illustrated more easily if we turn off the <code>StackPanel.Background</code> (default is transparent) set the <code>Canvas.Background</code> to green and dial down the opacity on the color of the stroke:</p> <p><img src="https://i.stack.imgur.com/dAyt2.png" alt="screenshot"></p> <p><em>you can see the path rounding is different than the canvas</em></p> <p>So you either have to turn off <code>UseLayoutRounding</code> so that there is decimal points carried through the operation or simplify your layout so that the errors don't occur.</p> <p>For instance, if you let the paths scale themselves by removing the inappropriate and superfluous fixed size canvas and setting <code>Path.Stretch = Uniform</code> you end up with:</p> <pre><code> <StackPanel Background="Red" Width="400" UseLayoutRounding="True"> <StackPanel.Resources> <Style TargetType="Viewbox"> <Setter Property="Height" Value="400" /> <Setter Property="Margin" Value="0,0,0,50" /> </Style> <Style TargetType="Path"> <Setter Property="Stroke" Value="Blue" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="Stretch" Value="Uniform" /> </Style> </StackPanel.Resources> <Viewbox> <Path Data="M 1,1 h 3 v 3 h -3 z" /> </Viewbox> <Viewbox> <Path Data="M 1,1 h 4 v 4 h -4 z" /> </Viewbox> </StackPanel> </code></pre> <p><strong>resulting in:</strong> <img src="https://i.stack.imgur.com/C6W4F.png" alt="screenshot"></p> <p><em>probably what you were actually looking for</em></p> <p>However if this was an over simplification and you actually have multiple paths that you intended to put inside your <code>Canvas</code>, I suggest you use a container that actually does its own layout, the obvious choice is a <code>Grid</code> this way you can still have the paths scale themselves along with the <code>Grid</code> keeping them in lock-step (<code>Canvas</code>s won't layout their children). The code would look like:</p> <pre><code> <StackPanel Background="Red" Width="400" UseLayoutRounding="True"> <StackPanel.Resources> <Style TargetType="Viewbox"> <Setter Property="Height" Value="400" /> <Setter Property="Margin" Value="0,0,0,50" /> </Style> <Style TargetType="Path"> <Setter Property="Stroke" Value="Blue" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="Stretch" Value="Uniform" /> </Style> </StackPanel.Resources> <Viewbox> <Grid Width="5" Height="5"> <Path Data="M 1,1 h 3 v 3 h -3 z" /> </Grid> </Viewbox> <Viewbox> <Grid Width="6" Height="6"> <Path Data="M 1,1 h 4 v 4 h -4 z" /> </Grid> </Viewbox> </StackPanel> </code></pre> <p><strong>and the result is identical to the one without a secondary container</strong></p> <p>hope this helps -ck</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload