WPF: Can't get what I need to do to get things right (responsive controls).
-
Hello Richard, first of all thank you for replying. Currently doing comprehensive test of the first variant (with Canvas). Please share with experience; how to move eg. my sketch, if it's situated within Canvas space. I asked because I'd failed to move the sketch separately (it moves with Canvas itself only).:confused: Thanks in advance! P.S. the first feeling. It seems Canvas' variant strongly keeps original (1024x768) position of the controls. With no adaptation/resizing, though. In other words the controls don't "swim", at least. :thumbsup: To be continued. Yes, it seems that's it! The ViewBox's variant, in contrast with Canvas' variant, strongly keeps position of the controls and scales them correspondingly to given aspect ratio/resolution.:thumbsup: To be honest, I tried to use symbiosis of Canvas and ViewBox; true, with no success. Because I didn't use some significant (as it turned out) parameters which you offered. P.P.S. Previously, I asked the same question at many places. I got a strong sense that nobody had got me. What I really need. I provided the same sample code, though. As though the people never faced with such kind of issues. Perhaps they don't port their apps to another workstations or make "Calculator" apps only, or so. :confused: my regards.
To move things around on the canvas, you'll need to update the
Canvas.TopandCanvas.Leftproperties on the things you want to move. If you want to move a group of shapes as a single unit, the simplest option would probably be to use nestedCanvaspanels. You can then change theCanvas.LeftandCanvas.Topproperties on the child canvas to move the entire group.<Canvas Grid.Row="1">
<!-- Bus: -->
<Canvas Canvas.Top="..." Canvas.Left="...">
<Path ... />
...
</Canvas><!-- Sign: --> <Canvas Canvas.Top="..." Canvas.Left="..."> <Path ... /> ... </Canvas> ...</Canvas>
You'll obviously need to adjust the position of the shapes within the nested canvas, since they'll now be relative to the position of the nested canvas rather than the parent canvas. So if your shape was previously positioned at
(100, 50), and is now in a nested canvas positioned at(90, 50), the shape would need to be at(10, 0). WPF also has strong support for animation: Animation Overview | Microsoft Docs[^] Animation using Storyboards in WPF[^] Advanced Animations in WPF[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
To move things around on the canvas, you'll need to update the
Canvas.TopandCanvas.Leftproperties on the things you want to move. If you want to move a group of shapes as a single unit, the simplest option would probably be to use nestedCanvaspanels. You can then change theCanvas.LeftandCanvas.Topproperties on the child canvas to move the entire group.<Canvas Grid.Row="1">
<!-- Bus: -->
<Canvas Canvas.Top="..." Canvas.Left="...">
<Path ... />
...
</Canvas><!-- Sign: --> <Canvas Canvas.Top="..." Canvas.Left="..."> <Path ... /> ... </Canvas> ...</Canvas>
You'll obviously need to adjust the position of the shapes within the nested canvas, since they'll now be relative to the position of the nested canvas rather than the parent canvas. So if your shape was previously positioned at
(100, 50), and is now in a nested canvas positioned at(90, 50), the shape would need to be at(10, 0). WPF also has strong support for animation: Animation Overview | Microsoft Docs[^] Animation using Storyboards in WPF[^] Advanced Animations in WPF[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
hello Richard, While playing around "Symbiosis" of ViewBox and Canvas I stumbled across a weird behavior of Canvas. Eg., both ViewBox and Canvas are (Grid.Row="1"). I've got "Row1" dimensions and made a Canvas (Sketch inside) with exactly same dimensions. Then I put it into a ViewBox. Yes, as I wrote yesterday this "Symbiosis" keeps position and scales controls. That's true. However, I noticed one weirdness. I colored Canvas and when I maximized window (1920x1080) I had seen that Canvas hadn't overlapped entire width of the window. There were two pretty wide, vertical non-colored "columns", to the left and right of colored Canvas. P.S. I've tried to play with Canvas' height and width, to no avail. It just disappears, if it has no dimensions. Code:
-
hello Richard, While playing around "Symbiosis" of ViewBox and Canvas I stumbled across a weird behavior of Canvas. Eg., both ViewBox and Canvas are (Grid.Row="1"). I've got "Row1" dimensions and made a Canvas (Sketch inside) with exactly same dimensions. Then I put it into a ViewBox. Yes, as I wrote yesterday this "Symbiosis" keeps position and scales controls. That's true. However, I noticed one weirdness. I colored Canvas and when I maximized window (1920x1080) I had seen that Canvas hadn't overlapped entire width of the window. There were two pretty wide, vertical non-colored "columns", to the left and right of colored Canvas. P.S. I've tried to play with Canvas' height and width, to no avail. It just disappears, if it has no dimensions. Code:
The
ViewboxhasStretch="Uniform". That means it won't change the aspect ratio of the childCanvas. If you resize the window so that row 1 has an aspect ratio that isn't256 × 125(1024 × 500), then you'll end up with spaces around yourViewbox, either on the left and right sides, or on the top and bottom sides. If you want to fill the entire background of the row, add aRectangleto the same grid row, outside of theViewbox, and set your fill there. You'll need to add it to the markup before theViewbox, so that the rectangle appears behind it.<Rectangle Grid.Row="1" Fill="Bisque" />
<Viewbox Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" StretchDirection="Both">
<Canvas Width="1024" Height="500"> <!-- No background colour here -->
...
</Canvas>
</Viewbox>
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
The
ViewboxhasStretch="Uniform". That means it won't change the aspect ratio of the childCanvas. If you resize the window so that row 1 has an aspect ratio that isn't256 × 125(1024 × 500), then you'll end up with spaces around yourViewbox, either on the left and right sides, or on the top and bottom sides. If you want to fill the entire background of the row, add aRectangleto the same grid row, outside of theViewbox, and set your fill there. You'll need to add it to the markup before theViewbox, so that the rectangle appears behind it.<Rectangle Grid.Row="1" Fill="Bisque" />
<Viewbox Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" StretchDirection="Both">
<Canvas Width="1024" Height="500"> <!-- No background colour here -->
...
</Canvas>
</Viewbox>
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
I think that the case with rectangle isn't a way. I need overlapping of entire Row1 by Canvas. Because I'm going to use whole space of Row1, from left to right. True, I can't figure out what I need to do for that.
I can assure you, it is the way. :) Try it and see.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
I can assure you, it is the way. :) Try it and see.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
Yes, agree. That's fake way. There's no canvas at fake colored places. :) I need overlapping of entire Row1.
You can't have the canvas maintain its aspect ratio and cover the entire space at the same time. Either the canvas will be distorted, or there will be spaces around it. There's nothing "fake" about using a rectangle to fill the background of the row.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
-
You can't have the canvas maintain its aspect ratio and cover the entire space at the same time. Either the canvas will be distorted, or there will be spaces around it. There's nothing "fake" about using a rectangle to fill the background of the row.
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Richard>There's nothing "fake" about using a rectangle to fill the background of the row. It would be better if that
Rectanglewould help me to adapt aCanvasproperly. :) I saw at least a few apps whereCanvaswas playing, so to speak, one of key roles and excellently adapted to the range of resolutions. From relatively older 1024x768 to modern 1920x1080. Unfortunately the history has no records by which way it was made.:confused: I've tried many variants ofViewBox/Canvassymbiosis and differentCanvasaspect ratios, to no avail. Previously I thought that WPF (in contrast with WinForm) is more advanced stuff, at least in terms of adaptation/responsiveness. Now, I see it's not that.:thumbsdown: I guess there are ways to solve that. But they are not based on pure XAML. -
Richard>There's nothing "fake" about using a rectangle to fill the background of the row. It would be better if that
Rectanglewould help me to adapt aCanvasproperly. :) I saw at least a few apps whereCanvaswas playing, so to speak, one of key roles and excellently adapted to the range of resolutions. From relatively older 1024x768 to modern 1920x1080. Unfortunately the history has no records by which way it was made.:confused: I've tried many variants ofViewBox/Canvassymbiosis and differentCanvasaspect ratios, to no avail. Previously I thought that WPF (in contrast with WinForm) is more advanced stuff, at least in terms of adaptation/responsiveness. Now, I see it's not that.:thumbsdown: I guess there are ways to solve that. But they are not based on pure XAML.You approached it all wrong. At a minimum, all your "graphics" should have been a "user control". You've mixed content for 3 rows. As mentioned, "margins" are for "touching up"; not "layout". Why "paths" instead of "images"? None of it makes any sense.
"(I) am amazed to see myself here rather than there ... now rather than then". ― Blaise Pascal
-
You approached it all wrong. At a minimum, all your "graphics" should have been a "user control". You've mixed content for 3 rows. As mentioned, "margins" are for "touching up"; not "layout". Why "paths" instead of "images"? None of it makes any sense.
"(I) am amazed to see myself here rather than there ... now rather than then". ― Blaise Pascal
Gerry Schmitz> you approached it all wrong. OK, these words are just words. Could you show me correct approaches by means of uploading a working code (as it was done above, in previous posts). Let's suppose. It'll be "simpliest" task called " how to make
Canvasto be fully adaptive/responsive to the range of resolutions e.g. 1024x768 ---> 1920x1080". Really have no clue how to do that by professional way. I would be much appreciated.
