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

Question

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

当 myTextBox 为 clicked/InFocused 时，如何设置以下过渡动画？

   <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下面放一个Storyboard，当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，你做动画，我放里面只是举例。

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

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

Animate Grid Width and Height when a TextBox is Clicked

xaml