Question

我的示例代码看起来像这样。

dist

我正在尝试在MouseEnter事件上为行高设置动画。在xaml中设置Storyboard.Target的正确语法是什么？

Answer 1

只需使用ObjectAnimationUsingKeyFrames即可试用。您应该定义更多关键帧以使动画流畅。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition x:Name="SecondRow" Height="30"/>
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0:0:2.000" Storyboard.TargetName="SecondRow" Storyboard.TargetProperty="Height">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.000">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>30</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:0.500">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>32</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1.000">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>50</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:1.500">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>60</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                            <DiscreteObjectKeyFrame KeyTime="0:0:2.000">
                                <DiscreteObjectKeyFrame.Value>
                                    <GridLength>60</GridLength>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>
    <Rectangle Grid.Row="1" Fill="LightBlue"/>
</Grid>

Answer 2

您无法使用Height为RowDefinition的{{1}}设置动画，因为该属性属于DoubleAnimation类型。

您可以按照此处的建议编写自定义动画类：https://www.codeproject.com/Articles/18379/WPF-Tutorial-Part-Writing-a-custom-animation-cla。

Animating Grid Column or Grid Row in XAML?

In WPF, has anybody animated a Grid?

如果我在第三行定义中放置一些自定义控件并使其像这样，该怎么办？我能够为这个自定义控件的高度设置动画以达到同样的效果吗？

您可以尝试这样的事情：

GridLength

Answer 3

只需使用矩形和绑定即可完成

    <Grid x:Name="Home">

        <Grid.RowDefinitions>

            <RowDefinition Height="*"/>
            <RowDefinition Height="{Binding ActualHeight, ElementName=CurrentHeight}"/>

        </Grid.RowDefinitions>

        <Grid.Resources>

            <Storyboard x:Key="Hide">
                <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="CurrentHeight" Storyboard.TargetProperty="Height" From="100" To="0"/>
            </Storyboard>

            <Storyboard x:Key="Show">
                <DoubleAnimation Duration="0:0:1" Storyboard.TargetName="CurrentHeight" Storyboard.TargetProperty="Height" From="0" To="100"/>
            </Storyboard>

        </Grid.Resources>

        <Button Click="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Center" Height="100" Width="100" Background="Blue" Content="Hide Show"/>

        <Rectangle Name="CurrentHeight" Height="100" Width="Auto" Fill="Red" Grid.Row="1"/>

    </Grid>

基本上，我们想将“网格行”的高度与“矩形高度”绑定在一起，这样我们就可以在“矩形”上使用DoubleAnimation，并且“网格高度”将随之变化。

让我们看一下C＃的背后代码

    public MainWindow()
    {
            InitializeComponent();
            Start();
    }

    public Storyboard OpenAnimation { get; set; }
    public Storyboard CloseAnimation { get; set; }

    private void Start()
    {

       CurrentHeight.Height = 0;

       OpenAnimation = Home.FindResource("Show") as Storyboard;

       CloseAnimation = Home.FindResource("Hide") as Storyboard;

    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
         if(CurrentHeight.Height == 0)
           BeginStoryboard(OpenAnimation);

          if (CurrentHeight.Height == 100)
           BeginStoryboard(CloseAnimation);

    }

因此，现在当您编辑/动画矩形时，将遵循网格的绑定高度，这样我们就可以在矩形上使用Double Animation而不会引发错误，并使动画看起来像黄油一样！

~~肖恩J B

如何为网格行高度设置动画

3 个答案: