Is it possible to ScaleTransform everything on a Canvas/Grid except for 1 Control?

Question

Given the following canvas:

<Canvas>
    <Canvas.LayoutTransform>
        <ScaleTransform ScaleX="1" ScaleY="1" CenterX=".5" CenterY=".5" />
    </Canvas.LayoutTransform>
    <Button x:Name="scaleButton" Content="Scale Me" Canvas.Top="10" Canvas.Left="10" />
    <Button x:Name="dontScaleButton" Content="DON'T Scale Me" Canvas.Top="10" Canvas.Left="50" />
</Canvas>

Is it possible to scale 1 button, but not the other when ScaleX and ScaleY changes?

Answer 1

Not in XAML. You can do this in code by building the reverse transform and applying it to the object you don't want transformed.

If you want to go fancy, you can build a dependency property that you can attach in XAML to any object you don't want to be transformed by any parent transforms. This dependency property will take the transform of the parent, build a reverse transform and apply it to the object it's attached to.

Answer 2

@Franci Penov

Not in XAML. You can do this in code by building the reverse transform and applying it to the object you don't want transformed.

By "reverse transform", do you mean that if the Canvas.LayoutTransform.ScaleX increases by x, then Button.LayoutTransform.ScaleX would need to decrease by y? This is what I was thinking about doing, but was really hoping WPF might have something built-in that would help.

Answer 3

You could also restructure the elements so that the elements you don't want to scale with the Canvas are not actually children of that Canvas.

<Canvas>
    <Canvas>
        <Canvas.LayoutTransform>
            <ScaleTransform ScaleX="1" ScaleY="1" CenterX=".5" CenterY=".5" />
        </Canvas.LayoutTransform>
        <Button x:Name="scaleButton" Content="Scale Me" Canvas.Top="10" Canvas.Left="10" />
    </Canvas>
    <Button x:Name="dontScaleButton" Content="DON'T Scale Me" Canvas.Top="10" Canvas.Left="50" />
</Canvas>

Answer 4

@Joel B Fant

You could also restructure the elements so that the elements you don't want to scale with the Canvas are not actually children of that Canvas.

I don't believe that will work, because I need the button to stay in the same position on the Canvas that is scaling.

Answer 5

I would go the custom Attached property route! should be pretty simple to implement too!

Answer 6

Hello,,

i was trying to perform a scale transform on a grid, the grid is getting scaled but the elements in it( the text inside the text box and the content in the button is not, can anyone throw some light on this)

            </Grid.RenderTransform>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>                 
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0"  Text="This is a pop up">
                                </TextBlock>
            <Button Grid.Row="1" Content="close" MouseLeftButtonDown="Button_MouseLeftButtonDown"/>
        </Grid>