Online Advertising, Web Development & General Rantings

← iPhone – Graphics and TidBits Project SilverLight 1.1 – Prototype – Part 5 →

silverlight tip: how to resize all objects in a canvas when the canvas resizes

July 9, 2007 · 5 Comments

subheading 3

Using a ScaleTransform on the canvas will scale all of it’s children by the same proportion!

Categories: silverlight code tips

5 responses so far ↓

  • Michael Nowak // June 23, 2008 at 10:53 pm | Reply

    HshbvB Blogs rating, add your blog to be rated for free:
    http://blogsrate.net

  • Jed Hunsaker // July 30, 2008 at 7:53 pm | Reply

    Yeah, it gets a bit tricky doing this dynamically though. For example, I have a user control that updates the canvas scale when the user control is resized:

    public partial class ScalableControl : UserControl
    {
    private bool constrainProportions;
    private double originalWidth;
    private double originalHeight;

    public ScalableControl()
    {
    InitializeComponent();
    constrainProportions = true;
    originalWidth = 500;
    originalHeight = 200;
    }

    private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)
    {
    double newScaleX = e.NewSize.Width / originalWidth;
    double newScaleY = e.NewSize.Height / originalHeight;
    if (constrainProportions)
    CanvasScale.ScaleX = CanvasScale.ScaleY =
    (newScaleX < newScaleY) ? newScaleX : newScaleY;
    else
    {
    CanvasScale.ScaleX = newScaleX;
    CanvasScale.ScaleY = newScaleY;
    }
    }
    }

  • DangerousDave // May 21, 2009 at 6:47 am | Reply

    Dear Jed Hunsaker,
    Can you update the inline code for this resize code? When are you calling the resizing method?
    Give few more details.

  • Jed Hunsaker // June 20, 2009 at 8:27 pm | Reply

    Yeah, so you just create a new UserControl. In the example above, I’ve named it “ScalableControl”. In the XAML, in the tag, I’ve specified SizeChanged=”UserControl_SizeChanged”. That’s where I’m handling it.

    The only change I would make to “update” the above code is to create a loaded event to write the originalWidth and originalHeight instead. That way, it’s more dynamic.

  • Jed Hunsaker // June 30, 2009 at 6:51 pm | Reply

    You know, I’ve been having major issues with this, even after what I’ve posted. Depending on how it’s used, you can get some really crazy fly-off-the-screen effects in Blend that make resizable controls totally bogus!

    I can’t figure out a perfect solution.

Leave a Comment