Need To create a delay between two effect in Wpf

Question

Hi,

I am new to WPF.I am creating a animation for sample online test result.Where i like to show No of attended question,No of correct answer as animation.I need to create small delay between AttendedQuestionEffect() and RightAnswerEffect();

CodeBehind code here

        public int TotalNoQuestion { get; set; }
        public int NoOfQuestionAttended { get; set; }
        public int NoOfRightAnswer { get; set; }

    public Window1()
    {
        InitializeComponent();

        TotalNoQuestion = 100;
        NoOfQuestionAttended = 18;
        NoOfRightAnswer = 10;

        stkpnl.Background = CreateLinearGradientBrush();

        Storyboard strBrd = new Storyboard();
        strBrd.Completed += new EventHandler(strBrd_Completed);
        DoubleAnimation myDoubleAnimation = new DoubleAnimation();
        myDoubleAnimation.From = 10;
        myDoubleAnimation.To = (TotalNoQuestion *15);
        myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(2));
        Storyboard.SetTargetName(myDoubleAnimation, stkpnl.Name);
        Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(StackPanel.HeightProperty));
        strBrd.Children.Add(myDoubleAnimation);
        strBrd.Begin(stkpnl);

    }       

    void strBrd_Completed(object sender, EventArgs e)
    {

        for (int i = 1; i < TotalNoQuestion; i++)
        {
            Border brd = new Border();
            brd.BorderBrush = Brushes.Black;
            brd.BorderThickness = new Thickness(1.0);
            TextBlock txt = new TextBlock();
            txt.Text = i.ToString();
            txt.Height = 15;
            txt.Width = 200;
            brd.Child = txt;
            txt.FontSize = 12;
            txt.Foreground = Brushes.Black;
            stkpnl.Children.Add(brd);
            txt.Background = CreateLinearGradientBrush();
            txt.Tag = i.ToString();
        }

        AttendedQuestionEffect();
        // Here i need to create delay.
        RightAnswerEffect();
    }
    void AttendedQuestionEffect()
    {
        int index = 1;
        UIElementCollection ulCollection = stkpnl.Children;
        foreach (UIElement uiElement in ulCollection)
        {
            if (index <= NoOfQuestionAttended)
            {
                Border brd = (Border)uiElement;
                TextBlock txt = (TextBlock)brd.Child;
                txt.Background = BlinkEffect(Colors.Blue, Colors.SteelBlue, 3000);
                brd.Child = txt;
            }
            index++;
        }

    }

    void RightAnswerEffect()
    {
        int index = 1;
        UIElementCollection ulCollection = stkpnl.Children;
        foreach (UIElement uiElement in ulCollection)
        {
            if (index <= NoOfRightAnswer)
            {
                Border brd = (Border)uiElement;
                TextBlock txt = (TextBlock)brd.Child;
                txt.Background = BlinkEffect(Colors.Red, Colors.Blue, 1500);
                brd.Child = txt;
            }
            index++;
        }

    }

    private LinearGradientBrush CreateLinearGradientBrush()
    {
        LinearGradientBrush brush = new LinearGradientBrush();
        brush.StartPoint = new Point(0, 0);
        brush.EndPoint = new Point(1, 1);
        brush.GradientStops.Add(new GradientStop(Colors.LightCoral, 0.1));
        brush.GradientStops.Add(new GradientStop(Colors.YellowGreen, 0.35));
        brush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.86));
        return brush;
    }

    private SolidColorBrush BlinkEffect(Color startColor, Color endColor,int time)
    {
        ColorAnimation myColorAnimation = new ColorAnimation();
        myColorAnimation.From = startColor;
        myColorAnimation.To = endColor;
        myColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(time));
        myColorAnimation.AutoReverse = true;
        myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;
        SolidColorBrush myBrush = new SolidColorBrush();
        myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);
        return myBrush;
    }







**Xaml code here..**

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border BorderBrush="Black" Grid.Column="1" BorderThickness="1" Width="200" VerticalAlignment="Bottom" HorizontalAlignment="Left">
        <StackPanel x:Name="stkpnl" Grid.Column="1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="BlueViolet" Width="200" MaxHeight="450" >
        </StackPanel>
            </Border>
    </Grid>

`

Answer 1

Your should look up storyboard animations using KeyFrames e.g. here.

In Xaml this could look like the following ... you just have to translate it to code and adjust it to your needes:

<Storyboard>
    <DoubleAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Opacity">
        <SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames BeginTime="0:0:0.5" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

This sample tfirst fades out an control and then hides it. You can ad a delay by modifying the BeginTime attribute.