当用户在TextBox中按Enter键时如何开始动画

时间:2016-08-26 14:35:37

标签: wpf animation mvvm f#

我想在TextBox中按“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

它有效,但我想找到一种更好的方法,而不将控制作为参数

1 个答案:

答案 0 :(得分:4)

  

它有效,但我想在不将控制权作为参数的情况下找到更好的方法

鉴于您正在开始制作动画,这是&#34;纯视图&#34;相关代码。

我实际上会将它从ViewModel移到View中。

我不会使用命令,而是在TextBox上订阅PreviewTextInput事件,并处理在View本身后面的代码中启动动画。