Question

I’m noticing that if I use a ScaleTransform on a control is Silverlight, it shrinks the visible aspects of the control, but not the space it occupies (i.e., its bounding box).

Is there anyway to override this behavior so that the control and the bounding box both shrink when I apply a ScaleTransform? Or is there some other way to shrink a UserControl? If I just plain shrink it by adjusting Height/Width, a lot of the details disappear (they don’t anti-alias properly).

(Note: I’m observing this behavior in Expression Blend, but I assume it applies to Silverlight/WPF controls in general.)

For the sake of context, I’m trying to make an image button by placing a UserControl inside a Button. I’m transforming the UserControl to X = 0.15 & Y = 0.15. The UserControl shrinks properly, but the Button looks like it has a massive padding on it because the UserControl’s bounding box doesn’t shrink accordingly. I could apply the ScaleTransform to the whole button, but then it’s the button that has the huge bounding box, and this creates other problems.

Answer 1

You need to use a LayoutTransform and not a RenderTransform. Since it isn’t supported out of the box with Silverlight, you can get a LayoutTransformer control from the Silverlight Toolkit that will allow you to do this.

Your code would then look like so:

<Button>
    <toolkit:LayoutTransformer>
        <toolkit:LayoutTransformer.LayoutTransform>
            <ScaleTransform ScaleX=".15" ScaleY=".15"/>
        </toolkit:LayoutTransformer.LayoutTransform>
        <lcl:MyUserControl />
    </toolkit:LayoutTransformer>
</Button>