Newbie problem: laying out grid issues in silverlight
-
Hi everyone, I'm very new to silverlight, and trying to build a custom control which is made up of a series of paths/shapes which are of varying sizes. Is there some sort of container that exists which you can put a series of paths/shapes in, and when stretched it scales the whole lot like you'd scale a picture?? My problem is that whenever the control is resized, (e.g. while building main.xaml) my elements all scale by different amounts, because their margins are not scaled. e.g. Say the control (200x100) consists of A Grid (1x1) containing: --A Large Rectangle 200 x 100 [size of entire control, margins 0] --A Small Square 50x50 in the centre of the grid, [so margins are 75 L&R, 25 top&Bottom] When the control is squashed to e.g. 100x50, the margins for the small square are bigger than the entire control (75L+75R = 150), so the square vanishes. Conversely, when the control is doubled in width to 400 pixels, the small square grows not by 2x, but by 5x (from 50pixels to 250 pixels), because the margins are still 150pixels total. I need these margins to scale, so when the control is half the size, so are the margins and visa versa.... Or at least something that emulates that. I've tried trying to make the grid have a row/column for everything that needs laying out and using the 'star' system, but some of these controls will be made up of 20 or so different paths/shapes of different sizes and locations and it's beyond impractical to implement (also buggy :S ). Surely there's some sort of container that exists which you can just put paths/shapes in, and when stretched it scales the whole lot like you'd scale a picture?? Help!
-
Hi everyone, I'm very new to silverlight, and trying to build a custom control which is made up of a series of paths/shapes which are of varying sizes. Is there some sort of container that exists which you can put a series of paths/shapes in, and when stretched it scales the whole lot like you'd scale a picture?? My problem is that whenever the control is resized, (e.g. while building main.xaml) my elements all scale by different amounts, because their margins are not scaled. e.g. Say the control (200x100) consists of A Grid (1x1) containing: --A Large Rectangle 200 x 100 [size of entire control, margins 0] --A Small Square 50x50 in the centre of the grid, [so margins are 75 L&R, 25 top&Bottom] When the control is squashed to e.g. 100x50, the margins for the small square are bigger than the entire control (75L+75R = 150), so the square vanishes. Conversely, when the control is doubled in width to 400 pixels, the small square grows not by 2x, but by 5x (from 50pixels to 250 pixels), because the margins are still 150pixels total. I need these margins to scale, so when the control is half the size, so are the margins and visa versa.... Or at least something that emulates that. I've tried trying to make the grid have a row/column for everything that needs laying out and using the 'star' system, but some of these controls will be made up of 20 or so different paths/shapes of different sizes and locations and it's beyond impractical to implement (also buggy :S ). Surely there's some sort of container that exists which you can just put paths/shapes in, and when stretched it scales the whole lot like you'd scale a picture?? Help!
You might want to take a look into the viewbox. There's a really good demonstration here[^].
Forgive your enemies - it messes with their heads
My blog | My articles | MoXAML PowerToys | Mole 2010 - debugging made easier - my favourite utility
-
Hi everyone, I'm very new to silverlight, and trying to build a custom control which is made up of a series of paths/shapes which are of varying sizes. Is there some sort of container that exists which you can put a series of paths/shapes in, and when stretched it scales the whole lot like you'd scale a picture?? My problem is that whenever the control is resized, (e.g. while building main.xaml) my elements all scale by different amounts, because their margins are not scaled. e.g. Say the control (200x100) consists of A Grid (1x1) containing: --A Large Rectangle 200 x 100 [size of entire control, margins 0] --A Small Square 50x50 in the centre of the grid, [so margins are 75 L&R, 25 top&Bottom] When the control is squashed to e.g. 100x50, the margins for the small square are bigger than the entire control (75L+75R = 150), so the square vanishes. Conversely, when the control is doubled in width to 400 pixels, the small square grows not by 2x, but by 5x (from 50pixels to 250 pixels), because the margins are still 150pixels total. I need these margins to scale, so when the control is half the size, so are the margins and visa versa.... Or at least something that emulates that. I've tried trying to make the grid have a row/column for everything that needs laying out and using the 'star' system, but some of these controls will be made up of 20 or so different paths/shapes of different sizes and locations and it's beyond impractical to implement (also buggy :S ). Surely there's some sort of container that exists which you can just put paths/shapes in, and when stretched it scales the whole lot like you'd scale a picture?? Help!
You are correct. The grid does not scale fixed margins, which makes complete sense. Using the star (*) ratios on columns and rows *does* work, but there are a few minor gotchas. As Pete mentioned, the ViewBox will automatically scale when you resize the control, but sadly, you are going to find out that it doesn't really scale in the way that you would probably expect :). The ViewBox scales *EVERYTHING*... elements, locations, fonts, etc. When you resize your control, do you really want your 1 pixel thick lines to suddenly become 5 pixels thick? If you do, then yeah, the ViewBox is the ticket. If you don't, then you need to use the Grid :). I've run into situations where I wanted to scale certain portions of the control only... take for example if you were drawing a bicycle wheel. Two circles plus a bunch of 1 pixel thick spokes for arguments sake. You'd probably want to scale the size of the two circles, but you probably would NOT want to scale the size of the spokes, you'd probably want to keep them 1 pixel thick. If you use a ViewBox in that case, its a *MAJOR* PITA.
-
You are correct. The grid does not scale fixed margins, which makes complete sense. Using the star (*) ratios on columns and rows *does* work, but there are a few minor gotchas. As Pete mentioned, the ViewBox will automatically scale when you resize the control, but sadly, you are going to find out that it doesn't really scale in the way that you would probably expect :). The ViewBox scales *EVERYTHING*... elements, locations, fonts, etc. When you resize your control, do you really want your 1 pixel thick lines to suddenly become 5 pixels thick? If you do, then yeah, the ViewBox is the ticket. If you don't, then you need to use the Grid :). I've run into situations where I wanted to scale certain portions of the control only... take for example if you were drawing a bicycle wheel. Two circles plus a bunch of 1 pixel thick spokes for arguments sake. You'd probably want to scale the size of the two circles, but you probably would NOT want to scale the size of the spokes, you'd probably want to keep them 1 pixel thick. If you use a ViewBox in that case, its a *MAJOR* PITA.
Thanks so much! I had thought of the viewbox earlier but it only accepts one item. Your reply helped me realise that that one item could, of course, be a 1x1 grid holding all of the elements... Just for my learning's sake, if you did want to scale certain portions of the control only (e.g with your bike-wheel example) do you end up having to write your own container control?
-
Thanks so much! I had thought of the viewbox earlier but it only accepts one item. Your reply helped me realise that that one item could, of course, be a 1x1 grid holding all of the elements... Just for my learning's sake, if you did want to scale certain portions of the control only (e.g with your bike-wheel example) do you end up having to write your own container control?
First off, let me correct you on one thing that will open up your world :)... there is no rule that says you can't have multiple containers in one window on top of each other. I.e. a window doesn't necessarily have to be: it could also be: Not saying the 2nd option is always a good idea because it could be very difficult if not impossible to sync up the two containers if they are different depending on your content. Anyways, in regards to the bicycle wheel, I used that example because I actually had to do a control kind of similiar to that. I wanted to scale the size of the two circles and the *length* of the spokes, but I wanted the stroke thickness of the two circles and the spokes to remain consistent at one pixel. I did in fact end up using a ViewBox for that, but to keep the lines a consistent stroke thickness, I defined a DependencyProperty of type double that was updated with the inverse scaling ratio as the control was resized and bound it to everything I wanted to keep consistent. So the original stroke thickness was defined as 1.0, and if the user scaled to 2x the original size for example, the stroke thickness would be updated to 0.5 to keep the lines at 1 pixel thickness. If they scaled to 50%, the stroke thickness would be updated to 2.0. You really have to play with your particular content to see how it scales in the ViewBox by default. Its sometimes kind of wacky and you have to do wacky stuff to compensate.
-
First off, let me correct you on one thing that will open up your world :)... there is no rule that says you can't have multiple containers in one window on top of each other. I.e. a window doesn't necessarily have to be: it could also be: Not saying the 2nd option is always a good idea because it could be very difficult if not impossible to sync up the two containers if they are different depending on your content. Anyways, in regards to the bicycle wheel, I used that example because I actually had to do a control kind of similiar to that. I wanted to scale the size of the two circles and the *length* of the spokes, but I wanted the stroke thickness of the two circles and the spokes to remain consistent at one pixel. I did in fact end up using a ViewBox for that, but to keep the lines a consistent stroke thickness, I defined a DependencyProperty of type double that was updated with the inverse scaling ratio as the control was resized and bound it to everything I wanted to keep consistent. So the original stroke thickness was defined as 1.0, and if the user scaled to 2x the original size for example, the stroke thickness would be updated to 0.5 to keep the lines at 1 pixel thickness. If they scaled to 50%, the stroke thickness would be updated to 2.0. You really have to play with your particular content to see how it scales in the ViewBox by default. Its sometimes kind of wacky and you have to do wacky stuff to compensate.