Question

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.