如何使用动画来改变网格的大小？

Question

我希望根据我自定义类的属性，对整个网格进行扩大（即ScaleTransform）。

我的网格

<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>

这是我使用的样式。问题是，根本没有缩放效果。我使用了另一个动画（改变背景颜色）来测试代码，那个动画可以正常工作。

<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>

你能给我一些关于如何实现正确的缩放行为的提示吗？

- nabulke

Answer 1

尝试将此内容附加到您的 ViewBox。

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

尝试将动画更改为以下内容，将第一个ViewBox命名为viewbox。

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

抱歉，没看到您正在使用LayoutTransform。您应该改用RenderTransform，尝试将Setter Property以及Storyboard.TargetProperty更改为RenderTransform，它应该可以正常工作。

<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>

如果你想保留LayoutTransform，你可以尝试将你的Grid更改为Canvas，这也可能起效。

- Justin XL

---

DoubleAnimationUsingKeyFrames 提供了一个错误：TargetName 属性不能在样式设置器上设置。 - nabulke

将你的示例代码应用于一个周围的Border元素而不是视图框之后，它成功了！我遇到的最后一个问题是放大的内容被渲染在周围的可视元素后面。所以我需要找出如何改变 Z-顺序。感谢你的帮助。 - nabulke

Answer 2

你的Grid定义了你的ViewBoxes允许占用的空间，因此你应该动画化你的Grid属性，而不是你的ViewBoxes。

你可以动画化它的高度/宽度，或者对其应用一个ScaleTransform。

另外，LayoutTransform在渲染之前被应用，而RenderTransform在渲染之后被应用。你可能想尝试使用一个RenderTransform而不是一个布局变换来扩展你现有代码中的ViewBoxes，看看是否能够使它们扩展到允许的区域之外。

- Rachel

---

我起初尝试对网格进行动画处理，但它并没有成功（没有缩放）。我将尝试您的建议，即使用RenderTransform来结合对网格进行动画处理。 - nabulke

Answer 3

我以类似的方式完成了与您类似的事情（在鼠标悬停事件中在代码后台完成）：

DoubleAnimation animation = new DoubleAnimation();

animation.From = MenuBorder.Width;
animation.To = 170;
animation.Duration = new Duration(TimeSpan.FromMilliseconds(350));
MenuBorder.BeginAnimation(WidthProperty, animation);

这里我有一个带有内边框的网格。网格的宽度设置为自动。因此看起来像是我正在动画化的是网格，但实际上我正在动画化网格内部的边框。

- 7heViking

Answer 4

我认为你想要实现的是改变ViewBox的宽度/高度，然后内容会相应地进行缩放。

- GameAlchemist

---

嗯，可能是视图框的内容自动拉伸到视图框的宽度/高度，所以缩放变换根本不起作用？ - nabulke

是的，这就是我建议的那种东西。另一个想法是将ViewBox放在边框中，并缩放LayoutTransform，而ViewBoxes会拉伸以填充边框。这样可以避免您改变ViewBoxes的宽度和高度。 - GameAlchemist

Answer 5

你应该为动画添加类型：

<DoubleAnimation Storyboard.TargetProperty="(Grid.LayoutTransform).(ScaleTransform.ScaleX)" To="2" Duration="0:0:0.5" />

我会在控件上显式地设置ScaleX的值：

<ScaleTransform ScaleX="1" />

- chaosr