IT22-OOP (Object Oriented Programming)

College of Computer Studies

I. INTRODUCTION
N/A

II. OBJECTIVES
a) Explain Basic Animation in C#.
Module 13 b) Provide example of Basic Animation
applied in a Windows C# Application.
c) The student should be creating their own
Basic Animation in C# Visual C# code that uses Basic Animation
after reading the module.
Windows Forms

IV. LESSON PROPER

A. C# Basic Animation
There are a lot of techniques for bringing animation in your Windows application - simple and complex
techniques. Here in our example, you will see how to Animate panels in terms of its position and size.

Example:

btnAnimation1
btnAnimation2
1

pnlToAnimate

btnAnimation3
1
btnAnimation4
1

Events:

1. Form1_Load – Initializes variables and disabled the Animation2 and Animation4 buttons
2. btnAnimation1_Click – Expands the Panel.
3. btnAnimation2_Click – Shrinks the Panel.

Page 1 of 9
 IT22-OOP (Object Oriented Programming)
College of Computer Studies

4. btnAnimation3_Click – Moves the Panel to the right.

5. btnAnimation4_Click – Moves the Panel back to left.

Source code:
using System;
using System.Drawing;
using System.Windows.Forms;

namespace BasicAnimationDemo
{
public partial class Form1 : Form
{
private int PANEL_WIDTH, OffSet = 165;
private Point InitialLocation;
public Form1()
{
InitializeComponent();
}

private void Form1_Load(object sender, EventArgs e)

{
PANEL_WIDTH = pnlToAnimate.Width;
InitialLocation = pnlToAnimate.Location;
SetPanelInitialState();
}

private void btnAnimation1_Click(object sender, EventArgs e)

{
if (pnlToAnimate.Width > PANEL_WIDTH) return;
while (pnlToAnimate.Width <= PANEL_WIDTH)
{
pnlToAnimate.Width += 5;
Application.DoEvents();
}
btnAnimation2.Enabled = true;
btnAnimation1.Enabled = false;
}

private void btnAnimation2_Click(object sender, EventArgs e)

Page 2 of 9
 IT22-OOP (Object Oriented Programming)
College of Computer Studies

{
if (pnlToAnimate.Width < 0) return;
while (pnlToAnimate.Width > 0)
{
pnlToAnimate.Width -= 5;
Application.DoEvents();
}

btnAnimation1.Enabled = true;
btnAnimation2.Enabled = false;
}
private void SetPanelInitialState()
{
pnlToAnimate.Width = 0;
btnAnimation2.Enabled = false;
btnAnimation4.Enabled = false;
}

private void btnAnimation3_Click(object sender, EventArgs e)

{
if (InitialLocation.X == pnlToAnimate.Location.X + OffSet) return;
while (pnlToAnimate.Location.X <= InitialLocation.X + OffSet)
{
pnlToAnimate.Location = new Point(pnlToAnimate.Location.X + 1,
pnlToAnimate.Location.Y);
Application.DoEvents();
}
btnAnimation3.Enabled = false;
btnAnimation4.Enabled = true;
}
private void btnAnimation4_Click(object sender, EventArgs e)
{
if (InitialLocation.X == pnlToAnimate.Location.X) return;
while (pnlToAnimate.Location.X >= InitialLocation.X)
{
pnlToAnimate.Location = new Point(pnlToAnimate.Location.X - 1,
pnlToAnimate.Location.Y);
Application.DoEvents();
}
btnAnimation4.Enabled = false;
btnAnimation3.Enabled = true;
}

}
}

Explanation:

The above example does the animation using “Application.DoEvents();” command and a loop.
Animation 1 expands the panel by adding 5 to the width of the panel, while the width is not yet greater
than the original size. Animation 2 does the opposite of Animation 1, when clicked, it subtracts 5 to the
panel and stops when the panel’s width becomes less than 0.

Page 3 of 9
 IT22-OOP (Object Oriented Programming)
College of Computer Studies

Animation 3 and 4 moves the panel from/to left and right, respectively, using the Offset variable and the
panel’s Location class.

Project: https://drive.google.com/file/d/11Tmdh4cFkM_wxPizTcp6TLtchBAFL1Qb/view?usp=sharing

V. PRACTICE EXERCISES/ACTIVITIES
Create a Windows Forms app that looks like the following:

Page 4 of 9
 IT22-OOP (Object Oriented Programming)
College of Computer Studies

Requirements:

1. When either username or password gains or loses “focus”, there should be an indicator below them
that animates (expands/shrinks):

Page 5 of 9
 IT22-OOP (Object Oriented Programming)
College of Computer Studies

2. When the user logged in using the credentials username=”admin” and password=”admin”, the login
fields should be replaced by another page/panel:

Page 6 of 9
 IT22-OOP (Object Oriented Programming)
College of Computer Studies

This is literally loading until the blue bar reaches the 100% width. Then prompt the following:

3. Otherwise, if the credentials entered are not correct, the app should display an error:

Page 7 of 9
 IT22-OOP (Object Oriented Programming)
College of Computer Studies

If you want to see it in actual app (desktop only), click here.

NOTE: Your computer might treat the app as containing virus but it’s not, the way to continue is to
“Keep” the download… (Found when you click “more info”) – this might differ from different
computers/laptops.

Video Demo: https://drive.google.com/file/d/1iCUq2jW6AZyvt7x06D3KMV40g302BBat/view?

usp=sharing

Points Rubric (include this on the docx):

Requirements Not Satisfied Partial Good Satisfied

Design is the same or more creative than 0 5 10 15
the given
The required functionality is fulfilled 0 10 20 30
Total:

VI. ADDITIONAL RESOURCES

Page 8 of 9
 IT22-OOP (Object Oriented Programming)
College of Computer Studies

C# Animation using clock: https://www.youtube.com/watch?v=5FArRrpcyLo

VII. ASSESSMENT
N/A

VIII. REFERENCES
Fundamentals of Computer Programming with C# - (The Bulgarian C# Programming Book), Svetlin
Nakov, et al.

https://www.geeksforgeeks.org/

https://www.c-sharpcorner.com/

https://www.w3schools.com/cs/

https://www.tutorialspoint.com/csharp/

https://www.guru99.com/

https://www.programiz.com/

https://www.pluralsight.com/

Page 9 of 9