Skip to main content
Home Forums Silverlight Programming Report a Silverlight Bug Stretch bugs?
8 replies. Latest Post by Eric Suen on May 19, 2007.
(0)
Eric Suen
Member
32 points
21 Posts
05-18-2007 3:00 AM |
Code:
<Canvas Canvas.Left="20" Canvas.Top="20" Background="Black" Width="100" Height="100"> <Path Stroke="Red" Stretch="None" Width="100" Height="100" Data="M-10,-10 L20,20"/> </Canvas> <Canvas Canvas.Left="150" Canvas.Top="20" Background="Black" Width="100" Height="100"> <Path Stroke="Red" Stretch="None" Width="100" Height="100" Data="M-10,-10 L200,200"/> </Canvas>
Why first one the line out of bounds still visible, and second one got clipped? Is this feature or bug?
Ashraf M...
290 points
65 Posts
05-18-2007 10:36 AM |
Clipping occurs if the shape goes beyond its layout bounds which is determined bere by the width and height of the Canvas. So, if your geometry goes past the right or bottom edges of the canvas it will get clipped, otherwise it will not get clipped.
This behavior may seem unnatural, but was chosen for compatibility with WPF.
05-18-2007 2:35 PM |
Hmm, so these are features too:
<Path Fill="#FF0000FF" Stretch="Fill" Stroke="#7FFF0000" StrokeThickness="20" Width="80" Height="120" Canvas.Left="20" Canvas.Top="20" Data="M20,100 l40,50 20,-90 z" /> <Path Fill="#FF0000FF" Stretch="Uniform" Stroke="#7FFF0000" StrokeThickness="20" Width="80" Height="120" Canvas.Left="120" Canvas.Top="20" Data="M20,100 l40,50 20,-90 z" /> <Path Fill="#FF0000FF" Stretch="UniformToFill" Stroke="#7FFF0000" StrokeThickness="20" Width="80" Height="120" Canvas.Left="220" Canvas.Top="20" Data="M20,100 l40,50 20,-90 z" /> <Rectangle Stroke="Black" Width="80" Height="120" Canvas.Left="20" Canvas.Top="20"/> <Rectangle Stroke="Black" Width="80" Height="120" Canvas.Left="120" Canvas.Top="20"/> <Rectangle Stroke="Black" Width="80" Height="120" Canvas.Left="220" Canvas.Top="20"/>
IMO, these kind of render behavior are too unnatural, make nonsense
05-18-2007 7:00 PM |
If you try the samples you have above in WPF, you'll see that both Silverlight and WPF both behave the same. This is indeed another case where we did pick an unnatural behavior to remain compatible with the existing XAML content available.
I would personally recommend that you simply not set Width/Height on a path and if you want clipping, set an explicit Clip. Not using Width/Height on a Path element will lead to both better performance and an easier and more consistent model.
If you would prefer that we change the behavior to be an easier model at the cost of less compatibility with existent content, that would be feedback that we would certainly be interested in receiving.
05-18-2007 9:25 PM |
Ashraf Michail:If you try the samples you have above in WPF, you'll see that both Silverlight and WPF both behave the same.
Ashraf Michail:I would personally recommend that you simply not set Width/Height on a path.
05-18-2007 9:38 PM |
Eric Suen: not set Width/Height? So what is the point of Uniform/UniformToFill?
Width/Height and Uniforn/UniformToFill is provided primarily for legacy XAML content in current Silverlight builds.
If you need it, feel free to use it in those cases. However, if you can get away without it your application will run faster and the behavior will be simpler to understand.
I agree Width/Height in Path is far from an ideal world. We have been discussing how to improve this in both Silverlight and WPF, but I can't promise any changes here yet.
05-18-2007 11:42 PM |
So, what exactly the means of "Stretch" or "Bounds", from the document:
Fill - The content is resized to fill the destination dimensions. The aspect ratio is not preserved.
For examples:<Path Fill="#FF0000FF" Stretch="Fill" Stroke="#7FFF0000" StrokeThickness="20" Width="80" Height="110" Canvas.Left="20" Canvas.Top="20" Data="M20,100 l40,50 20,-90 z" /><Rectangle Fill="#FF0000FF" Stretch="Fill" Stroke="#7FFF0000" StrokeThickness="20" Width="80" Height="110" Canvas.Left="120" Canvas.Top="20" /><Rectangle Stroke="Black" Width="80" Height="110" Canvas.Left="20" Canvas.Top="20"/><Rectangle Stroke="Black" Width="60" Height="90" Canvas.Left="30" Canvas.Top="30"/><Rectangle Stroke="Black" Width="80" Height="110" Canvas.Left="120" Canvas.Top="20"/>I expect it will looks like this:
Now I see if not set Width/Height what it will looks like, but how can I set Width/Height, the real bounds is big than that?
05-19-2007 12:05 AM |
Eric Suen: So, what exactly the means of "Stretch" or "Bounds", from the document: Fill - The content is resized to fill the destination dimensions. The aspect ratio is not preserved.
The "bounds" are defined to be the region bounding the drawn figure when StrokeLineJoin="Round" is used. If you use that linejoin mode you will see that the shape does indeed fit within Width/Height.
Mitered corners extend the length beyond the natrual bounds and won't fit. Moving mitered corners within an arbitrarily defined Width/Height can actually change the shape completely and isn't continous through animation which is why mitered corners poke out.
05-19-2007 3:43 AM |
In theory, when ScaleX == ScaleY(especially there are no scale at all), Fill/Uniform/UniformToFill should has same behavior. from above example, they are not...So, basiclly Stretch/Width/Height is meaningless for Path and Line, for example, I have a Path, its geometry bounds is (0, 0, 80, 60), and I want it fit into area (0, 0, 40, 30), I can't do that by just setting Width="40" and Height="30", the only way is using visual tools like Blend?
Stretch bugs?