单击文本框时为网格宽度和高度设置动画

Question

以下代码在单击myTextBox 时成功更改Grid 的宽度和高度。我想做的是在单击 TextBox 时为过渡设置动画。

当myTextBox 被单击/聚焦时，如何为以下过渡设置动画？

   <Grid HorizontalAlignment="Center" Margin="0,-180,0,0">
        <Grid.Style>
            <Style TargetType="{x:Type Grid}">
                <Setter Property="Background" Value="White"/>
                <Setter Property="Width" Value="350"/>
                <Setter Property="Height" Value="150"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=myTextBox, Path=IsFocused}" Value="True">
                        <Setter Property="Background" Value="#FFF7F7F7" />
                        <Setter Property="Width" Value="320" />
                        <Setter Property="Height" Value="120" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
    </Grid>

Answer 1

您可以在TextBox.Triggers 下放置一个Storyboards，它应该在GotFocus/LostFocus 时运行：

<!-- Your grid, width and height of which should be animated -->
<Grid x:Name="myGrid" HorizontalAlignment="Center" >
    <Grid.Style>
        <Style TargetType="{x:Type Grid}">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Width" Value="350"/>
            <Setter Property="Height" Value="150"/>
        </Style>
    </Grid.Style>
    <!-- Your textbox (inside grid), that should trigger animation when Got/Lost focus -->
    <TextBox x:Name="myTextBox">
        <TextBox.Triggers>
            <!-- When TextBox got focus -->
            <EventTrigger RoutedEvent="TextBox.GotFocus">
                <BeginStoryboard>
                    <Storyboard>
                        <!-- Animating width -->
                        <DoubleAnimation Storyboard.TargetName="myGrid"
                                         Storyboard.TargetProperty="(Grid.Width)"
                                         From="350" To="320" Duration="0:0:0.1">
                        </DoubleAnimation>
                        <!-- Animating height -->
                        <DoubleAnimation Storyboard.TargetName="myGrid"
                                         Storyboard.TargetProperty="(Grid.Height)"
                                         From="150" To="120" Duration="0:0:0.1">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <!-- When TextBox lost focus -->
            <EventTrigger RoutedEvent="TextBox.LostFocus">
                <BeginStoryboard>
                    <Storyboard>
                        <!-- Animating width -->
                        <DoubleAnimation Storyboard.TargetName="myGrid"
                                         Storyboard.TargetProperty="(Grid.Width)"
                                         From="320" To="350" Duration="0:0:0.1">
                        </DoubleAnimation>
                        <!-- Animating height -->
                        <DoubleAnimation Storyboard.TargetName="myGrid"
                                         Storyboard.TargetProperty="(Grid.Height)"
                                         From="120" To="150" Duration="0:0:0.1">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBox.Triggers>
    </TextBox>
</Grid>

TextBox 可能不在 Grid 里面，你的动画，我放里面只是例子。

经过测试的示例在我身上运行良好。