当用户在文本框中按下Enter键时如何开始动画

Question

当在文本框中按下“Enter”键时，我希望开始动画。我没有找到合适的事件，所以我已经做了以下操作：

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

这个方法可以运行，但我希望找到一种更好的方式，而不需要将控制权作为参数传递。

- FoggyFinder

Answer 1

它能够工作，但我希望找到一种更好的方法，而不需要将控制作为参数传递

考虑到您正在启动动画，这是与"纯视图"相关的代码。

实际上，我会将其移出ViewModel并放入View中。

不使用命令，而是订阅TextBox上的PreviewTextInput事件，并在View自身的代码后台处理启动动画。

- Reed Copsey

---

我很好奇，是否可以在 F# 中为自定义控件注册 RoutedEvent（类似于此处所做的操作 https://msdn.microsoft.com/en-us/library/ms752288.aspx）？这样我们就可以使用 <EventTrigger RoutedEvent="EnterKeyPressed"> 在 XAML 中订阅该事件。 - Funk

@Funk 它应该以相同的方式工作 - 不过我认为在这种情况下我不会做出那么笨重的操作。 - Reed Copsey