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>

您能否就如何实现正确的缩放行为给出任何提示？

Answer 1

<击> 尝试将其附加到ViewBox。

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

同时尝试将动画更改为此动作，为您的第一个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，这也可能有用。

Answer 2

您的Grid正在定义允许ViewBox占据的空间，因此您应该为Grid的属性设置动画，而不是ViewBox。

您可以为其高度/宽度设置动画，也可以对其应用ScaleTransform。

此外，在呈现之前会应用LayoutTransform，之后会应用RenderTransform。您可能希望尝试使用RenderTransform代替现有代码的布局，以查看是否所有ViewBoxes扩展到其允许区域之外。

Answer 3

我已经用这种方式做了类似的事情（在鼠标悬停在事件后面的代码中完成）：

DoubleAnimation animation = new DoubleAnimation();

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

这里我有一个内部有边框的网格。网格设置为自动。因此看起来它是我正在制作动画的网格，但它实际上是我正在制作动画的网格中的边框。

Answer 4

您应该将Type添加到动画中：

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

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

<ScaleTransform ScaleX="1" />

Answer 5

我认为您要实现的目标是更改ViewBox的宽度/高度，然后内容将相应地缩放。

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

5 个答案: