Home > Blockchain >  WPF Countdown text storyboard
WPF Countdown text storyboard

Time:07-24

Is it possible to have a Storyboard in Button's style that would show a text countdown as Button content? I.e. button initially appears with content = "OK (20)". And then automatically countdown starts, changing content to "OK (19)", "OK (18)", ..., "OK (0)", without any code in the ViewModel?

CodePudding user response:

With property in VM you can do it more easy and properly.

Without changing VM you can animate text but need to think how to handle event when storyboard will be completed.

<Button Name="myAnimatedButton" Margin="200"
      FontSize="16pt" FontFamily="Verdana">Some Text
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <StringAnimationUsingKeyFrames 
                Storyboard.TargetName="myAnimatedButton" Storyboard.TargetProperty="(Button.Content)"
                Duration="0:0:20" FillBehavior="HoldEnd">
               
                <DiscreteStringKeyFrame Value="OK (20)" KeyTime="0:0:0" />
                <DiscreteStringKeyFrame Value="OK (19)" KeyTime="0:0:1" />
                <DiscreteStringKeyFrame Value="OK (18)" KeyTime="0:0:2" />
                <DiscreteStringKeyFrame Value="OK (17)" KeyTime="0:0:3" />
                <DiscreteStringKeyFrame Value="OK (16)" KeyTime="0:0:4" />
                <DiscreteStringKeyFrame Value="OK (15)" KeyTime="0:0:5" />
                <DiscreteStringKeyFrame Value="OK (14)" KeyTime="0:0:6" />
                <DiscreteStringKeyFrame Value="OK (13)" KeyTime="0:0:7" />
                <DiscreteStringKeyFrame Value="OK (12)" KeyTime="0:0:8" />
                <DiscreteStringKeyFrame Value="OK (11)" KeyTime="0:0:9" />
                <DiscreteStringKeyFrame Value="OK (10)" KeyTime="0:0:10" />
                <DiscreteStringKeyFrame Value="OK (09)" KeyTime="0:0:11" />
                <DiscreteStringKeyFrame Value="OK (08)" KeyTime="0:0:12" />
                <DiscreteStringKeyFrame Value="OK (07)" KeyTime="0:0:13" />
                <DiscreteStringKeyFrame Value="OK (06)" KeyTime="0:0:14" />
                <DiscreteStringKeyFrame Value="OK (05)" KeyTime="0:0:15" />
                <DiscreteStringKeyFrame Value="OK (04)" KeyTime="0:0:16" />
                <DiscreteStringKeyFrame Value="OK (03)" KeyTime="0:0:17" />
                <DiscreteStringKeyFrame Value="OK (02)" KeyTime="0:0:18" />
                <DiscreteStringKeyFrame Value="OK (01)" KeyTime="0:0:19" />
                <DiscreteStringKeyFrame Value="OK (0)" KeyTime="0:0:20" />
              </StringAnimationUsingKeyFrames>              
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger> 
      </Button.Triggers>
    </Button>
  • Related