scale aware stackpanel RRS feed

  • Question

  • I need the stackpanel to be able to rearrange its content when I apply scaling transform to one of them. My current layout has a stackpanel with some buttons with a template that makes them bigger on mouseover (using VSM). However they obstruct each other when bigger which produces a very nasty effect.

    It looks like this:

    [ ]  [ [   [ ]  [ ]

    How do I go around making the stackpanel rearrange them whenever the scale changes? I thought this would be easy but unfortunatelly DoubleAnimations aren't FrameworkElements so I can't even get them in OnApplyTemplate() and they can't bind to anything apart from StaticResource.

    Sunday, February 14, 2010 5:32 AM

All replies

  • Dear Siodmy,

    A ScaleTransform will scale the element, but will not update the width/height the element needs to be rendered on screen (that's why StackPanel - and neither wrappanel - will update its distribution).

    You could use LayoutTransformer (see November 2009 Release Toolkit), or a ViewBox control for any of your StackPanel items.

    ViewBox is a control that has the ability to Stretch its content (stretch can be set to None, Uniform, UniformToFill, and Fill). You just need to assign a Width and Height.

    Just as a simple example, on the MouseOver Handler, you could use:

    this.myViewBoxElement.Width *=1.2; --> which will scale your element's width at a 120%

    And then, on the MouseLeave Handler:

    this.myViewBoxElement.Width /= 1.2; --> which will scale your element at its original size

    (you'll just need to keep a control of which control has been rescaled - say a flag - and scale it or not depending on it).


    Hope this helps!


    If this post helped you, please mark it as correct.

    Monday, February 15, 2010 2:58 AM
  • Wouldn't it have the same effect as if I just changed the width of the actual button without wrapping it around ViewBox? I wanted to do it only in XAML (button's template using VSM) to minimize the amount of code (that's my current target - see how much I can do without code behind, splitting UI related stuff from main logic).

    I could just use a double animation which increases the width and height of the button (using By="something" - a rather nasty compromise) but changing width and height doesn't have an effect on the button's content (which is text so it needs scaling transform).

     The only thing that would suit me I know of is creating a custom panel but if there's a way to do it faster then I would like to know so that in the future I don't spend 10x more time on a project than I should.

    Monday, February 15, 2010 8:47 AM
  • Dear Siodmy,

    Of course, you can animate Width and Height of your element to make it larger, and the panel should render it accordingly.

    But the element content (say a text, or whatever) will not scale.

    That's why I suggested using a ViewBox with the Stretch parameter set to "Uniform", "UniformToFill", or "Fill" (as desired). Animating the ViewBox width and height will make all of its content Scale accordingly to the Width and Height you're assigning it.

    Launch a Storyboard that affects the ViewBox's width and height, and that would be it!

    Hope it helps!


    If this post helped you, please mark it as correct.

    Monday, February 15, 2010 9:42 AM
  • Apparently I don't have ViewBox, is it the one in Silverlight Toolkit preview version?

    Monday, February 15, 2010 1:53 PM
  • Dear Siodmy,

    Download and install the lates Silverlight Toolkit Release (November 2009).

    ViewBox is abailable in Toolkit since march or april 2009.

    Monday, February 15, 2010 4:33 PM
  • Does ViewBox supress mouse input? I made ViewBox the LayoutRoot in my button's template and since then those buttons don't receive mouse input (so I can't animate them with VSM).

    It turns out this can't be done as efficiently as I suspected.

    Tuesday, February 16, 2010 1:48 PM
  • Dear Siodmy,

    May you paste your XAML and C# code ( or upload your project somewhere ) to check what's wrong?


    Tuesday, February 16, 2010 1:52 PM
  • Thank you for such support.

    You can view the application here: http://student.math.uni.opole.pl/~id08024/test/

    As you can see the buttons on top are normal buttons with style applied to them. They animate when you mouseover. On the other hand the ones in the bottom don't animate and they are templated controls (local:Navigator) with no actual code behind, only constructor + test dependency property and their style in Generic.xaml is the same thing but with the main grid inside a ViewBox (+ a test useage of TemplateBinding to display text from my test DependencyProperty).

    the code is here: http://student.math.uni.opole.pl/~id08024/test/QCReader.zip

    Tuesday, February 16, 2010 6:00 PM