Блог

Следующий код успешно изменяет ширину и высоту a Grid при myTextBox нажатии. Что я хотел бы сделать, так это анимировать анимацию перехода при нажатии на текстовое поле.

Как я могу анимировать следующий переход, когда myTextBox он нажат/сфокусирован?

 lt;Grid HorizontalAlignment="Center" Margin="0,-180,0,0"gt;  lt;Grid.Stylegt;  lt;Style TargetType="{x:Type Grid}"gt;  lt;Setter Property="Background" Value="White"/gt;  lt;Setter Property="Width" Value="350"/gt;  lt;Setter Property="Height" Value="150"/gt;  lt;Style.Triggersgt;  lt;DataTrigger Binding="{Binding ElementName=myTextBox, Path=IsFocused}" Value="True"gt;  lt;Setter Property="Background" Value="#FFF7F7F7" /gt;  lt;Setter Property="Width" Value="320" /gt;  lt;Setter Property="Height" Value="120" /gt;  lt;/DataTriggergt;  lt;/Style.Triggersgt;  lt;/Stylegt;  lt;/Grid.Stylegt;  lt;/Gridgt;  

Вы можете поставить Storyboard букву s под TextBox.Triggers , которая должна работать, когда она GotFocus / LostFocus :

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

TextBox может быть , внутри Grid нет того, что вы оживляете, я поместил внутрь просто для примера.

Пример проверен и отлично работает на мне.