How to start animation when user pressed Enter in TextBox

Question

I want to start animation, when pressed "Enter" in TextBox. I haven't found the right event, so I have done the following

XAML

    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <Window.Resources>
        <Storyboard x:Key="testAnimation">
            <BooleanAnimationUsingKeyFrames
                                    FillBehavior="HoldEnd"
                                    Storyboard.TargetName="txtB"
                                    Storyboard.TargetProperty="IsEnabled">
                <DiscreteBooleanKeyFrame KeyTime="00:00:00" 
                                                     Value="False" />
            </BooleanAnimationUsingKeyFrames>
            <DoubleAnimation 
                                    Storyboard.TargetName="rtbl"
                                    Storyboard.TargetProperty="Opacity" 
                                    From="0"
                                    To="1"  
                                    Duration="0:0:2"
                                    AutoReverse="True">
            </DoubleAnimation>
            <BooleanAnimationUsingKeyFrames
                                    FillBehavior="HoldEnd"
                                    Storyboard.TargetName="txtB"
                                    Storyboard.TargetProperty="IsEnabled"
                                    BeginTime="0:0:4"
                                    >
                <DiscreteBooleanKeyFrame KeyTime="00:00:00" 
                                                     Value="True" />
            </BooleanAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Name="rtbl" Opacity="0" HorizontalAlignment="Center" Margin="10" FontSize="30" Text="{Binding Text}"></TextBlock>
        <TextBox Grid.Row="1" Name="txtB"  IsEnabled="True"  HorizontalAlignment="Center" 
                 Margin="10" FontSize="30" Text="{Binding Input, UpdateSourceTrigger=PropertyChanged}" MinWidth="150"
                 >
            <TextBox.InputBindings>
                <KeyBinding Command="{Binding NextCommand}" Key="Enter"
                    CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}">
                </KeyBinding>
            </TextBox.InputBindings>
        </TextBox>
    </Grid>
</Window>

MainViewModel

type MainViewModel() as self = 
    inherit ViewModelBase()  

    let rand = Random()

    let text = self.Factory.Backing(<@ self.Text @>, rand.Next())
    let input = self.Factory.Backing(<@ self.Input @>, "")

    let goNext (param:obj) =
        text.Value <- rand.Next()
        input.Value <- ""
        let control = param :?> Window
        let animation = control.FindResource("testAnimation") :?> Storyboard
        animation.Begin()

    let nextcommand = self.Factory.CommandSyncParam(goNext)

    member self.NextCommand = nextcommand
    member self.Text with get() = text.Value
    member self.Input with get() = input.Value and set v = input.Value <- v

It works, but I'd like to find a better way without passing control as a parameter

Answer 1

It works, but I'd like to find a better way without passing control as a parameter

Given that you're starting an animation, this is "pure view" related code.

I would actually move it out of your ViewModel and into your View.

Instead of using a command, I would subscribe to the PreviewTextInput event on the TextBox, and handle starting the animation in the code behind of the View itself.