Animate Grid Width and Height when a TextBox is Clicked-CodePudding

The following code successfully changes the width and height of a Grid when myTextBox is clicked. What I would like to be able to do is animate animate the transition when the TextBox is clicked.

How can I animate the following transition when myTextBox is 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>

CodePudding user response：

You can put a Storyboards under TextBox.Triggers, that should run when it 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 may not be inside Grid, that you animate, I put inside just for example.

Example tested and works fine on me.