Question

I would like to enlarge (i.e. ScaleTransform) a whole grid depending on a property of my custom class.

My Grid

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Viewbox Style="{StaticResource InvViewBoxStyle}" Grid.Column="1" Grid.Row="0">
        <TextBlock Style="{StaticResource InvBoxTextStyle}" Text="{Binding BoxId}" />
    </Viewbox>
    <Viewbox Style="{StaticResource InvViewBoxStyle}" Grid.Column="1" Grid.Row="1" >
        <TextBlock Style="{StaticResource InvBoxTextStyle}" Text="{Binding ProdNr}" />
    </Viewbox>
</Grid>

This is the style I used. The problem is, there is no scaling to be seen at all. I tested the code with another animation (changing the background color) which worked fine.

<Style x:Key="InvViewBoxStyle" TargetType="Viewbox">
    <Setter Property="LayoutTransform">
        <Setter.Value>
            <ScaleTransform />
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsReadyToUnload}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleX" To="2" Duration="0:0:0.5" />
                        <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.ScaleY" To="2" Duration="0:0:0.5" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>
</Style>

Could you give me any hints on how to achieve the correct scaling behavior?

Answer 1

Try attaching this to your ViewBox.

<Viewbox x:Name="viewbox" RenderTransformOrigin="0.5,0.5" ...>
    <Viewbox.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
        </TransformGroup>
    </Viewbox.RenderTransform> 

Also try changing your animation to this, name your first ViewBox viewbox.

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="viewbox">
    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="2"/>
</DoubleAnimationUsingKeyFrames>

Sorry, didn’t see that you are using LayoutTransform. You should use RenderTransform instead, try changing the Setter Property as well as the Storyboard.TargetProperty to RenderTransform and it should work.

<Style x:Key="InvViewBoxStyle" TargetType="Viewbox">    
    <Setter Property="RenderTransform">    
        <Setter.Value>    
            <ScaleTransform />    
        </Setter.Value>    
    </Setter>    
    <Style.Triggers>    
        <DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}" Value="True">    
            <DataTrigger.EnterActions>    
                <BeginStoryboard>    
                    <Storyboard>    
                        <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />    
                        <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)" To="2" Duration="0:0:0.5" />    
                    </Storyboard>    
                </BeginStoryboard>    
            </DataTrigger.EnterActions>    
        </DataTrigger>    
    </Style.Triggers>    
</Style>

Also if you want to keep the LayoutTransform you can try changing your Grid to a Canvas, that might work too.